diff --git a/web2/ur.xyz/astro/astro.config.mjs b/web2/ur.xyz/astro/astro.config.mjs index 2048f573..9636c7b9 100644 --- a/web2/ur.xyz/astro/astro.config.mjs +++ b/web2/ur.xyz/astro/astro.config.mjs @@ -9,6 +9,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); const PROJECT_ROOT = path.resolve(__dirname, '..'); const REACT_SRC = path.resolve(PROJECT_ROOT, 'react/src'); const DOCS_DIR = path.join(PROJECT_ROOT, 'docs'); +const RESPONSIVE_PREVIEW = path.join(__dirname, 'dev', 'responsive-preview.html'); /** Walk a directory and return absolute paths of every file matching `ext`. */ function walk(dir, ext) { @@ -51,6 +52,33 @@ function urXyzContent() { }; } +/** Development-only routes for the Build clean URL and responsive preview tool. */ +function urXyzDevRoutes() { + return { + name: 'ur-xyz-dev-routes', + configureServer(server) { + server.middlewares.use((req, res, next) => { + if (!req.url) return next(); + const queryIndex = req.url.indexOf('?'); + const pathname = queryIndex === -1 ? req.url : req.url.slice(0, queryIndex); + const query = queryIndex === -1 ? '' : req.url.slice(queryIndex); + if (pathname === '/responsive-preview' || pathname === '/responsive-preview/') { + if (!fs.existsSync(RESPONSIVE_PREVIEW)) return next(); + res.statusCode = 200; + res.setHeader('Content-Type', 'text/html; charset=utf-8'); + res.setHeader('Cache-Control', 'no-store'); + res.end(fs.readFileSync(RESPONSIVE_PREVIEW, 'utf8')); + return; + } + if (pathname === '/build' || pathname === '/build/') { + req.url = `/build.html${query}`; + } + return next(); + }); + }, + }; +} + // ── real values (the sitemap carried none at all) ── import { execFileSync } from 'node:child_process'; import { slugFor, HIDDEN_DOC_SLUGS } from '../react/src/lib/docs-shared.js'; @@ -189,7 +217,7 @@ export default defineConfig({ build: { format: 'file' }, outDir: path.resolve(__dirname, 'build', ENV), vite: { - plugins: [urXyzContent()], + plugins: [urXyzContent(), urXyzDevRoutes()], resolve: { alias: { '@react': REACT_SRC diff --git a/web2/ur.xyz/astro/dev/responsive-preview.html b/web2/ur.xyz/astro/dev/responsive-preview.html new file mode 100644 index 00000000..f018544f --- /dev/null +++ b/web2/ur.xyz/astro/dev/responsive-preview.html @@ -0,0 +1,417 @@ + + + + + + + UR Responsive Preview + + + +
+
+

UR responsive preview

+ +
+ + + + + + + + + + + + + + +
+ +
+ + + +
+ + + +
+ +
+
+
+ + +
+
+

Showing About at mobile size.

+
+
+ + + + diff --git a/web2/ur.xyz/astro/package.json b/web2/ur.xyz/astro/package.json index b369148d..9c7f4526 100644 --- a/web2/ur.xyz/astro/package.json +++ b/web2/ur.xyz/astro/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "astro dev", "build": "astro build", - "postbuild": "node scripts/modulepreload.mjs build/main && node ../react/tests/visual-parity.mjs && node ../react/tests/network-privacy.mjs", + "postbuild": "node scripts/modulepreload.mjs build/main && node ../react/tests/visual-parity.mjs && node ../react/tests/responsive-shell.mjs && node ../react/tests/network-privacy.mjs", "preview": "astro preview" }, "dependencies": { diff --git a/web2/ur.xyz/astro/public/build.html b/web2/ur.xyz/astro/public/build.html index 3329b344..97b89e06 100644 --- a/web2/ur.xyz/astro/public/build.html +++ b/web2/ur.xyz/astro/public/build.html @@ -332,7 +332,7 @@ @keyframes providerRoutePulse{0%,100%{fill:#10182a;stroke:#638bfc;stroke-width:1.3;filter:none}42%{fill:#638bfc;stroke:#f2f1ed;stroke-width:4;filter:drop-shadow(0 0 10px #638bfc)}}@keyframes minerRoutePulse{0%,100%{fill:#102318;stroke:#74ff61;stroke-width:2;filter:drop-shadow(0 0 5px rgba(116,255,97,.42))}42%{fill:#74ff61;stroke:#f2f1ed;stroke-width:5;filter:drop-shadow(0 0 11px #74ff61)}}@keyframes routeEndpointPulse{0%{filter:none}42%{filter:drop-shadow(0 0 4px #f2f1ed) drop-shadow(0 0 10px var(--accent))}100%{filter:none}} @keyframes routePacket{0%{transform:translate(48px,104px) scale(.7)}20%{transform:translate(90px,130px) scale(1.25)}46%{transform:translate(210px,82px) scale(1.25)}73%{transform:translate(350px,125px) scale(1.25)}100%{transform:translate(393px,140px) scale(.8)}}@keyframes routeEndpoint{50%{r:11px;fill:#f2f1ed}}@keyframes uidCheck{50%{stroke-width:4;fill:rgba(140,201,255,.18)}}@keyframes routeStoryDraw{to{stroke-dashoffset:0}}@keyframes routeReveal{to{opacity:1}}@keyframes routeSourcePulse{50%{filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),1))}} @keyframes flow{to{stroke-dashoffset:-40}}@keyframes packet{0%,8%{transform:translate3d(0,0,24px)}45%{transform:translate3d(320px,0,24px)}92%,100%{transform:translate3d(625px,0,24px)}} - @media(max-width:1080px){.nav nav{display:none}.hero-intro,.section-head,.flows-head{grid-template-columns:1fr}.opportunity-intro{grid-template-columns:1fr}.model-grid,html[data-model="foundation"] .model-grid,html[data-model="terminal"] .model-grid{grid-template-columns:1fr}.model-stage{border-right:0}.scene-foundation .callouts,.scene-terminal .callouts{display:none}.readout{border-top:1px solid var(--rule)}.component-key{display:flex;overflow-x:auto;scrollbar-width:none}.component-key button{min-width:150px}.brief-head{grid-template-columns:1fr}.brief-tags{justify-content:start}.chassis-asset,.spine-asset,.tower-asset,.gateway-asset,.terminal-asset{transform:translate(-50%,-50%) scale(.9)}} + @media(max-width:1080px){.hero-intro,.section-head,.flows-head{grid-template-columns:1fr}.opportunity-intro{grid-template-columns:1fr}.model-grid,html[data-model="foundation"] .model-grid,html[data-model="terminal"] .model-grid{grid-template-columns:1fr}.model-stage{border-right:0}.scene-foundation .callouts,.scene-terminal .callouts{display:none}.readout{border-top:1px solid var(--rule)}.component-key{display:flex;overflow-x:auto;scrollbar-width:none}.component-key button{min-width:150px}.brief-head{grid-template-columns:1fr}.brief-tags{justify-content:start}.chassis-asset,.spine-asset,.tower-asset,.gateway-asset,.terminal-asset{transform:translate(-50%,-50%) scale(.9)}} @media(max-width:700px){.shell{width:calc(100% - 32px)}.notice{font-size:11px}.nav{height:68px;padding:0 16px}.hero{padding:58px 0 52px}.hero-title{align-items:start;flex-direction:column;padding-bottom:36px}.hero h1{font-size:61px}.hero-intro{gap:20px;padding:34px 0}.hero-intro h2{font-size:38px}.hero-intro p,.section-head p{font-size:16px}.boundary{grid-template-columns:1fr}.boundary article{min-height:0;padding:22px 0}.boundary article+article{padding-left:0;border-left:0;border-top:1px solid var(--rule)}.theatre{padding:62px 0 70px}.section-head{gap:18px;margin-bottom:28px}.section-head h2{font-size:48px}.opportunity-intro{padding:18px 16px;gap:12px}.op-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.op-tabs::-webkit-scrollbar,.component-key::-webkit-scrollbar{display:none}.op-tabs button{min-width:150px;scroll-snap-align:start}.model-stage,html[data-model="foundation"] .model-stage,html[data-model="terminal"] .model-stage{min-height:660px}.stage-meta{left:14px;right:14px}.stage-meta span:last-child{display:none}.flow-key{right:14px;bottom:26px}.flow-key span:nth-child(n+2){display:none}.stage-controls{left:14px;bottom:14px}.stage-controls button{padding:0 11px}.callouts{display:none}.chassis-asset{width:710px;transform:translate(-50%,-50%) scale(.54)}.spine-asset{width:760px;transform:translate(-50%,-50%) scale(.49)}.tower-asset{width:700px;transform:translate(-50%,-50%) scale(.53)}.gateway-asset{width:760px;transform:translate(-50%,-50%) scale(.41)}.terminal-asset{width:760px;transform:translate(-50%,-50%) scale(.41)}.readout{padding:24px 16px}.readout h3{font-size:38px}.component-key button,html[data-model="foundation"] .component-key button,html[data-model="terminal"] .component-key button{min-width:142px;min-height:82px}.brief-content{padding:26px 16px}.brief-head{gap:18px}.brief-head h3{font-size:38px}.brief-grid{grid-template-columns:1fr}.brief-block,.brief-block:nth-child(even){min-height:0;padding:22px 0;border-left:0}.brief-block.full{grid-column:auto}.flows{padding:64px 0}.flows-head{gap:18px}.flows h2{font-size:48px}.flow-grid{grid-template-columns:1fr}.flow-card,.flow-card+article{min-height:0;padding:24px 0;border-left:0;border-top:1px solid var(--rule)}.flow-card:first-child{border-top:0}.cta{padding:56px 0 90px}.cta-grid{grid-template-columns:1fr}.cta h2{font-size:50px}.cta a{justify-self:start}html[data-model="terminal"] .brief-panel{height:auto;max-height:none}html[data-model="terminal"] .brief-head{position:static;padding:26px 16px}html[data-model="terminal"] .brief-grid{padding:0 16px 24px}} @media(max-width:700px){.brief-chapter{grid-template-columns:1fr}.brief-chapter-head{padding:24px 0 16px}.brief-chapter-head h4{max-width:18ch}.brief-chapter-grid,.brief-chapter-grid.triple{grid-template-columns:1fr;border-left:0}.brief-chapter-grid .brief-block,.brief-chapter-grid .brief-block:first-child,.brief-chapter-grid:not(.triple) .brief-block:nth-child(odd){padding:22px 0;border-left:0;border-top:1px solid var(--rule)}.brief-block.full{grid-column:auto}} @media(max-width:700px){html[data-model="terminal"] .stage-controls{left:14px;width:calc(100% - 28px);gap:7px}html[data-model="terminal"] .stage-controls [data-show-all]{padding:0 9px}.stage-scrub{grid-template-columns:auto minmax(78px,1fr) auto;padding:0 9px;gap:7px}.stage-scrub label{font-size:7px;white-space:nowrap}.stage-scrub output{display:none}html[data-model="terminal"] .flow-key{right:14px;bottom:78px}html[data-model="terminal"] .readout-explainer{grid-template-columns:1fr}.readout-explainer article{padding:16px 0}.readout-explainer article+article{padding-left:0;border-left:0;border-top:1px solid var(--rule)}} @@ -728,7 +728,7 @@ html[data-version="12"] .proof-chain-v12 span{min-height:92px;padding:20px;border-left:1px solid var(--rule);color:#7f8b93;font-size:13px;line-height:1.45} html[data-version="12"] .proof-chain-v12 span:first-child{border-left:0;padding-left:0} html[data-version="12"] .proof-chain-v12 b{display:block;margin-bottom:12px;color:var(--pink);font:9px Bit,monospace;font-weight:400;letter-spacing:.08em} - html[data-version="12"] .proof-v12 a{display:inline-flex;margin-top:24px;color:#d9e3e7;font:10px Bit,monospace;letter-spacing:.08em;text-decoration:none} + html[data-version="12"] .proof-v12 a{display:inline-flex;min-height:44px;align-items:center;margin-top:14px;color:#d9e3e7;font:10px Bit,monospace;letter-spacing:.08em;text-decoration:none} html[data-version="12"] .proof-v12 a:hover{color:var(--pink)} html[data-version="12"] .flows{padding:72px 0} html[data-version="12"] .v10-flow{display:none} @@ -1420,7 +1420,7 @@ background:transparent; } .nav-mobile-menu .nav-mobile-brand img{display:block;width:auto;height:26px} - .nav-mobile-links{padding:24px 0 36px} + .nav .nav-mobile-links{display:block;white-space:normal;padding:24px 0 36px} .nav-mobile-links>a, .nav-mobile-network>span{ display:block; @@ -1445,9 +1445,40 @@ .nav-mobile-network a:focus-visible, .nav-mobile-network a.is-active{ color:var(--white); + background:transparent; + box-shadow:none; + } + .nav-mobile-network a.is-active{color:var(--pink)} + .nav-mobile-network+a{padding-top:12px} + .nav-mobile-links>a.is-active{ + padding-left:16px; background:rgba(237,143,255,.07); box-shadow:inset 2px 0 0 var(--pink); } + .nav-mobile-langs{ + display:flex; + flex-wrap:wrap; + gap:8px 18px; + margin-top:auto; + padding-top:24px; + border-top:1px solid rgba(214,230,244,.14); + } + .nav-mobile-langs a{ + display:grid; + min-width:44px; + min-height:44px; + place-items:center; + padding:8px; + color:var(--ink); + font-size:.75rem; + letter-spacing:.08em; + text-decoration:none; + text-transform:uppercase; + } + .nav-mobile-langs a.is-active{ + color:var(--white); + border-bottom:1px solid var(--pink); + } } @media(max-width:700px){ html[data-version="12"] .system-rail-v11{grid-template-columns:1fr} @@ -1473,9 +1504,22 @@ -
EN
+
+ EN +
+ + +
+
@@ -1634,7 +1678,7 @@