A modern, file-based CMS website for Leihlokal - a community lending and borrowing service. Built with Kirby CMS 4.x, Tailwind CSS, and modern JavaScript.
- PHP: 8.1.0 or higher (tested with 8.1, 8.2, 8.3)
- PHP Extensions: SimpleXML, ctype, curl, dom, gd, filter, hash, iconv, json, libxml, mbstring, openssl
- Node.js: For building Tailwind CSS
- Composer: For PHP dependency management (optional)
-
Clone the repository
git clone <repository-url> cd leihfrontend
-
Install PHP dependencies
composer install
-
Install Node dependencies
npm install
-
Build CSS
npm run build
-
Start development server
composer start
The site will be available at
http://localhost:8000 -
Access the admin panel Navigate to
http://localhost:8000/panelto set up your first admin account
docker build -f Containerfile -t leihfrontend:dev .docker run -d \
--name leihfrontend \
-p 8080:80 \
-v $(pwd)/content:/var/www/html/content \
leihfrontend:devImportant: Replace $(pwd)/content with the path of your contents directory. The directory (and all its files) must be owned by 33:33 (www-data user and group inside the container).
# Build Tailwind CSS (production)
npm run build
# Watch for changes during development
npm run watchTailwind processes ./assets/css/processing.css and outputs to ./assets/css/tailwind.css
# Start local development server
composer startThe built-in PHP server runs on port 8000 by default.
leihfrontend/
├── assets/
│ ├── css/ # Tailwind CSS files
│ ├── fonts/ # Univers font family
│ └── js/ # JavaScript files
├── content/ # File-based content (Kirby pages)
├── kirby/ # Kirby CMS core. Please update if possible.
├── media/ # Generated thumbnails/responsive images
├── site/
│ ├── blueprints/ # Content structure definitions
│ ├── controllers/ # Page logic/data processing
│ ├── snippets/ # Reusable template partials
│ ├── templates/ # Page rendering templates
│ └── config/ # Kirby configuration
└── vendor/ # PHP dependencies
- Dynamic events system with structured data storage
- Local Events: Managed through Kirby Panel
- iCal Import: Automatic import from external iCal (.ics) sources
- Downloadable .ics calendar files for individual events
- Featured event highlighting
- Automatic categorization (upcoming/past events)
- Tailwind CSS with custom
leihlokalcolor palette (50-950 shades in oklch format) - Univers Font Family with multiple weights and condensed variants
- Typography plugin for rich text formatting
- Responsive design with custom breakpoints
- Animated statistics counter (anime.js)
- Image lightbox galleries (Fancybox, Lightbox2)
- Dynamic homepage image grid with random rotation
- File-based content (no database required)
- Flexible blueprints for different page types
- Structured data fields for repeatable content
- User-friendly Kirby Panel interface
- home - Landing page with dynamic image grid and animated statistics
- events - Events listing with iCal import and export
- leihlokal - Information about lending locations
- multipurpose - Flexible content page
- default - Standard page template
Main configuration file: site/config/config.php
Key settings:
- Debug mode: Enabled for development
- Panel installation: Allowed
Content is stored in the content/ directory as plain text files with a simple field: value format. Each page is a numbered folder containing a .txt file.
Example content structure:
content/
├── 1_ll/
│ └── default.txt
├── 2_frei-raume/
│ └── default.txt
├── 3_cal/
│ └── events.txt
└── site.txt
Site-wide data (like events) is stored in content/site.txt as structured fields.
- jQuery (3.7.1) - DOM manipulation
- Fancybox UI (5.0.36) - Modal dialogs and lightboxes
- Lightbox2 - Image galleries
- anime.js - Animation engine for statistics counter
For production deployment:
- Build optimized CSS:
npm run build - Ensure PHP 8.1+ is available on the server
- Set appropriate file permissions for
content/,site/cache/, andmedia/ - Disable debug mode in
site/config/config.php - Configure web server (Apache/Nginx) to point to the project root
For licensing information, please refer to the project maintainer.