feat(snippets): introduce reusable code chunks section, add cms support, and fix navbar turkish characters

app/snippets/page.tsx

@@ -0,0 +1,9 @@
+import { SnippetsContent } from "@/components/snippets-content";
+import { listSnippets } from "@/data/snippets";
+
+export default async function SnippetsPage() {
+  const snippets = await listSnippets();
+  const categories = ["All", ...new Set(snippets.map((s) => s.category))];
+
+  return <SnippetsContent snippets={snippets} categories={categories} />;
+}

apps/data-panel/main.cjs

@@ -35,6 +35,7 @@ let DATA_DIR = path.join(WORKSPACE_ROOT, "data");
 let PUBLIC_DIR = path.join(WORKSPACE_ROOT, "public");
 let BLOG_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "blog");
 let PODCAST_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "podcasts");
+let SNIPPETS_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "snippets");
 
 function setWorkspaceRoot(nextRoot) {
   WORKSPACE_ROOT = path.resolve(nextRoot);
@@ -42,6 +43,7 @@ function setWorkspaceRoot(nextRoot) {
   PUBLIC_DIR = path.join(WORKSPACE_ROOT, "public");
   BLOG_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "blog");
   PODCAST_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "podcasts");
+  SNIPPETS_CONTENT_DIR = path.join(WORKSPACE_ROOT, "content", "snippets");
 }
 
 async function pathExists(target) {
@@ -59,6 +61,7 @@ async function ensureWorkspaceStructure() {
     { label: "public", target: PUBLIC_DIR },
     { label: "content/blog", target: BLOG_CONTENT_DIR },
     { label: "content/podcasts", target: PODCAST_CONTENT_DIR },
+    { label: "content/snippets", target: SNIPPETS_CONTENT_DIR },
   ];
 
   const missing = [];
@@ -582,6 +585,84 @@ async function deletePodcastEpisode(kind, slug) {
   return { ok: true };
 }
 
+function mapMarkdownToSnippet(fileName, raw) {
+  const parsed = matter(raw);
+  const slug = fileName.replace(/\.md$/i, "");
+  return {
+    slug,
+    title: String(parsed.data.title || slug),
+    language: String(parsed.data.language || "text"),
+    category: String(parsed.data.category || "General"),
+    description: String(parsed.data.description || ""),
+    markdown: String(parsed.content || "").trim(),
+  };
+}
+
+async function listSnippets() {
+  await fs.mkdir(SNIPPETS_CONTENT_DIR, { recursive: true });
+  const files = await fs.readdir(SNIPPETS_CONTENT_DIR, { withFileTypes: true });
+  const mdFiles = files
+    .filter((item) => item.isFile() && item.name.endsWith(".md"))
+    .map((item) => item.name)
+    .sort((a, b) => a.localeCompare(b));
+
+  const snippets = await Promise.all(
+    mdFiles.map(async (fileName) => {
+      const target = assertSafePath(SNIPPETS_CONTENT_DIR, path.join(SNIPPETS_CONTENT_DIR, fileName));
+      const raw = await fs.readFile(target, "utf8");
+      return mapMarkdownToSnippet(fileName, raw);
+    }),
+  );
+
+  return snippets;
+}
+
+async function upsertSnippet({ originalSlug, snippet }) {
+  if (!snippet || typeof snippet !== "object") {
+    throw new Error("Snippet payload is invalid.");
+  }
+
+  const slug = validateBlogSlug(snippet.slug);
+  const previousSlug = originalSlug ? validateBlogSlug(originalSlug) : null;
+
+  const frontmatter = {
+    title: String(snippet.title || slug),
+    language: String(snippet.language || "text"),
+    category: String(snippet.category || "General"),
+    description: String(snippet.description || ""),
+  };
+
+  const markdownBody = String(snippet.markdown || "").trim();
+  const raw = matter.stringify(markdownBody ? `${markdownBody}\n` : "", frontmatter);
+
+  await fs.mkdir(SNIPPETS_CONTENT_DIR, { recursive: true });
+
+  const nextPath = assertSafePath(SNIPPETS_CONTENT_DIR, path.join(SNIPPETS_CONTENT_DIR, `${slug}.md`));
+  const previousPath =
+    previousSlug && previousSlug !== slug
+      ? assertSafePath(SNIPPETS_CONTENT_DIR, path.join(SNIPPETS_CONTENT_DIR, `${previousSlug}.md`))
+      : null;
+
+  await fs.writeFile(nextPath, raw, "utf8");
+
+  if (previousPath) {
+    try {
+      await fs.unlink(previousPath);
+    } catch {
+      // ignore
+    }
+  }
+
+  return { ok: true, slug };
+}
+
+async function deleteSnippetBySlug(slug) {
+  const normalized = validateBlogSlug(slug);
+  const target = assertSafePath(SNIPPETS_CONTENT_DIR, path.join(SNIPPETS_CONTENT_DIR, `${normalized}.md`));
+  await fs.unlink(target);
+  return { ok: true };
+}
+
 async function listFoldersRecursive(baseDir, current = "") {
   const target = assertSafePath(baseDir, path.join(baseDir, current));
   const entries = await fs.readdir(target, { withFileTypes: true });
@@ -747,6 +828,10 @@ ipcMain.handle("podcast:list", async (_, kind) => listPodcastEpisodes(kind));
 ipcMain.handle("podcast:upsert", async (_, payload) => upsertPodcastEpisode(payload.kind, payload));
 ipcMain.handle("podcast:delete", async (_, payload) => deletePodcastEpisode(payload.kind, payload.slug));
 
+ipcMain.handle("snippet:list", async () => listSnippets());
+ipcMain.handle("snippet:upsert", async (_, payload) => upsertSnippet(payload));
+ipcMain.handle("snippet:delete", async (_, slug) => deleteSnippetBySlug(slug));
+
 ipcMain.handle("media:listFolders", async () => listMediaFolders());
 ipcMain.handle("media:createFolder", async (_, folder) => createMediaFolder(folder));
 ipcMain.handle("media:listFiles", async (_, folder) => listMediaFiles(folder));

apps/data-panel/preload.cjs

@@ -20,6 +20,11 @@ contextBridge.exposeInMainWorld("panelAPI", {
     upsert: (payload) => ipcRenderer.invoke("podcast:upsert", payload),
     delete: (payload) => ipcRenderer.invoke("podcast:delete", payload),
   },
+  snippet: {
+    list: () => ipcRenderer.invoke("snippet:list"),
+    upsert: (payload) => ipcRenderer.invoke("snippet:upsert", payload),
+    delete: (slug) => ipcRenderer.invoke("snippet:delete", slug),
+  },
   media: {
     listFolders: () => ipcRenderer.invoke("media:listFolders"),
     createFolder: (folder) => ipcRenderer.invoke("media:createFolder", folder),

components/site-navbar.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { Icon } from "@iconify/react";
 import Link from "next/link";
@@ -90,7 +90,7 @@ export function SiteNavbar() {
             type="button"
             onClick={() => setSearchOpen(true)}
             className="inline-flex h-8 w-44 cursor-pointer items-center justify-between rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground sm:w-52"
-            aria-label="Komut paletini aç"
+            aria-label="Komut paletini aç"
           >
             <span className="inline-flex items-center gap-2">
               <Icon icon="mdi:magnify" width={16} height={16} />
@@ -128,7 +128,7 @@ export function SiteNavbar() {
           <Sheet>
             <SheetTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
               <Icon icon="mdi:menu" width={18} height={18} />
-              <span>Menü</span>
+              <span>Menü</span>
             </SheetTrigger>
             <SheetContent side="right" className="w-72 p-4">
               <SheetTitle className="sr-only">Mobil Menü</SheetTitle>
@@ -138,7 +138,7 @@ export function SiteNavbar() {
                     type="button"
                     onClick={() => setSearchOpen(true)}
                     className="inline-flex h-9 w-full cursor-pointer items-center justify-between rounded-sm border border-border px-3 text-sm text-muted-foreground transition-colors hover:text-foreground"
-                    aria-label="Komut paletini aç"
+                    aria-label="Komut paletini aç"
                   >
                     <span className="inline-flex items-center gap-2">
                       <Icon icon="mdi:magnify" width={16} height={16} />

components/snippets-content.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
+import type { Snippet } from "@/data/snippets";
+
+type SnippetsContentProps = {
+  snippets: Snippet[];
+  categories: string[];
+};
+
+function extractCode(markdown: string) {
+  const match = /```\w*\n([\s\S]*?)```/.exec(markdown);
+  return match ? match[1].trim() : markdown;
+}
+
+export function SnippetsContent({ snippets, categories }: SnippetsContentProps) {
+  const [selected, setSelected] = useState("All");
+
+  const filtered = selected === "All"
+    ? snippets
+    : snippets.filter((s) => s.category === selected);
+
+  return (
+    <section className="flex h-full flex-col gap-3 overflow-y-auto">
+      <Card className="rounded-sm border-border p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <Typography variant="h3">
+              Kod <span className="font-secondary text-red-600">Parçacıkları</span>
+            </Typography>
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              Sıkça kullandığım, tekrar kullanılabilir kod parçacıkları.
+            </Typography>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {categories.map((cat) => (
+              <button key={cat} type="button" onClick={() => setSelected(cat)}>
+                <Badge
+                  variant={cat === selected ? "default" : "outline"}
+                  className="cursor-pointer rounded-sm"
+                >
+                  {cat}
+                </Badge>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
+
+      <StaggerContainer className="grid gap-3 md:grid-cols-2">
+        {filtered.map((snippet) => (
+          <StaggerItem key={snippet.slug}>
+            <Card className="flex h-full flex-col rounded-sm border-border">
+              <div className="flex items-start justify-between gap-2 p-4 pb-2">
+                <div>
+                  <Typography variant="large" className="text-base leading-tight">
+                    {snippet.title}
+                  </Typography>
+                  <Typography variant="small" className="mt-1 text-muted-foreground">
+                    {snippet.description}
+                  </Typography>
+                </div>
+                <Badge variant="outline" className="shrink-0 rounded-sm">
+                  {snippet.language}
+                </Badge>
+              </div>
+              <div className="flex-1 px-4 pb-4">
+                <SyntaxHighlighter
+                  language={snippet.language}
+                  style={vscDarkPlus}
+                  customStyle={{
+                    borderRadius: "0.25rem",
+                    margin: 0,
+                    fontSize: "0.8125rem",
+                  }}
+                  showLineNumbers
+                >
+                  {extractCode(snippet.markdown)}
+                </SyntaxHighlighter>
+              </div>
+            </Card>
+          </StaggerItem>
+        ))}
+      </StaggerContainer>
+
+      {filtered.length === 0 && (
+        <Card className="rounded-sm border-border p-5">
+          <Typography variant="p" className="text-muted-foreground">
+            Bu kategoride henüz snippet bulunmuyor.
+          </Typography>
+        </Card>
+      )}
+    </section>
+  );
+}

content/snippets/css-reset.md

@@ -0,0 +1,36 @@
+---
+title: "CSS Reset"
+language: "css"
+category: "CSS"
+description: "Minimal ve modern bir CSS reset şablonu."
+---
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+```

content/snippets/use-local-storage.md

@@ -0,0 +1,24 @@
+---
+title: "useLocalStorage Hook"
+language: "typescript"
+category: "React Hooks"
+description: "localStorage ile senkronize çalışan bir React hook'u."
+---
+
+```typescript
+import { useState, useEffect } from "react";
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [value, setValue] = useState<T>(() => {
+    if (typeof window === "undefined") return initialValue;
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : initialValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}
+```

data/snippets.ts

@@ -0,0 +1,44 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import matter from "gray-matter";
+
+export type Snippet = {
+  slug: string;
+  title: string;
+  language: string;
+  category: string;
+  description: string;
+  markdown: string;
+};
+
+const SNIPPETS_DIR = path.join(process.cwd(), "content", "snippets");
+
+export async function listSnippets(): Promise<Snippet[]> {
+  let files: string[] = [];
+  try {
+    files = await fs.readdir(SNIPPETS_DIR);
+  } catch {
+    return [];
+  }
+
+  const mdFiles = files.filter((f) => f.endsWith(".md"));
+
+  const snippets = await Promise.all(
+    mdFiles.map(async (fileName) => {
+      const raw = await fs.readFile(path.join(SNIPPETS_DIR, fileName), "utf8");
+      const parsed = matter(raw);
+      const slug = fileName.replace(/\.md$/i, "");
+
+      return {
+        slug,
+        title: String(parsed.data.title || slug),
+        language: String(parsed.data.language || "text"),
+        category: String(parsed.data.category || "General"),
+        description: String(parsed.data.description || ""),
+        markdown: parsed.content.trim(),
+      };
+    }),
+  );
+
+  return snippets.sort((a, b) => a.title.localeCompare(b.title));
+}

lib/links.ts

@@ -1,8 +1,9 @@
-export const NAV_LINKS = [
+export const NAV_LINKS = [
   { id: "about", label: "Hakkımda", href: "/about" },
   { id: "blog", label: "Blog", href: "/blog" },
   { id: "content", label: "İçerikler", href: "/content" },
   { id: "projects", label: "Projeler", href: "/projects" },
+  { id: "snippets", label: "Snippets", href: "/snippets" },
   { id: "contact", label: "İletişim", href: "/contact" },
 ] as const;