Skip to content

Instantly share code, notes, and snippets.

View nafeu's full-sized avatar
🕶️
In Virtual Reality

Nafeu Nasir nafeu

🕶️
In Virtual Reality
40 followers · 53 following
View GitHub Profile
@nafeu
nafeu / building-a-static-29-output-path-previews.js
Created February 10, 2021 14:46
{ outputPath: "./build/index.html" }
{ outputPath: "./build/about/index.html" }
@nafeu
nafeu / building-a-static-28-step-4-outputs.ts
Created February 10, 2021 14:46
/* Step 4: Build pages into .html files with appropriate paths */
for (const page of pages) {
const { path } = page;
let outputPath: string;
if (path === HOME_PATH) {
outputPath = `${buildPath}/index.html`;
} else {
outputPath = `${buildPath}${path}/index.html`;
@nafeu
nafeu / building-a-static-27-step-3-final.ts
Created February 10, 2021 14:46
/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;
const getStylesheetHref = (path: string) => {
return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}
const getFaviconSvg = (favicon: string) => `
<svg xmlns="http://www.w3.org/2000/svg">
<text y="32" font-size="32">${favicon ? favicon : '🦕'}</text>
@nafeu
nafeu / building-a-static-26-main-ht-ml-template.ts
Created February 10, 2021 14:46
const getHtmlByPage = ({ path, name, html }: Page) => `
<!DOCTYPE html>
<html>
<head>
<title>${name} | ${title}</title>
<link rel="stylesheet" href="${getStylesheetHref(path)}">
<link rel="icon" href="/favicon.svg">
</head>
<body>
<div id="title">
@nafeu
nafeu / building-a-static-25-step-3-templates.ts
Created February 10, 2021 14:45
/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;
const getStylesheetHref = (path: string) => {
return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}
const getFaviconSvg = (favicon: string) => `
<svg xmlns="http://www.w3.org/2000/svg">
<text y="32" font-size="32">${favicon ? favicon : '🦕'}</text>
@nafeu
nafeu / building-a-static-24-footer-template.txt
Created February 10, 2021 14:45
@nafeu
nafeu / building-a-static-23-example-nav-markup.html
Created February 10, 2021 14:45
<div id="nav">
<a class="nav-item selected" href="/">Home</a>
<a class="nav-item" href="/about">About</a>
</div>
@nafeu
nafeu / building-a-static-22-navigation-markup.ts
Created February 10, 2021 14:45
const getNavigation = (currentPath: string) => `
<div id="nav">
${pages.map(({ path, name }) => {
const href = path === HOME_PATH ? '/' : path;
const isSelectedPage = path === currentPath;
const classes = `nav-item ${isSelectedPage ? 'selected': ''}`;
return `<a class="${classes}" href=${href}>${name}</a>`;
}).join('\n')}
</div>
`;
@nafeu
nafeu / building-a-static-21-favicon-svg-template.ts
Created February 10, 2021 14:45
/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;
const getStylesheetHref = (path: string) => {
return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}
const getFaviconSvg = (favicon: string) => `
<svg xmlns="http://www.w3.org/2000/svg">
<text y="32" font-size="32">${favicon ? favicon : '🦕'}</text>
@nafeu
nafeu / building-a-static-20-stylesheet-reference.ts
Created February 10, 2021 14:45
/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;
const getStylesheetHref = (path: string) => {
return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}