poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-30 11:30:14 +03:00
parent d3c13ed25d
commit 31da9f114b
9 changed files with 308 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/snippets/page.tsx
+9
View File
@@ -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
+85
View File
@@ -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
+5
View File
@@ -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
+4 -4
View File
@@ -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
+99
View File
@@ -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
+36
View File
@@ -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
+24
View File
@@ -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
+44
View File
@@ -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
+2 -1
View File
@@ -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;