Alexander Bocken 2f71b13de6
Some checks failed
CI / update (push) Failing after 1m10s
feat: add comprehensive filter UI with chip-based dropdowns
Add advanced filtering with category, tags (multi-select), icon, season,
and favorites filters. All filters use consistent chip-based dropdown UI
with type-to-search functionality.

New Components:
- TagChip.svelte: Reusable chip component with selected/removable states
- CategoryFilter.svelte: Single-select category with chip dropdown
- TagFilter.svelte: Multi-select tags with AND logic and chip dropdown
- IconFilter.svelte: Single-select emoji icon with chip dropdown
- SeasonFilter.svelte: Multi-select months with chip dropdown
- FavoritesFilter.svelte: Toggle for favorites-only filtering
- FilterPanel.svelte: Container with responsive layout and mobile toggle

Search Component:
- Integrated FilterPanel with all filter types
- Added applyNonTextFilters() for category/tags/icon/season/favorites
- Implemented favorites filter logic (recipe.isFavorite check)
- Made tags/icons reload reactively when language changes with $effect
- Updated buildSearchUrl() for comma-separated array parameters
- Passed categories and isLoggedIn props to enable all filters

Server API:
- Both /api/rezepte/search and /api/recipes/search support:
  - Multi-tag AND logic using MongoDB $all operator
  - Multi-season filtering using MongoDB $in operator
  - Backwards compatible with single tag/season parameters
- Updated search page server load to parse tag/season arrays

UI/UX:
- Filters display inline on wide screens with 2rem gap
- Mobile: collapsible with subtle toggle button and slide-down animation
- Chip-based dropdowns appear on focus with filtering as you type
- Selected items display as removable chips below inputs (no background)
- Centered labels on desktop, left-aligned on mobile
- Reduced vertical spacing on mobile (0.3rem gap)
- Max-width constraints: 500px for filters, 600px for panel on mobile
- Consistent naming: "Tags" and "Icon" instead of German translations
2026-01-02 21:30:33 +01:00
2023-06-24 15:35:36 +02:00
2023-06-24 15:35:36 +02:00
2025-12-16 11:32:38 +01:00
2023-06-24 15:33:41 +02:00
2024-02-18 15:23:14 +01:00
2023-06-24 15:35:36 +02:00
2025-09-04 11:52:28 +02:00

Personal Homepage

My own homepage, bocken.org, built with svelte-kit.

TODO

General

  • Admin user management -> move to authentik via oIDC
    • login to authentik
    • only let rezepte_users edit recipes -> currently only letting them log in, should be changed
    • get user info from authentik (more than email and name)
    • upload pfp
  • upload/change pfp
  • registration only with minimal permissions
  • logout without /logout page
  • preferences page
  • change password
  • css dark mode @media (prefers-color-scheme: dark) {}
  • dark mode toggle

Rezepte

  • Do not list recipes that are all-year as "seasonal"
  • nutrition facts
  • verify randomize arrays based on day
  • notes for next time
  • refactor, like, a lot
  • expose json-ld for recipes https://json-ld.org/ https://schema.org/Recipe
  • reference other recipes in recipe
    • add a link to the recipe
    • add ingredients to the ingredients list
    • include steps?
  • add favoriting ability when logged in
    • favorite button on recipe
    • store favorites in DB -> add to user object
    • favorite API endpoint (requires auth of user)
      • set
      • retrieve
    • favorite page/MediaScroller
  • graceful degradation for JS-less browsers
    • use js-only class with display:none and remove it with JS
    • disable search -> use form action instead on submit?
    • do not blur images without js
    • correct Recipe Card rendering

Glaube

  • just keep it md rendered
  • Google Speech to Text API integration?
  • Gebete

Outside of this sveltekit project but planned to run on the server as well

  • create LDAP and OpenID

E-Mail

  • emailwiz setup
  • fail2ban
  • LDAP?

Dendrite

  • setup dendrite
  • Connect to LDAP/OIDC (waiting on upstream)
  • Serve some web-frontend -> Just element?

Gitea

  • consistent theming
  • OpenID Connect
  • sane landing page

Jellyfin

  • connect to LDAP
  • consitent theming

Webtrees

  • setup Oauth2proxy -> not necessary, authentik has proxy integrated
  • connect to OIDC using Oauth2proxy (using authentik)
  • consistent theming
  • auto-login if not logged in

Jitsi

  • consistent theming
  • move away from docker
  • find a way to improve max video quality without jitsi becoming unreliable

Searx

  • investigate SearxNG as more reliable alternative
  • consistent theming

Photoprism

  • consistent theming
  • OIDC integration (waiting on upstream)

Nextcloud

  • consistent theming
  • collabora integration

Transmission

  • move behind authentik
Description
My personal website built to learn SvelteKit. The largest part is the Recipes subsection.
https://bocken.org
Readme AGPL-3.0 93 MiB
Languages
Svelte 64%
TypeScript 33.4%
CSS 1.7%
Python 0.5%
JavaScript 0.2%
Other 0.2%