Skip to content

Commit e3ef3a5

Browse files
xiaoxinghuxiaoxinghu
authored
rebuild the website with orga-build (#242)
* add editor * orga-build: support normal jsx/tsx pages * update codemirror dependencies * implement playground * implement playground * playground finish 🙌 * add build script * remove the old site * update ci * add changeset * fix react 19 breaking changes * add raw loader * update docs
1 parent a6a5cb8 commit e3ef3a5

Some content is hidden

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

77 files changed

+5832
-7392
lines changed

‎.changeset/gorgeous-snakes-sleep.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
'gatsby-plugin-orga': patch
3+
'@orgajs/example-next-app-dir': patch
4+
'@orgajs/cm-lang': patch
5+
'@orgajs/build': patch
6+
'orga-posts': patch
7+
'@orgajs/example-webpack': patch
8+
'@orgajs/example-editor': patch
9+
'@orgajs/editor': patch
10+
'@orgajs/loader': patch
11+
'@orgajs/rollup': patch
12+
'@orgajs/lezer': patch
13+
'@orgajs/react': patch
14+
'@orgajs/example-next': patch
15+
'@orgajs/orgx': patch
16+
'@orgajs/docs': patch
17+
---
18+
19+
build website with orga-build

‎.github/workflows/website.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ jobs:
4040
4141
- name: Build
4242
run: |
43-
cd website
43+
cd docs
4444
pnpm run build
4545
4646
- name: Upload Page Artifact
4747
uses: actions/upload-pages-artifact@v3
4848
with:
49-
path: 'website/dist/'
49+
path: 'docs/out/'
5050

5151
deploy:
5252
needs: build

‎docs/_layout.tsx

+16-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { isOrgContent } from '@orgajs/orgx'
2+
23
interface LayoutProps {
34
title: string
45
children: React.ReactNode
56
}
67

7-
export default function Layout({ title, pages, children }: LayoutProps) {
8+
export default function Layout({ title, children }: LayoutProps) {
89
return (
910
<html>
1011
<head>
1112
<title>{title}</title>
1213
<link href="/style.css" rel="stylesheet" />
1314
</head>
14-
<body className="min-h-screen flex flex-col">
15-
<nav className="p-2 bg-gray-100 border-b">
15+
<body className="flex flex-col h-screen">
16+
<nav className="p-2 bg-base-100 border-b">
1617
<ol className="flex gap-4">
1718
<li>
1819
<a href="/">Orga</a>
@@ -28,21 +29,23 @@ export default function Layout({ title, pages, children }: LayoutProps) {
2829
</li>
2930
</ol>
3031
</nav>
31-
<main className="flex-1">
32+
<main className="flex-grow flex-row overflow-hidden">
3233
{isOrgContent(children) ? <Content>{children}</Content> : children}
3334
</main>
34-
<footer className="p-4 bg-gray-200">
35-
<p>© 2021 Orga</p>
35+
<footer className="flex justify-between p-2 bg-base-100 border-t">
36+
<div id="minibuffer" className=""></div>
37+
<p>© 2025 Orga</p>
3638
</footer>
39+
<script type="module" src="/layout.js" />
3740
</body>
3841
</html>
3942
)
4043
}
4144

4245
export function DocumentLayout({ title, pages, children }) {
4346
return (
44-
<div className="flex h-full">
45-
<aside className="w-64 bg-gray-50 p-4 border-r">
47+
<div className="flex h-full w-full">
48+
<aside className="w-64 bg-gray-50 p-4 border-r h-full overflow-y-auto">
4649
<ul>
4750
{pages
4851
.sort((a, b) => a.position - b.position)
@@ -67,5 +70,9 @@ export function DocumentLayout({ title, pages, children }) {
6770
}
6871

6972
function Content({ children }) {
70-
return <article className="prose p-4">{children}</article>
73+
return (
74+
<div className="overflow-auto h-full w-full">
75+
<article className="prose p-4">{children}</article>
76+
</div>
77+
)
7178
}

‎docs/build.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as esbuild from 'esbuild'
2+
import * as fs from 'node:fs/promises'
3+
4+
const { metafile } = await esbuild.build({
5+
entryPoints: ['js/layout.ts', 'js/editor.ts', 'js/playground.ts'],
6+
format: 'esm',
7+
outdir: 'out',
8+
bundle: true,
9+
minify: true,
10+
metafile: true,
11+
plugins: [],
12+
splitting: true,
13+
})
14+
15+
// write metafile to meta.json
16+
await fs.writeFile('meta.json', JSON.stringify(metafile))

‎docs/index.org

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
#+title: Orgajs
2+
#+jsx: import code from './index.org?raw'
23

34
* What Is It
45

@@ -11,10 +12,14 @@
1112
Introducing org editor. This the source code of *this page*.
1213

1314
#+begin_export jsx
14-
<div className="p-2 bg-gray-200 text-gray-600">Playground</div>
15+
<orga-editor>
16+
{code}
17+
</orga-editor>
1518
#+end_export
1619

17-
1820
** Publication
1921

2022
Build a website with org-mode files and [[/guides/orga-build][orga-build]].
23+
24+
# the "orga-editor" is a web-component, the following line defines it
25+
#+jsx: <script type="module" src="/editor.js"/>

‎docs/js/editor.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { makeEditor } from '@orgajs/editor'
2+
3+
class OrgaEditor extends HTMLElement {
4+
constructor() {
5+
super()
6+
}
7+
8+
connectedCallback() {
9+
const content = this.textContent
10+
this.innerHTML = `
11+
<div class="h-64 not-prose">
12+
<div id="editor"></div>
13+
</div>`
14+
const dom = this.querySelector('#editor')
15+
makeEditor({
16+
target: dom,
17+
content,
18+
})
19+
}
20+
}
21+
22+
customElements.define('orga-editor', OrgaEditor)

‎docs/js/h.ts

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
type Child = string | Node
2+
type Attributes = Record<string, string> & {
3+
onclick?: (e: MouseEvent) => void
4+
}
5+
6+
function isChild(x: any): x is Child {
7+
return typeof x === 'string' || x instanceof Node
8+
}
9+
10+
export function h(
11+
selector: string,
12+
attr: Attributes,
13+
...children: Child[]
14+
): HTMLElement
15+
export function h(selector: string, ...children: Child[]): HTMLElement
16+
17+
export function h(
18+
selector: string,
19+
attributes: Attributes | Child | undefined = undefined,
20+
...children: (string | Node)[]
21+
) {
22+
const parts = selector.split(/([#.])/)
23+
const tag = parts[0] || 'div'
24+
let id = null
25+
const classes = []
26+
27+
for (let i = 1; i < parts.length; i += 2) {
28+
if (parts[i] === '#') {
29+
id = parts[i + 1]
30+
} else if (parts[i] === '.') {
31+
classes.push(parts[i + 1])
32+
}
33+
}
34+
const e = document.createElement(tag)
35+
if (id) e.setAttribute('id', id)
36+
if (classes.length) e.setAttribute('class', classes.join(' '))
37+
38+
if (attributes) {
39+
if (isChild(attributes)) {
40+
children.unshift(attributes)
41+
} else {
42+
const { onclick, ...rest } = attributes
43+
e.onclick = onclick
44+
for (const [key, value] of Object.entries(rest)) {
45+
e.setAttribute(key, value)
46+
}
47+
}
48+
}
49+
50+
for (const child of children) {
51+
if (typeof child === 'string') {
52+
e.appendChild(document.createTextNode(child))
53+
} else if (child) {
54+
e.appendChild(child)
55+
}
56+
}
57+
return e
58+
}

‎docs/js/layout.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let timeout = null
2+
3+
function echo(msg: string) {
4+
console.log(`echo: ${msg}`)
5+
const minibuffer = document.getElementById('minibuffer')
6+
minibuffer.textContent = msg
7+
clearTimeout(timeout)
8+
timeout = setTimeout(() => (minibuffer.textContent = ''), 2000)
9+
}
10+
11+
window.echo = echo

0 commit comments

Comments
 (0)