Skip to content

Commit 6eeb7d5

Browse files
hyp3rflowhyp3rflow
committed
Add docs
1 parent 1e73d56 commit 6eeb7d5

File tree

12 files changed

+523
-12
lines changed

12 files changed

+523
-12
lines changed

‎components/DocsSidebar.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/** @jsx h */
2+
3+
import { h } from 'preact';
4+
import { apply, tw } from '@twind';
5+
import {
6+
CATEGORIES,
7+
TableOfContentsCategory,
8+
TableOfContentsCategoryEntry,
9+
} from '../docs/mod.ts';
10+
11+
export default function DocsSidebar(props: { path: string }) {
12+
return (
13+
<ol class={tw`list-decimal list-inside font-semibold` + ' nested'}>
14+
{CATEGORIES.map(category => (
15+
<SidebarCategory path={props.path} category={category} />
16+
))}
17+
</ol>
18+
);
19+
}
20+
21+
const link = apply`text(gray-300 hover:gray-200)`;
22+
const linkActive = apply`text(orange-400 hover:orange-300)`;
23+
24+
export function SidebarCategory(props: {
25+
path: string;
26+
category: TableOfContentsCategory;
27+
}) {
28+
const outerItem = tw`my-2 block`;
29+
const innerList = tw`pl-4 list-decimal` + ' nested';
30+
31+
const { title, href, entries } = props.category;
32+
const outerLink = tw`${href == props.path ? linkActive : link} font-bold`;
33+
34+
return (
35+
<li class={outerItem}>
36+
<a href={href} class={outerLink}>
37+
{title}
38+
</a>
39+
{entries.length > 0 && (
40+
<ol class={innerList}>
41+
{entries.map(entry => (
42+
<SidebarEntry path={props.path} entry={entry} />
43+
))}
44+
</ol>
45+
)}
46+
</li>
47+
);
48+
}
49+
50+
export function SidebarEntry(props: {
51+
path: string;
52+
entry: TableOfContentsCategoryEntry;
53+
}) {
54+
const innerItem = tw`my-0.5`;
55+
56+
const { title, href } = props.entry;
57+
const innerLink = tw`${href == props.path ? linkActive : link} font-normal`;
58+
return (
59+
<li class={innerItem}>
60+
<a href={href} class={innerLink}>
61+
{title}
62+
</a>
63+
</li>
64+
);
65+
}

‎components/Navbar.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/** @jsx h */
2+
3+
import { h } from 'preact';
4+
import { tw } from '@twind';
5+
6+
interface NavbarProps {
7+
active: string;
8+
}
9+
10+
export default function Navbar({ active }: NavbarProps) {
11+
const items = [
12+
{
13+
name: 'Home',
14+
href: '/',
15+
},
16+
{
17+
name: 'Docs',
18+
href: '/docs',
19+
},
20+
{ name: 'Github', href: 'https://github.com/pbkit' },
21+
];
22+
23+
return (
24+
<nav class={tw`py-2`}>
25+
<div
26+
class={tw`flex items-center justify-between max-w-screen-lg mx-auto`}
27+
>
28+
<a class={tw`flex items-center gap-2 mx-4 tracking-tight`} href="/">
29+
<p class={tw`text-2xl`}>🌯</p>
30+
<span
31+
class={tw`text-transparent bg-clip-text bg-gradient-to-br from-amber-200 to-red-600 animate-gradient-x bg-repeat font-extrabold text-2xl`}
32+
>
33+
WRP
34+
</span>
35+
</a>
36+
<ul class={tw`flex justify-end gap-8 mx-4`}>
37+
{items.map(item => (
38+
<li>
39+
<a
40+
href={item.href}
41+
class={tw`text-gray-100 hover:underline ${
42+
active == item.href ? 'font-bold' : ''
43+
}`}
44+
>
45+
{item.name}
46+
</a>
47+
</li>
48+
))}
49+
</ul>
50+
</div>
51+
</nav>
52+
);
53+
}

‎docs/introduction/index.en.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
asdfdasf

‎docs/introduction/index.ko.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
WRP는 서로 다른 클라이언트가 타입-안전하게 통신할 수 있도록 설계된 라이브러리입니다.
2+
3+
기존의 모바일-웹뷰 간 통신에는 다음과 같은 문제점이 있습니다.
4+
5+
- 웹뷰의 JavaScript 환경에서 코드 조각을 실행하거나 전역 객체를 등록하는 저수준의 API를 사용해야 합니다.
6+
- 모바일과 웹뷰의 생명 주기가 다름으로 인해 통신이 가능한 상황인지 알기 어렵습니다.
7+
- 모바일과 웹뷰의 버전이 다름으로 인해 어떤 기능이 사용 가능한지 서로 알기 힘듭니다.
8+
- 전달하는 메세지에 대한 타입을 정할 수 없어 휴먼 에러의 가능성이 높습니다.
9+
10+
WRP는 위의 문제점을 아래와 같이 해결합니다.
11+
12+
- 저수준의 API를 추상화하고, Protocol Buffers를 사용하여 고수준의 클라이언트/서버 API를 제공합니다.
13+
- 모바일과 웹뷰의 생명 주기에 따라 자동으로 자원이 초기화되고 재할당됩니다.
14+
- WRP에서는 요청자와 응답자가 각각 클라이언트, 서버로 나뉘며, 서버는 연결 수립 시 제공하는 RPC에 대한 정보를 제공합니다.
15+
- Protocol Buffers를 이용하여 메세지와 RPC의 타입을 미리 정하고 이에 따른 타입이 자동으로 생성됩니다.
16+
17+
WRP는 TypeScript(React), Swift, Kotlin 라이브러리를 제공하며, Protocol Buffers를 이용한 코드 생성은
18+
pbkit CLI를 통해서 이루어집니다.

‎docs/mod.ts

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import TOC from '../docs/toc.json' assert { type: 'json' };
2+
import { titleCase } from 'https://deno.land/x/case@2.1.1/mod.ts';
3+
import { walk } from 'https://deno.land/std@0.130.0/fs/mod.ts';
4+
import * as path from 'https://deno.land/std@0.130.0/path/mod.ts';
5+
6+
interface ITOC {
7+
[category: string]: string[];
8+
}
9+
10+
type RawTableOfContents = Record<string, RawTableOfContentsEntry>;
11+
12+
interface RawTableOfContentsEntry {
13+
title: string;
14+
pages: [string, string][];
15+
}
16+
17+
export interface TableOfContentsEntry {
18+
slug: string;
19+
title: string;
20+
category?: string;
21+
href: string;
22+
file: {
23+
en: string;
24+
ko: string;
25+
};
26+
}
27+
28+
export interface TableOfContentsCategory {
29+
title: string;
30+
href: string;
31+
entries: TableOfContentsCategoryEntry[];
32+
}
33+
34+
export interface TableOfContentsCategoryEntry {
35+
title: string;
36+
href: string;
37+
}
38+
39+
export const TABLE_OF_CONTENTS: Record<string, TableOfContentsEntry> = {};
40+
export const CATEGORIES: TableOfContentsCategory[] = [];
41+
42+
const DOCS_DIR = './docs';
43+
const PARENT_NAME = 'index';
44+
45+
const RAW_TOC: RawTableOfContents = Object.keys(TOC).reduce<RawTableOfContents>(
46+
(prev, category) => {
47+
return {
48+
...prev,
49+
[category]: {
50+
title: titleCase(category),
51+
pages: (TOC as ITOC)[category].map(page => [page, titleCase(page)]),
52+
},
53+
};
54+
},
55+
{} as RawTableOfContents
56+
);
57+
for await (const entry of walk(DOCS_DIR, { exts: ['.md'] })) {
58+
const relativePath = path.relative(DOCS_DIR, entry.path);
59+
const relativeDir = path.dirname(relativePath);
60+
const name = path.parse(entry.name).name.split('.')[0];
61+
if (relativeDir === '.') continue;
62+
if (!RAW_TOC[relativeDir]) {
63+
RAW_TOC[relativeDir] = {
64+
title: titleCase(relativeDir),
65+
pages: name === PARENT_NAME ? [] : [[name, titleCase(name)]],
66+
};
67+
} else {
68+
if (
69+
name !== PARENT_NAME &&
70+
!RAW_TOC[relativeDir].pages.find(([page]) => page === name)
71+
) {
72+
RAW_TOC[relativeDir].pages.push([name, titleCase(name)]);
73+
}
74+
}
75+
}
76+
77+
for (const parent in RAW_TOC) {
78+
const rawEntry = RAW_TOC[parent];
79+
const href = `/docs/${parent}`;
80+
const file = {
81+
en: `docs/${parent}/index.en.md`,
82+
ko: `docs/${parent}/index.ko.md`,
83+
};
84+
const entry = {
85+
slug: parent,
86+
title: rawEntry.title,
87+
href,
88+
file,
89+
};
90+
TABLE_OF_CONTENTS[parent] = entry;
91+
const category: TableOfContentsCategory = {
92+
title: rawEntry.title,
93+
href,
94+
entries: [],
95+
};
96+
CATEGORIES.push(category);
97+
if (rawEntry.pages) {
98+
for (const [id, title] of rawEntry.pages) {
99+
const slug = `${parent}/${id}`;
100+
const href = `/docs/${slug}`;
101+
const entry = {
102+
slug,
103+
title,
104+
category: parent,
105+
href,
106+
file: {
107+
en: `docs/${slug}.en.md`,
108+
ko: `docs/${slug}.ko.md`,
109+
},
110+
};
111+
TABLE_OF_CONTENTS[slug] = entry;
112+
category.entries.push({
113+
title,
114+
href,
115+
});
116+
}
117+
}
118+
}
119+
120+
export const SLUGS = Object.keys(TABLE_OF_CONTENTS);

‎docs/toc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"introduction": []
3+
}

‎fresh.gen.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
// This file SHOULD be checked into source version control.
33
// This file is automatically updated during development when running `dev.ts`.
44

5-
import * as $0 from "./routes/index.tsx";
5+
import * as $0 from "./routes/docs/[...slug].tsx";
6+
import * as $1 from "./routes/gfm.css.ts";
7+
import * as $2 from "./routes/index.tsx";
68

79
const manifest = {
810
routes: {
9-
"./routes/index.tsx": $0,
11+
"./routes/docs/[...slug].tsx": $0,
12+
"./routes/gfm.css.ts": $1,
13+
"./routes/index.tsx": $2,
1014
},
1115
islands: {},
1216
baseUrl: import.meta.url,

‎import_map.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"preact/": "https://esm.sh/preact@10.8.2/",
66
"preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?deps=preact@10.8.2",
77
"@twind": "./utils/twind.ts",
8+
"@markdown": "./utils/markdown.ts",
89
"twind": "https://esm.sh/twind@0.16.17",
910
"twind/": "https://esm.sh/twind@0.16.17/"
1011
}

0 commit comments

Comments
 (0)