cabloy 5.1.158 → 5.1.159

package/.cabloy-version

@@ -1 +1 @@
-5.1.158
+5.1.159

package/.claude/skills/cabloy-contract-loop/SKILL.md

@@ -18,11 +18,11 @@ This includes the reverse fullstack direction where newly added frontend resourc
 In that situation:
 
 1. run the normal sync or regeneration flow first
-2. run the relevant Zova build from the repo root before `npm run deps:vona`
-   - use `npm run build:zova:admin` for Admin-facing render/action/metadata changes
-   - also run `npm run build:zova:web` when the Web flavor is affected
+2. identify every affected flavor from the active repository’s root wrappers and lower-level Zova scripts, then run each matching paired SSR/REST build before `npm run deps:vona`
+   - `npm run build:zova:admin` and `npm run build:zova:web` are representative default wrappers only
+   - an independently named site must use its own source-confirmed paired root wrapper; do not relabel or assume a default wrapper refreshed it
 3. do not treat `build:rest:*` alone as sufficient, because the SSR bundle and rest output must move together
-4. run `npm run deps:vona`
+4. run `npm run deps:vona` after the required flavor builds
 5. if the generated `.zova-rest` artifacts already contain the expected changes but Vona still sees stale types, delete `vona/node_modules` and reinstall dependencies
 
 Do not keep debugging source-level contract or renderer changes until the local file-package installation state is known to be healthy.
@@ -101,6 +101,22 @@ In this mode, first diagnose whether the visible stale behavior comes from skipp
 
 Use this mode when generated artifacts already contain the expected keys, types, or resources, but installed local file dependencies still behave stale after the normal sync flow.
 
+### Mode E: independent SSR flavor and site
+
+Use this mode when the request adds a deployable Zova SSR surface that Vona must dispatch separately. This is more than a page or route inside an existing site.
+
+Before proposing implementation, inspect the active repository rather than inferring names from Admin or Web:
+
+1. edition marker and root `package.json` wrappers;
+2. `zova/package.json` or its durable source for matching `dev:ssr:*`, `build:ssr:*`, and `build:rest:*` scripts;
+3. flavor env/config and its `SITE_ID`, mount path, SSR profile, and artifact-copy targets;
+4. a Vona `@SsrSite(...)` baseline and the owning site-module asset path;
+5. the expected SSR release directory and flavor-specific `zova-rest-*` package.
+
+The independent identity tuple—flavor, site ID, public path, bundle path, REST package, Vona site module, and root paired-build wrapper—must be selected together. The root wrapper must build both SSR and REST output before `npm run deps:vona`; `build:rest:*` alone is not enough. Default Basic or Start Admin/Web wrappers are validated specimens, not a command template for a differently named site.
+
+Read [Independent SSR Site and Flavor Setup](../../../repo-docs/fullstack/ssr-site-and-flavor-setup.md) for the canonical setup and evidence procedure.
+
 If the task is only backend scaffolding or only frontend scaffolding, the more specialized scaffold skills may be the better primary choice.
 
 ## Step 2: Start from the contract source of truth
@@ -225,7 +241,7 @@ Important Cabloy Basic reverse-sync rule:
 - if the change was consumer-side, low-confidence, cross-edition, or happened outside the Claude hook path, run the reverse sync flow deliberately yourself
 - prefer visible proof under `zova/src/**/.metadata/**` when it is available; if the effective handoff only appears in `.zova-rest`, treat the safeguard as conservative reminder/auto-sync assistance rather than strict proof
 
-For Cabloy Start, verify the exact Start-specific flavor names, paths, SSR site baselines, and project assets in the active Start repository.
+For Cabloy Start, verify the exact Start-specific flavor names, paths, SSR site baselines, project assets, and source-confirmed root wrappers in the active Start repository. If the work affects an independent SSR site, follow Mode E: build that site’s paired wrapper rather than assuming an Admin/Web command covers it.
 
 ### Schema-driven UI decision branch
 
@@ -273,10 +289,11 @@ Especially verify:
 
 - active repo marker
 - affected frontend flavor
-- whether the change affects Admin, Web, or both
+- whether the change affects a default Admin/Web site, an independent site, or more than one site
+- source-confirmed root wrapper for every affected flavor
 - whether the generated output path is edition-specific
 
-Do not silently reuse Basic-specific examples in Start workflows.
+Do not silently reuse Basic-specific examples in Start workflows or treat default Admin/Web commands as an independent-site template.
 
 ## Step 7: End-to-end verification
 

package/.claude/skills/cabloy-contract-loop/evals/evals.json

@@ -30,6 +30,18 @@
       "prompt": "One persisted Order domain needs read-only Admin select/view operations through presetResource and customer Web list/detail reads. Should Admin and Web share one API and ModelResource, or should I use mine/viewMine-style Web operations and a separate Web model? Include the Cabloy contract-loop steps.",
       "expected_output": "Keeps one domain and persistence boundary while separating Admin select/view and explicit owner-scoped Web operations with audience-specific DTOs. Keeps ModelResource as the Admin Resource owner and accepts a dedicated Web model/pages only for the distinct self-service state. Requires backend-first OpenAPI inspection, constrained regeneration for all owned operations, and verification of Admin authorization, Web owner scope before pagination, SSR admission where relevant, and both consumer paths. Rejects forcing Web through presetResource and rejects a parallel Admin cache owner for an ordinary custom Admin action.",
       "files": []
+    },
+    {
+      "id": 6,
+      "prompt": "In Cabloy Start, add an independently mounted SSR site with a new Zova flavor. What must be discovered and built before Vona can serve it?",
+      "expected_output": "Detects the Start repository and discovers the site-specific flavor env/config, lower-level SSR and REST scripts, root paired wrapper, Vona @SsrSite baseline, artifact path, and generated zova-rest package. Requires a new aligned site identity tuple and paired SSR-plus-REST build followed by deps:vona. Rejects reusing or relabeling default Admin/Web wrappers, REST-only rebuilding, and Commerce-specific names or paths as a generic template.",
+      "files": []
+    },
+    {
+      "id": 7,
+      "prompt": "A Vona consumer remains stale after an independent SSR flavor change. The new flavor artifacts appear correct. What is the safe Cabloy diagnosis order?",
+      "expected_output": "Requires proving that the selected site-specific wrapper generated both SSR and REST artifacts, confirming the matching Vona bundle/type identity, and running deps:vona before calling it local dependency drift. Does not suggest REST-only rebuilding or default Admin/Web commands for the independent site. Only after the normal handoff is proved does it recommend repairing Vona local installation state.",
+      "files": []
     }
   ]
 }

package/.claude/skills/cabloy-contract-loop/references/contract-loop-map.md

@@ -145,6 +145,34 @@ The Web model is valid only for the separate self-service state domain. It must
    - backend tooling and type hints
    - SSR or integration paths that depend on refreshed frontend output
 
+## Independent SSR site/flavor handoff map
+
+Use this map when Vona must serve a newly independent Zova SSR site, rather than when a route is added to an existing site.
+
+1. authored site boundary
+   - flavor env and optional flavor config
+   - site-specific route, layout, admission, locale, and asset choices
+   - exact site ID and mounted public path
+2. paired frontend artifacts
+   - SSR bundle and client assets copied to the owning Vona site module
+   - flavor-specific generated REST/type package copied to Vona’s local workspace
+   - one source-confirmed root wrapper that produces both outputs
+3. Vona consumer registration
+   - independently packaged site module
+   - `@SsrSite(...)` identity, public path, bundle path, localized title, and diagnostics command
+   - typed site/public-path augmentation plus generated page/icon imports from the matching REST package
+4. dependency handoff
+   - run the selected site wrapper first
+   - run `npm run deps:vona` only after both artifacts exist
+   - do not treat `build:rest:*` alone as a Vona SSR handoff
+5. consumer proof
+   - Vona dispatch reaches the intended public path
+   - raw HTML is server-rendered and assets resolve
+   - browser hydration and route aliases preserve the mounted boundary
+   - admission, redirect, and cache behavior match the site contract
+
+Default Admin/Web wrappers are specimens only. Discover the independently named site’s own scripts and generated paths from the active edition before recommending commands.
+
 ## Drift diagnosis matrix
 
 ### Source wrong

package/.claude/skills/cabloy-contract-loop/references/verification-checklist.md

@@ -37,8 +37,9 @@ When one persisted domain has both Admin Resource and Web self-service consumers
 
 - frontend-owned source is correct
 - metadata generation completed when applicable
-- the relevant flavor build completed successfully
-- `deps:vona` completed
+- every affected flavor’s source-confirmed paired SSR/REST build completed successfully
+- `deps:vona` completed after the paired builds
+- `build:rest:*` was not treated as the only Vona SSR handoff
 - backend consumers can resolve the refreshed frontend-generated handoff
 - prefer visible proof under `zova/src/**/.metadata/**` when it is available
 - this repo does not rely on a contract-loop pre-commit gate; the active safeguard is the Claude hook layer
@@ -48,6 +49,22 @@ When one persisted domain has both Admin Resource and Web self-service consumers
 - `npm run tsc:zova`
 - relevant flavor-specific or route-specific checks
 
+### Independent SSR site/flavor verification
+
+When Vona consumes a new independent SSR site, also verify:
+
+- the active edition and exact flavor are confirmed from source
+- `SITE_ID`, Vona `siteId`, Zova `APP_PUBLIC_PATH`, and Vona `publicPath` align; enabled site IDs and public paths remain unique
+- Vona `bundlePath` exactly matches the copied SSR release directory
+- the generated `zova-rest-*` package matches the Vona type import
+- the source-confirmed root wrapper generated both the SSR bundle and REST/type output
+- `npm run deps:vona` ran after that paired build, and Vona resolves the refreshed local package
+- the site diagnostics command names that same wrapper rather than a default Admin/Web command
+- raw Vona-served HTML proves server rendering at the intended mounted path
+- client assets load, hydration completes without mismatch, and aliases do not duplicate the mount path
+- public/private admission, redirect, and cache expectations match the selected SSR profile
+- targeted browser or E2E evidence covers the site through Vona, not only a standalone frontend server
+
 ## Consumer drift verification
 
 - source truth already looks correct

package/.claude/skills/cabloy-resource-field-update/SKILL.md

@@ -180,6 +180,24 @@ Important serialization reminder:
 - for performance reasons, Vona response serialization is opt-in per API action
 - verify that the target controller action explicitly uses `@Core.serializer()` before concluding that serializer metadata is broken
 
+### Join-backed foreign-key filtering and sorting
+
+Use this metadata/query-contract branch when a persisted relation field remains an identity, but a resource list must filter or order it by a human-readable column on the related table. This is a metadata-only refinement when the foreign-key column already exists; do not increment `fileVersion` solely for this behavior.
+
+Keep the entity field name and identity schema unchanged. Put the relation mapping on the entity field so inferred projections retain it:
+
+- `v.filter({ table, joinType, joinOn, originalName, op })` maps the public relation field to the related display column;
+- `ZovaRender.column({ enableSorting: true })` exposes the table sort control when the list should support ordering;
+- preserve existing relation picker/cell metadata and `v.tableIdentity()` (or the applicable identity schema).
+
+For a required relation, `innerJoin` is usually appropriate. When the relation is optional or unmatched base rows must remain visible, choose the join semantics explicitly instead of copying an inner-join example.
+
+Keep the public query and order key equal to the foreign-key field name. In the select request DTO, retain that inferred field and use `$makeSchema(...)` only to change its query-input schema and renderer, usually to `v.optional()`, `z.string()`, and Cabloy Basic's `basic-input:formFieldInput`. Do not replace the entity storage schema with a string or add a parallel display-name parameter unless the API intentionally exposes separate ID and display-name filters.
+
+Verify direct DTO metadata, the emitted optional text query parameter, absence of an unintended alternate parameter, visible sortable-column metadata, and endpoint filtering plus ascending/descending ordering. Confirm that filtering and ordering resolve to the intended related display column and inject the expected join.
+
+See [Existing Resource Field Update](../../../repo-docs/backend/resource-field-update.md#filter-and-sort-a-relation-by-its-display-field) for the public pattern and links to the ORM and frontend query-flow guides.
+
 ## Step 6: Apply the renderer branch deliberately
 
 ### Default rule: prefer shared renderer reuse

package/.claude/skills/cabloy-zova-source-reading/SKILL.md

@@ -139,6 +139,20 @@ When a translated schema title, renderer, or validation surface remains stale af
 
 The key distinction is between a genuinely stale generated contract and a valid schema facade captured from an earlier locale. `$computed` is only locale-safe when its dependency path reacquires the current schema source; wrapping an old facade or transformed snapshot does not make it current.
 
+### Raw-`this` reactivity boundary
+
+When an author reports that a controller field changed but a TSX render, `$computed`, or `$watch` did not react, inspect this lifecycle boundary before recommending framework-neutral rewrites:
+
+1. inspect `zova-core/src/bean/beanContainer.ts` `BeanContainer._prepareBeanInstanceCommon(...)` to verify that `new BeanClass(...)` occurs before the framework exposes the reactive/proxied bean;
+2. inspect `BeanContainer._initBeanInstance(...)` to verify that `__init__()` is invoked only after preparation;
+3. check whether a class-field arrow callback or construction-time `bind(this)` captured raw `this` and later writes bean state;
+4. distinguish this from a callback created in `__init__()`, whose lexical `this` is the exposed bean; and
+5. verify whether the dependent render read through that same exposed identity.
+
+State the consequence precisely: a proxy-based TSX render read can track normally, while a mutation through a raw construction-time callback changes the underlying field without notifying that dependency. An unrelated reactive update can later expose the changed value during another render.
+
+Do **not** summarize this as “arrow functions are non-reactive,” and do not default to `ref.value`, `toRaw`, or generic Vue rewrites. Explain the Zova bean lifecycle first; recommend ordinary controller methods for normal actions, or closures created in `__init__()` only when a stable callback reference is required.
+
 ## Step 5: Explain Zova-native meaning first
 
 When answering, explain the Zova role first, then add Vue analogies only if they help.

package/.claude/skills/cabloy-zova-source-reading/references/core-reading-paths.md

@@ -20,6 +20,16 @@ Use when the question is about:
 - `$computed`
 - `$params` / `$query`
 - page render flow
+- a class-field arrow callback, callback identity, or stale TSX after an apparent controller-state mutation
+
+For a raw-`this` reactivity symptom, verify this expected sequence:
+
+1. `BeanContainer` constructs the class instance before it exposes the reactive/proxied bean;
+2. a class-field arrow callback captures that construction-time raw `this`;
+3. `__init__()` runs after preparation, so a closure created there captures the exposed bean instead; and
+4. a render dependency invalidates only when its mutation travels through the same exposed reactive identity used for the read.
+
+Therefore, do not classify the issue as “arrow functions are non-reactive.” Distinguish a raw-captured write that changes the underlying field without a trigger from an ordinary controller method or `__init__()` callback that writes through the exposed bean.
 
 ## Component controller and wrapper path
 

package/.github/workflows/docs-pages.yml

@@ -5,6 +5,9 @@ on:
       - main
     paths:
       - 'repo-docs/**'
+      - 'repo-e2e/docs/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
       - 'README.md'
       - '.github/workflows/docs-pages.yml'
   workflow_dispatch:
@@ -33,12 +36,25 @@ jobs:
           node-version: 24
           cache: pnpm
           cache-dependency-path: repo-docs/pnpm-lock.yaml
+      - name: install root dependencies
+        run: pnpm install --frozen-lockfile
       - name: install docs dependencies
         run: pnpm --dir repo-docs install --frozen-lockfile
-      - name: build docs
+      - name: install Chromium
+        run: pnpm exec playwright install --with-deps chromium
+      - name: build docs and verify layout
         env:
           GA_MEASUREMENT_ID: ${{ vars.GA_MEASUREMENT_ID }}
-        run: pnpm --dir repo-docs docs:build
+        run: npm run test:docs:e2e
+      - name: upload docs E2E artifacts
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: docs-e2e-artifacts
+          path: |
+            repo-e2e/docs/playwright-report/
+            repo-e2e/docs/test-results/
+          if-no-files-found: ignore
       - name: setup pages
         uses: actions/configure-pages@v5
       - name: upload pages artifact

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 5.1.159
+
+### Features
+
+- Add form layout support.
+- Add render column support.
+- Add OpenAPI title support for DTOs.
+- Add form schema title support.
+- Add configurable page title keys.
+- Add blog styling enhancements.
+
+### Improvements
+
+- Update documentation for joined backend filtering and sorting.
+- Document raw `this` reactivity boundaries.
+- Document SSR site and flavor setup.
+- Improve documentation links, layouts, page metadata guidance, and blog styling.
+- Update site configuration and controller behavior.
+
 ## 5.1.158
 
 ### Improvements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.158",
+  "version": "5.1.159",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [
@@ -47,6 +47,7 @@
     "test": "cd vona && npm run test",
     "test:e2e": "node repo-e2e/scripts/runE2e.ts --clean",
     "test:e2e:fast": "node repo-e2e/scripts/runE2e.ts --fast",
+    "test:docs:e2e": "npm run docs:build && playwright test --config repo-e2e/docs/playwright.config.ts",
     "db:reset": "cd vona && npm run db:reset",
     "tsc": "npm run tsc:zova && pnpm --dir vona run tsc",
     "tsc:zova": "pnpm --dir zova run tsc",

package/repo-docs/.vitepress/config.mjs

@@ -97,6 +97,7 @@ const fullstackGroups = [
       },
       { text: 'Framework Performance', link: '/fullstack/framework-performance' },
       { text: 'Vona + Zova Integration', link: '/fullstack/vona-zova-integration' },
+      { text: 'SSR Site and Flavor Setup', link: '/fullstack/ssr-site-and-flavor-setup' },
       { text: 'A-Pay Payment Suite', link: '/fullstack/a-pay-payment-suite' },
       {
         text: 'Payment Provider Sandbox Configuration',
@@ -191,19 +192,49 @@ export default defineConfig({
   base: '/',
   ignoreDeadLinks: [/^https?:\/\/localhost/],
   head: gaHead,
+  transformPageData(pageData) {
+    if (!/^blogs\/[^/]+\/index\.md$/.test(pageData.relativePath)) return;
+
+    const pageClass = [pageData.frontmatter.pageClass, 'cabloy-blogs-article']
+      .filter(Boolean)
+      .join(' ');
+    return {
+      frontmatter: {
+        ...pageData.frontmatter,
+        pageClass,
+      },
+    };
+  },
   markdown: {
     lineNumbers: true,
   },
   themeConfig: {
     nav: [
       { text: 'Home', link: '/' },
+      {
+        text: 'Docs',
+        items: [
+          { text: 'Fullstack', link: '/fullstack/introduction', activeMatch: '^/fullstack/' },
+          { text: 'Backend (Vona)', link: '/backend/introduction', activeMatch: '^/backend/' },
+          { text: 'Frontend (Zova)', link: '/frontend/introduction', activeMatch: '^/frontend/' },
+        ],
+      },
       { text: 'Blogs', link: '/blogs/', activeMatch: '^/blogs/' },
-      { text: 'Fullstack', link: '/fullstack/introduction', activeMatch: '^/fullstack/' },
-      { text: 'Backend (Vona)', link: '/backend/introduction', activeMatch: '^/backend/' },
-      { text: 'Frontend (Zova)', link: '/frontend/introduction', activeMatch: '^/frontend/' },
       { text: 'Editions', link: '/editions/overview', activeMatch: '^/editions/' },
       { text: 'AI Development', link: '/ai/introduction', activeMatch: '^/ai/' },
       { text: 'Reference', link: '/reference/introduction', activeMatch: '^/reference/' },
+      {
+        component: 'GitHubRepositoriesNav',
+        props: {
+          repositories: [
+            { text: 'github.com/cabloy/cabloy', link: 'https://github.com/cabloy/cabloy' },
+            {
+              text: 'github.com/cabloy/cabloy-start',
+              link: 'https://github.com/cabloy/cabloy-start',
+            },
+          ],
+        },
+      },
     ],
     sidebar: {
       '/fullstack/': fullstackGroups,
@@ -634,7 +665,6 @@ export default defineConfig({
       ],
       '/reference/': referenceGroups,
     },
-    socialLinks: [{ icon: 'github', link: 'https://github.com/cabloy/cabloy' }],
     search: {
       provider: 'local',
     },

package/repo-docs/.vitepress/theme/components/GitHubRepositoriesNav.vue

@@ -0,0 +1,255 @@
+<script setup>
+import { nextTick, onMounted, onUnmounted, ref, useId } from 'vue';
+
+const props = defineProps({
+  repositories: {
+    type: Array,
+    required: true,
+  },
+  screenMenu: Boolean,
+});
+
+const isOpen = ref(false);
+const root = ref();
+const trigger = ref();
+const menu = ref();
+const menuId = useId();
+
+function close({ returnFocus = false } = {}) {
+  isOpen.value = false;
+  if (returnFocus) {
+    trigger.value?.focus();
+  }
+}
+
+async function open({ focusIndex } = {}) {
+  isOpen.value = true;
+  if (focusIndex === undefined) return;
+
+  await nextTick();
+  menu.value?.querySelectorAll('a')[focusIndex]?.focus();
+}
+
+function toggle() {
+  if (isOpen.value) {
+    close();
+  } else {
+    open();
+  }
+}
+
+function handleTriggerKeydown(event) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    open({ focusIndex: 0 });
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    open({ focusIndex: props.repositories.length - 1 });
+  } else if (event.key === 'Escape') {
+    close();
+  }
+}
+
+function handleMenuKeydown(event) {
+  const links = [...menu.value.querySelectorAll('a')];
+  const index = links.indexOf(document.activeElement);
+  if (index === -1) return;
+
+  let nextIndex;
+  if (event.key === 'ArrowDown') {
+    nextIndex = (index + 1) % links.length;
+  } else if (event.key === 'ArrowUp') {
+    nextIndex = (index - 1 + links.length) % links.length;
+  } else if (event.key === 'Home') {
+    nextIndex = 0;
+  } else if (event.key === 'End') {
+    nextIndex = links.length - 1;
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    close({ returnFocus: true });
+    return;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+  links[nextIndex]?.focus();
+}
+
+function handlePointerDown(event) {
+  if (isOpen.value && !root.value?.contains(event.target)) {
+    close();
+  }
+}
+
+function handleFocusIn(event) {
+  if (isOpen.value && !root.value?.contains(event.target)) {
+    close();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handlePointerDown);
+  document.addEventListener('focusin', handleFocusIn);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', handlePointerDown);
+  document.removeEventListener('focusin', handleFocusIn);
+});
+</script>
+
+<template>
+  <section v-if="screenMenu" class="cabloy-github-repositories cabloy-github-repositories--screen">
+    <p class="cabloy-github-repositories__title">GitHub repositories</p>
+    <a
+      v-for="repository in repositories"
+      :key="repository.link"
+      class="cabloy-github-repositories__screen-link"
+      :href="repository.link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ repository.text }}
+    </a>
+  </section>
+
+  <div v-else ref="root" class="cabloy-github-repositories">
+    <button
+      ref="trigger"
+      class="cabloy-github-repositories__trigger"
+      type="button"
+      aria-label="GitHub repositories"
+      aria-haspopup="menu"
+      :aria-controls="menuId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+      @keydown="handleTriggerKeydown"
+    >
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12 2C6.477 2 2 6.59 2 12.253c0 4.53 2.865 8.37 6.839 9.727.5.095.682-.223.682-.494 0-.244-.009-1.05-.014-1.906-2.782.621-3.369-1.215-3.369-1.215-.455-1.185-1.11-1.5-1.11-1.5-.908-.64.069-.627.069-.627 1.004.073 1.532 1.057 1.532 1.057.892 1.567 2.341 1.114 2.91.852.09-.663.349-1.115.635-1.371-2.22-.26-4.555-1.139-4.555-5.067 0-1.12.39-2.034 1.03-2.752-.104-.26-.447-1.306.098-2.724 0 0 .84-.278 2.75 1.051A9.3 9.3 0 0 1 12 6.89a9.3 9.3 0 0 1 2.504.347c1.909-1.33 2.748-1.051 2.748-1.051.546 1.418.203 2.464.1 2.724.64.718 1.028 1.632 1.028 2.752 0 3.938-2.339 4.804-4.566 5.058.359.32.678.947.678 1.91 0 1.38-.012 2.492-.012 2.832 0 .274.18.594.688.493C19.14 20.619 22 16.78 22 12.253 22 6.59 17.523 2 12 2Z"
+        />
+      </svg>
+    </button>
+
+    <div
+      v-if="isOpen"
+      :id="menuId"
+      ref="menu"
+      class="cabloy-github-repositories__menu"
+      role="menu"
+      aria-label="GitHub repositories"
+      @keydown="handleMenuKeydown"
+    >
+      <a
+        v-for="repository in repositories"
+        :key="repository.link"
+        class="cabloy-github-repositories__menu-link"
+        :href="repository.link"
+        role="menuitem"
+        target="_blank"
+        rel="noopener noreferrer"
+        @click="close"
+      >
+        {{ repository.text }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cabloy-github-repositories {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.cabloy-github-repositories__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+}
+
+.cabloy-github-repositories__trigger:hover,
+.cabloy-github-repositories__trigger[aria-expanded='true'] {
+  color: var(--vp-c-text-1);
+}
+
+.cabloy-github-repositories__trigger:focus-visible,
+.cabloy-github-repositories__menu-link:focus-visible,
+.cabloy-github-repositories__screen-link:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
+.cabloy-github-repositories__trigger svg {
+  width: 20px;
+  height: 20px;
+}
+
+.cabloy-github-repositories__menu {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 160px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 4px;
+  background: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-3);
+}
+
+.cabloy-github-repositories__menu-link,
+.cabloy-github-repositories__screen-link {
+  display: block;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+}
+
+.cabloy-github-repositories__menu-link {
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+}
+
+.cabloy-github-repositories__menu-link:hover {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.cabloy-github-repositories--screen {
+  display: block;
+  padding: 12px 0;
+}
+
+.cabloy-github-repositories__title {
+  margin: 0 0 4px;
+  color: var(--vp-c-text-2);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  text-transform: uppercase;
+}
+
+.cabloy-github-repositories__screen-link {
+  padding: 0.5rem 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.cabloy-github-repositories__screen-link:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/repo-docs/.vitepress/theme/custom.css

@@ -63,6 +63,27 @@
   color: #fdba74;
 }
 
+@media (min-width: 960px) {
+  .cabloy-blogs-index .VPDoc:not(.has-sidebar) .container,
+  .cabloy-blogs-index .VPDoc:not(.has-sidebar) .content {
+    max-width: 1440px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .cabloy-blogs-article .VPDoc.has-aside:not(.has-sidebar) .container {
+    max-width: 1216px;
+  }
+
+  .cabloy-blogs-article .VPDoc.has-aside:not(.has-sidebar) .content {
+    max-width: 960px;
+  }
+
+  .cabloy-blogs-article .VPDoc.has-aside:not(.has-sidebar) .content-container {
+    max-width: 896px;
+  }
+}
+
 .cabloy-blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

package/repo-docs/.vitepress/theme/index.js

@@ -1,5 +1,11 @@
 import DefaultTheme from 'vitepress/theme';
 
+import GitHubRepositoriesNav from './components/GitHubRepositoriesNav.vue';
 import './custom.css';
 
-export default DefaultTheme;
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('GitHubRepositoriesNav', GitHubRepositoriesNav);
+  },
+};