prescientmoon/solar-conflux
prescientmoon/solar-conflux
1
Fork 0
Code Activity

typescript(og-website): initial setup, basic home page and some other things

Browse source 
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
Matei Adriel 2019-10-20 13:26:11 +03:00 committed by prescientmoon
commit 4b9d6c80ad
Signed by: prescientmoon
SSH key fingerprint: SHA256:UUF9JT2s8Xfyv76b8ZuVL7XrmimH4o49p4b+iexbVH4
28 changed files with 3414 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
typescript/og-website/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules
dist
.env

5
typescript/og-website/.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

3
typescript/og-website/.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

6
typescript/og-website/nodemon.json Normal file
View file

@ -0,0 +1,6 @@
{
"$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/nodemon.json",
"exec": "npm start",
"ext": "js,json,ts",
"ignore": ["node_modules", ".gitignore", ".vscode"]
}

3063
typescript/og-website/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

21
typescript/og-website/package.json Normal file
View file

@ -0,0 +1,21 @@
{
"name": "website",
"version": "0.0.1",
"main": "src/index.ts",
"scripts": {
"start": "ts-node src/index.ts",
"dev": "nodemon"
},
"author": "Matei Adriel",
"license": "MIT",
"devDependencies": {
"@types/express": "^4.17.1",
"nodemon": "^1.19.4",
"ts-node": "^8.4.1",
"typescript": "^3.6.4"
},
"dependencies": {
"@popeindustries/lit-html-server": "^1.6.0",
"express": "^4.17.1"
}
}

21
typescript/og-website/src/components/Home.ts Normal file
View file

@ -0,0 +1,21 @@
import { html } from '@popeindustries/lit-html-server'
import { withCss } from '../helpers/withCss'
import { buttons } from '../constants/navButtons'
import { UrlConfig } from '../types/UrlConfig'
export const HomeButton = (config: UrlConfig) => html`
<a class="home-button" href=${config.url}>${config.name}</a>
`
export const Home = () => html`
${withCss('home')}
<div id="home" class="full center">
<div id="home-title">
Hello! I'm Matei Adriel!
</div>
<div id="home-buttons">
${buttons.filter(button => button.name !== 'Home').map(HomeButton)}
</div>
</div>
`

21
typescript/og-website/src/components/Layout.ts Normal file
View file

@ -0,0 +1,21 @@
import { html } from '@popeindustries/lit-html-server'
import { withCss } from '../helpers/withCss'
import { Nav } from './Nav'
import { buttons } from '../constants/navButtons'
import { LayoutOptions } from '../types/LayoutOptions'
export const Layout = ({ title, body }: LayoutOptions) => html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>${title}</title>
<base href="/" />
${withCss('layout', 'config')}
</head>
<body class="background">
${Nav(buttons)}
<div id="page-content">${body}</div>
</body>
</html>
`

18
typescript/og-website/src/components/Nav.ts Normal file
View file

@ -0,0 +1,18 @@
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 Nav = (buttons: UrlConfig[]) =>
html`
${withCss('nav')}
<div id="nav">
<div id="nav-buttons">
${buttons.map(NavButtons)}
</div>
</div>
`

24
typescript/og-website/src/components/Projects.ts Normal file
View file

@ -0,0 +1,24 @@
import { html } from '@popeindustries/lit-html-server'
import { ProjectConfig } from '../types/Project'
import { withCss } from '../helpers/withCss'
import { projects } from '../constants/projects'
export const Project = (project: ProjectConfig) => {
const style = `background-image: url(/static/assets/${project.thumbail})`
return html`
<div class="project">
<div class="project-thumbail background" style=${style}></div>
<div class="project-icons">
<a class="project-source" href=${project.source}>Source</a>
<a class="project-demo" href=${project.demo}>Demo</a>
</div>
</div>
`
}
export const Projects = () => html`
${withCss('projects')}
<div id="projects" class="full center">
${projects.map(Project)}
</div>
`

16
typescript/og-website/src/constants/navButtons.ts Normal file
View file

@ -0,0 +1,16 @@
import { UrlConfig } from '../types/UrlConfig'
export const buttons: UrlConfig[] = [
{
url: '/',
name: 'Home'
},
{
url: '/projects',
name: 'Projects'
},
{
url: '/blog',
name: 'Blog'
}
]

16
typescript/og-website/src/constants/projects.ts Normal file
View file

@ -0,0 +1,16 @@
import { ProjectConfig } from '../types/Project'
export const projects: ProjectConfig[] = [
{
name: 'Logic gate simulator',
demo: 'https://logic-gate-simulator.herokuapp.com/',
source: 'https://github.com/Mateiadrielrafael/logicgatesimulator',
thumbail: 'logic.jpg'
},
{
name: 'Visual studio paint',
demo: 'https://visual-studio-paint.herokuapp.com/',
source: 'https://github.com/Mateiadrielrafael/visual-studio-paint',
thumbail: 'paint.jpg'
}
]

15
typescript/og-website/src/helpers/renderComponent.ts Normal file
View file

@ -0,0 +1,15 @@
import { TemplateResult, renderToStream } from '@popeindustries/lit-html-server'
import { LayoutOptions } from '../types/LayoutOptions'
import { Response } from 'express'
export const createComponentRenderer = (
layout: (options: LayoutOptions) => TemplateResult,
name: string
) => (res: Response, { body, title }: LayoutOptions) => {
renderToStream(
layout({
body,
title: `${name} | ${title}`
})
).pipe(res)
}

12
typescript/og-website/src/helpers/withCss.ts Normal file
View file

@ -0,0 +1,12 @@
import { html } from '@popeindustries/lit-html-server'
export const withCss = (...names: string[]) =>
names.map(
name => html`
<link
type="text/css"
rel="stylesheet"
href=${`static/css/${name}.css`}
/>
`
)

33
typescript/og-website/src/index.ts Normal file
View file

@ -0,0 +1,33 @@
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'
const port = process.env.PORT || 8080
const app = express()
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'
})
)
app.listen(port, () => {
console.log(`Listening on port ${port}`)
})

15
typescript/og-website/src/middleware/servePage.ts Normal file
View file

@ -0,0 +1,15 @@
import { Request, Response } from 'express'
import { createComponentRenderer } from '../helpers/renderComponent'
import { LayoutOptions } from '../types/LayoutOptions'
export const createPageMiddlewareFactory = (
...args: Parameters<typeof createComponentRenderer>
) => {
const renderComponent = createComponentRenderer(...args)
return (config: LayoutOptions) => (
request: Request,
response: Response
) => {
renderComponent(response, config)
}
}

BIN
typescript/og-website/src/static/assets/logic.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 439 KiB

BIN
typescript/og-website/src/static/assets/paint.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 330 KiB

9
typescript/og-website/src/static/css/config.css Normal file
View file

@ -0,0 +1,9 @@
:root {
--spacing: 1rem;
--on-raised: white;
--bg-raised: #444444;
--bg: #222222;
--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);
}

20
typescript/og-website/src/static/css/home.css Normal file
View file

@ -0,0 +1,20 @@
div#nav {
position: absolute;
}
div#home-title {
max-width: 80%;
font-size: 3em;
text-align: center;
font-family: var(--title-font);
}
a.home-button {
background-color: rgba(128, 128, 128, 0.5);
padding: var(--spacing, 1rem);
border-radius: var(--spacing, 1rem);
}
div#home-buttons {
padding: var(--spacing, 0.5rem);
}

29
typescript/og-website/src/static/css/layout.css Normal file
View file

@ -0,0 +1,29 @@
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
@import './utility.css';
html,
body {
height: 100%;
width: 100%;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
}
a {
text-decoration: none;
outline: none;
color: var(--on-bg, black);
}
div#page-content {
display: block;
height: 100%;
color: var(--on-bg, black);
padding: var(--spacing, 1rem);
}
body {
background-image: var(--home-bg);
}

13
typescript/og-website/src/static/css/nav.css Normal file
View file

@ -0,0 +1,13 @@
div#nav {
width: 100%;
padding: var(--spacing, 1rem);
}
div#nav-buttons {
display: flex;
}
a.nav-button {
margin: var(--spacing, 1rem);
font-family: var(--title-font);
}

11
typescript/og-website/src/static/css/projects.css Normal file
View file

@ -0,0 +1,11 @@
div.project-thumbail {
width: 100px;
height: 100px;
display: block;
margin: var(--spacing, 1rem);
}
div.project {
background-color: var(--bg-raised, black);
margin: var(--spacing, 1rem);
}

17
typescript/og-website/src/static/css/utility.css Normal file
View file

@ -0,0 +1,17 @@
.background {
background-position: center;
background-size: cover;
}
.full {
display: block;
width: 100%;
height: 100%;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

6
typescript/og-website/src/types/LayoutOptions.ts Normal file
View file

@ -0,0 +1,6 @@
import { TemplateResult } from '@popeindustries/lit-html-server'
export interface LayoutOptions {
title: string
body: TemplateResult | string
}

6
typescript/og-website/src/types/Project.ts Normal file
View file

@ -0,0 +1,6 @@
export interface ProjectConfig {
name: string
source: string
demo: string
thumbail: string
}

4
typescript/og-website/src/types/UrlConfig.ts Normal file
View file

@ -0,0 +1,4 @@
export interface UrlConfig {
url: string
name: string
}

7
typescript/og-website/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"compilerOptions": {
"esModuleInterop": true,
"target": "esnext",
"moduleResolution": "node"
}
}