Skip to content

Commit 1a229ab

Browse files
sanjeetkumaritoutlook-usersanjeetkumaritoutlook-user
committed
testing email service on submit of feedback form
1 parent 7ce1dbf commit 1a229ab

17 files changed

+203
-78
lines changed

‎package-lock.json

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
},
2929
"license": "MIT",
3030
"dependencies": {
31+
"@emailjs/browser": "^4.4.1",
3132
"stenciljs-components": "^1.0.7",
3233
"tinymce": "^7.6.0"
3334
}

‎src/components.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
*/
77
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
88
export namespace Components {
9+
interface AboutUs {
10+
}
911
interface AppHomePage {
1012
}
1113
interface AppProfilePage {
@@ -48,6 +50,12 @@ export interface FeedbackFormCustomEvent<T> extends CustomEvent<T> {
4850
target: HTMLFeedbackFormElement;
4951
}
5052
declare global {
53+
interface HTMLAboutUsElement extends Components.AboutUs, HTMLStencilElement {
54+
}
55+
var HTMLAboutUsElement: {
56+
prototype: HTMLAboutUsElement;
57+
new (): HTMLAboutUsElement;
58+
};
5159
interface HTMLAppHomePageElement extends Components.AppHomePage, HTMLStencilElement {
5260
}
5361
var HTMLAppHomePageElement: {
@@ -105,6 +113,7 @@ declare global {
105113
new (): HTMLWebComponentsElement;
106114
};
107115
interface HTMLElementTagNameMap {
116+
"about-us": HTMLAboutUsElement;
108117
"app-home-page": HTMLAppHomePageElement;
109118
"app-profile-page": HTMLAppProfilePageElement;
110119
"app-root": HTMLAppRootElement;
@@ -115,6 +124,8 @@ declare global {
115124
}
116125
}
117126
declare namespace LocalJSX {
127+
interface AboutUs {
128+
}
118129
interface AppHomePage {
119130
}
120131
interface AppProfilePage {
@@ -156,6 +167,7 @@ declare namespace LocalJSX {
156167
interface WebComponents {
157168
}
158169
interface IntrinsicElements {
170+
"about-us": AboutUs;
159171
"app-home-page": AppHomePage;
160172
"app-profile-page": AppProfilePage;
161173
"app-root": AppRoot;
@@ -169,6 +181,7 @@ export { LocalJSX as JSX };
169181
declare module "@stencil/core" {
170182
export namespace JSX {
171183
interface IntrinsicElements {
184+
"about-us": LocalJSX.AboutUs & JSXBase.HTMLAttributes<HTMLAboutUsElement>;
172185
"app-home-page": LocalJSX.AppHomePage & JSXBase.HTMLAttributes<HTMLAppHomePageElement>;
173186
"app-profile-page": LocalJSX.AppProfilePage & JSXBase.HTMLAttributes<HTMLAppProfilePageElement>;
174187
"app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;

‎src/components/about-us/about-us.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎src/components/about-us/about-us.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'about-us',
5+
styleUrl: 'about-us.css',
6+
shadow: true,
7+
})
8+
export class AboutUs {
9+
render() {
10+
// Dynamically resolve the path to the image file
11+
const imagePath1 = new URL('../../assets/images/app-starter1.png', import.meta.url).href;
12+
const imagePath2 = new URL('../../assets/images/app-starter2.png', import.meta.url).href;
13+
return (
14+
<div>
15+
<div>
16+
<p>by Default,Stencil Web app creates three components:app-root, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
17+
<p>To avoid conflict with npm package (stenciljs-components) which has similar naming components, renamed the component in this web app to app-home-page and app-profile-page respectively</p>
18+
<h1>Steps to create Stencil Web App</h1>
19+
<h1>Start by npm init stencil and then choose 2nd option</h1>
20+
<img
21+
src={imagePath1}
22+
style={{
23+
width: '100%',
24+
height: '250px',
25+
}}
26+
loading="lazy"
27+
/>
28+
<img
29+
src={imagePath2}
30+
style={{
31+
width: '100%',
32+
height: '250px',
33+
}}
34+
loading="lazy"
35+
/>
36+
</div>
37+
<h1>Helpful links</h1>
38+
<p><a href="https://ferolmo.com/">Link 0.</a></p>
39+
<p><a href="https://github.com/Fdom92/personal-web-site">Link 1.</a></p>
40+
<p><a href="https://github.com/WebNextNative/web-components/tree/master/src/components">Link 2.</a></p>
41+
<p><a href="https://medium.com/ionic-book/web-components-how-to-create-a-component-with-stencil-3753c20b1b12">Link 3.</a></p>
42+
<p><a href="https://docs.github.com/en/actions/about-github-actions/understanding-github-actions">Link 4.</a></p>
43+
<h1>GitHub Pages</h1>
44+
<p>GitHub Pages are GitHub feature that allows users to host websites based on their GitHub public repositories for no additional cost.</p>
45+
<p>GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. GitHub Pages are powered by Jekyll behind the scenes, so they’re a great way to host your Jekyll-powered website for free.</p>
46+
<p>GitHub Pages will look for an index.html , index.md , or README.md file as the entry file for your site. </p>
47+
<p>For this convert an existing repo into Github Pages (or) create a new public repository named <b>username.github.io</b>, where username is your username (or organization name) on GitHub.</p>
48+
<p><a href="https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site">Source</a></p>
49+
<h1>GitHub Actions</h1>
50+
<p>GitHub Actions is required in scenario where entry file of a repository is not at root directory and the repository is of a framework like React, Angular, StencilJS</p>
51+
<p>GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.</p>
52+
<p>GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.</p>
53+
<p>You can configure a GitHub Actions workflow to be triggered when an event occurs in your repository, such as a pull request being opened or an issue being created. Your workflow contains one or more jobs which can run in sequential order or in parallel.</p>
54+
<p>A workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked in to your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule.</p>
55+
56+
</div>
57+
);
58+
}
59+
}

‎src/components/about-us/test/about-us.e2e.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
describe('about-us', () => {
4+
it('renders', async () => {
5+
const page = await newE2EPage();
6+
await page.setContent('<about-us></about-us>');
7+
8+
const element = await page.find('about-us');
9+
expect(element).toHaveClass('hydrated');
10+
});
11+
});

‎src/components/about-us/test/about-us.spec.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { newSpecPage } from '@stencil/core/testing';
2+
import { AboutUs } from '../about-us';
3+
4+
describe('about-us', () => {
5+
it('renders', async () => {
6+
const page = await newSpecPage({
7+
components: [AboutUs],
8+
html: `<about-us></about-us>`,
9+
});
10+
expect(page.root).toEqualHtml(`
11+
<about-us>
12+
<mock:shadow-root>
13+
<slot></slot>
14+
</mock:shadow-root>
15+
</about-us>
16+
`);
17+
});
18+
});

‎src/components/app-home-page/app-home-page.tsx

Lines changed: 6 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ import { Router } from "../..";
88
})
99
export class AppHome {
1010
render() {
11-
// Dynamically resolve the path to the image file
12-
const imagePath1 = new URL('../../assets/images/app-starter1.png', import.meta.url).href;
13-
const imagePath2 = new URL('../../assets/images/app-starter2.png', import.meta.url).href;
1411
return (
1512
<div class="app-home-page">
1613
<p>
@@ -28,6 +25,11 @@ export class AppHome {
2825
>
2926
Feedback Form
3027
</button>
28+
<button
29+
onClick={() => Router.push('/about-us')}
30+
>
31+
About Website
32+
</button>
3133
<button
3234
onClick={() => Router.push('/web-components')}
3335
>
@@ -38,47 +40,7 @@ export class AppHome {
3840
>
3941
Posts dashboard
4042
</button>
41-
<div>
42-
<p>by Default,Stencil Web app creates three components:app-root, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
43-
<p>To avoid conflict with npm package (stenciljs-components) which has similar naming components, renamed the component in this web app to app-home-page and app-profile-page respectively</p>
44-
<h1>Steps to create Stencil Web App</h1>
45-
<h1>Start by npm init stencil and then choose 2nd option</h1>
46-
<img
47-
src={imagePath1}
48-
style={{
49-
width: '100%',
50-
height: '250px',
51-
}}
52-
loading="lazy"
53-
/>
54-
<img
55-
src={imagePath2}
56-
style={{
57-
width: '100%',
58-
height: '250px',
59-
}}
60-
loading="lazy"
61-
/>
62-
</div>
63-
<h1>Helpful links</h1>
64-
<p><a href="https://ferolmo.com/">Link 0.</a></p>
65-
<p><a href="https://github.com/Fdom92/personal-web-site">Link 1.</a></p>
66-
<p><a href="https://github.com/WebNextNative/web-components/tree/master/src/components">Link 2.</a></p>
67-
<p><a href="https://medium.com/ionic-book/web-components-how-to-create-a-component-with-stencil-3753c20b1b12">Link 3.</a></p>
68-
<p><a href="https://docs.github.com/en/actions/about-github-actions/understanding-github-actions">Link 4.</a></p>
69-
<h1>GitHub Pages</h1>
70-
<p>GitHub Pages are GitHub feature that allows users to host websites based on their GitHub public repositories for no additional cost.</p>
71-
<p>GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. GitHub Pages are powered by Jekyll behind the scenes, so they’re a great way to host your Jekyll-powered website for free.</p>
72-
<p>GitHub Pages will look for an index.html , index.md , or README.md file as the entry file for your site. </p>
73-
<p>For this convert an existing repo into Github Pages (or) create a new public repository named <b>username.github.io</b>, where username is your username (or organization name) on GitHub.</p>
74-
<p><a href="https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site">Source</a></p>
75-
<h1>GitHub Actions</h1>
76-
<p>GitHub Actions is required in scenario where entry file of a repository is not at root directory and the repository is of a framework like React, Angular, StencilJS</p>
77-
<p>GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.</p>
78-
<p>GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.</p>
79-
<p>You can configure a GitHub Actions workflow to be triggered when an event occurs in your repository, such as a pull request being opened or an issue being created. Your workflow contains one or more jobs which can run in sequential order or in parallel.</p>
80-
<p>A workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked in to your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule.</p>
81-
</div>
43+
</div>
8244
);
8345
}
8446
}

‎src/components/app-profile-page/app-profile-page.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
11
.app-profile-page {
22
padding: 10px;
33
}
4+
table {
5+
font-family: arial, sans-serif;
6+
border-collapse: collapse;
7+
width: 100%;
8+
}
9+
10+
td, th {
11+
border: 1px solid #dddddd;
12+
text-align: left;
13+
padding: 8px;
14+
}
15+
16+
tr:nth-child(even) {
17+
background-color: #dddddd;
18+
}

‎src/components/app-profile-page/app-profile-page.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,37 @@ export class AppProfile {
4949
loading="lazy"
5050
/>
5151
<p>Hello! My name is {this.normalize(this.name)}. My name was passed in through a route param!</p>
52+
<p>Created two npm packages:</p>
53+
<table>
54+
<tr>
55+
<th>NPM Package Name</th>
56+
<th>URL</th>
57+
<th>Version</th>
58+
</tr>
59+
<tr>
60+
<td>stenciljs-components</td>
61+
<td>https://www.npmjs.com/package/stenciljs-components</td>
62+
<td>1.0.7</td>
63+
</tr>
64+
<tr>
65+
<td>FLUID Library</td>
66+
<td>https://www.npmjs.com/package/fluid-library</td>
67+
<td>1.0.4</td>
68+
</tr>
69+
</table>
70+
<p>External Certifications:</p>
71+
<table>
72+
<tr>
73+
<th>Category</th>
74+
<th>URL</th>
75+
</tr>
76+
<tr>
77+
<td>AWS</td>
78+
<td>https://www.credly.com/users/sanjeet-kumar.8f5d5b31</td>
79+
</tr>
80+
81+
</table>
82+
5283
</div>
5384
);
5485
}

‎src/components/app-root/app-root.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ export class AppRoot {
3939
path={/^\/feedback-form/ }>
4040
<feedback-form></feedback-form>
4141
</Route>
42+
<Route
43+
path={/^\/about-us/ }>
44+
<about-us></about-us>
45+
</Route>
4246
<Route
4347
path={match("/profile/:name")}
4448
render={({ name }) => <app-profile-page name={name} />}

‎src/components/feedback-form/feedback-form.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { Component, h, Listen,Prop, Event, EventEmitter ,Watch,Element,State} from '@stencil/core';
2+
//https://www.npmjs.com/package/@emailjs/browser
3+
import emailjs from '@emailjs/browser';
4+
//no backend server required: https://www.emailjs.com/docs/user-guide/connecting-email-services/
5+
//earlier deprecated one: https://www.npmjs.com/package/emailjs-com
26
import tinymce from 'tinymce/tinymce'; //simply import 'tinymce' doesnt work
37
import 'tinymce/models/dom/model';
48

@@ -300,6 +304,7 @@ export class FeedbackForm {
300304
@State() responseMessage: string = '';
301305

302306
//Before performing any operations- GET or SET- ensure that the this.editor instance is available
307+
//send email also without backend
303308
async getContentFromEditor() {
304309
if (this.editor) {
305310
// Access properties or methods of the TinyMCE editor instance
@@ -325,6 +330,26 @@ export class FeedbackForm {
325330
console.error('Error:', error);
326331
this.responseMessage = 'Submission failed!';
327332
}
333+
334+
// Call EmailJS to send the email (Browser based or client based)
335+
//Emailjs dashboard: https://dashboard.emailjs.com/sign-up
336+
//templateParams is this.editorContent
337+
emailjs.send(
338+
'service_2q5gm3h', // Email service ID from EmailJS dashboard
339+
'template_rf0n5eq', // Template ID from EmailJS dashboard
340+
{ content: this.editorContent }, // Template parameters (the content of the email)
341+
{
342+
publicKey: 'IRGsyXDXq7ZJHMbzF',
343+
}// Your user ID from EmailJS: YOUR_PUBLIC_KEY
344+
)
345+
.then((response) => {
346+
console.log('Email sent successfully', response.status, response.text);
347+
alert('Email sent successfully!');
348+
})
349+
.catch((error) => {
350+
console.error('Error sending email', error);
351+
alert('Failed to send email');
352+
});
328353
} else {
329354
console.error('TinyMCE editor instance not available.');
330355
return null;

‎src/components/header-navigation/header-navigation.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
display: block;
33
}
44
header {
5-
background-color: #333;
65
color: white;
76
padding: 1rem;
87
}

‎src/components/header-navigation/header-navigation.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ export class HeaderNavigation {
99
render() {
1010
return (
1111
<header>
12-
<nav>
13-
<a href="/profile/sanjeet" class="nav-link" >Profile</a>
14-
<a href="/web-components" class="nav-link" >StencilJS components</a>
15-
<a href="/posts-dashboard" class="nav-link">Posts Dashboard</a>
16-
</nav>
12+
<h1>-by Sanjeet Kumar</h1>
1713
</header>
1814
);
1915
}

0 commit comments

Comments
 (0)