Skip to content

Commit fcbe90f

Browse files
shobmanclaude
shobman
and
claude
committed
feat: wrap Strata Architect in deployable Vite app
Add apps/designer as a Vite + React app that wraps the existing strata-architect.jsx visual designer for GitHub Pages deployment at shobman.github.io/strata/. Includes GitHub Actions workflow for automated deployment and session 6 reference docs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 2af1d2c commit fcbe90f

14 files changed

Lines changed: 1909 additions & 1 deletion

‎.github/workflows/deploy-designer.yml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: Deploy Designer to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- "apps/designer/**"
8+
- "docs/strata-architect.jsx"
9+
10+
workflow_dispatch:
11+
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
concurrency:
18+
group: pages
19+
cancel-in-progress: true
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
steps:
25+
- uses: actions/checkout@v4
26+
27+
- uses: pnpm/action-setup@v4
28+
29+
- uses: actions/setup-node@v4
30+
with:
31+
node-version: 20
32+
cache: pnpm
33+
34+
- run: pnpm install --frozen-lockfile
35+
36+
- run: pnpm --filter designer build
37+
38+
- uses: actions/upload-pages-artifact@v3
39+
with:
40+
path: apps/designer/dist
41+
42+
deploy:
43+
needs: build
44+
runs-on: ubuntu-latest
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
steps:
49+
- id: deployment
50+
uses: actions/deploy-pages@v4

‎apps/designer/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/strata/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Strata Architect</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<style>
15+
* { margin: 0; padding: 0; box-sizing: border-box; }
16+
html, body, #root { height: 100%; width: 100%; }
17+
body { background: #0a0f1a; }
18+
</style>
19+
</head>
20+
<body>
21+
<div id="root"></div>
22+
<script type="module" src="/src/main.tsx"></script>
23+
</body>
24+
</html>

‎apps/designer/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "designer",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.3.18",
17+
"@types/react-dom": "^18.3.5",
18+
"@vitejs/plugin-react": "^4.3.4",
19+
"typescript": "~5.6.2",
20+
"vite": "^6.0.0"
21+
}
22+
}

‎apps/designer/public/favicon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎apps/designer/src/App.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import StrataDesigner from "./StrataDesigner";
2+
3+
function App() {
4+
return (
5+
<div
6+
style={{
7+
height: "100%",
8+
display: "flex",
9+
flexDirection: "column",
10+
background: "#0a0f1a",
11+
color: "#e2e8f0",
12+
fontFamily: "'IBM Plex Sans', sans-serif",
13+
}}
14+
>
15+
<header
16+
style={{
17+
display: "flex",
18+
alignItems: "center",
19+
justifyContent: "space-between",
20+
padding: "12px 24px",
21+
borderBottom: "1px solid rgba(99, 102, 241, 0.15)",
22+
flexShrink: 0,
23+
}}
24+
>
25+
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
26+
<svg
27+
width="24"
28+
height="24"
29+
viewBox="0 0 32 32"
30+
fill="none"
31+
xmlns="http://www.w3.org/2000/svg"
32+
>
33+
<rect x="4" y="4" width="24" height="8" rx="2" fill="#818cf8" />
34+
<rect
35+
x="4"
36+
y="14"
37+
width="16"
38+
height="6"
39+
rx="2"
40+
fill="#6366f1"
41+
opacity="0.7"
42+
/>
43+
<rect
44+
x="4"
45+
y="22"
46+
width="10"
47+
height="6"
48+
rx="2"
49+
fill="#4f46e5"
50+
opacity="0.5"
51+
/>
52+
</svg>
53+
<span
54+
style={{
55+
fontSize: "16px",
56+
fontWeight: 600,
57+
fontFamily: "'IBM Plex Mono', monospace",
58+
letterSpacing: "-0.02em",
59+
}}
60+
>
61+
Strata Architect
62+
</span>
63+
</div>
64+
<a
65+
href="https://github.com/shobman/strata"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
style={{
69+
color: "#94a3b8",
70+
textDecoration: "none",
71+
fontSize: "13px",
72+
display: "flex",
73+
alignItems: "center",
74+
gap: "6px",
75+
}}
76+
>
77+
<svg
78+
width="16"
79+
height="16"
80+
viewBox="0 0 16 16"
81+
fill="currentColor"
82+
>
83+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
84+
</svg>
85+
GitHub
86+
</a>
87+
</header>
88+
<div style={{ flex: 1, overflow: "hidden" }}>
89+
<StrataDesigner />
90+
</div>
91+
</div>
92+
);
93+
}
94+
95+
export default App;

0 commit comments

Comments
 (0)