Skip to content

Commit 351f690

Browse files
xiaoxinghuxiaoxinghu
authored
build static website with orga-build (#240)
* add node-loader and orga-build * use tab * add esbuild * add hooks to build * support `_` prefix * refactor use my own iteration for better control * add docs (which is the new website) * update dependencies * add info to package.json * add changeset
1 parent 81d496c commit 351f690

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1999
-2798
lines changed

‎.changeset/twenty-windows-sip.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@orgajs/node-loader': major
3+
'@orgajs/build': major
4+
'@orgajs/esbuild': major
5+
'@orgajs/docs': major
6+
'@orgajs/orgx': minor
7+
---
8+
9+
introduce @orgajs/node-loader, @orgajs/esbuild, @orgajs/build
10+
11+
- @orgajs/node-loader : the nodejs loader for org-mode files
12+
- @orgajs/esbuild : esbuild plugin
13+
- @orgajs/build : static site generator, a.k.a orga-build

‎.editorconfig

+1-20
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,11 @@ end_of_line = lf
55
charset = utf-8
66
trim_trailing_whitespace = true
77
insert_final_newline = true
8+
indent_style = tab
89

910
[vcbuild.bat]
1011
end_of_line = crlf
1112

12-
[*.{js,cjs,mjs,jsx,ts,tsx,css,json,astro,html}]
13-
indent_style = space
14-
indent_size = 2
15-
16-
[{*.json,*.yml}]
17-
indent_style = space
18-
indent_size = 2
19-
20-
[src/**.{h,cc}]
21-
indent_style = space
22-
indent_size = 2
23-
24-
[test/*.py]
25-
indent_style = space
26-
indent_size = 2
27-
28-
[configure]
29-
indent_style = space
30-
indent_size = 2
31-
3213
[Makefile]
3314
indent_style = tab
3415
indent_size = 8

‎.eslintrc.js

+67-67
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,69 @@
11
module.exports = {
2-
root: true,
3-
env: {
4-
node: true,
5-
browser: true,
6-
es6: true,
7-
},
8-
extends: [
9-
'eslint:recommended',
10-
'plugin:react/recommended',
11-
'plugin:import/recommended',
12-
'plugin:import/typescript',
13-
],
14-
parserOptions: {
15-
ecmaVersion: 2020,
16-
sourceType: 'module',
17-
ecmaFeatures: {
18-
jsx: true,
19-
},
20-
},
21-
settings: {
22-
'import/resolver': {
23-
node: {
24-
extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
25-
paths: ['node_modules/', 'node_modules/@types/'],
26-
},
27-
typescript: {
28-
alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
29-
project: 'packages/*/tsconfig.json',
30-
},
31-
},
32-
'import/parsers': {
33-
'@typescript-eslint/parser': ['.ts', '.tsx'],
34-
},
35-
},
36-
rules: {
37-
'import/no-extraneous-dependencies': ['warn'],
38-
semi: ['error', 'never'],
39-
'react/react-in-jsx-scope': 'off',
40-
'react/prop-types': 'off',
41-
},
42-
overrides: [
43-
{
44-
files: ['**.ts', '**.tsx'],
45-
parser: '@typescript-eslint/parser',
46-
extends: [
47-
'plugin:@typescript-eslint/recommended',
48-
'plugin:import/errors',
49-
'plugin:import/warnings',
50-
'plugin:import/typescript',
51-
],
52-
parserOptions: {
53-
ecmaVersion: 2018,
54-
sourceType: 'module',
55-
ecmaFeatures: {
56-
jsx: true,
57-
},
58-
},
59-
plugins: ['@typescript-eslint', 'import'],
60-
rules: {
61-
'no-dupe-class-members': 'off',
62-
'no-undef': 'off',
63-
// TODO: remove this eventually
64-
'@typescript-eslint/ban-ts-comment': 'off',
65-
'@typescript-eslint/no-empty-function': 'off',
66-
},
67-
},
68-
],
2+
root: true,
3+
env: {
4+
node: true,
5+
browser: true,
6+
es6: true,
7+
},
8+
extends: [
9+
'eslint:recommended',
10+
'plugin:react/recommended',
11+
'plugin:import/recommended',
12+
'plugin:import/typescript',
13+
],
14+
parserOptions: {
15+
ecmaVersion: 2022,
16+
sourceType: 'module',
17+
ecmaFeatures: {
18+
jsx: true,
19+
},
20+
},
21+
settings: {
22+
'import/resolver': {
23+
node: {
24+
extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
25+
paths: ['node_modules/', 'node_modules/@types/'],
26+
},
27+
typescript: {
28+
alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
29+
project: 'packages/*/tsconfig.json',
30+
},
31+
},
32+
'import/parsers': {
33+
'@typescript-eslint/parser': ['.ts', '.tsx'],
34+
},
35+
},
36+
rules: {
37+
'import/no-extraneous-dependencies': ['warn'],
38+
semi: ['error', 'never'],
39+
'react/react-in-jsx-scope': 'off',
40+
'react/prop-types': 'off',
41+
},
42+
overrides: [
43+
{
44+
files: ['**.ts', '**.tsx'],
45+
parser: '@typescript-eslint/parser',
46+
extends: [
47+
'plugin:@typescript-eslint/recommended',
48+
'plugin:import/errors',
49+
'plugin:import/warnings',
50+
'plugin:import/typescript',
51+
],
52+
parserOptions: {
53+
ecmaVersion: 2018,
54+
sourceType: 'module',
55+
ecmaFeatures: {
56+
jsx: true,
57+
},
58+
},
59+
plugins: ['@typescript-eslint', 'import'],
60+
rules: {
61+
'no-dupe-class-members': 'off',
62+
'no-undef': 'off',
63+
// TODO: remove this eventually
64+
'@typescript-eslint/ban-ts-comment': 'off',
65+
'@typescript-eslint/no-empty-function': 'off',
66+
},
67+
},
68+
],
6969
}

‎docs

-1
This file was deleted.

‎docs/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
out

‎docs/_components.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function Notice({ title, children }: { children: React.ReactNode }) {
2+
return (
3+
<div className="rounded-md bg-yellow-50 p-2 border">
4+
<div className="ml-3">
5+
{title && (
6+
<h3 className="text-sm font-medium text-yellow-800">{title}</h3>
7+
)}
8+
<div className="mt-2 text-sm text-yellow-700">
9+
<p>{children}</p>
10+
</div>
11+
</div>
12+
</div>
13+
)
14+
}

‎docs/_layout.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { isOrgContent } from '@orgajs/orgx'
2+
interface LayoutProps {
3+
title: string
4+
children: React.ReactNode
5+
}
6+
7+
export default function Layout({ title, pages, children }: LayoutProps) {
8+
return (
9+
<html>
10+
<head>
11+
<title>{title}</title>
12+
<link href="/style.css" rel="stylesheet" />
13+
</head>
14+
<body className="min-h-screen flex flex-col">
15+
<nav className="p-2 bg-gray-100 border-b">
16+
<ol className="flex gap-4">
17+
<li>
18+
<a href="/">Orga</a>
19+
</li>
20+
<li>
21+
<a href="/guides">Guides</a>
22+
</li>
23+
<li>
24+
<a href="/advanced">advanced</a>
25+
</li>
26+
<li>
27+
<a href="/playground">Playground</a>
28+
</li>
29+
</ol>
30+
</nav>
31+
<main className="flex-1">
32+
{isOrgContent(children) ? <Content>{children}</Content> : children}
33+
</main>
34+
<footer className="p-4 bg-gray-200">
35+
<p>© 2021 Orga</p>
36+
</footer>
37+
</body>
38+
</html>
39+
)
40+
}
41+
42+
export function DocumentLayout({ title, pages, children }) {
43+
return (
44+
<div className="flex h-full">
45+
<aside className="w-64 bg-gray-50 p-4 border-r">
46+
<ul>
47+
{pages
48+
.sort((a, b) => a.position - b.position)
49+
.map((page) => (
50+
<li key={page.slug}>
51+
<a
52+
className="block p-2 hover:bg-gray-300"
53+
href={`${page.slug}`}
54+
>
55+
{page.title}
56+
</a>
57+
</li>
58+
))}
59+
</ul>
60+
</aside>
61+
<Content>
62+
<h1>{title}</h1>
63+
{children}
64+
</Content>
65+
</div>
66+
)
67+
}
68+
69+
function Content({ children }) {
70+
return <article className="prose p-4">{children}</article>
71+
}

‎docs/advanced/_layout.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { DocumentLayout } from '../_layout.tsx'
2+
export default DocumentLayout

‎docs/advanced/api.org

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#+title: API
2+
#+published: true
3+
#+position: 201
4+
5+
#+jsx: <Notice>This page is a WIP</Notice>
6+
7+
Describe the API.

‎docs/advanced/ast.org

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#+title: AST
2+
#+published: true
3+
#+position: 202
4+
5+
#+jsx: <Notice>This page is a WIP</Notice>
6+
7+
Orga Abstract Syntax Tree.

‎docs/advanced/index.org

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#+title: Advanced
2+
#+published: true
3+
#+position: 200
4+
5+
#+jsx: <Notice>This page is a WIP</Notice>

‎docs/advanced/latex.org

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
#+title: Latex Support
2+
#+published: true
3+
#+position: 203
4+
5+
** Inline Math
6+
Orgajs supports inline math with latex math delimiters.
7+
8+
#+begin_src org
9+
If $$a^2=b$$ and \( b=2 \), then the solution must be either $$ a=+\sqrt{2} $$ or \[ a=-\sqrt{2} \].
10+
#+end_src
11+
12+
With be rendered as follows.
13+
14+
If $$a^2=b$$ and \( b=2 \), then the solution must be either $$ a=+\sqrt{2} $$ or \[ a=-\sqrt{2} \].
15+
16+
** Latex Block
17+
18+
It also supports =\begin= commands.
19+
20+
#+begin_src org
21+
\begin{equation}
22+
x=\sqrt{b}
23+
\end{equation}
24+
#+end_src
25+
26+
Will be rendered
27+
28+
\begin{equation}
29+
x=\sqrt{b}
30+
\end{equation}
31+
32+
** Styling
33+
34+
=@orgajs/rehype-latex= is the plugin for handling latex. It uses [[https://katex.org][katex]] underneath, so you will have to add the css link yourself in your website. Add the following to the =head=.
35+
36+
#+begin_src html
37+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-ysFyB7Is//Q1JNgERb0bLJokXKM8eWJsjEutGvthoHtBilHWgbdmbYkQZdwCIGIq" crossorigin="anonymous">
38+
#+end_src

‎docs/contribute.org

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#+title: Contribute
2+
#+published: true
3+
#+position: 300
4+
5+
#+jsx: <Notice>This page is a WIP</Notice>
6+
7+
* Need Some Inspiration?
8+
9+
You can find tons of plugins for remark, since they work in similar ways, we can steal some ideas [[https://github.com/remarkjs/remark/blob/main/doc/plugins.md#creating-plugins][here]] and [[https://github.com/remarkjs/awesome-remark][there]], maybe even use them directly.

‎docs/guides/_layout.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { DocumentLayout } from '../_layout.tsx'
2+
export default DocumentLayout

‎docs/guides/gatsby.org

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
#+title: Gatsby
2+
#+published: true
3+
#+position: 102
4+
5+
#+jsx: <Notice title="DEPRECATED">I'm no longer actively maintaining this Gatsby integration due to the rapid pace of frontend development. However, the source code remains available for those who wish to adapt and maintain it independently. You can refer to the orgajs project for examples of advanced usage.</Notice>
6+
7+
* Create Gatsby Project
8+
9+
Create a new gatsby website following the [[https://www.gatsbyjs.com/get-started/][documentation]]. Or simply
10+
11+
#+begin_src sh
12+
npx gatsby new gatsby-site
13+
#+end_src
14+
15+
* Installation
16+
17+
Install packages.
18+
19+
#+begin_src sh
20+
cd gatsby-site
21+
yarn add gatsby-plugin-orga @orgajs/react @orgajs/loader
22+
#+end_src
23+
24+
* Configuration
25+
26+
Add =gatsby-plugin-orga= to =gatsby-config.js=.
27+
28+
#+begin_src javascript
29+
module.exports = {
30+
plugins: ['gatsby-plugin-orga']
31+
}
32+
#+end_src
33+
34+
Add a org file in folder =src/pages= directory. It should work out of the box.
35+
36+
For more advanced usage, please checkout code of [[https://github.com/orgapp/orgajs][orgajs project]], which generate this website via =gatsby-theme-orga-docs=.

0 commit comments

Comments
 (0)