@robinmordasiewicz/f5xc-docs-theme 1.8.1 → 1.10.0

package/astro.config.mjs

@@ -17,6 +17,11 @@ export default defineConfig({
       logo: {
         src: 'f5xc-docs-theme/assets/f5-logo.svg',
       },
+      ...(process.env.GITHUB_REPOSITORY ? {
+        editLink: {
+          baseUrl: `https://github.com/${process.env.GITHUB_REPOSITORY}/edit/main/`,
+        },
+      } : {}),
       social: [
         {
           label: 'GitHub',

package/components/PageTitle.astro

@@ -2,7 +2,7 @@
 import Default from '@astrojs/starlight/components/PageTitle.astro';
 
 const docsHome = process.env.DOCS_HOME || 'https://robinmordasiewicz.github.io/f5xc-docs/';
-const { sidebar, entry, siteTitle } = Astro.locals.starlightRoute;
+const { sidebar, entry, siteTitle, editUrl } = Astro.locals.starlightRoute;
 
 function findTrail(entries: typeof sidebar, trail: { label: string }[] = []): { label: string }[] | null {
   for (const item of entries) {
@@ -29,5 +29,16 @@ const trail = findTrail(sidebar) || [];
     ))}
     <li aria-current="page"><span>{entry.data.title}</span></li>
   </ol>
+  {editUrl && (
+    <a href={editUrl.href} target="_blank" rel="noopener noreferrer" class="edit-link">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+        fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+        <path d="m15 5 4 4" />
+      </svg>
+      <span>Edit</span>
+    </a>
+  )}
 </nav>
 <Default {...Astro.props}><slot /></Default>

package/fonts/font-face.css

@@ -30,6 +30,22 @@
   src: url("./neusaNextProWide-700.woff2") format("woff2");
 }
 
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  src: url("./neusaNextProWide-400i.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "neusaNextProWide";
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+  src: url("./neusaNextProWide-700i.woff2") format("woff2");
+}
+
 @font-face {
   font-family: "proximaNova";
   font-weight: 400;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robinmordasiewicz/f5xc-docs-theme",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "license": "MIT",

package/styles/custom.css

@@ -95,12 +95,36 @@
 /* ===== Fonts & Layout ===== */
 :root {
   --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
+  --sl-font-heading: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
   --sl-content-width: 60rem;
   --sl-sidebar-width: 15rem;
+
+  /* Typography scale mapped to F5 hierarchy */
+  --sl-line-height-headings: 1.1;
+  --sl-text-h1: var(--sl-text-5xl);
+  --sl-text-h2: var(--sl-text-3xl);
+  --sl-text-h3: var(--sl-text-2xl);
+  --sl-text-h4: var(--sl-text-lg);
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-family: var(--sl-font-heading);
+}
+
+/* F5 type hierarchy weights */
+h1, h2 {
+  font-weight: 700;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+h4, h5, h6 {
+  font-family: var(--sl-font);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 @media (min-width: 72rem) {
@@ -193,12 +217,26 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* Breadcrumb navigation */
+.breadcrumbs {
+  position: sticky;
+  top: var(--sl-nav-height, 3.5rem);
+  z-index: 1;
+  background: var(--sl-color-black);
+  padding-block: 0.5rem;
+  margin-inline: -1rem;
+  padding-inline: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
 .breadcrumbs ol {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
-  margin: 0 0 0.5rem;
+  margin: 0;
   font-size: 0.85rem;
   color: var(--sl-color-gray-3);
 }
@@ -222,4 +260,79 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--sl-color-white);
 }
 
+/* Edit on GitHub pill */
+.edit-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--sl-color-gray-3);
+  background: var(--sl-color-gray-6);
+  border: 1px solid var(--sl-color-gray-5);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.edit-link:hover {
+  color: var(--sl-color-white);
+  background: var(--sl-color-gray-5);
+  border-color: var(--sl-color-gray-4);
+  text-decoration: none;
+}
+
+.edit-link svg {
+  flex-shrink: 0;
+}
+
+/* ===== Color Swatch Styles ===== */
+.swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+  gap: 1rem;
+  margin-block: 1.5rem;
+}
+
+.swatch {
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 24px 48px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--sl-color-gray-5);
+}
+
+.swatch-color {
+  height: 5rem;
+  display: flex;
+  align-items: flex-end;
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-family: var(--sl-font);
+}
+
+.swatch-color.text-light { color: #ffffff; }
+.swatch-color.text-dark { color: #000000; }
+
+.swatch-label {
+  padding: 0.5rem;
+  font-size: 0.7rem;
+  line-height: 1.4;
+  font-family: var(--sl-font);
+  background: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-1);
+}
+
+.swatch-label code {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--sl-color-gray-3);
+}
+
 /* release pipeline verified */