virastack 0.0.1 → 1.0.1

package/templates-i18n/tanstack/src/paraglide/README.md

@@ -0,0 +1,162 @@
+# Paraglide JS Compiled Output
+
+> Auto-generated i18n message functions. Import `messages.js` to use translated strings.
+
+Compiled from: `./project.inlang`
+
+
+## What is this folder?
+
+This folder contains compiled [Paraglide JS](https://github.com/opral/paraglide-js) output. Paraglide JS compiles your translation messages into tree-shakeable JavaScript functions.
+
+## At a glance
+
+Purpose:
+- This folder stores compiled i18n message functions.
+- Source translations live outside this folder in your inlang project.
+
+Safe to import:
+- `messages.js` — all message functions
+- `runtime.js` — locale utilities
+- `server.js` — server-side middleware
+
+Do not edit:
+- All files in this folder are auto-generated.
+- Changes will be overwritten on next compilation.
+
+```
+paraglide/
+├── messages.js      # Message exports (import this)
+├── messages/        # Individual message functions
+├── runtime.js       # Locale detection & configuration
+├── registry.js      # Formatting utilities (plural, number, datetime, relativetime)
+├── server.js        # Server-side middleware
+└── .gitignore       # Marks folder as generated
+```
+
+## Usage
+
+```js
+import * as m from "./paraglide/messages.js";
+
+// Messages are functions that return localized strings
+m.hello_world();             // "Hello, World!" (in current locale)
+m.greeting({ name: "Sam" }); // "Hello, Sam!"
+
+// Override locale per-call
+m.hello_world({}, { locale: "de" });           // "Hallo, Welt!"
+m.greeting({ name: "Sam" }, { locale: "de" }); // "Hallo, Sam!"
+```
+
+## Runtime API
+
+```js
+import { getLocale, getTextDirection, setLocale, locales, baseLocale } from "./paraglide/runtime.js";
+
+getLocale();    // Current locale, e.g., "en"
+getTextDirection(); // "ltr" | "rtl" for current locale
+setLocale("de"); // Set locale
+locales;        // Available locales, e.g., ["en", "de", "fr"]
+baseLocale;     // Default locale, e.g., "en"
+```
+
+## Strategy
+
+The strategy determines how the current locale is detected and persisted:
+
+- **Cookie**: Stores locale preference in a cookie.
+- **URL**: Derives locale from URL patterns (e.g., `/en/about`, `en.example.com`).
+- **GlobalVariable**: Uses a global variable (client-side only).
+- **BaseLocale**: Always returns the base locale.
+
+Strategies can be combined. The order defines precedence:
+
+```js
+await compile({
+  project: "./project.inlang",
+  outdir: "./src/paraglide",
+  strategy: ["url", "cookie", "baseLocale"],
+});
+```
+
+See the [strategy documentation](https://paraglidejs.com/strategy) for details.
+
+## Markup (Rich Text)
+
+Messages can contain markup tags for bold, links, and other inline elements. Translators control where tags appear; developers control how they render.
+
+Important:
+- Tag names are app-defined. There is no built-in list of HTML tags.
+- `{#b}...{/b}` does not automatically render as `<b>...</b>`.
+- Renderers/snippets are looked up by the same tag name used in the message.
+
+### Message syntax
+
+```json
+{
+  "cta": "{#link to=|/docs| rel=$relationship @track}Read the docs{/link}",
+  "welcome": "{#b}Hi {name}{/b}{#icon/}"
+}
+```
+
+- `{#tagName}` opens a tag, `{/tagName}` closes it.
+- `{#tagName/}` creates a standalone tag.
+- Options: `to=|/docs|` or `rel=$relationship` (accessed via `options.*`).
+- Attributes: `@track` or `@variant=|hero|` (accessed via `attributes.*`).
+
+This is the default inlang message syntax. Paraglide's message format is plugin-based — you can use [ICU MessageFormat 1](https://inlang.com/m/p7c8m1d2/plugin-inlang-icu-messageformat-1), [i18next](https://inlang.com/m/3i8bor92/plugin-inlang-i18next), or other [plugins](https://inlang.com/c/plugins) instead.
+
+### Rendering markup
+
+Calling the message function still returns **plain text** (markup stripped):
+
+```js
+m.cta({ relationship: "noopener" }); // "Read the docs"
+```
+
+To render markup, use the framework adapter or the low-level `parts()` API:
+
+```js
+const parts = m.cta.parts({ relationship: "noopener" });
+// [
+//   { type: "markup-start", name: "link", options: { to: "/docs", rel: "noopener" }, attributes: { track: true } },
+//   { type: "text", value: "Read the docs" },
+//   { type: "markup-end", name: "link" }
+// ]
+```
+
+Framework adapters provide a `<ParaglideMessage>` component that accepts markup renderers:
+
+- `@inlang/paraglide-js-react`
+- `@inlang/paraglide-js-vue`
+- `@inlang/paraglide-js-svelte`
+- `@inlang/paraglide-js-solid`
+
+```jsx
+import { ParaglideMessage } from "@inlang/paraglide-js-react"; // or -vue, -svelte, -solid
+
+<ParaglideMessage
+  message={m.welcome}
+  inputs={{ name: "Ada" }}
+  markup={{
+    b: ({ children }) => <b>{children}</b>,
+    icon: () => <span aria-hidden="true" className="icon-wave" />,
+  }}
+/>
+```
+
+The available renderer/snippet names come from the message itself. You can inspect them through `message.parts()`, and TypeScript uses the same names to type-check your markup renderers.
+
+See the [markup documentation](https://paraglidejs.com/markup) for details.
+
+## Key concepts
+
+- **Tree-shakeable**: Each message is a function, enabling [up to 70% smaller i18n bundle sizes](https://paraglidejs.com/benchmark) than traditional i18n libraries.
+- **Typesafe**: Full TypeScript/JSDoc support with autocomplete.
+- **Variants**: Messages can have variants for pluralization, gender, etc.
+- **Fallbacks**: Missing translations fall back to the base locale.
+
+## Links
+
+- [Paraglide JS Documentation](https://paraglidejs.com)
+- [Source Repository](https://github.com/opral/paraglide-js)

package/templates-i18n/tanstack/src/providers/Providers.tsx

@@ -0,0 +1,12 @@
+import { Toaster } from "sonner";
+
+import { ThemeProvider } from "@/providers/ThemeProvider";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="theme">
+      {children}
+      <Toaster richColors position="bottom-right" closeButton />
+    </ThemeProvider>
+  );
+}

package/templates-i18n/tanstack/src/providers/ThemeProvider.tsx

@@ -0,0 +1,98 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { ScriptOnce } from "@tanstack/react-router";
+
+type Theme = "dark" | "light" | "system";
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+interface ThemeProviderState {
+  theme: Theme;
+  resolvedTheme: "dark" | "light";
+  setTheme: (theme: Theme) => void;
+}
+
+function getThemeScript(storageKey: string, defaultTheme: Theme) {
+  const key = JSON.stringify(storageKey);
+  const fallback = JSON.stringify(defaultTheme);
+
+  return `(function(){try{var t=localStorage.getItem(${key});if(t!=='light'&&t!=='dark'&&t!=='system'){t=${fallback}}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`;
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<"dark" | "light">("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(storageKey);
+    const initialTheme =
+      stored === "light" || stored === "dark" || stored === "system" ? stored : defaultTheme;
+    setThemeState(initialTheme);
+
+    if (initialTheme === "system") {
+      setResolvedTheme(
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+      );
+    } else {
+      setResolvedTheme(initialTheme);
+    }
+
+    setMounted(true);
+  }, [defaultTheme, storageKey]);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
+    root.style.colorScheme = resolvedTheme;
+  }, [resolvedTheme, mounted]);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    if (theme !== "system") {
+      setResolvedTheme(theme);
+      return;
+    }
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = (e: MediaQueryListEvent) => {
+      setResolvedTheme(e.matches ? "dark" : "light");
+    };
+
+    setResolvedTheme(media.matches ? "dark" : "light");
+    media.addEventListener("change", onChange);
+
+    return () => media.removeEventListener("change", onChange);
+  }, [theme, mounted]);
+
+  const setTheme = (next: Theme) => {
+    localStorage.setItem(storageKey, next);
+    setThemeState(next);
+  };
+
+  return (
+    <ThemeProviderContext value={{ theme, resolvedTheme, setTheme }}>
+      <ScriptOnce>{getThemeScript(storageKey, defaultTheme)}</ScriptOnce>
+      {children}
+    </ThemeProviderContext>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+}

package/templates-i18n/tanstack/src/providers/devtools.tsx

@@ -0,0 +1,6 @@
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+
+export default {
+  name: "Tanstack Query",
+  render: <ReactQueryDevtoolsPanel />,
+};

package/templates-i18n/tanstack/src/providers/index.ts

@@ -0,0 +1 @@
+export { Providers } from "@/providers/Providers";

package/templates-i18n/tanstack/src/providers/root-provider.ts

@@ -0,0 +1,9 @@
+import { makeQueryClient } from "@/lib/query-client";
+
+export function getContext() {
+  const queryClient = makeQueryClient();
+
+  return {
+    queryClient,
+  };
+}

package/templates-i18n/tanstack/src/routeTree.gen.ts

@@ -0,0 +1,179 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as LangRouteImport } from './routes/$lang'
+import { Route as RobotsDottxtRouteImport } from './routes/robots[.]txt'
+import { Route as SiteDotwebmanifestRouteImport } from './routes/site[.]webmanifest'
+import { Route as SitemapDotxmlRouteImport } from './routes/sitemap[.]xml'
+import { Route as LangIndexRouteImport } from './routes/$lang/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LangRoute = LangRouteImport.update({
+  id: '/$lang',
+  path: '/$lang',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const RobotsDottxtRoute = RobotsDottxtRouteImport.update({
+  id: '/robots.txt',
+  path: '/robots.txt',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SiteDotwebmanifestRoute = SiteDotwebmanifestRouteImport.update({
+  id: '/site.webmanifest',
+  path: '/site.webmanifest',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SitemapDotxmlRoute = SitemapDotxmlRouteImport.update({
+  id: '/sitemap.xml',
+  path: '/sitemap.xml',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LangIndexRoute = LangIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LangRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/$lang': typeof LangRouteWithChildren
+  '/robots.txt': typeof RobotsDottxtRoute
+  '/site.webmanifest': typeof SiteDotwebmanifestRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
+  '/$lang/': typeof LangIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/robots.txt': typeof RobotsDottxtRoute
+  '/site.webmanifest': typeof SiteDotwebmanifestRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
+  '/$lang': typeof LangIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/$lang': typeof LangRouteWithChildren
+  '/robots.txt': typeof RobotsDottxtRoute
+  '/site.webmanifest': typeof SiteDotwebmanifestRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
+  '/$lang/': typeof LangIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/$lang'
+    | '/robots.txt'
+    | '/site.webmanifest'
+    | '/sitemap.xml'
+    | '/$lang/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/robots.txt' | '/site.webmanifest' | '/sitemap.xml' | '/$lang'
+  id:
+    | '__root__'
+    | '/'
+    | '/$lang'
+    | '/robots.txt'
+    | '/site.webmanifest'
+    | '/sitemap.xml'
+    | '/$lang/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  LangRoute: typeof LangRouteWithChildren
+  RobotsDottxtRoute: typeof RobotsDottxtRoute
+  SiteDotwebmanifestRoute: typeof SiteDotwebmanifestRoute
+  SitemapDotxmlRoute: typeof SitemapDotxmlRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/$lang': {
+      id: '/$lang'
+      path: '/$lang'
+      fullPath: '/$lang'
+      preLoaderRoute: typeof LangRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/robots.txt': {
+      id: '/robots.txt'
+      path: '/robots.txt'
+      fullPath: '/robots.txt'
+      preLoaderRoute: typeof RobotsDottxtRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/site.webmanifest': {
+      id: '/site.webmanifest'
+      path: '/site.webmanifest'
+      fullPath: '/site.webmanifest'
+      preLoaderRoute: typeof SiteDotwebmanifestRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/sitemap.xml': {
+      id: '/sitemap.xml'
+      path: '/sitemap.xml'
+      fullPath: '/sitemap.xml'
+      preLoaderRoute: typeof SitemapDotxmlRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/$lang/': {
+      id: '/$lang/'
+      path: '/'
+      fullPath: '/$lang/'
+      preLoaderRoute: typeof LangIndexRouteImport
+      parentRoute: typeof LangRoute
+    }
+  }
+}
+
+interface LangRouteChildren {
+  LangIndexRoute: typeof LangIndexRoute
+}
+
+const LangRouteChildren: LangRouteChildren = {
+  LangIndexRoute: LangIndexRoute,
+}
+
+const LangRouteWithChildren = LangRoute._addFileChildren(LangRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  LangRoute: LangRouteWithChildren,
+  RobotsDottxtRoute: RobotsDottxtRoute,
+  SiteDotwebmanifestRoute: SiteDotwebmanifestRoute,
+  SitemapDotxmlRoute: SitemapDotxmlRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { startInstance } from './start.ts'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
+  }
+}

package/templates-i18n/tanstack/src/router.tsx

@@ -0,0 +1,27 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+
+import { getContext } from "./providers/root-provider";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  const context = getContext();
+
+  const router = createTanStackRouter({
+    routeTree,
+    context,
+    scrollRestoration: true,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+  });
+
+  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/templates-i18n/tanstack/src/routes/$lang/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { Pending } from "@/components/shared/Pending";
+import { LandingPage } from "@/features/landing";
+
+export const Route = createFileRoute("/$lang/")({
+  pendingComponent: Pending,
+  component: Home,
+});
+
+function Home() {
+  return <LandingPage />;
+}

package/templates-i18n/tanstack/src/routes/$lang.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute, notFound, Outlet } from "@tanstack/react-router";
+
+import { locales, setLocale } from "@/paraglide/runtime.js";
+
+export const Route = createFileRoute("/$lang")({
+  beforeLoad: ({ params }) => {
+    const lang = params.lang;
+
+    // Geçici olarak as-needed kapatıldı. baseLocale için /'a yönlendirme iptal edildi.
+    if (!locales.includes(lang as (typeof locales)[number])) {
+      throw notFound();
+    }
+
+    setLocale(lang as (typeof locales)[number], { reload: false });
+  },
+  component: () => {
+    const { lang } = Route.useParams();
+    // key={lang} sayesinde dil değiştiğinde React tüm alt componentleri (sayfayı) yeniden render eder.
+    // Bu sayede çeviriler anında güncellenir.
+    return <Outlet key={lang} />;
+  },
+});

package/templates-i18n/tanstack/src/routes/__root.tsx

@@ -0,0 +1,80 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import type { QueryClient } from "@tanstack/react-query";
+import { createRootRouteWithContext, HeadContent, Outlet, Scripts } from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+
+import interCss from "@fontsource-variable/inter/index.css?url";
+import { NuqsAdapter } from "nuqs/adapters/tanstack-router";
+
+import { seoHeadMeta } from "@/config/seo.config";
+
+import appCss from "@/styles/tailwind.css?url";
+
+import { Providers } from "@/providers";
+import TanStackQueryDevtools from "@/providers/devtools";
+
+import { DefaultCatchBoundary } from "@/components/shared/DefaultCatchBoundary";
+import { NotFound } from "@/components/shared/NotFound";
+import { getLocale } from "@/paraglide/runtime.js";
+
+interface RouterContext {
+  queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      ...seoHeadMeta(),
+    ],
+    links: [
+      { rel: "stylesheet", href: appCss },
+      { rel: "stylesheet", href: interCss },
+      { rel: "icon", href: "/logo.webp" },
+      { rel: "apple-touch-icon", href: "/logo.webp" },
+      { rel: "manifest", href: "/site.webmanifest" },
+    ],
+  }),
+  errorComponent: DefaultCatchBoundary,
+  notFoundComponent: () => <NotFound />,
+  shellComponent: RootDocument,
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <NuqsAdapter>
+      <Providers>
+        <Outlet />
+      </Providers>
+    </NuqsAdapter>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  const lang = getLocale();
+  return (
+    <html lang={lang} className="h-full" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body className="flex min-h-full flex-col font-sans antialiased" suppressHydrationWarning>
+        {children}
+        {import.meta.env.DEV ? (
+          <TanStackDevtools
+            config={{ position: "bottom-right" }}
+            plugins={[
+              {
+                name: "TanStack Router",
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              TanStackQueryDevtools,
+            ]}
+          />
+        ) : null}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/templates-i18n/tanstack/src/routes/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+import { baseLocale } from "@/paraglide/runtime.js";
+
+export const Route = createFileRoute("/")({
+  beforeLoad: () => {
+    // Geçici olarak as-needed kapatıldı. Ana sayfa /en adresine yönlendiriliyor.
+    throw redirect({
+      to: "/$lang",
+      params: { lang: baseLocale },
+    });
+  },
+});

package/templates-i18n/tanstack/src/routes/robots[.]txt.ts

@@ -0,0 +1,21 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { siteConfig } from "@/config/site.config";
+
+export const Route = createFileRoute("/robots.txt")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const body = `User-agent: *
+Allow: /
+
+Sitemap: ${siteConfig.url}/sitemap.xml
+`;
+
+        return new Response(body, {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        });
+      },
+    },
+  },
+});

package/templates-i18n/tanstack/src/routes/site[.]webmanifest.ts

@@ -0,0 +1,32 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { siteConfig } from "@/config/site.config";
+
+export const Route = createFileRoute("/site.webmanifest")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const manifest = {
+          name: siteConfig.name,
+          short_name: siteConfig.name,
+          description: siteConfig.description,
+          start_url: "/",
+          display: "standalone",
+          background_color: "#ffffff",
+          theme_color: "#ffffff",
+          icons: [
+            {
+              src: "/logo.webp",
+              sizes: "96x96",
+              type: "image/webp",
+            },
+          ],
+        };
+
+        return Response.json(manifest, {
+          headers: { "Content-Type": "application/manifest+json; charset=utf-8" },
+        });
+      },
+    },
+  },
+});