create-stitchkit 0.1.0

package/template/packages/frontend/src/app/api/og/[locale]/[page]/route.tsx

@@ -0,0 +1,53 @@
+import { ImageResponse } from 'next/og';
+import { LocaleSchema } from '@/i18n/locales';
+import { getSeoPage, publicPageIds, SeoPageIdSchema, SITE_NAME } from '@/lib/seo/pages';
+
+export const runtime = 'nodejs';
+export const size = { width: 1200, height: 630 };
+
+export function generateStaticParams() {
+  return LocaleSchema.options.flatMap((locale) =>
+    publicPageIds.map((page) => ({ locale, page })),
+  );
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ locale: string; page: string }> },
+) {
+  const { locale, page } = await params;
+  const parsedLocale = LocaleSchema.safeParse(locale);
+  const parsedPage = SeoPageIdSchema.safeParse(page);
+  if (!parsedLocale.success || !parsedPage.success) {
+    return new Response('Unknown SEO page', { status: 404 });
+  }
+
+  const metadata = getSeoPage(parsedPage.data, parsedLocale.data);
+  return new ImageResponse(
+    <div
+      style={{
+        alignItems: 'center',
+        background: '#111214',
+        color: '#f7f7f8',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 26, maxWidth: 940 }}>
+        <div style={{ color: '#a3a7b2', fontSize: 28 }}>{metadata.eyebrow}</div>
+        <div style={{ fontSize: 74, fontWeight: 500, letterSpacing: -3, lineHeight: 1.05 }}>
+          {metadata.title}
+        </div>
+        <div style={{ color: '#c7cad1', fontSize: 31, lineHeight: 1.35 }}>
+          {metadata.description}
+        </div>
+        <div style={{ color: '#8d929e', display: 'flex', fontSize: 24, marginTop: 10 }}>
+          {SITE_NAME}
+        </div>
+      </div>
+    </div>,
+    size,
+  );
+}

package/template/packages/frontend/src/app/globals.css

@@ -0,0 +1,210 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+.technology-icon-invert-dark {
+  filter: none;
+}
+
+.dark .technology-icon-invert-dark {
+  filter: invert(1);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-overlay: var(--overlay);
+  --font-display: var(--font-montserrat);
+  --font-sans: var(--font-montserrat);
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+:root,
+.light {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0 0);
+  --card: oklch(0.99 0 0);
+  --card-foreground: oklch(0.13 0 0);
+  --primary: oklch(0.13 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --secondary: oklch(0.93 0 0);
+  --secondary-foreground: oklch(0.18 0 0);
+  --border: oklch(0.91 0 0);
+  --input: oklch(0.91 0 0);
+  --ring: oklch(0.13 0 0);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.6 0.16 145);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.14 70);
+  --warning-foreground: oklch(0.2 0.05 70);
+  --info: oklch(0.55 0.15 230);
+  --info-foreground: oklch(1 0 0);
+  --overlay: oklch(0 0 0 / 0.5);
+  /* Chart colors */
+  --chart-1: oklch(0.25 0 0);
+  --chart-2: oklch(0.65 0 0);
+}
+
+.dark {
+  --background: oklch(0.16 0.005 260);
+  --foreground: oklch(0.9 0 0);
+  --card: oklch(0.19 0.005 260);
+  --card-foreground: oklch(0.9 0 0);
+  --primary: oklch(0.9 0 0);
+  --primary-foreground: oklch(0.16 0 0);
+  --muted: oklch(0.22 0.005 260);
+  --muted-foreground: oklch(0.6 0 0);
+  --secondary: oklch(0.25 0.005 260);
+  --secondary-foreground: oklch(0.9 0 0);
+  --border: oklch(0.26 0.005 260);
+  --input: oklch(0.22 0.005 260);
+  --ring: oklch(0.9 0 0);
+  --destructive: oklch(0.55 0.18 25);
+  --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.55 0.14 145);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.7 0.13 70);
+  --warning-foreground: oklch(0.2 0.05 70);
+  --info: oklch(0.55 0.15 230);
+  --info-foreground: oklch(1 0 0);
+  --overlay: oklch(0 0 0 / 0.68);
+  /* Chart colors */
+  --chart-1: oklch(0.85 0 0);
+  --chart-2: oklch(0.5 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  button,
+  [role="button"],
+  a[href],
+  summary,
+  label:has(input) {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [role="button"][aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+
+  /* Selection — инвертированные цвета под тему */
+  ::selection {
+    @apply bg-foreground text-background;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 2;
+}
+
+html[data-theme-transition="crossfade"]::view-transition-new(root) {
+  animation: theme-crossfade var(--theme-transition-duration) var(--theme-transition-easing);
+}
+
+html[data-theme-transition="radial"]::view-transition-new(root) {
+  animation: theme-radial-reveal var(--theme-transition-duration) var(--theme-transition-easing);
+}
+
+@keyframes theme-crossfade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes theme-radial-reveal {
+  from {
+    clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
+  }
+  to {
+    clip-path: circle(150vmax at var(--theme-transition-x) var(--theme-transition-y));
+  }
+}
+
+.shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark);
+}
+
+/* Typing animation for code */
+.typing-code .type-char {
+  opacity: 0;
+  animation: typeReveal 0.05s forwards;
+  animation-delay: var(--delay);
+}
+
+@keyframes typeReveal {
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto;
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+  }
+
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+}
+
+/* Snapshot capture must override component transitions while the theme class changes. */
+.theme-transitioning *,
+.theme-transitioning *::before,
+.theme-transitioning *::after {
+  /* biome-ignore lint/complexity/noImportantStyles: native snapshot integrity requires precedence */
+  transition: none !important;
+}

package/template/packages/frontend/src/app/robots.ts

@@ -0,0 +1,9 @@
+import type { MetadataRoute } from 'next';
+import { absoluteSiteUrl } from '@/lib/seo/metadata';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: { userAgent: '*', allow: '/' },
+    sitemap: absoluteSiteUrl('/sitemap.xml'),
+  };
+}

package/template/packages/frontend/src/app/sitemap.ts

@@ -0,0 +1,22 @@
+import type { MetadataRoute } from 'next';
+import { locales } from '@/i18n/locales';
+import { absoluteSiteUrl } from '@/lib/seo/metadata';
+import { localizedPagePath, publicPageIds } from '@/lib/seo/pages';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return publicPageIds.flatMap((pageId) =>
+    locales.map((locale) => ({
+      url: absoluteSiteUrl(localizedPagePath(pageId, locale)),
+      changeFrequency: pageId === 'home' ? 'weekly' : 'monthly',
+      priority: pageId === 'home' ? 1 : 0.7,
+      alternates: {
+        languages: Object.fromEntries(
+          locales.map((availableLocale) => [
+            availableLocale,
+            absoluteSiteUrl(localizedPagePath(pageId, availableLocale)),
+          ]),
+        ),
+      },
+    })),
+  );
+}

package/template/packages/frontend/src/components/brand-mark.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import { cn } from '@/lib/utils/cn';
+
+export function BrandMark({
+  className,
+  priority = false,
+}: {
+  className?: string;
+  priority?: boolean;
+}) {
+  return (
+    <Image
+      alt=''
+      aria-hidden='true'
+      className={cn('size-8 shrink-0 object-contain', className)}
+      height={32}
+      priority={priority}
+      src='/mascot-stitch.png'
+      width={32}
+    />
+  );
+}

package/template/packages/frontend/src/components/repository-summary.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import {
+  IconArrowUpRight,
+  IconBrandGithub,
+  IconGitCommit,
+  IconRefresh,
+  IconStar,
+} from '@tabler/icons-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useLocale } from 'next-intl';
+import { Button, Skeleton } from '@/components/ui';
+import { useRefreshRepository, useRepository } from '@/lib/api/queries';
+
+function RepositorySkeleton() {
+  return (
+    <div className='mx-auto flex w-full max-w-4xl items-center gap-4 rounded-xl border border-border bg-card px-4 py-4'>
+      <Skeleton className='size-10 shrink-0 rounded-xl' />
+      <div className='flex-1 space-y-2'>
+        <Skeleton className='h-4 w-44' />
+        <Skeleton className='h-3 w-64 max-w-full' />
+      </div>
+      <Skeleton className='hidden h-8 w-52 sm:block' />
+    </div>
+  );
+}
+
+export function RepositorySummary() {
+  const locale = useLocale();
+  const queryClient = useQueryClient();
+  const repository = useRepository();
+  const refresh = useRefreshRepository({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: useRepository.getKey() });
+    },
+  });
+
+  if (repository.isLoading) return <RepositorySkeleton />;
+  if (repository.isError || !repository.data) {
+    return (
+      <div className='mx-auto w-full max-w-4xl rounded-xl border border-border bg-card px-4 py-4 text-sm text-muted-foreground'>
+        Repository data is unavailable. Check the API connection and retry.
+      </div>
+    );
+  }
+
+  const snapshot = repository.data;
+  const commitDate = snapshot.latestCommit
+    ? new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(
+        new Date(snapshot.latestCommit.committedAt),
+      )
+    : '—';
+
+  return (
+    <div className='mx-auto flex w-full max-w-4xl flex-col gap-4 rounded-xl border border-border bg-card/80 px-4 py-4 text-left backdrop-blur sm:flex-row sm:items-center sm:px-5'>
+      <a
+        className='group flex min-w-0 flex-1 items-center gap-3'
+        href={snapshot.htmlUrl}
+        rel='noreferrer'
+        target='_blank'
+      >
+        <span className='flex size-10 shrink-0 items-center justify-center rounded-xl border border-border bg-background'>
+          <IconBrandGithub size={21} />
+        </span>
+        <span className='min-w-0'>
+          <span className='flex min-w-0 items-center gap-2 font-medium'>
+            <span className='truncate'>{snapshot.fullName}</span>
+            <IconArrowUpRight
+              className='shrink-0 opacity-50 group-hover:opacity-100'
+              size={16}
+            />
+          </span>
+          <span className='mt-1 block truncate text-xs text-muted-foreground'>
+            Live backend query · {snapshot.visibility} · {snapshot.language}
+          </span>
+        </span>
+      </a>
+
+      <div className='flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground sm:justify-end'>
+        <span className='flex items-center gap-1.5' title='Commits'>
+          <IconGitCommit size={16} />
+          <span className='font-medium text-foreground'>
+            {snapshot.commitCount.toLocaleString(locale)}
+          </span>
+        </span>
+        <span className='flex items-center gap-1.5' title='Stars'>
+          <IconStar size={16} />
+          <span className='font-medium text-foreground'>
+            {snapshot.stars.toLocaleString(locale)}
+          </span>
+        </span>
+        <span className='whitespace-nowrap text-xs'>{commitDate}</span>
+        <Button
+          aria-label='Refresh repository data'
+          aria-busy={refresh.isPending || undefined}
+          className='shrink-0 disabled:opacity-100'
+          disabled={refresh.isPending}
+          onClick={() => refresh.mutate(undefined)}
+          size='icon'
+          variant='outline'
+        >
+          <IconRefresh className={refresh.isPending ? 'animate-spin' : undefined} size={18} />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/template/packages/frontend/src/components/system-controls.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  IconCheck,
+  IconDeviceDesktop,
+  IconLanguage,
+  IconMoon,
+  IconSun,
+} from '@tabler/icons-react';
+import { useHydrated } from '@wrksz/themes/client/use-hydrated';
+import { useTheme } from '@wrksz/themes/client/use-theme';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui';
+import { Link, usePathname } from '@/i18n/navigation';
+import type { AppTheme } from '@/theme/config';
+import { defaultThemeTransition, runThemeTransition } from '@/theme/transition';
+
+const themeOptions = [
+  { value: 'light', label: 'Light', icon: IconSun },
+  { value: 'dark', label: 'Dark', icon: IconMoon },
+  { value: 'system', label: 'System', icon: IconDeviceDesktop },
+] satisfies ReadonlyArray<{
+  value: AppTheme | 'system';
+  label: string;
+  icon: typeof IconSun;
+}>;
+
+export function ThemeToggle() {
+  const hydrated = useHydrated();
+  const { theme, resolvedTheme, setTheme } = useTheme<AppTheme>();
+  const selectedTheme = hydrated ? theme : undefined;
+  const ActiveIcon = resolvedTheme === 'dark' ? IconMoon : IconSun;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size='icon'
+          variant='outline'
+          aria-label={`Theme: ${selectedTheme ?? 'loading'}`}
+        >
+          {hydrated ? <ActiveIcon /> : <IconDeviceDesktop />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        {themeOptions.map((option) => (
+          <DropdownMenuItem
+            key={option.value}
+            onSelect={() =>
+              runThemeTransition(() => setTheme(option.value), defaultThemeTransition)
+            }
+          >
+            <option.icon />
+            <span className='flex-1'>{option.label}</span>
+            {selectedTheme === option.value ? <IconCheck aria-hidden /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function LanguageSwitcher() {
+  const pathname = usePathname();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button size='icon' variant='outline' aria-label='Change language'>
+          <IconLanguage />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuItem asChild>
+          <Link href={pathname} locale='en'>
+            English
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href={pathname} locale='ru'>
+            Русский
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}