Skip to content

Commit 7af1657

Browse files
barelyhumanbarelyhuman
committed
initial
0 parents  commit 7af1657

File tree

5 files changed

+193
-0
lines changed

5 files changed

+193
-0
lines changed

‎content/essentials.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## Essentials
2+
3+
### Routers
4+
5+
- [molefrog/wouter](https://github.com/molefrog/wouter) - A minimalist-friendly ~2.1KB routing for React and Preact
6+
7+
### State Management
8+
- [preactjs/signals](https://github.com/preactjs/signals) - Manage state with style in every framework
9+
10+
### Bundlers
11+
12+
- [parcel-bundler/parcel](https://github.com/parcel-bundler/parcel) - The zero configuration build tool for the web. 📦🚀
13+
- [vitejs/vite](https://github.com/vitejs/vite) - Next generation frontend tooling. It's fast!
14+

‎content/introduction.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Introduction
2+
3+
**PreachJS** is a world where modules and libraries come together to form the [Preact ecosystem](https://preactjs.com/)
4+
5+

‎index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>PreachJS</title>
7+
</head>
8+
<body class="!block" style="display: none">
9+
<div class="mx-auto max-w-4xl p-2">
10+
<header class="flex flex-col justify-center h-[400px]">
11+
<h1 class="font-semibold text-2xl">PreachJS</h1>
12+
<p>
13+
<small>We make tiny things</small>
14+
</p>
15+
</header>
16+
<main class="flex gap-10">
17+
<aside id="sidebar" class="flex-1 text-sm"></aside>
18+
<article id="article" class="flex-2 prose text-zinc-700"></article>
19+
</main>
20+
</div>
21+
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@twind/core": "https://ga.jspm.io/npm:@twind/[email protected]/core.js",
26+
"@twind/preset-autoprefix": "https://ga.jspm.io/npm:@twind/[email protected]/preset-autoprefix.js",
27+
"@twind/preset-tailwind": "https://ga.jspm.io/npm:@twind/[email protected]/preset-tailwind.js",
28+
"@twind/preset-typography": "https://ga.jspm.io/npm:@twind/[email protected]/preset-typography.js",
29+
"htm": "https://ga.jspm.io/npm:[email protected]/dist/htm.module.js",
30+
"htm/preact": "https://ga.jspm.io/npm:[email protected]/preact/index.module.js",
31+
"marked": "https://ga.jspm.io/npm:[email protected]/lib/marked.esm.js",
32+
"preact": "https://ga.jspm.io/npm:[email protected]/dist/preact.module.js",
33+
"preact/hooks": "https://ga.jspm.io/npm:[email protected]/hooks/dist/hooks.module.js"
34+
},
35+
"scopes": {
36+
"https://ga.jspm.io/": {
37+
"style-vendorizer": "https://ga.jspm.io/npm:[email protected]/dist/esm/bundle.min.mjs",
38+
"preact": "https://ga.jspm.io/npm:[email protected]/dist/preact.module.js"
39+
}
40+
}
41+
}
42+
</script>
43+
<script
44+
async
45+
src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"
46+
crossorigin="anonymous"
47+
></script>
48+
<script type="module" src="/styles.js"></script>
49+
<script type="module" src="/main.js"></script>
50+
</body>
51+
</html>

‎main.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { marked } from "marked";
2+
import { html, render } from "htm/preact";
3+
import { useState, useEffect } from "preact/hooks";
4+
5+
const sideBar = {
6+
introduction: {
7+
order: 1,
8+
label: "Introduction",
9+
source: "/content/introduction",
10+
key: "introduction",
11+
},
12+
essentials: {
13+
order: 2,
14+
label: "Essentials",
15+
source: "/content/essentials",
16+
key: "essentials",
17+
},
18+
};
19+
20+
main();
21+
22+
marked.use({ renderer: customHeadingRenderer() });
23+
24+
async function main() {
25+
const contentRoot = document.querySelector("#article");
26+
const sidebarRoot = document.querySelector("#sidebar");
27+
28+
contentRoot.innerHTML = "";
29+
sidebarRoot.innerHTML = "";
30+
31+
render(
32+
html`<${Sidebar}
33+
items="${Object.values(sideBar).sort((x, y) => x.order - y.order)}"
34+
/>`,
35+
sidebarRoot
36+
);
37+
38+
const promiseChain = Object.entries(sideBar)
39+
.sort((x, y) => x[1].order - y[1].order)
40+
.map(async (entry, index, source) => {
41+
const [key, value] = entry;
42+
fetch(`${value.source}.md`).then(async (d) => {
43+
if (!d.ok) {
44+
return;
45+
}
46+
const content = await d.text();
47+
let layoutSpacing = [];
48+
if (value.order > 1) {
49+
layoutSpacing.push("mt-12 pt-12");
50+
} else {
51+
layoutSpacing.push("mt-0 pt-0");
52+
}
53+
if (source.length - 1 == index) {
54+
layoutSpacing.push("pb-12 mb-12");
55+
}
56+
contentRoot.innerHTML += `<section id="${key}" class="flex flex-col ${layoutSpacing
57+
.filter(Boolean)
58+
.join(" ")}">
59+
${await marked(content, {})}
60+
</section>`;
61+
});
62+
});
63+
await promiseChain.reduce((acc, item) => {
64+
return acc.then((_) => item);
65+
}, Promise.resolve());
66+
}
67+
68+
function Sidebar({ items = [] } = {}) {
69+
const [activeKey, setActiveKey] = useState(Object.keys(sideBar)[0]);
70+
71+
useEffect(() => {
72+
const hash = window.location.hash.replace(/^#/, "");
73+
74+
if (hash != activeKey) {
75+
setActiveKey(hash.replace(/^#/, ""));
76+
}
77+
}, []);
78+
79+
return html`
80+
<ul class="sticky top-[50px] flex flex-col gap-4">
81+
${items.map(
82+
(i) =>
83+
html`<${SidebarItem}
84+
item=${i}
85+
active=${i.key == activeKey}
86+
onPress=${() => setActiveKey(i.key)}
87+
/>`
88+
)}
89+
</ul>
90+
`;
91+
}
92+
93+
function SidebarItem({ item, active, onPress }) {
94+
return html`<li>
95+
<a
96+
href="#${item.key}"
97+
onClick=${onPress}
98+
class="text-zinc-600 hover:underline hover:text-black underline-offset-4 ${active
99+
? "underline !text-black"
100+
: ""}"
101+
>${item.label}</a
102+
>
103+
</li>`;
104+
}
105+
106+
function customHeadingRenderer() {
107+
return {
108+
heading(text, level) {
109+
return `<h${level} class="p-0 m-0 pb-4">${text}</h${level}>`;
110+
},
111+
paragraph(text) {
112+
return `<p class="pt-4">${text}</p>`;
113+
},
114+
};
115+
}

‎styles.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as twind from "@twind/core";
2+
import PresetAutoprefix from "@twind/preset-autoprefix";
3+
import PresetTailwind from "@twind/preset-tailwind";
4+
import PresetTypo from "@twind/preset-typography";
5+
6+
twind.install({
7+
presets: [PresetAutoprefix(), PresetTailwind(), PresetTypo()],
8+
});

0 commit comments

Comments
 (0)