initial commit (it all starts here...)

2020-05-25 22:36:20 -07:00 · 2020-05-25 22:36:20 -07:00 · ac7da8cc6d
commit ac7da8cc6d
36 changed files with 4550 additions and 0 deletions
--- a/examples/personal-site/components/header.tsx
+++ b/examples/personal-site/components/header.tsx
@ -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>
+);
--- a/examples/personal-site/components/layout.tsx
+++ b/examples/personal-site/components/layout.tsx
@ -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>
+);
--- a/examples/personal-site/components/navbar.tsx
+++ b/examples/personal-site/components/navbar.tsx
@ -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>
+);