Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/og-image-v6

Author: harlan-zw

.github/workflows/chromatic.yml

@@ -30,7 +30,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true

.github/workflows/semantic-pull-requests.yml

@@ -24,6 +24,7 @@ jobs:
         with:
           scopes: |
             a11y
+            blog
             deps
             docs
             cli

.storybook/.public/favicon.svg

@@ -4,6 +4,7 @@ const config = {
   stories: ['../app/**/*.stories.@(js|ts)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
+  staticDirs: ['./.public'],
   features: {
     backgrounds: false,
   },

.storybook/.public/npmx-storybook.svg

@@ -0,0 +1,11 @@
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+
+const npmxTheme = create({
+  brandTitle: 'npmx Storybook',
+  brandImage: '/npmx-storybook.svg',
+})
+
+addons.setConfig({
+  theme: npmxTheme,
+})

.storybook/main.ts

@@ -492,17 +492,8 @@ To add a new locale:
    },
    ```
 
-4. Copy your translation file to `lunaria/files/` for translation tracking:
-
-   ```bash
-   cp i18n/locales/uk-UA.json lunaria/files/uk-UA.json
-   ```
-
-   > ⚠**Important:**
-   > This file must be committed. Lunaria uses git history to track translation progress, so the build will fail if this file is missing.
-
-5. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example)
-6. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples)
+4. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example)
+5. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples)
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization#custom-pluralization) and [Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Determining-Plural-Categories) for more info.
 
@@ -1033,7 +1024,7 @@ Format: `type(scope): description`
 
 **Types:** `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
 
-**Scopes (optional):** `docs`, `i18n`, `deps`
+**Scopes (optional):** `a11y`, `blog`, `deps`, `docs`, `cli`, `i18n`, `ui`
 
 **Examples:**
 

.storybook/manager.ts

@@ -213,9 +213,9 @@ onKeyStroke(
         v-if="!isSearchExpanded && !isOnHomePage"
         to="/"
         :aria-label="$t('header.home')"
-        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring"
+        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
       >
-        <AppLogo class="w-8 h-8 rounded-lg" />
+        <AppMark class="w-6 h-auto" />
       </NuxtLink>
 
       <!-- Desktop: Logo (navigates home) -->
@@ -224,13 +224,12 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 py-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4"
         >
-          <AppLogo class="w-7 h-7 rounded-lg" />
-          <span class="pb-0.5">npmx</span>
+          <AppLogo class="h-4.5 w-auto" />
           <span
             aria-hidden="true"
-            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.75 -inset-ie-1"
           >
             {{ env === 'release' ? 'alpha' : env }}
           </span>

CONTRIBUTING.md

@@ -8,25 +8,34 @@ defineProps<{
   <svg
     aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    width="96"
-    height="96"
+    viewBox="0 0 602 170"
+    width="602"
+    height="170"
     :class="class"
   >
     <title>{{ $t('alt_logo') }}</title>
-    <rect fill="var(--bg)" width="512" height="512" rx="64" />
-    <rect fill="currentColor" x="110" y="310" width="60" height="60" />
-    <text
-      fill="var(--accent)"
-      x="320"
-      y="370"
-      font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-      font-size="420"
-      font-weight="500"
-      text-anchor="middle"
-      style="user-select: none"
-    >
-      <tspan>/</tspan>
-    </text>
+    <g transform="translate(0 14.602)">
+      <path d="m0.93476 97.205h24.081v23.693h-24.081z" fill="currentColor" />
+      <path
+        d="m176.66 17.97h14.954l0.3884 18.449q4.0783-10.293 12.817-15.536 8.9334-5.2435 20.003-5.2435 17.09 0 26.412 11.07 9.3218 10.875 9.3218 27.965v66.223h-16.313v-61.562q0-29.325-22.916-29.325-12.429 0-20.391 7.7681-7.9623 7.7681-7.9623 21.557v61.562h-16.313z"
+        fill="currentColor"
+      />
+      <path
+        d="m386.95 17.97h14.954l0.38842 15.148q2.7188-8.3507 7.9624-12.817 5.2435-4.6609 12.429-4.6609 15.925 0 19.42 20.197 2.5246-9.516 8.3507-14.759 5.8261-5.4377 13.788-5.4377 12.429 0 18.061 8.7392 5.6319 8.545 5.6319 28.159v68.36h-16.313v-66.029q0-13.4-2.9131-19.032-2.913-5.8261-9.1276-5.8261-6.4087 0-10.293 6.4087-3.6899 6.2145-3.6899 18.838v65.641h-16.313v-66.029q0-13.206-2.913-19.032-2.7188-5.8261-9.1276-5.8261t-10.293 6.4087q-3.6899 6.2145-3.6899 18.838v65.641h-16.313z"
+        fill="currentColor"
+      />
+      <path
+        d="m279.21 17.97h15.148l0.19415 16.507q4.6609-9.1276 12.817-13.983 8.3508-4.8551 18.838-4.8551 14.759 0 24.664 7.3797 9.9044 7.1855 14.759 19.42t4.8551 26.994q0 14.759-4.8551 26.994t-14.759 19.615q-9.9044 7.1855-24.664 7.1855-10.099 0-18.449-4.2725-8.1565-4.2725-12.235-11.652v42.725h-16.313zm45.444 89.722q13.4 0 20.974-10.099 7.7682-10.099 7.7682-28.159 0-18.061-7.7682-28.159-7.5739-10.099-20.974-10.099-13.594 0-21.362 9.9044-7.7682 9.7102-7.7682 28.354 0 18.644 7.5739 28.548 7.7682 9.7102 21.557 9.7102z"
+        fill="currentColor"
+      />
+      <path
+        d="m543.04 68.074-35.928-50.104h19.032l26.994 38.841 26.412-38.841h19.42l-35.733 50.493 37.481 52.435h-19.032l-28.548-41.56-28.548 41.56h-19.42z"
+        fill="currentColor"
+      />
+      <path
+        d="m103.12-9.2307-3.6211 10.246-46.309 131-3.6211 10.246h15.537l3.6211-10.246 11.717-33.148 38.211-108.1z"
+        fill="var(--accent)"
+      />
+    </g>
   </svg>
 </template>

app/components/AppHeader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 153 153"
+    width="153"
+    height="153"
+    :class="class"
+  >
+    <title>{{ $t('alt_logo') }}</title>
+    <g transform="translate(16.704 9.9827)">
+      <path d="m0.93476 97.205h24.081v23.693h-24.081z" fill="currentColor" />
+      <path
+        d="m103.12-9.2307-3.6211 10.246-46.309 131-3.6211 10.246h15.537l3.6211-10.246 11.717-33.148 38.211-108.1z"
+        fill="var(--accent)"
+      />
+    </g>
+  </svg>
+</template>