@robinmordasiewicz/f5xc-docs-theme 1.9.0 → 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/package.json

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

package/styles/custom.css

@@ -217,12 +217,26 @@ 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);
 }
@@ -246,4 +260,79 @@ 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 */