feature/issue 32 shared layout for all pages (#56)

ProjectEvergreen · Jun 13, 2024 · 0148fce · 0148fce
1 parent 03756b6
commit 0148fce
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 21 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,4 @@
 import "../src/styles/theme.css";
-import "../src/styles/main.css";
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {

diff --git a/greenwood.config.js b/greenwood.config.js
@@ -4,4 +4,7 @@ import { greenwoodPluginCssModules } from "./plugin-css-modules.js";
 export default {
   prerender: true,
   plugins: [greenwoodPluginImportRaw(), greenwoodPluginCssModules()],
+  markdown: {
+    plugins: ["@mapbox/rehype-prism"],
+  },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,8 @@
   },
   "dependencies": {
     "geist": "^1.2.0",
-    "open-props": "^1.7.4"
+    "open-props": "^1.7.4",
+    "prism-themes": "^1.9.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",
@@ -45,6 +46,7 @@
     "@greenwood/cli": "^0.30.0-alpha.2",
     "@greenwood/plugin-import-raw": "^0.30.0-alpha.2",
     "@ls-lint/ls-lint": "^1.10.0",
+    "@mapbox/rehype-prism": "^0.9.0",
     "@storybook/addon-essentials": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/blocks": "^8.0.6",

diff --git a/src/assets/greenwood-logo-og.png b/src/assets/greenwood-logo-og.png
diff --git a/src/pages/index.html b/src/pages/index.html
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -0,0 +1,14 @@
+---
+imports:
+  - ../styles/home.css
+---
+
+# Welcome to Greenwood!
+
+```js
+return new Response("<h1>Hello World</h1>", {
+  headers: {
+    "Content-Type": "text/html",
+  },
+});
+```
diff --git a/src/styles/home.css b/src/styles/home.css
@@ -0,0 +1,9 @@
+h1 {
+  text-align: center;
+}
+
+pre {
+  margin: 0 auto !important;
+  width: 30%;
+  overflow: scroll;
+}
diff --git a/src/styles/main.css b/src/styles/main.css
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -1,6 +1,8 @@
 @import "../../node_modules/open-props/src/props.borders.css";
+@import "../../node_modules/open-props/src/props.fonts.css";
 @import "../../node_modules/open-props/src/props.shadows.css";
 @import "../../node_modules/open-props/src/props.sizes.css";
+@import "../../node_modules/prism-themes/themes/prism-nord.css";
 
 @font-face {
   font-family: "Geist-Sans";
@@ -32,3 +34,10 @@
   font-size: var(--size-px-3);
   box-sizing: border-box;
 }
+
+/* tweaks for PrismJS */
+code[class*="language-"],
+pre[class*="language-"],
+span.token {
+  font-family: "Geist-Mono", monospace;
+}
diff --git a/src/templates/app.html b/src/templates/app.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+  <head>
+    <title>Greenwood</title>
+    <meta charset="utf-8" />
+    <meta
+      name="description"
+      content="Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.."
+    />
+    <meta name="twitter:site" content="@PrjEvergreen" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.greenwoodjs.dev" />
+    <meta property="og:image" content="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png" />
+    <meta
+      property="og:description"
+      content="Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+    <script type="module" src="../components/footer/footer.js" data-gwd-opt="static"></script>
+    <script type="module" src="../components/header/header.js"></script>
+    <link rel="stylesheet" href="../styles/theme.css" />
+  </head>
+
+  <body>
+    <app-header></app-header>
+
+    <main>
+      <page-outlet></page-outlet>
+    </main>
+
+    <app-footer></app-footer>
+  </body>
+</html>