@icebreakers/monorepo-templates 1.2.1 → 1.3.1

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { DocsLocale } from '../../navigation/routes'
+import { computed } from 'vue'
+import { homeContent } from '../../home/content'
+
+const props = defineProps<{ locale: DocsLocale }>()
+const content = computed(() => homeContent[props.locale])
+</script>
+
+<template>
+  <main class="repoctl-home">
+    <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 id="repoctl-home-title">
+          {{ content.hero.title }}
+        </h1>
+        <p class="repoctl-home__lede">
+          {{ content.hero.description }}
+        </p>
+        <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 repoctl-home__button--secondary" :href="content.hero.secondaryAction.href">
+            {{ content.hero.secondaryAction.label }}
+          </a>
+        </div>
+      </div>
+      <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__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__first-run" aria-labelledby="repoctl-first-run-title">
+      <div class="repoctl-home__section-heading">
+        <h2 id="repoctl-first-run-title">
+          {{ content.firstRun.title }}
+        </h2>
+        <p>{{ content.firstRun.description }}</p>
+      </div>
+      <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__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__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__layers" aria-labelledby="repoctl-layers-title">
+      <div class="repoctl-home__section-heading">
+        <h2 id="repoctl-layers-title">
+          {{ content.layers.title }}
+        </h2>
+        <p>{{ content.layers.description }}</p>
+      </div>
+      <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>
+          <span class="repoctl-home__text-link">{{ item.link.label }} <span aria-hidden="true">-&gt;</span></span>
+        </a>
+      </div>
+    </section>
+  </main>
+</template>

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

@@ -0,0 +1,237 @@
+: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%);
+}
+
+.repoctl-home {
+  width: min(100%, 1248px);
+  padding: 32px 32px 112px;
+  margin: 0 auto;
+  color: var(--repoctl-graphite);
+}
+
+.repoctl-home *,
+.repoctl-home *::before,
+.repoctl-home *::after {
+  box-sizing: border-box;
+}
+
+.repoctl-home h1,
+.repoctl-home h2,
+.repoctl-home h3,
+.repoctl-home p,
+.repoctl-home figure,
+.repoctl-home pre {
+  margin: 0;
+}
+
+.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: 18px !important;
+  font-family: var(--vp-font-family-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--repoctl-accent) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.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-copy {
+  position: relative;
+  z-index: 1;
+}
+
+.repoctl-home__hero h1 {
+  max-width: 680px;
+  font-size: clamp(46px, 4.25vw, 58px);
+  line-height: 1.04;
+}
+
+.repoctl-home__lede {
+  max-width: 610px;
+  margin-top: 24px !important;
+  font-size: 18px;
+}
+
+.repoctl-home__hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
+
+.repoctl-home__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none !important;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.repoctl-home__button--primary {
+  color: var(--repoctl-accent-contrast) !important;
+  background: #2457d6;
+  border-color: #2457d6;
+}
+
+.repoctl-home__button--primary:hover {
+  background: #1d48b8;
+  border-color: #1d48b8;
+}
+
+.repoctl-home__button--secondary {
+  color: var(--repoctl-graphite) !important;
+  background: var(--repoctl-surface);
+  border-color: var(--repoctl-line);
+}
+
+.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: var(--repoctl-code);
+  border: 1px solid var(--repoctl-line);
+  border-radius: 8px;
+  box-shadow: var(--repoctl-shadow);
+}
+
+.repoctl-home__hero-visual img {
+  display: block;
+  width: 142%;
+  max-width: none;
+  height: auto;
+}
+
+.repoctl-home__section {
+  padding-top: 104px;
+}
+
+.repoctl-home__section-heading {
+  max-width: 720px;
+  margin-bottom: 36px;
+}
+
+.repoctl-home__section-heading h2,
+.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__evidence-copy > p {
+  max-width: 620px;
+  margin-top: 14px !important;
+  font-size: 16px;
+}
+
+.repoctl-not-found {
+  max-width: 680px;
+  padding: 96px 32px 160px;
+  margin: 0 auto;
+}
+
+.repoctl-not-found__code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
+}
+
+.repoctl-not-found h1 {
+  margin-top: 12px;
+  font-size: 42px;
+}
+
+.repoctl-not-found > p:not(.repoctl-not-found__code) {
+  max-width: 56ch;
+  margin-top: 16px;
+  line-height: 1.65;
+  color: var(--repoctl-muted);
+}
+
+.repoctl-not-found a {
+  display: inline-block;
+  margin-top: 24px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
+}

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

@@ -0,0 +1,3 @@
+@import './foundation.css';
+@import './sections.css';
+@import './responsive.css';

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

@@ -0,0 +1,142 @@
+@media (max-width: 1023px) {
+  .repoctl-home__hero {
+    grid-template-columns: 1fr;
+    gap: 44px;
+    min-height: auto;
+  }
+
+  .repoctl-home__hero-copy {
+    max-width: 760px;
+  }
+
+  .repoctl-home__hero-visual {
+    width: min(100%, 760px);
+    aspect-ratio: 1.65;
+  }
+
+  .repoctl-home__hero-visual img {
+    width: 112%;
+  }
+
+  .repoctl-home__evidence {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+
+  .repoctl-home__workflow {
+    min-height: 260px;
+  }
+}
+
+@media (max-width: 767px) {
+  .repoctl-home {
+    padding: 16px 20px 76px;
+  }
+
+  .repoctl-home__hero {
+    gap: 32px;
+    padding: 36px 0 52px;
+  }
+
+  .repoctl-home__hero h1 {
+    font-size: clamp(38px, 11.5vw, 48px);
+    line-height: 1.04;
+  }
+
+  .repoctl-home__lede {
+    margin-top: 20px !important;
+    font-size: 16px;
+  }
+
+  .repoctl-home__hero-actions {
+    margin-top: 28px;
+  }
+
+  .repoctl-home__button {
+    flex: 1 1 140px;
+  }
+
+  .repoctl-home__hero-visual {
+    aspect-ratio: 1.18;
+  }
+
+  .repoctl-home__hero-visual img {
+    width: 150%;
+  }
+
+  .repoctl-home__section {
+    padding-top: 76px;
+  }
+
+  .repoctl-home__section-heading {
+    margin-bottom: 28px;
+  }
+
+  .repoctl-home__task-list {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .repoctl-home__task,
+  .repoctl-home__task:nth-child(4n + 1),
+  .repoctl-home__task:nth-child(4n) {
+    grid-column: auto;
+    min-height: 196px;
+    padding: 24px;
+  }
+
+  .repoctl-home__task-copy {
+    margin-top: 22px;
+  }
+
+  .repoctl-home__steps {
+    grid-template-columns: 1fr;
+  }
+
+  .repoctl-home__steps li,
+  .repoctl-home__steps li + li {
+    min-height: auto;
+    padding: 24px 0;
+    border-left: 0;
+  }
+
+  .repoctl-home__steps li + li {
+    border-top: 1px solid var(--repoctl-line);
+  }
+
+  .repoctl-home__workflow {
+    gap: 10px;
+    min-height: 250px;
+    padding: 24px 20px;
+  }
+
+  .repoctl-home__workflow pre {
+    font-size: 12px;
+    line-height: 2;
+  }
+
+  .repoctl-home__layer-list {
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .repoctl-home__layer,
+  .repoctl-home__layer:first-child {
+    grid-row: auto;
+    min-height: 190px;
+    padding: 24px;
+  }
+
+  .repoctl-home__layer:first-child h3 {
+    font-size: 24px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .repoctl-home__button,
+  .repoctl-home__task,
+  .repoctl-home__layer {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,232 @@
+.repoctl-home__task-list {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.repoctl-home__task {
+  display: flex;
+  flex-direction: column;
+  grid-column: span 5;
+  min-height: 210px;
+  padding: 28px;
+  text-decoration: none !important;
+  background: var(--repoctl-surface);
+  border: 1px solid var(--repoctl-line);
+  border-radius: 8px;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.repoctl-home__task:nth-child(4n + 1),
+.repoctl-home__task:nth-child(4n) {
+  grid-column: span 7;
+}
+
+.repoctl-home__task:first-child {
+  background: var(--repoctl-accent-soft);
+}
+
+.repoctl-home__task:nth-child(3) {
+  background: var(--repoctl-soft);
+}
+
+.repoctl-home__task:hover {
+  border-color: var(--repoctl-accent);
+  transform: translateY(-2px);
+}
+
+.repoctl-home__task:active {
+  transform: translateY(1px);
+}
+
+.repoctl-home__task > code {
+  align-self: flex-start;
+  color: var(--repoctl-accent);
+}
+
+.repoctl-home__task-copy {
+  margin-top: 28px;
+}
+
+.repoctl-home__task h3 {
+  font-size: 21px;
+}
+
+.repoctl-home__task p {
+  max-width: 48ch;
+  margin-top: 8px !important;
+  font-size: 14px;
+}
+
+.repoctl-home__task-link,
+.repoctl-home__text-link {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
+  white-space: nowrap;
+}
+
+.repoctl-home__task-link {
+  padding-top: 28px;
+  margin-top: auto;
+}
+
+.repoctl-home__steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid var(--repoctl-line);
+  border-bottom: 1px solid var(--repoctl-line);
+}
+
+.repoctl-home__steps li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 18px;
+  min-height: 238px;
+  padding: 30px 30px 30px 0;
+}
+
+.repoctl-home__steps li + li {
+  padding-left: 30px;
+  border-left: 1px solid var(--repoctl-line);
+}
+
+.repoctl-home__step-number {
+  padding-top: 3px;
+  font-family: var(--vp-font-family-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--repoctl-accent);
+}
+
+.repoctl-home__steps h3 {
+  font-size: 21px;
+}
+
+.repoctl-home__steps code {
+  display: block;
+  margin-top: 18px;
+  color: var(--repoctl-accent);
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.repoctl-home__steps p {
+  margin-top: 14px !important;
+  font-size: 14px;
+}
+
+.repoctl-home__evidence {
+  display: grid;
+  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
+  gap: 64px;
+  align-items: center;
+}
+
+.repoctl-home__evidence .repoctl-home__text-link {
+  display: inline-block;
+  margin-top: 24px;
+}
+
+.repoctl-home__workflow {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+  min-height: 310px;
+  padding: 34px;
+  color: var(--repoctl-code-text);
+  background: var(--repoctl-code);
+  border: 1px solid var(--repoctl-line);
+  border-radius: 8px;
+  box-shadow: var(--repoctl-shadow);
+}
+
+.repoctl-home__workflow-prompt {
+  font-family: var(--vp-font-family-mono);
+  font-weight: 800;
+  color: #70d7ff;
+}
+
+.repoctl-home__workflow pre {
+  min-width: 0;
+  padding: 0;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 2.15;
+  color: inherit;
+  background: transparent;
+}
+
+.repoctl-home__workflow code {
+  display: block;
+  color: inherit;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.repoctl-home__layer-list {
+  display: grid;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+  gap: 16px;
+}
+
+.repoctl-home__layer {
+  display: flex;
+  flex-direction: column;
+  min-height: 156px;
+  padding: 26px;
+  text-decoration: none !important;
+  background: var(--repoctl-surface);
+  border: 1px solid var(--repoctl-line);
+  border-radius: 8px;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.repoctl-home__layer:first-child {
+  grid-row: 1 / 3;
+  min-height: 328px;
+  padding: 34px;
+  background: var(--repoctl-accent-soft);
+}
+
+.repoctl-home__layer:hover {
+  border-color: var(--repoctl-accent);
+  transform: translateY(-2px);
+}
+
+.repoctl-home__layer:active {
+  transform: translateY(1px);
+}
+
+.repoctl-home__layer h3 {
+  max-width: 18ch;
+  font-size: 22px;
+  color: var(--repoctl-accent);
+}
+
+.repoctl-home__layer:first-child h3 {
+  font-size: 30px;
+}
+
+.repoctl-home__layer p {
+  max-width: 48ch;
+  margin-top: 10px !important;
+  font-size: 14px;
+}
+
+.repoctl-home__layer .repoctl-home__text-link {
+  padding-top: 24px;
+  margin-top: auto;
+}