From 79fea699a7f59d100fada5dff55722c9c516cac7 Mon Sep 17 00:00:00 2001 From: Matei Adriel Date: Sun, 20 Oct 2019 14:20:54 +0300 Subject: [PATCH] typescript(og-website): basic projects page Signed-off-by: prescientmoon --- .../og-website/src/components/Layout.ts | 7 ++- typescript/og-website/src/components/Nav.ts | 16 ++++--- .../og-website/src/components/Projects.ts | 3 +- .../src/components/ServiceWorker.ts | 11 +++++ .../og-website/src/constants/navButtons.ts | 12 +++-- .../og-website/src/helpers/renderComponent.ts | 3 +- typescript/og-website/src/index.ts | 28 +++++------- .../og-website/src/static/css/config.css | 4 ++ typescript/og-website/src/static/css/home.css | 4 -- typescript/og-website/src/static/css/nav.css | 6 +++ .../og-website/src/static/css/projects.css | 33 ++++++++++++-- .../og-website/src/static/css/utility.css | 25 +++++++++++ .../src/static/js/service-worker.js | 45 +++++++++++++++++++ .../og-website/src/types/LayoutOptions.ts | 1 + typescript/og-website/src/types/UrlConfig.ts | 3 ++ 15 files changed, 165 insertions(+), 36 deletions(-) create mode 100644 typescript/og-website/src/components/ServiceWorker.ts create mode 100644 typescript/og-website/src/static/js/service-worker.js 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` @@ -14,8 +15,10 @@ export const Layout = ({ title, body }: LayoutOptions) => html` ${withCss('layout', 'config')} - ${Nav(buttons)} + ${Nav(buttons, url)}
${body}
+ + ${ServiceWorker('/static/js/service-worker.js')} ` 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` - ${config.name} -` +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` + ${config.name} + ` +} + +export const Nav = (buttons: UrlConfig[], url: string) => html` ${withCss('nav')} ` 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`
-
+
${project.name}
+
Source Demo
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 }