# 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](https://templ.guide/) - **Frontend Interactivity:** [HTMX](https://htmx.org/) - **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: ```env 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): ```bash # Install Go dependencies go mod tidy # Install JS/CSS dependencies pnpm install ``` Start the development server with hot reloading: ```bash air ``` For CSS changes, run in a separate terminal: ```bash pnpm run watch:css ``` ## Building Build the project for production: ```bash # 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: ```bash convert input.png -resize 3000 -quality 80 output.webp ```