diff --git a/typescript/og-website/src/components/Layout.ts b/typescript/og-website/src/components/Layout.ts
index bc0ffbd..718a5ec 100644
--- a/typescript/og-website/src/components/Layout.ts
+++ b/typescript/og-website/src/components/Layout.ts
@@ -3,8 +3,9 @@ import { withCss } from '../helpers/withCss'
import { Nav } from './Nav'
import { buttons } from '../constants/navButtons'
import { LayoutOptions } from '../types/LayoutOptions'
+import { ServiceWorker } from './ServiceWorker'
-export const Layout = ({ title, body }: LayoutOptions) => html`
+export const Layout = ({ title, body, url }: LayoutOptions) => html`
<!DOCTYPE html>
<html lang="en">
<head>
@@ -14,8 +15,10 @@ export const Layout = ({ title, body }: LayoutOptions) => html`
${withCss('layout', 'config')}
</head>
<body class="background">
- ${Nav(buttons)}
+ ${Nav(buttons, url)}
<div id="page-content">${body}</div>
+
+ ${ServiceWorker('/static/js/service-worker.js')}
</body>
</html>
`
diff --git a/typescript/og-website/src/components/Nav.ts b/typescript/og-website/src/components/Nav.ts
index 3f43cfc..0176a53 100644
--- a/typescript/og-website/src/components/Nav.ts
+++ b/typescript/og-website/src/components/Nav.ts
@@ -2,17 +2,23 @@ import { TemplateResult, html } from '@popeindustries/lit-html-server'
import { withCss } from '../helpers/withCss'
import { UrlConfig } from '../types/UrlConfig'
-export const NavButtons = (config: UrlConfig) => html`
- <a class="nav-button" href=${config.url}>${config.name}</a>
-`
+export const NavButtons = (config: UrlConfig, url: string) => {
+ const className = ['nav-button', config.url === url && 'glow']
+ .filter(Boolean)
+ .join(' ')
-export const Nav = (buttons: UrlConfig[]) =>
+ return html`
+ <a class=${className} href=${config.url}>${config.name}</a>
+ `
+}
+
+export const Nav = (buttons: UrlConfig[], url: string) =>
html`
${withCss('nav')}
<div id="nav">
<div id="nav-buttons">
- ${buttons.map(NavButtons)}
+ ${buttons.map(button => NavButtons(button, url))}
</div>
</div>
`
diff --git a/typescript/og-website/src/components/Projects.ts b/typescript/og-website/src/components/Projects.ts
index 35dd591..11350d9 100644
--- a/typescript/og-website/src/components/Projects.ts
+++ b/typescript/og-website/src/components/Projects.ts
@@ -8,7 +8,8 @@ export const Project = (project: ProjectConfig) => {
return html`
<div class="project">
<div class="project-thumbail background" style=${style}></div>
- <div class="project-icons">
+ <div class="project-name">${project.name}</div>
+ <div class="project-links">
<a class="project-source" href=${project.source}>Source</a>
<a class="project-demo" href=${project.demo}>Demo</a>
</div>
diff --git a/typescript/og-website/src/components/ServiceWorker.ts b/typescript/og-website/src/components/ServiceWorker.ts
new file mode 100644
index 0000000..8c63d80
--- /dev/null
+++ b/typescript/og-website/src/components/ServiceWorker.ts
@@ -0,0 +1,11 @@
+import { html } from '@popeindustries/lit-html-server'
+
+export const ServiceWorker = (url: string) => html`
+ <script>
+ if ('serviceWorker' in navigator) {
+ window.addEventListener('load', () => {
+ navigator.serviceWorker.register('${url}')
+ })
+ }
+ </script>
+`
diff --git a/typescript/og-website/src/constants/navButtons.ts b/typescript/og-website/src/constants/navButtons.ts
index 0da14e8..1b5823b 100644
--- a/typescript/og-website/src/constants/navButtons.ts
+++ b/typescript/og-website/src/constants/navButtons.ts
@@ -1,16 +1,22 @@
import { UrlConfig } from '../types/UrlConfig'
+import { Home } from '../components/Home'
+import { Projects } from '../components/Projects'
+import { html } from '@popeindustries/lit-html-server'
export const buttons: UrlConfig[] = [
{
url: '/',
- name: 'Home'
+ name: 'Home',
+ component: Home
},
{
url: '/projects',
- name: 'Projects'
+ name: 'Projects',
+ component: Projects
},
{
url: '/blog',
- name: 'Blog'
+ name: 'Blog',
+ component: () => html``
}
]
diff --git a/typescript/og-website/src/helpers/renderComponent.ts b/typescript/og-website/src/helpers/renderComponent.ts
index 84f539c..b8da181 100644
--- a/typescript/og-website/src/helpers/renderComponent.ts
+++ b/typescript/og-website/src/helpers/renderComponent.ts
@@ -5,10 +5,11 @@ import { Response } from 'express'
export const createComponentRenderer = (
layout: (options: LayoutOptions) => TemplateResult,
name: string
-) => (res: Response, { body, title }: LayoutOptions) => {
+) => (res: Response, { body, title, url }: LayoutOptions) => {
renderToStream(
layout({
body,
+ url,
title: `${name} | ${title}`
})
).pipe(res)
diff --git a/typescript/og-website/src/index.ts b/typescript/og-website/src/index.ts
index b7f18fe..313d9d1 100644
--- a/typescript/og-website/src/index.ts
+++ b/typescript/og-website/src/index.ts
@@ -2,8 +2,7 @@ import express from 'express'
import { Layout } from './components/Layout'
import { resolve } from 'path'
import { createPageMiddlewareFactory } from './middleware/servePage'
-import { Home } from './components/Home'
-import { Projects } from './components/Projects'
+import { buttons } from './constants/navButtons'
const port = process.env.PORT || 8080
const app = express()
@@ -12,21 +11,16 @@ const renderComponent = createPageMiddlewareFactory(Layout, 'Matei Adriel')
app.use('/static', express.static(resolve(__dirname, 'static')))
-app.get(
- '/',
- renderComponent({
- body: Home(),
- title: 'Home'
- })
-)
-
-app.get(
- '/projects',
- renderComponent({
- body: Projects(),
- title: 'Projects'
- })
-)
+for (const button of buttons) {
+ app.get(
+ button.url,
+ renderComponent({
+ body: button.component(),
+ title: button.name,
+ url: button.url
+ })
+ )
+}
app.listen(port, () => {
console.log(`Listening on port ${port}`)
diff --git a/typescript/og-website/src/static/css/config.css b/typescript/og-website/src/static/css/config.css
index 11ecfe8..b02624b 100644
--- a/typescript/og-website/src/static/css/config.css
+++ b/typescript/og-website/src/static/css/config.css
@@ -6,4 +6,8 @@
--on-bg: white;
--title-font: 'Permanent Marker', cursive;
--home-bg: url(https://cdn.discordapp.com/attachments/485859146558865408/635409620537442325/Wallpaper_space_galaxy_planet_4k_Space_8652415352.jpg);
+ --glow-color-1: white;
+ --glow-color-2: cyan;
+ --glow-color-3: blue;
+ --glow-duration: 2s;
}
diff --git a/typescript/og-website/src/static/css/home.css b/typescript/og-website/src/static/css/home.css
index 6ce40cb..5378ae2 100644
--- a/typescript/og-website/src/static/css/home.css
+++ b/typescript/og-website/src/static/css/home.css
@@ -1,7 +1,3 @@
-div#nav {
- position: absolute;
-}
-
div#home-title {
max-width: 80%;
font-size: 3em;
diff --git a/typescript/og-website/src/static/css/nav.css b/typescript/og-website/src/static/css/nav.css
index c2efefe..e49a616 100644
--- a/typescript/og-website/src/static/css/nav.css
+++ b/typescript/og-website/src/static/css/nav.css
@@ -1,6 +1,7 @@
div#nav {
width: 100%;
padding: var(--spacing, 1rem);
+ position: absolute;
}
div#nav-buttons {
@@ -11,3 +12,8 @@ a.nav-button {
margin: var(--spacing, 1rem);
font-family: var(--title-font);
}
+
+a.nav-button:hover {
+ animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
+ --glow-color-3: red;
+}
diff --git a/typescript/og-website/src/static/css/projects.css b/typescript/og-website/src/static/css/projects.css
index 1b71e3c..4409e6b 100644
--- a/typescript/og-website/src/static/css/projects.css
+++ b/typescript/og-website/src/static/css/projects.css
@@ -1,11 +1,38 @@
div.project-thumbail {
- width: 100px;
- height: 100px;
+ width: 200px;
+ height: 200px;
display: block;
- margin: var(--spacing, 1rem);
}
div.project {
background-color: var(--bg-raised, black);
margin: var(--spacing, 1rem);
+ border-radius: var(--spacing, 1rem);
+}
+
+div.project > div {
+ margin: var(--spacing, 1rem);
+ text-align: center;
+ box-sizing: border-box;
+}
+
+div.project-name {
+ border-bottom: 1px solid #777777;
+ padding-bottom: var(--spacing, 1rem);
+}
+
+div.project-links {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+div#projects {
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: var(--title-font);
+}
+
+div.project-links *:hover {
+ animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
}
diff --git a/typescript/og-website/src/static/css/utility.css b/typescript/og-website/src/static/css/utility.css
index 4220cb5..50a888e 100644
--- a/typescript/og-website/src/static/css/utility.css
+++ b/typescript/og-website/src/static/css/utility.css
@@ -15,3 +15,28 @@
justify-content: center;
align-items: center;
}
+
+.glow {
+ animation: glow var(--glow-duration, 1s) ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+ from {
+ text-shadow: 0 0 10px var(--glow-color-1, white),
+ 0 0 20px var(--glow-color-1, white),
+ 0 0 30px var(--glow-color-2, white),
+ 0 0 40px var(--glow-color-2, white),
+ 0 0 50px var(--glow-color-2, white),
+ 0 0 60px var(--glow-color-2, white),
+ 0 0 70px var(--glow-color-2, white);
+ }
+ to {
+ text-shadow: 0 0 20px var(--glow-color-1, white),
+ 0 0 30px var(--glow-color-3, white),
+ 0 0 40px var(--glow-color-3, white),
+ 0 0 50px var(--glow-color-3, white),
+ 0 0 60px var(--glow-color-3, white),
+ 0 0 70px var(--glow-color-3, white),
+ 0 0 80px var(--glow-color-3, white);
+ }
+}
diff --git a/typescript/og-website/src/static/js/service-worker.js b/typescript/og-website/src/static/js/service-worker.js
new file mode 100644
index 0000000..6837ffa
--- /dev/null
+++ b/typescript/og-website/src/static/js/service-worker.js
@@ -0,0 +1,45 @@
+importScripts(
+ 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'
+)
+
+if (workbox) {
+ // Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+ workbox.routing.registerRoute(
+ /^https:\/\/fonts\.googleapis\.com/,
+ new workbox.strategies.StaleWhileRevalidate({
+ cacheName: 'google-fonts-stylesheets'
+ })
+ )
+
+ // Cache the underlying font files with a cache-first strategy for 1 year.
+ workbox.routing.registerRoute(
+ /^https:\/\/fonts\.gstatic\.com/,
+ new workbox.strategies.CacheFirst({
+ cacheName: 'google-fonts-webfonts',
+ plugins: [
+ new workbox.cacheableResponse.Plugin({
+ statuses: [0, 200]
+ }),
+ new workbox.expiration.Plugin({
+ maxAgeSeconds: 60 * 60 * 24 * 365,
+ maxEntries: 30
+ })
+ ]
+ })
+ )
+
+ workbox.routing.registerRoute(
+ /\.(?:png|gif|jpg|jpeg|webp|svg)$/,
+ new workbox.strategies.CacheFirst({
+ cacheName: 'images',
+ plugins: [
+ new workbox.expiration.Plugin({
+ maxEntries: 60,
+ maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
+ })
+ ]
+ })
+ )
+} else {
+ console.log(`Boo! Workbox didn't load 😬`)
+}
diff --git a/typescript/og-website/src/types/LayoutOptions.ts b/typescript/og-website/src/types/LayoutOptions.ts
index c9b5e36..b958aae 100644
--- a/typescript/og-website/src/types/LayoutOptions.ts
+++ b/typescript/og-website/src/types/LayoutOptions.ts
@@ -2,5 +2,6 @@ import { TemplateResult } from '@popeindustries/lit-html-server'
export interface LayoutOptions {
title: string
+ url: string
body: TemplateResult | string
}
diff --git a/typescript/og-website/src/types/UrlConfig.ts b/typescript/og-website/src/types/UrlConfig.ts
index 53bdbef..7a20744 100644
--- a/typescript/og-website/src/types/UrlConfig.ts
+++ b/typescript/og-website/src/types/UrlConfig.ts
@@ -1,4 +1,7 @@
+import { TemplateResult } from '@popeindustries/lit-html-server'
+
export interface UrlConfig {
url: string
name: string
+ component: () => TemplateResult
}