By José Martínez Santana
Welcome to my personal portfolio, built using the architecture of a single-page application mainly with CSS
and TypeScript
.
- Addition to new nodes to the DOM similar to the use of D3.js.
- Basic validation to the addition of new nodes in the DOM when
innerHTML
is used against XSS attacks. Be careful if your application needs more ciber security levels. - It can add event listeners to the new DOM nodes created.
- The router has the ability to take advantage of the browser's navigation history.
- The routes of the web page can be validated using regular expressions.
- It can handle a not existing route with a 404 error page.
To implement the logic for the web page, add the code to the respective folders inside the src/internal
directory. Here is the purpose of each folder:
Folder 📁 | Purpose |
---|---|
events | Contains the JavaScript event listener logic of the DOM. |
pages | Holds the JavaScript code to add in the main-container . |
routes | Contains routes and the handler functions to add the DOM elements of the selected web page. |
templates | Holds JavaScript code for the permanent elements of the web page that will not change, for example: The navigation bar. |
utils | Contains JavaScript code for custom processing. |
views | Holds the JavaScript functions that define the HTML view of the web page. |
To add a new page/route to the application, follow these steps:
- Create the new view with HTML for the content of the new page inside the
src/internal/views
folder. - Create the new DOM node for the new page inside the
src/internal/pages
folder. If the new page requires a DOM node to listen to events, add the event listener function in thesrc/internal/events
folder. Finally, add the listener to the specific element in the new view. - Create a new page inside the
src/internal/pages
. In the file addimport Page from "../../pkg/node/node";
, In addition import the view and add the listener function in case the later are needed. The importedPage class
helps to create the new content in the DOM. For example:
import Page from "../../pkg/node/node";
import createContactView from "../views/contact-view";
import {
showTooltipIcon,
hideTooltipIcon,
checkFormSubmit,
} from "../events/contact-events";
/**
* Create the HTML section element of contact page.
*/
async function createContact(): Promise<HTMLElement> {
const contactPage: Page = new Page("main")
.setHTML(createContactView())
.setAttr("class", "contact.container.active")
.addListener("mouseover", ".contact-icon", showTooltipIcon)
.addListener("mouseout", ".contact-icon", hideTooltipIcon)
.addListener("submit", "form", checkFormSubmit);
return contactPage.getNode;
}
export default createContact;
- In the
src/internal/routes
folder, open theroutes.ts
file, and add an import statement for the new page. For example:
import creatContact from "../pages/contact";
- In the JavaScript object, add the name of the route and handler function for the new page. You can use a regular expression in the path if a validation pattern is needed. For example:
const routes: Routes = {
// Create the user web page depending on data of a given user
"/contact": createContact;
} as const;
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. I invite you to collaborate directly in this repository: metalbolicx-porfolio
metalbolicx-porfolio is released under the MIT License.