Skip to content

Commit 60ad38f

Browse files
xiaoxinghuxiaoxinghu
authored
[orga-build] switch to vite (#268)
* build with vite * refactor * fallback a little bit * start from scratch * added components * add support for layout * tidyup * add vite plugins * fix types in rollup plugin * fix types * fix headline pattern issue * add export for @orgajs/rollup * add @orgajs/react-editor * tidy up orga-build * inject title * cleanup docs * refactor vite config * Revert "refactor vite config" This reverts commit 5897cc8. * [orga-build] add containerClass option * playground WIP * fix the react components * finish playground * remove log * finish playground * fix ci for website * add changeset * fix lint
1 parent b7906ec commit 60ad38f

Some content is hidden

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

65 files changed

+2736
-2007
lines changed

‎.changeset/little-llamas-hammer.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'orga-build': minor
3+
'@orgajs/react-editor': patch
4+
'@orgajs/react-cm': patch
5+
'@orgajs/editor': patch
6+
'@orgajs/rollup': patch
7+
'orga': patch
8+
---
9+
10+
migrate orga-build to be based on vite

‎.github/workflows/website.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ jobs:
3737
run: |
3838
pnpm install
3939
pnpm build
40-
pnpm build:docs
40+
pnpm docs
4141
4242
- name: Upload Page Artifact
4343
uses: actions/upload-pages-artifact@v3
4444
with:
45-
path: 'docs/out/'
45+
path: 'out/'
4646

4747
deploy:
4848
needs: build

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,8 @@ dist
108108

109109
.meta.json
110110
.orga-build
111+
112+
.turbo
113+
.aider*
114+
115+
out

‎docs/CHANGELOG.md‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎docs/_components.tsx‎

Lines changed: 165 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,169 @@
1-
export function Notice({ title, children }: { children: React.ReactNode }) {
1+
import { Editor } from '@orgajs/react-editor'
2+
import { ReactCodeMirror } from '@orgajs/react-cm'
3+
import { tags as t } from '@lezer/highlight'
4+
import { EditorView } from '@codemirror/view'
5+
import {
6+
HighlightStyle,
7+
defaultHighlightStyle,
8+
syntaxHighlighting,
9+
foldGutter
10+
} from '@codemirror/language'
11+
import { javascript } from '@codemirror/lang-javascript'
12+
13+
export function Notice({
14+
title,
15+
children
16+
}: {
17+
title?: string
18+
children: React.ReactNode
19+
}) {
220
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>
21+
<div role="alert" className="alert">
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
fill="none"
25+
viewBox="0 0 24 24"
26+
className="stroke-info h-6 w-6 shrink-0"
27+
>
28+
<path
29+
strokeLinecap="round"
30+
strokeLinejoin="round"
31+
strokeWidth="2"
32+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
33+
></path>
34+
</svg>
35+
<span>{children}</span>
1236
</div>
1337
)
1438
}
39+
40+
const nord0 = '#2E3440',
41+
nord1 = '#3B4252',
42+
nord2 = '#434C5E',
43+
nord3 = '#4C566A',
44+
nord4 = '#D8DEE9',
45+
nord5 = '#E5E9F0',
46+
nord6 = '#ECEFF4',
47+
nord7 = '#8FBCBB',
48+
nord8 = '#88C0D0',
49+
nord9 = '#81A1C1',
50+
nord10 = '#5E81AC',
51+
nord11 = '#BF616A',
52+
nord12 = '#D08770',
53+
nord13 = '#EBCB8B',
54+
nord14 = '#A3BE8C',
55+
nord15 = '#B48EAD'
56+
57+
const nordTheme = EditorView.theme(
58+
{
59+
'&': {
60+
color: nord4,
61+
backgroundColor: nord0
62+
},
63+
'.cm-content': {
64+
caretColor: nord4
65+
},
66+
'.cm-cursor, .cm-dropCursor': { borderLeftColor: nord4 },
67+
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
68+
{
69+
backgroundColor: nord2
70+
},
71+
'.cm-panels': { backgroundColor: nord1, color: nord5 },
72+
'.cm-panels.cm-panels-top': { borderBottom: `2px solid ${nord3}` },
73+
'.cm-panels.cm-panels-bottom': { borderTop: `2px solid ${nord3}` },
74+
'.cm-searchMatch': {
75+
backgroundColor: nord13,
76+
outline: `1px solid ${nord3}`
77+
},
78+
'.cm-searchMatch.cm-searchMatch-selected': {
79+
backgroundColor: nord12
80+
},
81+
'.cm-activeLine': { backgroundColor: nord1 },
82+
'.cm-activeLineGutter': { backgroundColor: nord2 },
83+
'.cm-selectionMatch': { backgroundColor: nord3 },
84+
'.cm-matchingBracket, .cm-nonmatchingBracket': {
85+
backgroundColor: nord8,
86+
outline: `none`
87+
},
88+
'.cm-gutters': {
89+
backgroundColor: nord0,
90+
color: nord3,
91+
border: 'none'
92+
},
93+
'.cm-lineNumbers .cm-gutterElement': {
94+
padding: '0 3px 0 5px'
95+
},
96+
'.cm-tooltip': {
97+
border: `1px solid ${nord3}`,
98+
backgroundColor: nord2
99+
},
100+
'.cm-tooltip-autocomplete': {
101+
'& > ul > li[aria-selected]': {
102+
backgroundColor: nord3,
103+
color: nord6
104+
}
105+
}
106+
},
107+
{ dark: true }
108+
)
109+
110+
const nordHighlightStyle = HighlightStyle.define([
111+
{ tag: t.keyword, color: nord9 },
112+
{
113+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
114+
color: nord4
115+
},
116+
{ tag: [t.function(t.variableName), t.labelName], color: nord8 },
117+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: nord7 },
118+
{ tag: [t.definition(t.name), t.separator], color: nord4 },
119+
{ tag: [t.className], color: nord7 },
120+
{
121+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
122+
color: nord15
123+
},
124+
{ tag: [t.typeName], color: nord7 },
125+
{ tag: [t.operator, t.operatorKeyword], color: nord9 },
126+
{ tag: [t.url, t.escape, t.regexp, t.link], color: nord13 },
127+
{ tag: [t.meta, t.comment], color: nord3, fontStyle: 'italic' },
128+
{ tag: [t.strong], fontWeight: 'bold' },
129+
{ tag: [t.emphasis], fontStyle: 'italic' },
130+
{ tag: [t.strikethrough], textDecoration: 'line-through' },
131+
{ tag: [t.string], color: nord14 },
132+
{ tag: [t.invalid], color: nord11 }
133+
])
134+
135+
const nord = [nordTheme, syntaxHighlighting(nordHighlightStyle)]
136+
137+
export function JSEditor({
138+
className,
139+
children
140+
}: {
141+
className?: string
142+
children: string
143+
}) {
144+
return (
145+
<div className={className}>
146+
<ReactCodeMirror
147+
extensions={[
148+
foldGutter(),
149+
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
150+
javascript(),
151+
EditorView.editable.of(false),
152+
nord
153+
]}
154+
content={children}
155+
/>
156+
</div>
157+
)
158+
}
159+
160+
export function OrgEditor({ className = '', content, onChange }) {
161+
return (
162+
<Editor
163+
className={className}
164+
content={content}
165+
onChange={onChange}
166+
extensions={[nord]}
167+
/>
168+
)
169+
}

0 commit comments

Comments
 (0)