websnacksjs/websnacks
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

initial commit (it all starts here...)

Browse source
This commit is contained in:
M. George Hansen 2020-05-25 22:36:20 -07:00
commit 9e9842dc8c
36 changed files with 4550 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

25
examples/personal-site/components/header.tsx Normal file
View file

@ -0,0 +1,25 @@
import { stylesheet } from "typestyle";
import { Component, createElement } from "websnacks";
const styles = stylesheet({
header: {
background: "#6c42bd",
color: "#fff",
padding: "32px",
textAlign: "center",
boxShadow: "0 1px 8px -3px #000",
},
headline: {
fontSize: "28px",
},
});
export interface HeaderProps {
headline: string;
}
export const Header: Component<HeaderProps> = ({ headline }) => (
<header className={styles.header}>
<h1 className={styles.headline}>{headline}</h1>
</header>
);

68
examples/personal-site/components/layout.tsx Normal file
View file

@ -0,0 +1,68 @@
import { normalize } from "csstips";
import { stylesheet } from "typestyle";
import { Component, createElement } from "websnacks";
import { stylesheetPath } from "../config";
import { Header } from "./header";
import { Navbar } from "./navbar";
normalize();
const styles = stylesheet({
html: {
height: "100%",
},
wrapper: {
height: "100%",
display: "flex",
flexDirection: "row",
margin: 0,
},
main: {
flex: 1,
},
mainBody: {
padding: "16px",
},
navbar: {
display: "flex",
flex: "0 0 auto",
zIndex: 9,
},
});
const SITE_TITLE = "Example Site";
export interface LayoutProps {
headline?: string;
}
export const Layout: Component<LayoutProps> = ({ children, headline }) => (
<html className={styles.html} lang="en-US">
<head>
<meta charSet="utf-8" />
<title>
{SITE_TITLE}
{headline && ` | ${headline}`}
</title>
<meta name="description" content="" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link rel="stylesheet" href={stylesheetPath} />
</head>
<body className={styles.wrapper}>
<div className={styles.navbar}>
<Navbar />
</div>
<main className={styles.main}>
<Header headline={headline || SITE_TITLE} />
<div className={styles.mainBody}>{children}</div>
</main>
</body>
</html>
);

43
examples/personal-site/components/navbar.tsx Normal file
View file

@ -0,0 +1,43 @@
import { stylesheet } from "typestyle";
import { Component, createElement } from "websnacks";
const styles = stylesheet({
navbar: {
minWidth: "140px",
borderRight: "1px solid #ddd",
background: "#fff",
},
sectionTitle: {
color: "#333",
textAlign: "center",
borderBottom: "1px solid #333",
padding: "6px",
margin: "0 4px",
fontSize: "18px",
},
linksList: {
padding: "3px 16px 0",
},
linksListItem: {
padding: "6px",
},
});
const links = [
{ title: "Home", href: "/" },
{ title: "Projects", href: "/projects" },
];
export const Navbar: Component = () => (
<nav className={styles.navbar}>
<h2 className={styles.sectionTitle}>Navigation</h2>
<ol className={styles.linksList}>
{links.map(({ title, href }) => (
<li className={styles.linksListItem}>
<a href={href}>{title}</a>
</li>
))}
</ol>
</nav>
);

1
examples/personal-site/config.ts Normal file
View file

@ -0,0 +1 @@
export const stylesheetPath = "/styles.css";

1263
examples/personal-site/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

13
examples/personal-site/package.json Normal file
View file

@ -0,0 +1,13 @@
{
"name": "websnacks-example-personal-site",
"scripts": {
"build": "websnacks -r ts-node/register build",
"dev": "websnacks -r ts-node/register dev"
},
"dependencies": {
"csstips": "^1.2.0",
"ts-node": "^8.10.1",
"typestyle": "^2.1.0",
"websnacks": "../../"
}
}

22
examples/personal-site/pages/index.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Component, createElement } from "websnacks";
import { Layout } from "../components/layout";
export const page: Component = () => (
<Layout>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
dapibus condimentum mauris et egestas. Quisque orci nulla, consequat
at erat laoreet, malesuada sodales nisi. Sed in lorem semper lorem
placerat fermentum a id arcu. Curabitur non aliquam tellus, sed
auctor lacus. Nunc sit amet lectus ultrices, sodales nisl sit amet,
luctus nisl. Nunc mollis imperdiet quam, eget sollicitudin leo
tincidunt vel. Duis felis dui, imperdiet aliquam bibendum sed,
auctor et dolor. Vivamus odio ipsum, venenatis in felis sed, aliquam
dictum turpis. Pellentesque pellentesque consequat neque, id
imperdiet diam molestie nec. Nullam ut vestibulum est. Pellentesque
orci urna, porta vel porta quis, semper ut enim. Donec sit amet urna
arcu. Nam tincidunt fermentum ligula a pharetra.{" "}
</p>
</Layout>
);

26
examples/personal-site/pages/projects.tsx Normal file
View file

@ -0,0 +1,26 @@
import { stylesheet } from "typestyle";
import { Component, createElement } from "websnacks";
import { Layout } from "../components/layout";
const styles = stylesheet({
projectsGrid: {
display: "flex",
flexWrap: "wrap",
width: "25%",
},
});
export const page: Component = () => (
<Layout>
<h1>Projects</h1>
<div className={styles.projectsGrid}>
<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>
</div>
</Layout>
);

2
examples/personal-site/static/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Allow: /

17
examples/personal-site/tsconfig.json Normal file
View file

@ -0,0 +1,17 @@
{
"compilerOptions": {
"esModuleInterop": true,
"module": "CommonJS",
"moduleResolution": "node",
"jsx": "react",
"jsxFactory": "createElement",
"target": "ES2019",
"lib": ["ES2019"],
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"include": ["components/**/*", "pages/**/*"]
}

26
examples/personal-site/websnacks.ts Normal file
View file

@ -0,0 +1,26 @@
import { promises as fs } from "fs";
import * as path from "path";
import { Config } from "websnacks";
import { stylesheetPath } from "./config";
const config: Config = {
// Watch additional files and folders for changes when the dev server is
// running.
watch: ["components/", "config.ts"],
// Hooks to execute after certain rendering events. Currently only
// afterSiteRender is supported.
hooks: {
async afterSiteRender({ outDir }): Promise<void> {
// NOTE: we dynamically import typestyle so that the global style
// registry is properly updated once all pages are reloaded in
// dev. We could also create a typestyle object in config.ts,
// or even multiple objects to split up our styles into e.g. a
// critical-path.css and noncrticial.css.
const { getStyles } = await import("typestyle");
const styles = getStyles();
await fs.writeFile(path.join(outDir, stylesheetPath), styles);
},
},
};
export = config;