schreifuchs.ch

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

The site is built with Go, templ, and HTMX, 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 and rendered via gomarkdown.
• 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: Multi-layer caching using Valkey (Redis-compatible) for WebDAV requests and image scaling.
• Responsive Design: Styled with Tailwind CSS, optimized for all screen sizes.

Tech Stack

• Backend: Go (Golang)
• UI Components: templ
• Frontend Interactivity: HTMX
• Styling: Tailwind CSS
• Caching: Valkey
• Integration: gowebdav for Nextcloud communication
• Content: github.com/gomarkdown/markdown for rendering

Configuration

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

FILESYSTEM_URL=https://your-nextcloud-instance.com/remote.php/dav/files/user/
FILESYSTEM_USERNAME=your_username
FILESYSTEM_PASSWORD=your_app_password
CACHE_ADDRESS=localhost:6379
CACHE_PASSWORD=your_valkey_password
PORT=8080
LOG_LEVEL=DEBUG

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 (Go, pnpm, and the templ binary):

# Install Go dependencies
go mod tidy
# Install JS/CSS dependencies
pnpm install

Start the development server with hot reloading:

air

For CSS changes, run in a separate terminal:

pnpm run watch:css

Building

Build the project for production:

# Generate Go code from Templ files
go generate ./...
# Build CSS
pnpm run build:css
# Build Go binary
go build -o ./tmp/main ./cmd/schreifuchs-ch/main.go

Image Processing

To optimize images before uploading to Nextcloud:

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