+
${project.name}
+
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`
+
+`
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
}