From 35556dca71eafdac4eb5d2fe781ba39687d0b058 Mon Sep 17 00:00:00 2001 From: Berke Güzel Date: Thu, 29 Jan 2026 23:56:21 +0300 Subject: initial commit --- src/lib/assets/favicon.svg | 1 + src/lib/components/Footer.svelte | 9 ++ src/lib/components/Giscus.svelte | 27 +++++ src/lib/components/Header.svelte | 27 +++++ src/lib/components/PostCard.svelte | 27 +++++ src/lib/components/ThemeToggle.svelte | 78 +++++++++++++ src/lib/index.ts | 1 + src/lib/styles/global.css | 206 ++++++++++++++++++++++++++++++++++ src/lib/utils/posts.ts | 51 +++++++++ 9 files changed, 427 insertions(+) create mode 100644 src/lib/assets/favicon.svg create mode 100644 src/lib/components/Footer.svelte create mode 100644 src/lib/components/Giscus.svelte create mode 100644 src/lib/components/Header.svelte create mode 100644 src/lib/components/PostCard.svelte create mode 100644 src/lib/components/ThemeToggle.svelte create mode 100644 src/lib/index.ts create mode 100644 src/lib/styles/global.css create mode 100644 src/lib/utils/posts.ts (limited to 'src/lib') diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg new file mode 100644 index 0000000..cc5dc66 --- /dev/null +++ b/src/lib/assets/favicon.svg @@ -0,0 +1 @@ +svelte-logo \ No newline at end of file diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte new file mode 100644 index 0000000..f06e5a6 --- /dev/null +++ b/src/lib/components/Footer.svelte @@ -0,0 +1,9 @@ + diff --git a/src/lib/components/Giscus.svelte b/src/lib/components/Giscus.svelte new file mode 100644 index 0000000..96be4a4 --- /dev/null +++ b/src/lib/components/Giscus.svelte @@ -0,0 +1,27 @@ + + +
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte new file mode 100644 index 0000000..804497e --- /dev/null +++ b/src/lib/components/Header.svelte @@ -0,0 +1,27 @@ + + +
+
+
+

{title}

+

{description}

+
+ + +
+
diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte new file mode 100644 index 0000000..7fb9361 --- /dev/null +++ b/src/lib/components/PostCard.svelte @@ -0,0 +1,27 @@ + + +
+
+ +

{post.title}

+ + +
+

{post.description}

+
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte new file mode 100644 index 0000000..f136246 --- /dev/null +++ b/src/lib/components/ThemeToggle.svelte @@ -0,0 +1,78 @@ + + + diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000..856f2b6 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1 @@ +// place files you want to import through the `$lib` alias in this folder. diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css new file mode 100644 index 0000000..8ec94fc --- /dev/null +++ b/src/lib/styles/global.css @@ -0,0 +1,206 @@ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --bg: #fff; + --text: #333; + --muted: #666; + --link: #888; + --link-hover: #000; + --border: #eee; + --code-bg: #f5f5f5; + --font: "Inter", sans-serif; + --mono: "Bitstream Vera Sans Mono", "Courier New", monospace; +} + +[data-theme="dark"] { + --bg: #1a1a1a; + --text: #e0e0e0; + --muted: #999; + --link-hover: #fff; + --border: #333; + --code-bg: #2a2a2a; +} + +html { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font: 18px/1.4 var(--font); + color: var(--text); + background: var(--bg); + transition: background 0.2s, color 0.2s; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 2rem; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 0 2rem; +} + +p { + margin-bottom: 1rem; +} + +a { + color: var(--link); + text-decoration: none; + transition: color 0.2s; +} + +a:hover { + color: var(--link-hover); +} + +ul, +ol { + margin-bottom: 1rem; + padding-left: 1.5rem; +} + +li { + margin-bottom: 0.25rem; +} + +blockquote { + border-left: 2px solid var(--muted); + padding-left: 1em; + margin: 1.5rem 0; + font-style: italic; +} + +code { + font-family: var(--mono); + font-size: 0.9em; + background: var(--code-bg); + padding: 0.2em 0.4em; + border-radius: 3px; +} + +pre { + font-family: var(--mono); + background: var(--code-bg); + padding: 1rem; + border-radius: 4px; + overflow-x: auto; + margin: 1.5rem 0; + box-shadow: 3px 3px rgba(0, 0, 0, 0.1); +} + +pre code { + background: none; + padding: 0; +} + +img { + max-width: 100%; + height: auto; +} + +hr { + border: none; + border-top: 1px solid var(--border); + margin: 2rem 0; +} + +small, +time { + font-size: 15px; + color: var(--muted); +} + +/* Layout */ +.wrapper-masthead { + margin: 0 2rem 3rem; +} + +.masthead { + padding: 1.25rem 0; + border-bottom: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; +} + +.site-info { + display: flex; + flex-direction: column; + margin-left: 2rem; +} + +.site-info h1 { + margin: 0; + font-size: 1.75rem; + font-weight: 300; + letter-spacing: 1px; +} + +.site-description { + margin: -0.25rem 0 0 0; + color: var(--muted); + font-size: 1rem; +} + +header nav { + display: flex; + align-items: center; + gap: 1.25rem; + font-size: 18px; +} + +footer { + margin-top: 4rem; + text-align: center; +} + +article { + margin-bottom: 2rem; +} + +.theme-toggle { + background: transparent; + border: none; + padding: 0.5rem; + cursor: pointer; + color: var(--muted); + display: flex; + align-items: center; + justify-content: center; + transition: color 0.2s; +} + +.theme-toggle:hover { + color: var(--link-hover); +} + +.giscus-container { + margin-top: 3rem; +} + +@media (max-width: 640px) { + .masthead { + flex-direction: column; + text-align: center; + gap: 1rem; + } + + header nav { + gap: 0.75rem; + } +} \ No newline at end of file diff --git a/src/lib/utils/posts.ts b/src/lib/utils/posts.ts new file mode 100644 index 0000000..cc05c83 --- /dev/null +++ b/src/lib/utils/posts.ts @@ -0,0 +1,51 @@ +import type { Component } from 'svelte'; + +export interface PostMetadata { + title: string; + date: string; + description: string; + tags?: string[]; +} + +export interface Post extends PostMetadata { + slug: string; +} + +export interface PostModule { + default: Component; + metadata: PostMetadata; +} + +// Use Vite's glob import to get all .svx files from posts directory +const postFiles = import.meta.glob('/src/posts/*.svx', { eager: true }); + +/** + * Get all posts, sorted by date (newest first) + */ +export function getPosts(): Post[] { + const posts: Post[] = []; + + for (const path in postFiles) { + const file = postFiles[path]; + // Extract slug from path: /src/posts/hello-world.svx -> hello-world + const slug = path.split('/').pop()?.replace('.svx', '') ?? ''; + + if (file.metadata) { + posts.push({ + ...file.metadata, + slug + }); + } + } + + // Sort by date, newest first + return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); +} + +/** + * Get a single post by slug + */ +export function getPost(slug: string): PostModule | undefined { + const path = `/src/posts/${slug}.svx`; + return postFiles[path]; +} -- cgit v1.2.3