From 8bd6313af116d2e3d951510d3f1e5fac3262f401 Mon Sep 17 00:00:00 2001 From: ikasoba <57828948+ikasoba@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:02:24 +0900 Subject: [PATCH] test --- .github/workflows/pages.yml | 13 ++++++-- components/Counter.islands.tsx | 3 +- components/SiteHeader.tsx | 38 +++++++++++++++++++++++ dejamu.config.ts | 16 ++++++++-- deno.json | 5 +-- layouts/DejamuPage.tsx | 3 +- layouts/Documentation.tsx | 26 ++++++++++++++++ pages/docs/index.md | 47 ++++++++++++++++++++++++++++ pages/getting-started/index.md | 57 +++++++++++++++++++++++++++++++--- pages/index.md | 15 ++++++--- pages/plugins/index.md | 16 +++++++--- styles/index.css | 41 ++++++++++++++++++------ twind.config.ts | 7 +++++ 13 files changed, 255 insertions(+), 32 deletions(-) create mode 100644 components/SiteHeader.tsx create mode 100644 layouts/Documentation.tsx create mode 100644 pages/docs/index.md diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 7c44835..bd844fe 100644 --- 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 index f1e7e96..3ed5934 100644 --- 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!"} ); diff --git a/components/SiteHeader.tsx b/components/SiteHeader.tsx new file mode 100644 index 0000000..fe59031 --- /dev/null +++ b/components/SiteHeader.tsx @@ -0,0 +1,38 @@ +// @deno-types="npm:@primer/octicons-react@19.11.0" +import { MarkGithubIcon } from "https://esm.sh/@primer/octicons-react@19.11.0?external=react&no-dts"; + +export function SiteHeader() { + const dirs = pageDirectory.replace(/^\.\.?\/*|\/+$/g, "").split("/").filter( + (x) => x + ); + + return ( +
+
+ Dejamu + {dirs.map((dir) => ( + <> + / + + {dir} + + + ))} +
+ + + +
+ ); +} diff --git a/dejamu.config.ts b/dejamu.config.ts index 2283d5c..9d61b18 100644 --- 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 index 06a96f8..2d1f011 100644 --- 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/std@0.203.0/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 index c92751b..45324e8 100644 --- 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 }) { Dejamu🛌 + {children} diff --git a/layouts/Documentation.tsx b/layouts/Documentation.tsx new file mode 100644 index 0000000..10292c6 --- /dev/null +++ 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 ( + <> + + + Dejamu🛌 Documention + + + + {children} + + + + ); +}) satisfies LayoutComponent; diff --git a/pages/docs/index.md b/pages/docs/index.md new file mode 100644 index 0000000..434287a --- /dev/null +++ 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) + +## ` ... ` + +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 index 78d3ed5..16ead6d 100644 --- 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 -``` \ No newline at end of file +``` + +## Let's write + +
+ +```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 ( + + Hoge's Blog + + +
+ + { children } + +
+ ); +}) satisfies LayoutComponent; +``` + +``` +--- +layout: Article.tsx +--- + +# How to Enjoy Breakfast + +... +``` + +
diff --git a/pages/index.md b/pages/index.md index d8554fa..8ad47a9 100644 --- a/pages/index.md +++ b/pages/index.md @@ -4,18 +4,23 @@ layout: DejamuPage.tsx

- Dejamu 🛌 + Dejamu 🛏

-Small Static Site Generator for Deno. +Lightweight Static Site Generator for Deno.

-
+
- -
\ No newline at end of file + + + +
diff --git a/pages/plugins/index.md b/pages/plugins/index.md index d43a1be..dbbafb4 100644 --- a/pages/plugins/index.md +++ b/pages/plugins/index.md @@ -8,7 +8,7 @@ layout: DejamuPage.tsx

-
+
+ + -
\ No newline at end of file +
diff --git a/styles/index.css b/styles/index.css index 94511d2..b927711 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,20 +1,28 @@ .center-box { - @apply flex flex-col items-center gap-2; + @apply flex items-center justify-center gap-2; } .btn { - @apply bg-[dodgerblue] text-white p-1 rounded transition + @apply bg-primary text-white px-2 py-1 rounded transition hover:filter[brightness(0.95)] active:filter[brightness(0.9)]; } +.btn-xl { + @apply px-4 py-2 rounded-xl font-bold text-lg; +} + +.btn-gray { + @apply bg-gray-300 text-[#333]; +} + .card-list { - @apply gap-2 flex-wrap; + @apply gap-4 flex-wrap flex-row max-sm:flex-col justify-center; } .card { @apply flex flex-col bg-white border border-[lightgray] rounded - p-2 width[15rem] aspect-ratio[4_/_3]; + p-2 w-[15rem] max-sm:(w-[100%] min-height[10rem]) aspect-ratio[4_/_3] max-sm:aspect-ratio[unset] shadow-md hover:shadow-primary transition; } .card > h2 { @@ -29,18 +37,29 @@ @apply flex gap-2 p-2 items-center; } +.horizontal { + @apply flex gap-2 overflow-auto; +} + +.horizontal > * { + @apply flex-1; +} + body { font-family: sans-serif; display: flex; flex-direction: column; min-height: 100vh; + color: #333; + margin: 0; } body > div { flex: 1; - padding: 0.5rem; + + @apply px-[10vw] max-md:px-[0.5rem]; } h1, h2, h3 { @@ -65,20 +84,24 @@ h2 { margin: 0.5em 0; } -a { +a:not(.no-decoration) { color: dodgerblue; text-decoration: underline; } -a:visited { +a:not(.no-decoration):visited { color: slateblue; } -a:active { +a:not(.no-decoration):active { color: hotpink; } ul { list-style: disc; padding-left: 1.5rem; -} \ No newline at end of file +} + +p { + padding: 0.25rem 0; +} diff --git a/twind.config.ts b/twind.config.ts index 9a01bdf..edcd71a 100644 --- a/twind.config.ts +++ b/twind.config.ts @@ -3,6 +3,13 @@ import presetTailwind from "@twind/preset-tailwind"; import presetExt from "@twind/preset-ext"; export default defineConfig({ + theme: { + extend: { + colors: { + primary: "hsl(220deg, 95%, 60%)" + } + } + }, presets: [ presetTailwind(), presetExt(),