@rune-kit/rune 2.8.0 → 2.11.0

package/extensions/content/skills/i18n.md

@@ -1,83 +1,83 @@
----
-name: "i18n"
-pack: "@rune/content"
-description: "Locale routing, translations, hreflang, RTL support, date/number formatting, content translation workflows, language detection."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# i18n
-
-Internationalization — locale routing, translation management, RTL support, date/number formatting, content translation workflows, language detection.
-
-#### Workflow
-
-**Step 1 — Detect i18n setup**
-Use Grep to find i18n libraries: `next-intl`, `i18next`, `react-intl`, `@formatjs`, `lingui`, `paraglide`. Use Glob to find translation files: `locales/`, `messages/`, `translations/`, `*.json` in locale directories. Read the i18n configuration to understand: supported locales, default locale, routing strategy, and translation loading method.
-
-**Step 2 — Audit i18n correctness**
-Check for: missing translations (keys present in default locale but not in others), no fallback chain (missing key shows raw key to user), locale not in URL (breaks SEO — Google can't index per-locale pages), no `hreflang` tags (search engines don't know about locale variants), hardcoded strings in components (bypassing translation system), date/number formatting without locale context (`toLocaleDateString()` without explicit locale), and no RTL support for Arabic/Hebrew locales.
-
-**Step 3 — Emit i18n patterns**
-Emit: type-safe translation keys with IDE autocomplete, locale routing middleware, `hreflang` tag generator, date/number formatting utilities, missing translation detection script, and RTL-aware layout component.
-
-#### Example
-
-```typescript
-// next-intl — type-safe translations with locale routing (Next.js App Router)
-// messages/en.json: { "home": { "title": "Welcome", "posts": "Latest {count, plural, one {post} other {posts}}" } }
-// messages/vi.json: { "home": { "title": "Chao mung", "posts": "{count} bai viet moi nhat" } }
-
-// middleware.ts — locale routing
-import createMiddleware from 'next-intl/middleware';
-
-export default createMiddleware({
-  locales: ['en', 'vi', 'ja'],
-  defaultLocale: 'en',
-  localePrefix: 'as-needed', // /en/about → /about (default), /vi/about stays
-});
-
-export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'] };
-
-// Hreflang tags — app/[locale]/layout.tsx
-function HreflangTags({ locale, path }: { locale: string; path: string }) {
-  const locales = ['en', 'vi', 'ja'];
-  return (
-    <>
-      {locales.map(l => (
-        <link key={l} rel="alternate" hrefLang={l} href={`${process.env.SITE_URL}/${l}${path}`} />
-      ))}
-      <link rel="alternate" hrefLang="x-default" href={`${process.env.SITE_URL}${path}`} />
-    </>
-  );
-}
-
-// Type-safe translations in components
-import { useTranslations } from 'next-intl';
-
-function HomePage() {
-  const t = useTranslations('home');
-  return <h1>{t('title')}</h1>; // IDE autocomplete for keys
-}
-
-// CI script — detect missing translation keys
-// scripts/check-translations.ts
-import en from '../messages/en.json';
-import vi from '../messages/vi.json';
-
-function flattenKeys(obj: Record<string, unknown>, prefix = ''): string[] {
-  return Object.entries(obj).flatMap(([k, v]) =>
-    typeof v === 'object' && v !== null
-      ? flattenKeys(v as Record<string, unknown>, `${prefix}${k}.`)
-      : [`${prefix}${k}`]
-  );
-}
-
-const enKeys = new Set(flattenKeys(en));
-const viKeys = new Set(flattenKeys(vi));
-const missing = [...enKeys].filter(k => !viKeys.has(k));
-if (missing.length) {
-  console.error('Missing vi translations:', missing);
-  process.exit(1);
-}
-```
+---
+name: "i18n"
+pack: "@rune/content"
+description: "Locale routing, translations, hreflang, RTL support, date/number formatting, content translation workflows, language detection."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# i18n
+
+Internationalization — locale routing, translation management, RTL support, date/number formatting, content translation workflows, language detection.
+
+#### Workflow
+
+**Step 1 — Detect i18n setup**
+Use Grep to find i18n libraries: `next-intl`, `i18next`, `react-intl`, `@formatjs`, `lingui`, `paraglide`. Use Glob to find translation files: `locales/`, `messages/`, `translations/`, `*.json` in locale directories. Read the i18n configuration to understand: supported locales, default locale, routing strategy, and translation loading method.
+
+**Step 2 — Audit i18n correctness**
+Check for: missing translations (keys present in default locale but not in others), no fallback chain (missing key shows raw key to user), locale not in URL (breaks SEO — Google can't index per-locale pages), no `hreflang` tags (search engines don't know about locale variants), hardcoded strings in components (bypassing translation system), date/number formatting without locale context (`toLocaleDateString()` without explicit locale), and no RTL support for Arabic/Hebrew locales.
+
+**Step 3 — Emit i18n patterns**
+Emit: type-safe translation keys with IDE autocomplete, locale routing middleware, `hreflang` tag generator, date/number formatting utilities, missing translation detection script, and RTL-aware layout component.
+
+#### Example
+
+```typescript
+// next-intl — type-safe translations with locale routing (Next.js App Router)
+// messages/en.json: { "home": { "title": "Welcome", "posts": "Latest {count, plural, one {post} other {posts}}" } }
+// messages/vi.json: { "home": { "title": "Chao mung", "posts": "{count} bai viet moi nhat" } }
+
+// middleware.ts — locale routing
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  locales: ['en', 'vi', 'ja'],
+  defaultLocale: 'en',
+  localePrefix: 'as-needed', // /en/about → /about (default), /vi/about stays
+});
+
+export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'] };
+
+// Hreflang tags — app/[locale]/layout.tsx
+function HreflangTags({ locale, path }: { locale: string; path: string }) {
+  const locales = ['en', 'vi', 'ja'];
+  return (
+    <>
+      {locales.map(l => (
+        <link key={l} rel="alternate" hrefLang={l} href={`${process.env.SITE_URL}/${l}${path}`} />
+      ))}
+      <link rel="alternate" hrefLang="x-default" href={`${process.env.SITE_URL}${path}`} />
+    </>
+  );
+}
+
+// Type-safe translations in components
+import { useTranslations } from 'next-intl';
+
+function HomePage() {
+  const t = useTranslations('home');
+  return <h1>{t('title')}</h1>; // IDE autocomplete for keys
+}
+
+// CI script — detect missing translation keys
+// scripts/check-translations.ts
+import en from '../messages/en.json';
+import vi from '../messages/vi.json';
+
+function flattenKeys(obj: Record<string, unknown>, prefix = ''): string[] {
+  return Object.entries(obj).flatMap(([k, v]) =>
+    typeof v === 'object' && v !== null
+      ? flattenKeys(v as Record<string, unknown>, `${prefix}${k}.`)
+      : [`${prefix}${k}`]
+  );
+}
+
+const enKeys = new Set(flattenKeys(en));
+const viKeys = new Set(flattenKeys(vi));
+const missing = [...enKeys].filter(k => !viKeys.has(k));
+if (missing.length) {
+  console.error('Missing vi translations:', missing);
+  process.exit(1);
+}
+```

package/extensions/content/skills/mdx-authoring.md

@@ -1,137 +1,137 @@
----
-name: "mdx-authoring"
-pack: "@rune/content"
-description: "Custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# mdx-authoring
-
-MDX authoring patterns — custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation.
-
-#### Workflow
-
-**Step 1 — Detect MDX setup**
-Use Grep to find MDX configuration: `@next/mdx`, `mdx-bundler`, `next-mdx-remote`, `contentlayer`, `rehype`, `remark`. Read the MDX pipeline config to understand: compilation method, custom components registered, and remark/rehype plugin chain.
-
-**Step 2 — Audit MDX pipeline**
-Check for: no custom component fallback (missing component crashes build), code blocks without syntax highlighting (plain text), no table of contents generation (long articles hard to navigate), missing image optimization in MDX (raw `<img>` tags), no frontmatter validation (typos in dates or categories silently pass), and no interactive component sandboxing.
-
-**Step 3 — Emit MDX patterns**
-Emit: MDX component registry with fallback for missing components, code block with syntax highlighting (Shiki or Prism), auto-generated TOC from headings, frontmatter schema validation, and callout/admonition components.
-
-#### Example — Component Registry
-
-```tsx
-// MDX component registry with safe fallback
-import { type MDXComponents } from 'mdx/types';
-import { Callout } from '@/components/callout';
-import { CodeBlock } from '@/components/code-block';
-import Image from 'next/image';
-
-export function useMDXComponents(): MDXComponents {
-  return {
-    img: ({ src, alt, ...props }) => (
-      <Image src={src!} alt={alt || ''} width={800} height={400} className="rounded-lg" {...props} />
-    ),
-    pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,
-    Callout,
-  };
-}
-
-// Auto-generated TOC from MDX content
-interface TocItem { id: string; text: string; level: number }
-
-function extractToc(raw: string): TocItem[] {
-  const headingRegex = /^(#{2,4})\s+(.+)$/gm;
-  const items: TocItem[] = [];
-  let match;
-  while ((match = headingRegex.exec(raw))) {
-    const text = match[2].replace(/[`*_~]/g, '');
-    items.push({ id: text.toLowerCase().replace(/\s+/g, '-'), text, level: match[1].length });
-  }
-  return items;
-}
-
-// Callout component for MDX
-function Callout({ type = 'info', children }: { type?: 'info' | 'warning' | 'error'; children: React.ReactNode }) {
-  const styles = { info: 'bg-blue-50 border-blue-400', warning: 'bg-amber-50 border-amber-400', error: 'bg-red-50 border-red-400' };
-  return <div className={`border-l-4 p-4 my-4 rounded-r ${styles[type]}`}>{children}</div>;
-}
-```
-
-#### Example — Shiki Syntax Highlighting
-
-```typescript
-// rehype-shiki integration in contentlayer or next.config.mjs
-import { rehypeShiki } from '@shikijs/rehype';
-import { defineDocumentType, makeSource } from 'contentlayer/source-files';
-
-export default makeSource({
-  mdxOptions: {
-    rehypePlugins: [
-      [rehypeShiki, {
-        themes: { light: 'github-light', dark: 'github-dark' },
-        addLanguageClass: true,
-      }],
-    ],
-  },
-});
-
-// CodeBlock component with copy-to-clipboard
-'use client';
-import { useState } from 'react';
-
-export function CodeBlock({ children, className }: { children: React.ReactNode; className?: string }) {
-  const [copied, setCopied] = useState(false);
-  const code = typeof children === 'string' ? children : '';
-
-  async function copy() {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  return (
-    <div className="relative group">
-      <pre className={className}>{children}</pre>
-      <button
-        onClick={copy}
-        aria-label="Copy code"
-        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 text-xs bg-gray-700 text-white rounded"
-      >
-        {copied ? 'Copied!' : 'Copy'}
-      </button>
-    </div>
-  );
-}
-```
-
-#### Example — Frontmatter Validation
-
-```typescript
-// contentlayer.config.ts — Zod-like validation via defineDocumentType
-import { defineDocumentType } from 'contentlayer/source-files';
-
-export const Post = defineDocumentType(() => ({
-  name: 'Post',
-  filePathPattern: 'posts/**/*.mdx',
-  contentType: 'mdx',
-  fields: {
-    title:  { type: 'string',  required: true },
-    date:   { type: 'date',    required: true },
-    status: { type: 'enum',    options: ['draft', 'published'], required: true },
-    tags:   { type: 'list',    of: { type: 'string' }, default: [] },
-    excerpt:{ type: 'string',  required: false },
-    ogImage:{ type: 'string',  required: false },
-  },
-  computedFields: {
-    url:         { type: 'string', resolve: d => `/blog/${d._raw.flattenedPath.replace('posts/', '')}` },
-    readingTime: { type: 'string', resolve: d => {
-      const words = d.body.raw.split(/\s+/).length;
-      return `${Math.ceil(words / 238)} min read`;
-    }},
-  },
-}));
-```
+---
+name: "mdx-authoring"
+pack: "@rune/content"
+description: "Custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# mdx-authoring
+
+MDX authoring patterns — custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation.
+
+#### Workflow
+
+**Step 1 — Detect MDX setup**
+Use Grep to find MDX configuration: `@next/mdx`, `mdx-bundler`, `next-mdx-remote`, `contentlayer`, `rehype`, `remark`. Read the MDX pipeline config to understand: compilation method, custom components registered, and remark/rehype plugin chain.
+
+**Step 2 — Audit MDX pipeline**
+Check for: no custom component fallback (missing component crashes build), code blocks without syntax highlighting (plain text), no table of contents generation (long articles hard to navigate), missing image optimization in MDX (raw `<img>` tags), no frontmatter validation (typos in dates or categories silently pass), and no interactive component sandboxing.
+
+**Step 3 — Emit MDX patterns**
+Emit: MDX component registry with fallback for missing components, code block with syntax highlighting (Shiki or Prism), auto-generated TOC from headings, frontmatter schema validation, and callout/admonition components.
+
+#### Example — Component Registry
+
+```tsx
+// MDX component registry with safe fallback
+import { type MDXComponents } from 'mdx/types';
+import { Callout } from '@/components/callout';
+import { CodeBlock } from '@/components/code-block';
+import Image from 'next/image';
+
+export function useMDXComponents(): MDXComponents {
+  return {
+    img: ({ src, alt, ...props }) => (
+      <Image src={src!} alt={alt || ''} width={800} height={400} className="rounded-lg" {...props} />
+    ),
+    pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,
+    Callout,
+  };
+}
+
+// Auto-generated TOC from MDX content
+interface TocItem { id: string; text: string; level: number }
+
+function extractToc(raw: string): TocItem[] {
+  const headingRegex = /^(#{2,4})\s+(.+)$/gm;
+  const items: TocItem[] = [];
+  let match;
+  while ((match = headingRegex.exec(raw))) {
+    const text = match[2].replace(/[`*_~]/g, '');
+    items.push({ id: text.toLowerCase().replace(/\s+/g, '-'), text, level: match[1].length });
+  }
+  return items;
+}
+
+// Callout component for MDX
+function Callout({ type = 'info', children }: { type?: 'info' | 'warning' | 'error'; children: React.ReactNode }) {
+  const styles = { info: 'bg-blue-50 border-blue-400', warning: 'bg-amber-50 border-amber-400', error: 'bg-red-50 border-red-400' };
+  return <div className={`border-l-4 p-4 my-4 rounded-r ${styles[type]}`}>{children}</div>;
+}
+```
+
+#### Example — Shiki Syntax Highlighting
+
+```typescript
+// rehype-shiki integration in contentlayer or next.config.mjs
+import { rehypeShiki } from '@shikijs/rehype';
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+
+export default makeSource({
+  mdxOptions: {
+    rehypePlugins: [
+      [rehypeShiki, {
+        themes: { light: 'github-light', dark: 'github-dark' },
+        addLanguageClass: true,
+      }],
+    ],
+  },
+});
+
+// CodeBlock component with copy-to-clipboard
+'use client';
+import { useState } from 'react';
+
+export function CodeBlock({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  const code = typeof children === 'string' ? children : '';
+
+  async function copy() {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="relative group">
+      <pre className={className}>{children}</pre>
+      <button
+        onClick={copy}
+        aria-label="Copy code"
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 text-xs bg-gray-700 text-white rounded"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+```
+
+#### Example — Frontmatter Validation
+
+```typescript
+// contentlayer.config.ts — Zod-like validation via defineDocumentType
+import { defineDocumentType } from 'contentlayer/source-files';
+
+export const Post = defineDocumentType(() => ({
+  name: 'Post',
+  filePathPattern: 'posts/**/*.mdx',
+  contentType: 'mdx',
+  fields: {
+    title:  { type: 'string',  required: true },
+    date:   { type: 'date',    required: true },
+    status: { type: 'enum',    options: ['draft', 'published'], required: true },
+    tags:   { type: 'list',    of: { type: 'string' }, default: [] },
+    excerpt:{ type: 'string',  required: false },
+    ogImage:{ type: 'string',  required: false },
+  },
+  computedFields: {
+    url:         { type: 'string', resolve: d => `/blog/${d._raw.flattenedPath.replace('posts/', '')}` },
+    readingTime: { type: 'string', resolve: d => {
+      const words = d.body.raw.split(/\s+/).length;
+      return `${Math.ceil(words / 238)} min read`;
+    }},
+  },
+}));
+```