Skip to content

Commit 27f8a44

Browse files
progriumprogrium
committed
web: switch to lume. start automatic nav. add rss feed.
1 parent 261bbca commit 27f8a44

37 files changed

+601
-811
lines changed

‎.github/workflows/deploy.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ jobs:
2121
- name: Build
2222
run: |
2323
deno task bundle
24-
deno task generate
24+
deno task build
2525
env:
2626
BACKEND: github
2727
BACKEND_URL: https://treehouse-demo-login.proteco.workers.dev
2828

2929
- name: Deploy
3030
uses: JamesIves/github-pages-deploy-action@v4
3131
with:
32-
folder: local/out
32+
folder: web/_out

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/web/out
1+
/web/_out
22
/web/static/lib/treehouse.js
33
/web/static/lib/treehouse.js.map
44
/web/static/lib/treehouse.min.js

‎_config.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import lume from "lume/mod.ts";
2+
import attrs from "npm:markdown-it-attrs";
3+
import jsx from "lume/plugins/jsx_preact.ts";
4+
import nav from "lume/plugins/nav.ts";
5+
import feed from "lume/plugins/feed.ts";
6+
import codeHighlight from "lume/plugins/code_highlight.ts";
7+
import lang_javascript from "https://unpkg.com/@highlightjs/[email protected]/es/languages/javascript.min.js";
8+
import lang_bash from "https://unpkg.com/@highlightjs/[email protected]/es/languages/bash.min.js";
9+
import toc from "https://deno.land/x/lume_markdown_plugins/toc.ts";
10+
11+
import * as esbuild from "https://deno.land/x/[email protected]/mod.js";
12+
13+
let lastBuild = 0;
14+
15+
const site = lume({
16+
src: "./web",
17+
dest: "./web/_out",
18+
server: {
19+
middlewares: [
20+
async (request, next) => {
21+
const url = new URL(request.url);
22+
if (url.pathname === "/lib/treehouse.min.js") {
23+
if (lastBuild < Date.now()-1000) {
24+
await esbuild.build({
25+
entryPoints: ["lib/mod.ts"],
26+
bundle: true,
27+
outfile: "web/static/lib/treehouse.js",
28+
jsxFactory: "m",
29+
sourcemap: true,
30+
format: "esm",
31+
keepNames: true,
32+
// minify: true
33+
});
34+
lastBuild = Date.now();
35+
}
36+
Object.defineProperty(request, "url", {value: request.url.replace(".min", "")});
37+
}
38+
return await next(request);
39+
}
40+
]
41+
}
42+
}, {
43+
markdown: {
44+
plugins: [attrs],
45+
keepDefaultPlugins: true,
46+
}
47+
});
48+
site.copy("static", ".");
49+
50+
site.use(feed({
51+
output: ["/blog/feed.rss", "/blog/feed.json"],
52+
query: "layout=layouts/blog.tsx",
53+
info: {
54+
title: "=site.title",
55+
description: "=site.description",
56+
},
57+
items: {
58+
title: "=title",
59+
},
60+
}));
61+
site.use(toc({ level: 2 }));
62+
site.use(nav());
63+
site.use(jsx());
64+
site.use(codeHighlight({
65+
languages: {
66+
javascript: lang_javascript,
67+
bash: lang_bash,
68+
},
69+
}));
70+
71+
site.filter("formatDate", (value) => new Date(value).toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"}));
72+
73+
site.data("site", {
74+
title: "Treehouse",
75+
description: "An open source note-taking frontend to extend and customize."
76+
});
77+
site.data("backend", JSON.stringify({
78+
name: Deno.env.get("BACKEND") || "browser",
79+
url: Deno.env.get("BACKEND_URL")
80+
}));
81+
82+
export default site;

‎web/bundle.ts ‎bundle.ts

File renamed without changes.

‎deno.json

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
{
22
"compilerOptions": {
3-
"jsxFactory": "m",
4-
"lib": ["deno.ns", "dom"]
5-
},
3+
"jsx": "react-jsx",
4+
"jsxImportSource": "npm:preact"
5+
}
66
"tasks": {
7-
"bundle": "deno run --unstable -A web/bundle.ts",
8-
"generate": "deno run --unstable -A web/generate.ts",
9-
"serve": "deno run --unstable -A --watch web/serve.ts",
7+
"bundle": "deno run --unstable -A ./bundle.ts",
8+
"lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
9+
"build": "deno task lume",
10+
"serve": "deno task lume -s"
1011
},
1112
"imports": {
13+
"lume/": "https://deno.land/x/[email protected]/",
1214
"https://deno.land/std/": "https://deno.land/[email protected]/"
1315
}
1416
}

‎deno.lock

+357-439
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/_components/latest.njk

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div>
2+
{% asyncEach item in nav.menu("/blog").children | sort(true, true, "data.date") %}
3+
<div>
4+
<a href="{{item.data.url}}">{{item.data.title}}</a>
5+
<div class="date">{{item.data.date | formatDate }}</div>
6+
</div>
7+
{% endeach %}
8+
</div>

‎web/_components/toc.njk

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{% if toc.length %}
2+
<ul>
3+
{% for item in toc %}
4+
<li><a href="#{{ item.slug }}">{{ item.text }}</a></li>
5+
{% endfor %}
6+
</ul>
7+
{% endif %}

‎web/_includes/layouts/blog.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export const title = "Blog";
2+
export const active = "blog";
3+
export const heading = "Branching Out";
4+
export const subheading = "Notes from the Treehouse";
5+
export const layout = "layouts/default.tsx";
6+
7+
export default ({title, author, date, children, comp}, filters) => (
8+
<section>
9+
<div class="row justify-center items-start" style="gap: var(--16);">
10+
<article style="width: 768px;">
11+
<h1>{title}</h1>
12+
<div class="author">{author}</div>
13+
<div class="date">{new Date(date).toLocaleDateString('en-us', { year:"numeric", month:"long", day:"numeric"})}</div>
14+
{children}
15+
</article>
16+
<nav class="md:hidden" style="width: 256px;">
17+
<h5>More Blog Posts</h5>
18+
<div dangerouslySetInnerHTML={{"__html": comp.latest() }} />
19+
{/*index("/blog").reverse().map(p =>
20+
<div>
21+
<a href={p.path}>{p.attrs.title}</a>
22+
<div class="date">{new Date(p.attrs.date).toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"})}</div>
23+
</div>
24+
)*/}
25+
</nav>
26+
</div>
27+
</section>
28+
);

‎web/layouts/default.tsx ‎web/_includes/layouts/default.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import {m} from "../deps.ts";
2-
export default {view: ({attrs, children}) => (
1+
export default ({title, site, active, heading, subheading, children}) => (
32
<html>
43
<head>
54
<meta charset="UTF-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<link rel="icon" href="/icon.png" type="image/x-icon" />
87
<link rel="preconnect" href="https://fonts.googleapis.com" />
98
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/themes/default.css" />
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github.min.css" />
1110
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet" />
1211
<link rel="stylesheet" href="/style/site.css" />
12+
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/blog/feed.rss" />
13+
<link rel="alternate" type="application/rss+json" title="JSON Feed" href="/blog/feed.json" />
1314
<script src="/analytics.js"></script>
14-
<title>{attrs.title?`${attrs.title} - ${attrs.site}`:attrs.site}</title>
15+
<title>{title?`${title} - ${site.title}`:site.title}</title>
1516
</head>
16-
<body class={attrs.active}>
17+
<body class={active}>
1718
<header>
1819
<nav class="row">
1920
<a href="/" class="logo">
@@ -23,8 +24,8 @@ export default {view: ({attrs, children}) => (
2324
<span>Treehouse</span>
2425
</a>
2526
<span class="grow"></span>
26-
<a class={`item${(attrs.active==="docs")?" active":""}`} href="/docs">Docs</a>
27-
<a class={`item${(attrs.active==="blog")?" active":""}`} href="/blog">Blog</a>
27+
<a class={`item${(active==="docs")?" active":""}`} href="/docs">Docs</a>
28+
<a class={`item${(active==="blog")?" active":""}`} href="/blog">Blog</a>
2829
<a class="button md:hidden" href="https://github.com/treehousedev/treehouse">
2930
<svg class="icon" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" >
3031
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
@@ -38,8 +39,8 @@ export default {view: ({attrs, children}) => (
3839
</header>
3940
<section class="title sm:hidden">
4041
<div>
41-
<h4>{attrs.heading}</h4>
42-
{attrs.subheading && <div class="subtitle">{attrs.subheading}</div>}
42+
<h4>{heading}</h4>
43+
{subheading && <div class="subtitle">{subheading}</div>}
4344
</div>
4445
</section>
4546

@@ -86,7 +87,6 @@ export default {view: ({attrs, children}) => (
8687
</nav>
8788
</footer>
8889

89-
{(attrs.dev)?<script src="https://deno.land/x/refresh/client.js"></script>:null}
9090
</body>
9191
</html>
92-
)};
92+
);

‎web/_includes/layouts/docs.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const title = "Docs";
2+
export const active = "docs";
3+
export const heading = "Documentation";
4+
export const layout = "layouts/default.tsx";
5+
export default ({toc, url, children, comp}) => (
6+
<section>
7+
<div class="row justify-center items-start sm:stack" style="gap: var(--16);">
8+
<nav style="flex: none; min-width: 256px;">
9+
<h5><a href="/docs/quickstart">Quickstart</a></h5>
10+
{(url==="/docs/quickstart/") && <div dangerouslySetInnerHTML={{"__html": comp.toc({toc}) }} />}
11+
<h5><a href="/docs/user">User Guide</a></h5>
12+
{(url==="/docs/user/") && <div dangerouslySetInnerHTML={{"__html": comp.toc({toc}) }} />}
13+
<h5><a href="/docs/dev">Developer Guide</a></h5>
14+
{(url==="/docs/dev/") && <div dangerouslySetInnerHTML={{"__html": comp.toc({toc}) }} />}
15+
<h5><a href="/docs/project">Project Guide</a></h5>
16+
{(url==="/docs/project/") && <div dangerouslySetInnerHTML={{"__html": comp.toc({toc}) }} />}
17+
</nav>
18+
<article class="grow">
19+
{children}
20+
</article>
21+
</div>
22+
</section>
23+
)

‎web/pages/blog/index.tsx ‎web/blog/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import {m,page} from "../../deps.ts";
2-
export default page({title: "Treehouse"}, ({dev}) => (
1+
export const title = "Treehouse";
2+
export default (data) => (
33
<html>
44
<head>
55
<meta http-equiv="refresh" content="0; url='/blog/influences'" />
66
</head>
77
<body>
88
</body>
99
</html>
10-
))
10+
)

‎web/pages/blog/influences.md ‎web/blog/influences.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Treehouse Influences"
44
author: "Jeff Lindsay"
55
date: "2023-04-20"

‎web/pages/blog/v0.1.0.md ‎web/blog/v0-1-0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Release 0.1.0"
44
author: "Jeff Lindsay"
55
date: "2023-03-03"

‎web/pages/blog/v0.2.0.md ‎web/blog/v0-2-0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Release 0.2.0"
44
author: "Jeff Lindsay"
55
date: "2023-03-27"

‎web/pages/blog/v0.3.0.md ‎web/blog/v0-3-0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Release 0.3.0"
44
author: "Jeff Lindsay"
55
date: "2023-05-17"

‎web/pages/blog/v0.4.0.md ‎web/blog/v0-4-0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Release 0.4.0"
44
author: "Jeff Lindsay"
55
date: "2023-06-19"

‎web/pages/blog/welcome.md ‎web/blog/welcome.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: blog
2+
layout: layouts/blog.tsx
33
title: "Welcome to Treehouse"
44
author: "Jeff Lindsay"
55
date: "2023-02-23"

‎web/pages/demo/index.tsx ‎web/demo/index.njk

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import {m,page} from "../../deps.ts";
2-
export default page({}, ({attrs: {dev, backend}}) => (
31
<html>
42
<head>
53
<meta charset="UTF-8" />
@@ -16,14 +14,13 @@ export default page({}, ({attrs: {dev, backend}}) => (
1614
<title>Treehouse</title>
1715
</head>
1816
<body>
19-
<div style={{textAlign: "center", marginTop: "40vh"}}>
17+
<div style="text-align: center; margin-top: 40vh;">
2018
<div class="lds-ripple"><div></div><div></div></div>
2119
</div>
2220
<script>
23-
window.backend = {JSON.stringify(backend)};
21+
window.backend = {{ backend | safe }};
2422
</script>
2523
<script src="/app/main.js" type="module"></script>
2624

2725
</body>
2826
</html>
29-
));

‎web/deps.ts

-20
This file was deleted.

‎web/pages/docs/dev.md ‎web/docs/dev.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: docs
2+
layout: layouts/docs.tsx
33
---
44
# Developer Guide
55

@@ -38,6 +38,7 @@ The "document" for Treehouse is the Workspace, which is mostly a container for
3838

3939
Most importantly, nodes build a tree-like structure where each node can be extended with components. Components extend the state and functionality of a node. For example, a checkbox component can be added to a node. This gives it a state (checked or not) and allows the UI to render it differently (add a checkbox).
4040

41+
4142
## User Actions
4243

4344
All user performable actions are modeled as commands and registered with a command system. Commands are functions with some extra metadata, like a user displayable name and system identifier. They can be called throughout the system by their system identifier, such as when a user clicks a something.
@@ -48,6 +49,7 @@ Commands can take arguments and usually take at least a single argument called a
4849

4950
In addition to menus, keyboard shortcuts, and UI event handlers, there is a command palette the user can trigger to show all commands that can be run in the current context.
5051

52+
5153
## Workbench UI
5254

5355
### Components
@@ -64,6 +66,7 @@ Most components are explicitly passed a reference to the Workbench, which they c
6466

6567
Our design system is inspired by projects like [Pollen](https://www.pollen.style/), where instead of generating CSS classes from JavaScript like Tailwind (which requires a compile step and Node.js based tooling), we simply use and override CSS custom properties. This means they can be used in inline styles as well. We also have a subset of common Tailwind utility classes defined, though using the custom properties.
6668

69+
6770
## Backend Adapters
6871

6972
Backend adapters are classes that implement the backend API for a given backend. If you wanted to make your own custom backend, you would implement your own backend adapter

0 commit comments

Comments
 (0)