@icebreakers/monorepo-templates 1.3.0 → 1.3.2

package/templates/vitepress/.vitepress/seo.ts

@@ -22,8 +22,13 @@ function localeRoutes(page: string) {
 
 export function createPageHead({ page, title, description }: TransformContext): HeadConfig[] {
   const { english, chinese } = localeRoutes(page)
-  const current = page.startsWith('zh/') ? chinese : english
+  const isChinese = page.startsWith('zh/')
+  const current = isChinese ? chinese : english
   const canonical = `${siteOrigin}${current}`
+  const socialImage = `${siteOrigin}/brand/repoctl-social-${isChinese ? 'zh' : 'en'}.png`
+  const socialImageAlt = isChinese
+    ? 'repoctl：面向 pnpm 与 Turborepo monorepo 的任务型 CLI'
+    : 'repoctl: task-first CLI for pnpm and Turborepo monorepos'
 
   return [
     ['link', { rel: 'canonical', href: canonical }],
@@ -35,6 +40,15 @@ export function createPageHead({ page, title, description }: TransformContext):
     ['meta', { property: 'og:title', content: title }],
     ['meta', { property: 'og:description', content: description }],
     ['meta', { property: 'og:url', content: canonical }],
-    ['meta', { property: 'og:locale', content: page.startsWith('zh/') ? 'zh_CN' : 'en_US' }],
+    ['meta', { property: 'og:locale', content: isChinese ? 'zh_CN' : 'en_US' }],
+    ['meta', { property: 'og:image', content: socialImage }],
+    ['meta', { property: 'og:image:width', content: '1200' }],
+    ['meta', { property: 'og:image:height', content: '630' }],
+    ['meta', { property: 'og:image:alt', content: socialImageAlt }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:title', content: title }],
+    ['meta', { name: 'twitter:description', content: description }],
+    ['meta', { name: 'twitter:image', content: socialImage }],
+    ['meta', { name: 'twitter:image:alt', content: socialImageAlt }],
   ]
 }

package/templates/vitepress/.vitepress/theme/Layout.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { computed } from 'vue'
+
+const { Layout } = DefaultTheme
+const { lang } = useData()
+const notFoundTitle = computed(() => lang.value === 'zh-CN' ? '页面不存在' : 'Page not found')
+const notFoundBody = computed(() => lang.value === 'zh-CN'
+  ? '这个地址不属于新的文档结构。请从开始、任务或参考章节继续。'
+  : 'This address is not part of the new documentation structure. Continue with Start, Tasks, or Reference.')
+</script>
+
+<template>
+  <Layout>
+    <template #not-found>
+      <main class="repoctl-not-found">
+        <p class="repoctl-not-found__code">
+          404
+        </p>
+        <h1>{{ notFoundTitle }}</h1>
+        <p>{{ notFoundBody }}</p>
+        <a href="/start/">{{ lang === 'zh-CN' ? '返回开始' : 'Back to Start' }}</a>
+      </main>
+    </template>
+  </Layout>
+</template>

package/templates/vitepress/.vitepress/theme/components/HomePage.vue

@@ -9,124 +9,102 @@ const content = computed(() => homeContent[props.locale])
 
 <template>
   <main class="repoctl-home">
-    <section class="repoctl-home__hero">
+    <section class="repoctl-home__hero" aria-labelledby="repoctl-home-title">
       <div class="repoctl-home__hero-copy">
         <p class="repoctl-home__eyebrow">
           {{ content.hero.label }}
         </p>
-        <h1>{{ content.hero.title }}</h1>
+        <h1 id="repoctl-home-title">
+          {{ content.hero.title }}
+        </h1>
         <p class="repoctl-home__lede">
           {{ content.hero.description }}
         </p>
-        <div class="repoctl-home__actions">
-          <a class="repoctl-home__button repoctl-home__button--primary" :href="content.hero.primary.href">
-            {{ content.hero.primary.label }}
+        <div class="repoctl-home__hero-actions">
+          <a class="repoctl-home__button repoctl-home__button--primary" :href="content.hero.primaryAction.href">
+            {{ content.hero.primaryAction.label }}
           </a>
-          <a class="repoctl-home__button" :href="content.hero.secondary.href">
-            {{ content.hero.secondary.label }}
+          <a class="repoctl-home__button repoctl-home__button--secondary" :href="content.hero.secondaryAction.href">
+            {{ content.hero.secondaryAction.label }}
           </a>
         </div>
       </div>
-      <figure class="repoctl-home__capture">
-        <img src="/repoctl-doctor.png" :alt="content.hero.imageAlt" width="1440" height="990">
+      <figure class="repoctl-home__hero-visual">
+        <img
+          src="/repoctl-doctor.png"
+          :alt="content.hero.imageAlt"
+          width="1440"
+          height="990"
+          decoding="async"
+          fetchpriority="high"
+        >
       </figure>
     </section>
 
-    <section class="repoctl-home__proof" :aria-label="locale === 'en' ? 'repoctl capabilities' : 'repoctl 能力'">
-      <span v-for="item in content.proof" :key="item">{{ item }}</span>
+    <section class="repoctl-home__section repoctl-home__tasks" aria-labelledby="repoctl-tasks-title">
+      <div class="repoctl-home__section-heading">
+        <h2 id="repoctl-tasks-title">
+          {{ content.tasks.title }}
+        </h2>
+        <p>{{ content.tasks.description }}</p>
+      </div>
+      <div class="repoctl-home__task-list">
+        <a v-for="task in content.tasks.items" :key="task.link.href" class="repoctl-home__task" :href="task.link.href">
+          <code>{{ task.command }}</code>
+          <div class="repoctl-home__task-copy">
+            <h3>{{ task.title }}</h3>
+            <p>{{ task.body }}</p>
+          </div>
+          <span class="repoctl-home__task-link">{{ task.link.label }} <span aria-hidden="true">-&gt;</span></span>
+        </a>
+      </div>
     </section>
 
-    <section class="repoctl-home__section repoctl-home__lifecycle">
+    <section class="repoctl-home__section repoctl-home__first-run" aria-labelledby="repoctl-first-run-title">
       <div class="repoctl-home__section-heading">
-        <h2>{{ content.lifecycle.title }}</h2>
-        <p>{{ content.lifecycle.description }}</p>
+        <h2 id="repoctl-first-run-title">
+          {{ content.firstRun.title }}
+        </h2>
+        <p>{{ content.firstRun.description }}</p>
       </div>
-      <ol>
-        <li v-for="step in content.lifecycle.steps" :key="step.command">
-          <code>{{ step.command }}</code>
-          <h3>{{ step.title }}</h3>
-          <p>{{ step.body }}</p>
+      <ol class="repoctl-home__steps">
+        <li v-for="(step, index) in content.firstRun.steps" :key="step.command">
+          <span class="repoctl-home__step-number" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
+          <div>
+            <h3>{{ step.title }}</h3>
+            <code>{{ step.command }}</code>
+            <p>{{ step.body }}</p>
+          </div>
         </li>
       </ol>
     </section>
 
-    <section class="repoctl-home__section repoctl-home__paths">
-      <div class="repoctl-home__section-heading">
-        <h2>{{ content.paths.title }}</h2>
-        <p>{{ content.paths.description }}</p>
+    <section class="repoctl-home__section repoctl-home__evidence" aria-labelledby="repoctl-evidence-title">
+      <div class="repoctl-home__evidence-copy">
+        <h2 id="repoctl-evidence-title">
+          {{ content.evidence.title }}
+        </h2>
+        <p>{{ content.evidence.description }}</p>
+        <a class="repoctl-home__text-link" :href="content.evidence.link.href">{{ content.evidence.link.label }} <span aria-hidden="true">-&gt;</span></a>
       </div>
-      <div class="repoctl-home__path-grid">
-        <article v-for="item in content.paths.items" :key="item.href">
-          <h3>{{ item.title }}</h3>
-          <p>{{ item.body }}</p>
-          <pre><code>{{ item.commands.join('\n') }}</code></pre>
-          <a :href="item.href">{{ item.linkLabel }}</a>
-        </article>
+      <div class="repoctl-home__workflow">
+        <span class="repoctl-home__workflow-prompt" aria-hidden="true">$</span>
+        <pre><code>{{ content.evidence.code }}</code></pre>
       </div>
     </section>
 
-    <section class="repoctl-home__section repoctl-home__capabilities">
+    <section class="repoctl-home__section repoctl-home__layers" aria-labelledby="repoctl-layers-title">
       <div class="repoctl-home__section-heading">
-        <p class="repoctl-home__eyebrow">
-          repoctl
-        </p>
-        <h2>{{ content.capabilities.title }}</h2>
-        <p>{{ content.capabilities.description }}</p>
+        <h2 id="repoctl-layers-title">
+          {{ content.layers.title }}
+        </h2>
+        <p>{{ content.layers.description }}</p>
       </div>
-      <div class="repoctl-home__capability-grid">
-        <article v-for="item in content.capabilities.items" :key="item.title">
+      <div class="repoctl-home__layer-list">
+        <a v-for="item in content.layers.items" :key="item.link.href" class="repoctl-home__layer" :href="item.link.href">
           <h3>{{ item.title }}</h3>
           <p>{{ item.body }}</p>
-        </article>
-      </div>
-    </section>
-
-    <section class="repoctl-home__section repoctl-home__commands">
-      <div class="repoctl-home__section-heading">
-        <h2>{{ content.commands.title }}</h2>
-        <p>{{ content.commands.description }}</p>
-      </div>
-      <dl>
-        <div v-for="item in content.commands.items" :key="item.command">
-          <dt><code>{{ item.command }}</code></dt>
-          <dd>{{ item.purpose }}</dd>
-        </div>
-      </dl>
-    </section>
-
-    <section class="repoctl-home__section repoctl-home__automation">
-      <div>
-        <h2>{{ content.automation.title }}</h2>
-        <p>{{ content.automation.description }}</p>
-        <ul>
-          <li v-for="format in content.automation.formats" :key="format">
-            {{ format }}
-          </li>
-        </ul>
-      </div>
-      <pre><code>{{ content.automation.code }}</code></pre>
-    </section>
-
-    <section class="repoctl-home__section repoctl-home__quickstart">
-      <div class="repoctl-home__section-heading">
-        <h2>{{ content.quickstart.title }}</h2>
-        <p>{{ content.quickstart.description }}</p>
-      </div>
-      <pre><code>{{ content.quickstart.code }}</code></pre>
-      <a class="repoctl-home__button repoctl-home__button--primary" :href="content.quickstart.link.href">
-        {{ content.quickstart.link.label }}
-      </a>
-    </section>
-
-    <section class="repoctl-home__section repoctl-home__docs">
-      <div class="repoctl-home__section-heading">
-        <h2>{{ content.docs.title }}</h2>
-        <p>{{ content.docs.description }}</p>
-      </div>
-      <div>
-        <a v-for="item in content.docs.items" :key="item.href" :href="item.href">
-          <strong>{{ item.label }}</strong>
-          <span>{{ item.body }}</span>
+          <span class="repoctl-home__text-link">{{ item.link.label }} <span aria-hidden="true">-&gt;</span></span>
         </a>
       </div>
     </section>

package/templates/vitepress/.vitepress/theme/home/foundation.css

@@ -1,13 +1,44 @@
-.repoctl-home {
-  --home-border: color-mix(in srgb, var(--vp-c-divider) 82%, transparent);
-  --home-accent: #1769aa;
-  --home-accent-dark: #4aa3e0;
-  --home-muted: var(--vp-c-text-2);
+:root {
+  --repoctl-accent: #2457d6;
+  --repoctl-accent-hover: #1d48b8;
+  --repoctl-accent-contrast: #f8faff;
+  --repoctl-graphite: #18202b;
+  --repoctl-muted: #596273;
+  --repoctl-line: #d8dee8;
+  --repoctl-surface: #fff;
+  --repoctl-soft: #f4f6f9;
+  --repoctl-accent-soft: #edf2ff;
+  --repoctl-code: #101821;
+  --repoctl-code-text: #edf3fb;
+  --repoctl-shadow: 0 24px 64px rgb(24 32 43 / 14%);
+}
+
+.dark {
+  --repoctl-accent: #8ca7ff;
+  --repoctl-accent-hover: #a9bcff;
+  --repoctl-accent-contrast: #f8faff;
+  --repoctl-graphite: #f0f3f7;
+  --repoctl-muted: #b2bbc8;
+  --repoctl-line: #343e4d;
+  --repoctl-surface: #171e28;
+  --repoctl-soft: #1c2531;
+  --repoctl-accent-soft: #1b2946;
+  --repoctl-code: #0b1119;
+  --repoctl-code-text: #edf3fb;
+  --repoctl-shadow: 0 24px 64px rgb(0 0 0 / 32%);
+}
 
-  max-width: 1180px;
-  padding: 32px 24px 96px;
+.repoctl-home {
+  width: min(100%, 1248px);
+  padding: 32px 32px 112px;
   margin: 0 auto;
-  color: var(--vp-c-text-1);
+  color: var(--repoctl-graphite);
+}
+
+.repoctl-home *,
+.repoctl-home *::before,
+.repoctl-home *::after {
+  box-sizing: border-box;
 }
 
 .repoctl-home h1,
@@ -19,162 +50,188 @@
   margin: 0;
 }
 
-.repoctl-home__hero {
-  display: grid;
-  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
-  gap: clamp(32px, 5vw, 72px);
-  align-items: center;
-  min-height: min(680px, calc(100dvh - 96px));
+.repoctl-home h1,
+.repoctl-home h2,
+.repoctl-home h3 {
+  color: var(--repoctl-graphite);
+  letter-spacing: 0;
+}
+
+.repoctl-home p {
+  line-height: 1.65;
+  color: var(--repoctl-muted);
+}
+
+.repoctl-home code {
+  font-size: 0.9em;
+}
+
+.repoctl-home a {
+  color: inherit;
+}
+
+.repoctl-home a:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--repoctl-accent) 62%, transparent);
+  outline-offset: 3px;
 }
 
 .repoctl-home__eyebrow {
-  margin-bottom: 14px !important;
+  margin-bottom: 18px !important;
+  font-family: var(--vp-font-family-mono);
   font-size: 12px;
   font-weight: 700;
-  color: var(--home-accent);
-  letter-spacing: 0;
+  color: var(--repoctl-accent) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.dark .repoctl-home__eyebrow {
-  color: var(--home-accent-dark);
+.repoctl-home__hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.06fr) minmax(460px, 0.94fr);
+  gap: 64px;
+  align-items: center;
+  min-height: min(620px, calc(100dvh - 64px));
+  padding: 56px 0 72px;
+  border-bottom: 1px solid var(--repoctl-line);
 }
 
-.repoctl-home__hero h1 {
-  max-width: 13ch;
-  font-size: clamp(42px, 4.25vw, 60px);
-  line-height: 1.02;
-  letter-spacing: 0;
+.repoctl-home__hero-copy {
+  position: relative;
+  z-index: 1;
 }
 
-.repoctl-home__lede,
-.repoctl-home__section-heading > p,
-.repoctl-home article p,
-.repoctl-home__automation p {
-  line-height: 1.7;
-  color: var(--home-muted);
+.repoctl-home__hero h1 {
+  max-width: 680px;
+  font-size: clamp(46px, 4.25vw, 58px);
+  line-height: 1.04;
 }
 
 .repoctl-home__lede {
-  max-width: 38rem;
-  margin-top: 22px !important;
-  font-size: 17px;
+  max-width: 610px;
+  margin-top: 24px !important;
+  font-size: 18px;
 }
 
-.repoctl-home__actions {
+.repoctl-home__hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  margin-top: 28px;
+  margin-top: 32px;
 }
 
 .repoctl-home__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 42px;
-  padding: 0 17px;
+  min-height: 48px;
+  padding: 0 20px;
   font-size: 14px;
-  font-weight: 650;
-  color: var(--vp-c-text-1) !important;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
   text-decoration: none !important;
-  border: 1px solid var(--home-border);
-  border-radius: 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition:
-    transform 180ms ease,
-    border-color 180ms ease,
-    background-color 180ms ease;
+    color 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
 }
 
-.repoctl-home__button:hover {
-  border-color: var(--home-accent);
-  transform: translateY(-1px);
+.repoctl-home__button--primary {
+  color: var(--repoctl-accent-contrast) !important;
+  background: #2457d6;
+  border-color: #2457d6;
 }
 
-.repoctl-home__button:active {
-  transform: translateY(0);
+.repoctl-home__button--primary:hover {
+  background: #1d48b8;
+  border-color: #1d48b8;
 }
 
-.repoctl-home__button--primary {
-  color: #fff !important;
-  background: var(--home-accent);
-  border-color: var(--home-accent);
+.repoctl-home__button--secondary {
+  color: var(--repoctl-graphite) !important;
+  background: var(--repoctl-surface);
+  border-color: var(--repoctl-line);
 }
 
-.repoctl-home__capture {
+.repoctl-home__button--secondary:hover {
+  color: var(--repoctl-accent) !important;
+  border-color: var(--repoctl-accent);
+}
+
+.repoctl-home__button:active {
+  transform: translateY(1px);
+}
+
+.repoctl-home__hero-visual {
+  aspect-ratio: 1.1;
   overflow: hidden;
-  background: #111a23;
-  border: 1px solid var(--home-border);
-  border-radius: 6px;
-  box-shadow: 0 22px 56px rgb(23 105 170 / 16%);
+  background: var(--repoctl-code);
+  border: 1px solid var(--repoctl-line);
+  border-radius: 8px;
+  box-shadow: var(--repoctl-shadow);
 }
 
-.repoctl-home__capture img {
+.repoctl-home__hero-visual img {
   display: block;
-  width: 100%;
+  width: 142%;
+  max-width: none;
   height: auto;
 }
 
-.repoctl-home__proof {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px 26px;
-  padding: 20px 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--home-muted);
-  border-top: 1px solid var(--home-border);
-  border-bottom: 1px solid var(--home-border);
-}
-
 .repoctl-home__section {
-  padding-top: 96px;
+  padding-top: 104px;
 }
 
 .repoctl-home__section-heading {
-  max-width: 680px;
-  margin-bottom: 32px;
+  max-width: 720px;
+  margin-bottom: 36px;
 }
 
 .repoctl-home__section-heading h2,
-.repoctl-home__automation h2 {
-  font-size: clamp(28px, 3vw, 40px);
-  line-height: 1.12;
-  letter-spacing: 0;
+.repoctl-home__evidence h2 {
+  max-width: 680px;
+  font-size: clamp(30px, 3.3vw, 44px);
+  line-height: 1.1;
 }
 
-.repoctl-home__section-heading > p,
-.repoctl-home__automation p {
-  margin-top: 12px !important;
+.repoctl-home__section-heading p,
+.repoctl-home__evidence-copy > p {
+  max-width: 620px;
+  margin-top: 14px !important;
+  font-size: 16px;
 }
 
-.repoctl-home__lifecycle ol {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 16px;
-  padding: 0;
-  list-style: none;
+.repoctl-not-found {
+  max-width: 680px;
+  padding: 96px 32px 160px;
+  margin: 0 auto;
 }
 
-.repoctl-home__lifecycle li {
-  min-height: 184px;
-  padding: 18px;
-  border: 1px solid var(--home-border);
-  border-radius: 6px;
+.repoctl-not-found__code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
 }
 
-.repoctl-home code {
-  font-size: 0.86em;
+.repoctl-not-found h1 {
+  margin-top: 12px;
+  font-size: 42px;
 }
 
-.repoctl-home__lifecycle h3,
-.repoctl-home__capability-grid h3 {
-  margin-top: 22px;
-  font-size: 17px;
+.repoctl-not-found > p:not(.repoctl-not-found__code) {
+  max-width: 56ch;
+  margin-top: 16px;
+  line-height: 1.65;
+  color: var(--repoctl-muted);
 }
 
-.repoctl-home__lifecycle p {
-  margin-top: 8px !important;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--home-muted);
+.repoctl-not-found a {
+  display: inline-block;
+  margin-top: 24px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
 }