add the repository subdomain package preview

3 files changed, 241 insertions, 0 deletions

diff --git a/frontend/src/layouts/SiteLayout.astro b/frontend/src/layouts/SiteLayout.astro
index 27e0e41..b1f232e 100644
--- a/frontend/src/layouts/SiteLayout.astro
+++ b/frontend/src/layouts/SiteLayout.astro
@@ -22,6 +22,7 @@ const { title, description } = Astro.props;
     <link rel="icon" type="image/png" href="/xsharp-logo.png" />
     <link rel="preload" href="/fonts/AlfaSlabOne-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="preload" href="/fonts/FiraSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
+    <script src="/host-router.js" is:inline></script>
     <title>{title}</title>
   </head>
   <body>
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 045101e..ae1e545 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -48,6 +48,57 @@ const capabilities = [
   title="X# programming language"
   description="The official home of X#, a native programming language with inspectable compiler layers."
 >
+  <section class="repository-surface">
+    <div class="ambient" aria-hidden="true">
+      <span class="ambient-orb ambient-orb-a"></span>
+      <span class="ambient-orb ambient-orb-b"></span>
+    </div>
+    <header class="repository-header glass-panel">
+      <a class="brand" href="https://xsharp-lang.xyz/" aria-label="X# home">
+        <img class="brand-mark" src="/xsharp-logo.webp" width="38" height="38" alt="" />
+        <span class="brand-name">X#</span>
+        <span class="brand-channel">package registry</span>
+      </a>
+      <a class="repository-source" href="https://github.com/xss-lang" target="_blank" rel="noreferrer">
+        <Icon name="github" />
+        GitHub
+      </a>
+    </header>
+    <main class="repository-main">
+      <div class="repository-status glass-panel">
+        <span class="repository-status-icon"><Icon name="modules" /></span>
+        Registry online
+      </div>
+      <p class="eyebrow">X# package registry</p>
+      <h1>No packages<br /><em>published yet.</em></h1>
+      <p class="repository-lede">
+        The registry is ready for the next stage of X# development, but it does not contain any
+        <code>.xspkg.tar.zst</code> packages yet.
+      </p>
+      <div class="repository-actions">
+        <a class="button primary" href="https://xsharp-lang.xyz/">
+          Visit X# language
+          <Icon name="arrow" />
+        </a>
+        <a class="button secondary glass-panel" href="https://github.com/xss-lang" target="_blank" rel="noreferrer">
+          Follow development
+        </a>
+      </div>
+      <div class="repository-note glass-panel">
+        <Icon name="terminal" />
+        <div>
+          <strong>Publishing is not available yet</strong>
+          <span>The future registry will use the native X# package format and verified package metadata.</span>
+        </div>
+      </div>
+    </main>
+    <footer class="repository-footer">
+      <span>repo.xsharp-lang.xyz</span>
+      <span>Package registry preview</span>
+    </footer>
+  </section>
+
+  <div class="main-surface">
   <div class="ambient" aria-hidden="true">
     <span class="ambient-orb ambient-orb-a"></span>
     <span class="ambient-orb ambient-orb-b"></span>
@@ -258,4 +309,5 @@ fn main() -> Long {
     <span>Native language · visible compiler</span>
     <a href="https://github.com/xss-lang/website" target="_blank" rel="noreferrer">Website source · AGPL-3.0-or-later</a>
   </footer>
+  </div>
 </SiteLayout>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 74bb4ef..dbfbc79 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -77,6 +77,161 @@ body {
     linear-gradient(180deg, #0b0813 0%, #090711 48%, #0d0814 100%);
 }
 
+.repository-surface {
+  display: none;
+}
+
+html[data-surface="repository"] .main-surface {
+  display: none;
+}
+
+html[data-surface="repository"] .repository-surface {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.repository-header,
+.repository-main,
+.repository-footer {
+  width: min(72rem, calc(100% - 2rem));
+  margin-inline: auto;
+}
+
+.repository-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 4.5rem;
+  margin-top: 1rem;
+  padding: 0.65rem 0.8rem 0.65rem 1rem;
+  border-radius: 1.15rem;
+}
+
+.repository-source {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.65rem 0.8rem;
+  border-radius: 0.7rem;
+  color: var(--ink);
+  background: rgb(255 255 255 / 8%);
+  font-size: 0.86rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.repository-source .icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.repository-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: calc(100vh - 11rem);
+  flex: 1;
+  flex-direction: column;
+  padding: 7rem 0;
+}
+
+.repository-status {
+  display: inline-flex;
+  gap: 0.6rem;
+  align-items: center;
+  margin-bottom: 2.5rem;
+  padding: 0.5rem 0.7rem 0.5rem 0.55rem;
+  border-radius: 99rem;
+  color: var(--cyan);
+  font-size: 0.76rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.repository-status-icon {
+  display: grid;
+  place-items: center;
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 50%;
+  color: #100b19;
+  background: var(--cyan);
+}
+
+.repository-status-icon .icon {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.repository-main h1 {
+  max-width: 13ch;
+  font-size: clamp(3.3rem, 8vw, 7rem);
+}
+
+.repository-lede {
+  max-width: 42rem;
+  margin: 2rem 0;
+  color: var(--muted);
+  font-size: clamp(1.03rem, 2vw, 1.25rem);
+  line-height: 1.7;
+}
+
+.repository-lede code {
+  color: var(--cyan);
+  font-family: var(--font-code);
+  font-size: 0.88em;
+}
+
+.repository-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.repository-note {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  width: min(38rem, 100%);
+  margin-top: 4rem;
+  padding: 1rem;
+  border-radius: 1rem;
+}
+
+.repository-note > .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: 0 0 auto;
+  color: var(--violet-bright);
+}
+
+.repository-note div {
+  display: flex;
+  gap: 0.25rem;
+  flex-direction: column;
+}
+
+.repository-note strong {
+  font-size: 0.9rem;
+}
+
+.repository-note span {
+  color: var(--quiet);
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+.repository-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 1.4rem 0 2rem;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  color: var(--quiet);
+  font-family: var(--font-code);
+  font-size: 0.7rem;
+}
+
 a {
   color: inherit;
 }
@@ -1210,6 +1365,18 @@ footer a {
 }
 
 @media (max-width: 48rem) {
+  .repository-main {
+    padding: 5rem 0;
+  }
+
+  .repository-main h1 {
+    font-size: clamp(3.1rem, 16vw, 5rem);
+  }
+
+  .repository-note {
+    margin-top: 3rem;
+  }
+
   .site-header {
     position: relative;
     top: 0;
@@ -1302,6 +1469,27 @@ footer a {
 }
 
 @media (max-width: 35rem) {
+  .repository-header .brand-channel {
+    display: none;
+  }
+
+  .repository-main {
+    padding: 4rem 0;
+  }
+
+  .repository-actions {
+    width: 100%;
+  }
+
+  .repository-actions .button {
+    width: 100%;
+  }
+
+  .repository-footer {
+    gap: 0.5rem;
+    flex-direction: column;
+  }
+
   .hero-visual {
     width: 100%;
     min-height: 32rem;