build static website with orga-build

.changeset/twenty-windows-sip.md

@@ -0,0 +1,13 @@
+---
+'@orgajs/node-loader': major
+'@orgajs/build': major
+'@orgajs/esbuild': major
+'@orgajs/docs': major
+'@orgajs/orgx': minor
+---
+
+introduce @orgajs/node-loader, @orgajs/esbuild, @orgajs/build
+
+- @orgajs/node-loader : the nodejs loader for org-mode files
+- @orgajs/esbuild : esbuild plugin
+- @orgajs/build : static site generator, a.k.a orga-build

.editorconfig

@@ -5,30 +5,11 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+indent_style = tab
 
 [vcbuild.bat]
 end_of_line = crlf
 
-[*.{js,cjs,mjs,jsx,ts,tsx,css,json,astro,html}]
-indent_style = space
-indent_size = 2
-
-[{*.json,*.yml}]
-indent_style = space
-indent_size = 2
-
-[src/**.{h,cc}]
-indent_style = space
-indent_size = 2
-
-[test/*.py]
-indent_style = space
-indent_size = 2
-
-[configure]
-indent_style = space
-indent_size = 2
-
 [Makefile]
 indent_style = tab
 indent_size = 8

.eslintrc.js

@@ -1,69 +1,69 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-    browser: true,
-    es6: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
-        paths: ['node_modules/', 'node_modules/@types/'],
-      },
-      typescript: {
-        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
-        project: 'packages/*/tsconfig.json',
-      },
-    },
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
-  },
-  rules: {
-    'import/no-extraneous-dependencies': ['warn'],
-    semi: ['error', 'never'],
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-  },
-  overrides: [
-    {
-      files: ['**.ts', '**.tsx'],
-      parser: '@typescript-eslint/parser',
-      extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:import/errors',
-        'plugin:import/warnings',
-        'plugin:import/typescript',
-      ],
-      parserOptions: {
-        ecmaVersion: 2018,
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      plugins: ['@typescript-eslint', 'import'],
-      rules: {
-        'no-dupe-class-members': 'off',
-        'no-undef': 'off',
-        // TODO: remove this eventually
-        '@typescript-eslint/ban-ts-comment': 'off',
-        '@typescript-eslint/no-empty-function': 'off',
-      },
-    },
-  ],
+	root: true,
+	env: {
+		node: true,
+		browser: true,
+		es6: true,
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:import/recommended',
+		'plugin:import/typescript',
+	],
+	parserOptions: {
+		ecmaVersion: 2022,
+		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
+				paths: ['node_modules/', 'node_modules/@types/'],
+			},
+			typescript: {
+				alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+				project: 'packages/*/tsconfig.json',
+			},
+		},
+		'import/parsers': {
+			'@typescript-eslint/parser': ['.ts', '.tsx'],
+		},
+	},
+	rules: {
+		'import/no-extraneous-dependencies': ['warn'],
+		semi: ['error', 'never'],
+		'react/react-in-jsx-scope': 'off',
+		'react/prop-types': 'off',
+	},
+	overrides: [
+		{
+			files: ['**.ts', '**.tsx'],
+			parser: '@typescript-eslint/parser',
+			extends: [
+				'plugin:@typescript-eslint/recommended',
+				'plugin:import/errors',
+				'plugin:import/warnings',
+				'plugin:import/typescript',
+			],
+			parserOptions: {
+				ecmaVersion: 2018,
+				sourceType: 'module',
+				ecmaFeatures: {
+					jsx: true,
+				},
+			},
+			plugins: ['@typescript-eslint', 'import'],
+			rules: {
+				'no-dupe-class-members': 'off',
+				'no-undef': 'off',
+				// TODO: remove this eventually
+				'@typescript-eslint/ban-ts-comment': 'off',
+				'@typescript-eslint/no-empty-function': 'off',
+			},
+		},
+	],
 }

docs/.gitignore

@@ -0,0 +1 @@
+out

docs/_components.tsx

@@ -0,0 +1,14 @@
+export function Notice({ title, children }: { children: React.ReactNode }) {
+	return (
+		<div className="rounded-md bg-yellow-50 p-2 border">
+			<div className="ml-3">
+				{title && (
+					<h3 className="text-sm font-medium text-yellow-800">{title}</h3>
+				)}
+				<div className="mt-2 text-sm text-yellow-700">
+					<p>{children}</p>
+				</div>
+			</div>
+		</div>
+	)
+}

docs/_layout.tsx

@@ -0,0 +1,71 @@
+import { isOrgContent } from '@orgajs/orgx'
+interface LayoutProps {
+	title: string
+	children: React.ReactNode
+}
+
+export default function Layout({ title, pages, children }: LayoutProps) {
+	return (
+		<html>
+			<head>
+				<title>{title}</title>
+				<link href="/style.css" rel="stylesheet" />
+			</head>
+			<body className="min-h-screen flex flex-col">
+				<nav className="p-2 bg-gray-100 border-b">
+					<ol className="flex gap-4">
+						<li>
+							<a href="/">Orga</a>
+						</li>
+						<li>
+							<a href="/guides">Guides</a>
+						</li>
+						<li>
+							<a href="/advanced">advanced</a>
+						</li>
+						<li>
+							<a href="/playground">Playground</a>
+						</li>
+					</ol>
+				</nav>
+				<main className="flex-1">
+					{isOrgContent(children) ? <Content>{children}</Content> : children}
+				</main>
+				<footer className="p-4 bg-gray-200">
+					<p>© 2021 Orga</p>
+				</footer>
+			</body>
+		</html>
+	)
+}
+
+export function DocumentLayout({ title, pages, children }) {
+	return (
+		<div className="flex h-full">
+			<aside className="w-64 bg-gray-50 p-4 border-r">
+				<ul>
+					{pages
+						.sort((a, b) => a.position - b.position)
+						.map((page) => (
+							<li key={page.slug}>
+								<a
+									className="block p-2 hover:bg-gray-300"
+									href={`${page.slug}`}
+								>
+									{page.title}
+								</a>
+							</li>
+						))}
+				</ul>
+			</aside>
+			<Content>
+				<h1>{title}</h1>
+				{children}
+			</Content>
+		</div>
+	)
+}
+
+function Content({ children }) {
+	return <article className="prose p-4">{children}</article>
+}

docs/advanced/_layout.tsx

@@ -0,0 +1,2 @@
+import { DocumentLayout } from '../_layout.tsx'
+export default DocumentLayout

docs/advanced/api.org

@@ -0,0 +1,7 @@
+#+title: API
+#+published: true
+#+position: 201
+
+#+jsx: <Notice>This page is a WIP</Notice>
+
+Describe the API.

docs/advanced/ast.org

@@ -0,0 +1,7 @@
+#+title: AST
+#+published: true
+#+position: 202
+
+#+jsx: <Notice>This page is a WIP</Notice>
+
+Orga Abstract Syntax Tree.

docs/advanced/index.org

@@ -0,0 +1,5 @@
+#+title: Advanced
+#+published: true
+#+position: 200
+
+#+jsx: <Notice>This page is a WIP</Notice>

docs/advanced/latex.org

@@ -0,0 +1,38 @@
+#+title: Latex Support
+#+published: true
+#+position: 203
+
+** Inline Math
+Orgajs supports inline math with latex math delimiters.
+
+#+begin_src org
+If $$a^2=b$$ and \( b=2 \), then the solution must be either $$ a=+\sqrt{2} $$ or \[ a=-\sqrt{2} \].
+#+end_src
+
+With be rendered as follows.
+
+If $$a^2=b$$ and \( b=2 \), then the solution must be either $$ a=+\sqrt{2} $$ or \[ a=-\sqrt{2} \].
+
+** Latex Block
+
+It also supports =\begin= commands.
+
+#+begin_src org
+\begin{equation}
+x=\sqrt{b}
+\end{equation}
+#+end_src
+
+Will be rendered
+
+\begin{equation}
+x=\sqrt{b}
+\end{equation}
+
+** Styling
+
+=@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=.
+
+#+begin_src html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-ysFyB7Is//Q1JNgERb0bLJokXKM8eWJsjEutGvthoHtBilHWgbdmbYkQZdwCIGIq" crossorigin="anonymous">
+#+end_src

docs/contribute.org

@@ -0,0 +1,9 @@
+#+title: Contribute
+#+published: true
+#+position: 300
+
+#+jsx: <Notice>This page is a WIP</Notice>
+
+* Need Some Inspiration?
+
+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

@@ -0,0 +1,2 @@
+import { DocumentLayout } from '../_layout.tsx'
+export default DocumentLayout

docs/guides/gatsby.org

@@ -0,0 +1,36 @@
+#+title: Gatsby
+#+published: true
+#+position: 102
+
+#+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>
+
+* Create Gatsby Project
+
+Create a new gatsby website following the [[https://www.gatsbyjs.com/get-started/][documentation]]. Or simply
+
+#+begin_src sh
+npx gatsby new gatsby-site
+#+end_src
+
+* Installation
+
+Install packages.
+
+#+begin_src sh
+cd gatsby-site
+yarn add gatsby-plugin-orga @orgajs/react @orgajs/loader
+#+end_src
+
+* Configuration
+
+Add =gatsby-plugin-orga= to =gatsby-config.js=.
+
+#+begin_src javascript
+module.exports = {
+  plugins: ['gatsby-plugin-orga']
+}
+#+end_src
+
+Add a org file in folder =src/pages= directory. It should work out of the box.
+
+For more advanced usage, please checkout code of [[https://github.com/orgapp/orgajs][orgajs project]], which generate this website via =gatsby-theme-orga-docs=.