test

ikasoba · Jan 16, 2025 · 8bd6313 · 8bd6313
1 parent cdf5486
commit 8bd6313
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 32 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -4,7 +4,7 @@ name: Deploy dejamu to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["pages"]
+    branches: ["pages", "pages-pre"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -34,9 +34,16 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: "setup deno"
-        uses: denoland/setup-deno@v1
+        uses: denoland/setup-deno@v2
         with:
-          deno-version: v1.x
+          deno-version: v2.0.x
+      - name: "cache deno"
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.deno
+            ~/.cache/deno
+          key: ${{ runner.os }}-deno-${{ hashFiles('**/deps.ts') }}          
       - name: "cache dependency"
         run: deno cache ./dejamu.config.ts
       - name: "build page"

diff --git a/components/Counter.islands.tsx b/components/Counter.islands.tsx
@@ -1,4 +1,3 @@
-import { tw } from "@twind/core";
 import { useState } from "npm:preact/hooks";
 
 export default function Counter() {
@@ -10,7 +9,7 @@ export default function Counter() {
         className="btn"
         onClick={() => setCount((count) => count + 1)}
       >
-        {count == 0 ? "click me!" : `count: ${count}`}
+        {count ? `count: ${count}` : "click me!"}
       </button>
     </div>
   );

diff --git a/components/SiteHeader.tsx b/components/SiteHeader.tsx
@@ -0,0 +1,38 @@
+// @deno-types="npm:@primer/[email protected]"
+import { MarkGithubIcon } from "https://esm.sh/@primer/[email protected]?external=react&no-dts";
+
+export function SiteHeader() {
+  const dirs = pageDirectory.replace(/^\.\.?\/*|\/+$/g, "").split("/").filter(
+    (x) => x
+  );
+
+  return (
+    <header className="px-6 py-4 shadow-[0px_0px_1rem_rgba(0,0,0,0.1)] flex justify-between sticky top-0 bg-[#fffe] backdrop-filter[blur(0.5rem)] z-10">
+      <div className="flex gap-2">
+        <a href={projectRoot} className="no-decoration font-bold">Dejamu</a>
+        {dirs.map((dir) => (
+          <>
+            <span>/</span>
+            <a
+              href={projectRoot + "/" + dir}
+              className="no-decoration font-bold opacity-50"
+            >
+              {dir}
+            </a>
+          </>
+        ))}
+      </div>
+      <a
+        x-key="_"
+        className="no-decoration"
+        aria-label="github repository"
+        href="https://github.com/ikasoba/dejamu"
+      >
+        <MarkGithubIcon
+          className="transition-transform hover:scale-125 active:scale-100"
+          size={24}
+        />
+      </a>
+    </header>
+  );
+}
diff --git a/dejamu.config.ts b/dejamu.config.ts
@@ -3,6 +3,7 @@ import PreactPlugin from "dejamu/plugins/preact/mod.ts";
 import MarkdownPlugin from "dejamu/plugins/md/mod.ts";
 import TwindPlugin from "dejamu/plugins/twind/mod.ts";
 import HljsPlugin from "dejamu/plugins/md/hljs/mod.ts";
+import VirtualPlugin from "dejamu/plugins/virtual/mod.ts";
 
 export default {
   entryPoints: ["pages/**/*.{jsx,tsx,md}"],
@@ -12,12 +13,23 @@ export default {
       layouts: "layouts/",
       plugins: [
         HljsPlugin({
-          theme: "github-dark-dimmed",
+          theme: "github-dark",
         }),
       ],
     }),
     TwindPlugin({
       styles: ["styles/*.css"],
-    }),
+    }),   
+    VirtualPlugin([
+      {
+        path: "pages/virtual.md",
+        getHashable() {
+          return this.getContent();
+        },
+        getContent() {
+          return new TextEncoder().encode("# Virtual Plugin Example")
+        }
+      }
+    ])
   ],
 } satisfies Config;
diff --git a/deno.json b/deno.json
@@ -6,9 +6,10 @@
     "serve": "deno task dejamu serve"
   },
   "imports": {
-    "dejamu/": "https://raw.githubusercontent.com/ikasoba/dejamu/0.1.0/",
+    "dejamu/": "https://raw.githubusercontent.com/ikasoba/dejamu/pre-0.2.0+0002/",
     "path/": "https://deno.land/[email protected]/path/",
-    "@twind/": "npm:/@twind/"
+    "@twind/": "npm:/@twind/",
+    "react": "npm:/preact/compat"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

diff --git a/layouts/DejamuPage.tsx b/layouts/DejamuPage.tsx
@@ -2,7 +2,7 @@ import { Head } from "dejamu/mod.ts";
 import { Markdown } from "dejamu/plugins/md/Markdown.tsx";
 import { LayoutComponent } from "dejamu/plugins/md/MarkdownPlugin.tsx";
 import Counter from "../components/Counter.islands.tsx";
-import * as path from "path/mod.ts";
+import { SiteHeader } from "../components/SiteHeader.tsx";
 
 export default (function DejamuPage({ children }) {
   return (
@@ -11,6 +11,7 @@ export default (function DejamuPage({ children }) {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Dejamu🛌</title>
       </Head>
+      <SiteHeader />
       <Markdown>
         {children}
       </Markdown>

diff --git a/layouts/Documentation.tsx b/layouts/Documentation.tsx
@@ -0,0 +1,26 @@
+import { Head } from "dejamu/mod.ts";
+import { Markdown } from "dejamu/plugins/md/Markdown.tsx";
+import { LayoutComponent } from "dejamu/plugins/md/MarkdownPlugin.tsx";
+import Counter from "../components/Counter.islands.tsx";
+import { SiteHeader } from "../components/SiteHeader.tsx";
+
+export default (function Documentation({ children }) {
+  return (
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>Dejamu🛌 Documention</title>
+      </Head>
+      <SiteHeader />
+      <Markdown>
+        {children}
+      </Markdown>
+      <footer className="footer">
+        <a href="https://github.com/ikasoba/dejamu">
+          Github Repository
+        </a>
+        <Counter />
+      </footer>
+    </>
+  );
+}) satisfies LayoutComponent;
diff --git a/pages/docs/index.md b/pages/docs/index.md
@@ -0,0 +1,47 @@
+---
+layout: Documentation.tsx
+---
+
+# Dejamu Documentation
+
+## `GlobalThis#isBrowser`
+
+false if the code currently being executed is being executed at pre-rendering time true if it is being executed in a browser.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/plugins/global.d.ts](https://github.com/ikasoba/dejamu/blob/main/plugins/global.d.ts)
+
+## `GlobalThis#pageDirectory`
+
+Relative path from the project root to the parent directory of the current page.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/plugins/global.d.ts](https://github.com/ikasoba/dejamu/blob/main/plugins/global.d.ts)
+
+## `GlobalThis#projectRoot`
+
+Relative path from the current location to the project root.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/plugins/global.d.ts](https://github.com/ikasoba/dejamu/blob/main/plugins/global.d.ts)
+
+## `<Head> ... </Head>`
+
+Append vnodes to head.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/plugins/Head.tsx](https://github.com/ikasoba/dejamu/blob/main/plugins/Head.tsx)
+
+## `interface Config`
+
+Type declraration of dejamu.config.ts.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/core/Config.ts](https://github.com/ikasoba/dejamu/blob/main/core/Config.ts)
+
+## `type DejamuPlugin`
+
+Plugin interface.
+
+- Module: [dejamu/mod.ts](https://github.com/ikasoba/dejamu/blob/main/mod.ts)
+- Location: [dejamu/pluginSystem/Plugin.ts](https://github.com/ikasoba/dejamu/blob/main/pluginSystem/Plugin.ts)
diff --git a/pages/getting-started/index.md b/pages/getting-started/index.md
@@ -8,25 +8,74 @@ Dejamu is a Preact framework for building static web pages.
 
 ## ✨ Features
 
-**⚠ Performance is low as it is in the pre-release phase.**
+- ___Islands:___
 
-- Get started today with minimal configuration.
+  Partially hydrate components that run on the client side.
 
-- [Plugins](../plugins/) can be used to build sites in a variety of formats.
+- ___Friendly:___
+
+  Get started today with minimal configuration.
+
+- ___Plugins:___
+
+  [Plugins](../plugins/) can be used to build sites in a variety of formats.
 
 # 🛠 How to use
 
 ## Initialize the site
+
+Extract the minimum template to the current directory.
+
 ```sh
 deno run -rA https://raw.githubusercontent.com/ikasoba/dejamu/main/scripts/init.ts
 ```
 
 ## Build the site
+
 ```sh
 deno task build
 ```
 
 ## Start the local server
+
+You can also set up a local server capable of hot reloading to facilitate development.
+
 ```sh
 deno task serve
-```
+```
+
+## Let's write
+
+<div style="margin: 1rem 0; font-size: 0.75rem" class="horizontal">
+
+```tsx
+import { Head } from "dejamu/mod.ts";
+import { LayoutComponent } from "dejamu/plugins/md/MarkdownPlugin.tsx";
+import { Markdown } from "dejamu/plugins/md/Markdown.tsx";
+
+export default (function Layout({ children }) {
+  return (
+    <Head>
+      <title>Hoge's Blog</title>
+    </Head>
+
+    <main>
+      <Markdown>
+        { children }
+      </Markdown>
+    </main>
+  );
+}) satisfies LayoutComponent;
+```
+
+```
+---
+layout: Article.tsx
+---
+
+# How to Enjoy Breakfast
+
+...
+```
+
+</div>
diff --git a/pages/index.md b/pages/index.md
@@ -4,18 +4,23 @@ layout: DejamuPage.tsx
 
 <h1>
   <p align="center">
-  Dejamu 🛌
+  Dejamu 🛏
   </p>
 </h1>
 
 <p align="center">
-Small Static Site Generator for Deno.
+Lightweight Static Site Generator for Deno.
 </p>
 
-<div class="center-box">
+<div class="center-box pt-8">
   <a href="./getting-started/">
-    <button class="btn text-xl">
+    <button class="btn btn-xl">
     Get Started!
     </button>
   </a>
-</div>
+  <a href="./docs/">
+    <button class="btn btn-xl btn-gray">
+    Docs
+    </button>
+  </a>
+</div>
diff --git a/pages/plugins/index.md b/pages/plugins/index.md
@@ -8,7 +8,7 @@ layout: DejamuPage.tsx
   </p>
 </h1>
 
-<section class="center-box card-list" style="flex-direction: row; justify-content: center;">
+<section class="center-box card-list">
   <article class="card">
     <h2><a href="https://github.com/ikasoba/dejamu/tree/main/plugins/preact">
     Preact Plugin
@@ -50,8 +50,16 @@ layout: DejamuPage.tsx
     Twind Plugin
     </a></h2>
     <p>
-
-This plugin can be used to use [Twind](https://twind.style) in Dejamu.
+    This plugin can be used to use <a href="https://twind.style">Twind</a> in Dejamu.
+    </p>
+  </article>
+
+  <article class="card">
+    <h2><a href="https://github.com/ikasoba/dejamu/tree/main/plugins/virtual">
+    Virtual Plugin
+    </a></h2>
+    <p>
+    This plugin can be used to create a virtual input to Dejamu.
     </p>
   </article>
-</section>
+</section>