schreifuchs.ch

Personal portfolio website for Schreifuchs, featuring photography, informatics, music, and video.

The site is built with Svelte 5 and SvelteKit, and it is powered by a dynamic Nextcloud backend via WebDAV.

Features

• Dynamic Content: Pages are automatically discovered based on the folder structure in Nextcloud.
• Hidden Sites: Folders starting with _ are excluded from the navigation menu but remain accessible via direct links.
• Markdown Driven: Content for each page is fetched from a corresponding Markdown file.
• Image Optimization: Automatic image resizing via Nextcloud's Preview API for optimized delivery and srcset support.
• Asset Proxying: Images and attachments are securely streamed from Nextcloud through a server-side proxy.
• Performance: In-memory caching for Nextcloud requests (15-minute TTL).
• Responsive Design: Styled with Tailwind CSS, optimized for all screen sizes.

Tech Stack

• Framework: Svelte 5 (Runes) & SvelteKit
• Styling: Tailwind CSS
• Backend: Node.js (via @sveltejs/adapter-node)
• Integration: webdav library for Nextcloud communication
• Content: @ts-stack/markdown for rendering

Configuration

The application requires the following environment variables in a .env file:

NEXTCLOUD_URL=https://your-nextcloud-instance.com
NEXTCLOUD_USER=your_username
NEXTCLOUD_PASSWORD=your_app_password
NEXTCLOUD_BASE_DIR=WebsiteContent  # Optional: Root folder for site content

Content Management

To add or update content, manage files in your configured Nextcloud directory:

1. Create a Page: Create a folder (e.g., Travel).
   • Hidden Sites: To hide a page from the navigation menu, prefix the folder name with an underscore (e.g., _Secret). It will still be accessible at /secret.
2. Add Content: Inside that folder, create a Markdown file named after the folder (e.g., Travel.md or Secret.md for _Secret).
3. Add Header Image: Upload a file named cover.webp, cover.jpg, or cover.png to the folder. This will be used as the header on the page and the tile on the homepage.
4. Add Assets: Any other images or files uploaded to the folder can be linked in the Markdown.

Development

Install dependencies:

pnpm install

Start the development server:

pnpm run dev

Building

Build for production (Node.js):

pnpm run build

The output will be in the build/ directory, ready to be served by Node.

Image Processing

To optimize images before uploading to Nextcloud:

convert input.png -resize 3000 -quality 80 output.webp