# kraafter/kraaftersite-v3 architecture

> Architecture diagram of the GitHub repository kraafter/kraaftersite-v3, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kraafter/kraaftersite-v3
- Repository: https://github.com/kraafter/kraaftersite-v3

## Overview

Kraafter.me is a personal serverless website built with Svelte. Visitors browse a homepage, blog, gallery, and informational pages; blog listings load published post metadata through an API, while RSS reuses that API. Gallery endpoints fetch media listings from ImageKit, and a sitemap endpoint combines post and media slugs. The tree documents additional gallery categories and informational pages, but their internal wiring was not sampled, so those links are omitted.

Main entry points: [`src/routes/api/blog/+server.ts`](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/api/blog/%2Bserver.ts) (Post API), [`src/routes/+page.svelte`](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/%2Bpage.svelte) (Homepage), [`src/routes/blog`](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/blog) (Blog pages), [`src/routes/api/gallery`](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/api/gallery) (Gallery APIs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Site content"]
  node_home["Homepage<br/>[+page.svelte]"]
  node_about["About pages"]
  node_projects["Projects pages"]
  node_contact["Contact page<br/>[+page.svelte]"]
  node_blogui["Blog pages"]
  node_blogapi["Post API<br/>[+server.ts]"]
end

subgraph group_media["Gallery and media"]
  node_galleryui["Gallery pages"]
  node_galleryapi["Gallery APIs"]
end

subgraph group_delivery["Feeds and discovery"]
  node_rss["RSS feed<br/>[+server.ts]"]
  node_sitemap["Sitemap endpoint<br/>[+server.ts]"]
end

node_visitor(("Visitor"))
node_imagekit["ImageKit"]

node_visitor -.->|"browses"| node_home
node_visitor -.->|"browses"| node_about
node_visitor -.->|"browses"| node_projects
node_visitor -.->|"browses"| node_contact
node_visitor -.->|"browses"| node_blogui
node_visitor -.->|"browses"| node_galleryui
node_home -->|"fetches posts"| node_blogapi
node_blogui -->|"fetches posts"| node_blogapi
node_rss -->|"fetches posts"| node_blogapi
node_galleryapi -->|"fetches listings"| node_imagekit
node_sitemap -->|"fetches listings"| node_imagekit

click node_home "https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/%2Bpage.svelte"
click node_about "https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/about"
click node_projects "https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/projects"
click node_contact "https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/contact/%2Bpage.svelte"
click node_blogui "https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/blog"
click node_blogapi "https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/api/blog/%2Bserver.ts"
click node_galleryui "https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/gallery"
click node_galleryapi "https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/api/gallery"
click node_rss "https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/blog/rss.xml/%2Bserver.ts"
click node_sitemap "https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/sitemap.xml/%2Bserver.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_about,node_projects,node_contact,node_blogui,node_blogapi toneBlue
class node_galleryui,node_galleryapi toneAmber
class node_rss,node_sitemap toneMint
class node_visitor,node_imagekit toneIndigo
```

## Components

### Site content

- [Homepage](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [About pages](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/about): `src/routes/about`
- [Projects pages](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/projects): `src/routes/projects`
- [Contact page](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/contact/%2Bpage.svelte): `src/routes/contact/+page.svelte`
- [Blog pages](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/blog): `src/routes/blog`
- [Post API](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/api/blog/%2Bserver.ts): `src/routes/api/blog/+server.ts`

### Gallery and media

- [Gallery pages](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/gallery): `src/routes/gallery`
- [Gallery APIs](https://github.com/kraafter/kraaftersite-v3/tree/main/src/routes/api/gallery): `src/routes/api/gallery`

### Feeds and discovery

- [RSS feed](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/blog/rss.xml/%2Bserver.ts): `src/routes/blog/rss.xml/+server.ts`
- [Sitemap endpoint](https://github.com/kraafter/kraaftersite-v3/blob/main/src/routes/sitemap.xml/%2Bserver.ts): `src/routes/sitemap.xml/+server.ts`

### Other components

- **Visitor**
- **ImageKit**

## Connections

- Visitor → Homepage: browses
- Visitor → About pages: browses
- Visitor → Projects pages: browses
- Visitor → Contact page: browses
- Visitor → Blog pages: browses
- Visitor → Gallery pages: browses
- Homepage → Post API: fetches posts
- Blog pages → Post API: fetches posts (evidence: `src/routes/blog/+page.server.ts`)
- RSS feed → Post API: fetches posts (evidence: `src/routes/blog/rss.xml/+server.ts`)
- Gallery APIs → ImageKit: fetches listings (evidence: `src/routes/api/gallery/art/+server.ts`)
- Sitemap endpoint → ImageKit: fetches listings (evidence: `src/routes/sitemap.xml/+server.ts`)