Initial commit

site/blueprints/fields/cover.yml

@@ -0,0 +1,9 @@
+# Fields can be defined in their own field blueprints
+# and reused across multiple blueprints
+# This field is used in the album.yml and note.yml blueprints
+# See http://getkirby.com/docs/guide/blueprints/extending-blueprints#reusing-and-extending-single-fields
+type: files
+multiple: false
+query: page.images.template('image')
+uploads:
+  template: image

site/blueprints/files/blocks/image.yml

@@ -0,0 +1,4 @@
+# The blocks/image template is automatically assigned to all uploaded
+# images in the blocks field. We don't really need a separate blueprint
+# for this and can therefor extend the already existing files/image blueprint
+extends: files/image

site/blueprints/files/image.yml

@@ -0,0 +1,47 @@
+# Each file blueprint must have a title, the title may be different from the file name
+title: Image
+
+# Like page blueprints, file blueprints can define a layout with tabs, columns, sections and fields
+# File blueprints define what sort of information should get stored in a file's meta data file
+# In addition to the fields defined in this example blueprint, you can also set what type of file is acceptable
+# when this blueprint is used, which allows you to control what users can upload.
+# More about file blueprints: https://getkirby.com/docs/reference/panel/blueprints/file
+
+accept: 
+  type: image
+
+columns:
+  - width: 1/2
+    sections:
+      content:
+        type: fields
+        fields:
+          caption:
+            label: Caption
+            type: textarea
+            size: medium
+  - width: 1/2
+    sections:
+      meta:
+        type: fields
+        fields:
+          alt:
+            label: Alternative Text
+            type: text
+          photographer:
+            label: Photographer
+            type: text
+            width: 2/3
+          license:
+            label: License
+            type: select
+            width: 1/3
+            options:
+              - Unsplash
+              - CC BY 4.0
+              - CC BY-SA 4.0
+              - CC BY-NC 4.0
+              - CC BY-ND 4.0
+          link:
+            label: Link
+            type: url

site/blueprints/pages/about.yml

@@ -0,0 +1,79 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: About us
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: ☎️
+
+# Limit the possible page statuses to `draft` and `listed`.
+# More about page statuses: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
+status:
+  draft: true
+  listed: true
+
+# Page options allow you to control how users can interact with the page.
+# Here we prevent changing the page slug and page deletion
+# More about page options: https://getkirby.com/docs/reference/panel/blueprints/page#options
+options:
+  changeSlug: false
+  delete: false
+
+# We use tabs here to focus on the layout in one tab
+# and have the additional contact fields in a secondary
+# tab. Tabs can really help to clean up the interface
+# when it otherwise gets too complicated
+tabs:
+  content:
+    icon: text
+    label: Content
+    fields:
+      layout:
+        label: Layout
+        type: layout
+        layouts:
+          - "1/1"
+          - "1/2, 1/2"
+          - "1/3, 1/3, 1/3"
+  # The contact tab pre-defines a set of address
+  # fields for the contact box at the bottom of the about
+  # page. Combining modular content from layouts with
+  # pre-defined content from such fields is a great way to
+  # offer flexibility and yet keep certain constraints.
+  #
+  # The form layout is created with two columns,
+  # each column has a set of fields
+  # More about columns:
+  # https://getkirby.com/docs/guide/blueprints/layout#defining-columns
+  contact:
+    icon: map
+    label: Contact
+    columns:
+      - width: 1/2
+        # Kirby has many different field types, from simple text fields to the more complex structure field that contains subfields
+        # All available field types: https://getkirby.com/docs/reference/panel/fields
+        fields:
+          address:
+            label: Address
+            type: writer
+            inline: true
+          email:
+            label: Email
+            type: email
+          phone:
+            label: Phone
+            type: tel
+      - width: 1/2
+        fields:
+          social:
+            label: On the web
+            type: structure
+            columns:
+              platform: true
+            fields:
+              platform:
+                label: Platform
+                type: text
+                width: 1/2
+              url:
+                label: URL
+                type: url
+                width: 1/2

site/blueprints/pages/album.yml

@@ -0,0 +1,54 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Album
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 🖼
+
+# Page status can be limited, here to `draft` and `listed`.
+# More about page status: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
+status:
+  draft: true
+  listed: true
+
+# Define the form layout with two columns
+# Columns are optional but help structure the form layout
+# The first column defines an files section, the second a set of fields
+# More about different types of sections: https://getkirby.com/docs/reference/panel/sections
+# More about columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
+
+columns:
+  - width: 1/3
+    # The first column contains a set of fields to store
+    # information about the album.
+    #
+    # List of all available field types:
+    # https://getkirby.com/docs/reference/panel/fields
+    fields:
+      # If you need the same field in multiple locations, you can define them once and reuse whereever needed.
+      # Here we use a files field defined in `/site/blueprints/field/cover.yml`
+      cover: fields/cover
+      headline:
+        type: text
+        placeholder: "{{ page.title }}"
+        help: Leave empty to use the title as headline
+      subheadline:
+        type: text
+      text:
+        type: writer
+      tags: true
+
+  - width: 2/3
+    sections:
+      # The `images` files section shows all images of
+      # the current page that use the `image` template
+      images:
+        type: files
+        layout: cards
+        template: image
+        info: "{{ file.dimensions }}"
+        image:
+          ratio: 5/4
+          cover: true
+        min: 1
+        size: small
+

site/blueprints/pages/default.yml

@@ -0,0 +1,42 @@
+# Each page blueprint must have a title, the title may be different from the file name
+# This default blueprint is used to display a page in the Panel whenever a custom page blueprint is missing.
+title: Simple Page
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 📝
+
+# Custom descriptions of page statuses depending on use case
+# More about page statuses: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
+status:
+  draft: true
+  unlisted:
+    label: Hidden Page
+    text: The page is not listed in the main menu
+  listed:
+    label: Menu Page
+    text: The page is listed in the main menu
+
+# Content area width 2 columns and 3 sections: fields, pages, and files
+# Columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
+columns:
+  main:
+    width: 2/3
+    sections:
+      # Fields section: https://getkirby.com/docs/reference/panel/sections/fields
+      fields:
+        type: fields
+        fields:
+          text:
+            type: textarea
+            size: huge
+  sidebar:
+    width: 1/3
+    sections:
+      # Pages section: https://getkirby.com/docs/reference/panel/sections/pages
+      pages:
+        type: pages
+        template: default
+      # Files section: https://getkirby.com/docs/reference/panel/sections/files
+      files:
+        type: files
+

site/blueprints/pages/error.yml

@@ -0,0 +1,9 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Error
+
+# Page options allow you to control how users can interact with the page.
+# Here we prevent reading of the page, so it is not shown to anyone in the Panel.
+# If you want to allow users to modify the error page content in the Panel, remove this option.
+# More about page options: https://getkirby.com/docs/reference/panel/blueprints/page#options
+options:
+  read: false

site/blueprints/pages/home.yml

@@ -0,0 +1,34 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Home
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 🏠
+
+# Page options allow you to control how users can interact with the page.
+# Here we prevent changing the page status (the home page cannot be renamed or deleted by default)
+# More about page options: https://getkirby.com/docs/reference/panel/blueprints/page#options
+options:
+  changeStatus: false
+
+# Here we define an info section and a pages section (`photography`)
+sections:
+  content:
+    type: fields
+    fields:
+      headline:
+        type: text
+        width: 1/2
+      gap:
+        width: 1/2
+      subheadline:
+        type: text
+        width: 1/2
+
+  # The photography section extends a pages section defined in the `/site/blueprints/section/album.yml` blueprint
+  # More about reusing and extending sections: https://getkirby.com/docs/guide/blueprints/extending-blueprints#reusing-and-extending-sectionss
+  photography:
+    label: Photography
+    extends: sections/albums
+    status: listed
+    size: small
+    help: All projects for the homepage are being pulled from the photography page.

site/blueprints/pages/note.yml

@@ -0,0 +1,55 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Note
+
+# Sorting number scheme that is applied when page status is changed to `listed`
+# More about page sorting: https://getkirby.com/docs/reference/panel/blueprints/page#sorting
+num: date
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 📖
+
+# Custom descriptions for each page status depending on use case
+# More about page status: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
+status:
+  draft:
+    label: Draft
+    text: The note is still in draft mode. It can only be seen by editors with panel access.
+  unlisted:
+    label: In Review
+    text: The note is online and can be visited with the direct URL. The team must still give the final go to publish it.
+  listed:
+    label: Published
+    text: The note is online and listed in the blog
+
+# Define the form layout with two columns
+# Columns are optional but help structure the form layout
+# More about columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
+columns:
+  - width: 2/3
+    # This columns only has a single field
+    fields:
+      text:
+        type: blocks
+
+  - width: 1/3
+    # This second column holds a fields section with multiple fields
+    # More about fields sections: https://getkirby.com/docs/reference/panel/sections/fields
+    sections:
+      meta:
+        type: fields
+        fields:
+          # If you need the same field in multiple locations, you can define them once and reuse whereever needed.
+          # Here we use a files field defined in `/site/blueprints/field/cover.yml`
+          cover: fields/cover
+          date:
+            type: date
+            time: true
+            default: now
+          author:
+            type: users
+          # Fields types can be added using the shortcut `fieldname: true`
+          # (however, you can only use a fieldname once per page and this only makes sense for simple fields without configuration)
+          tags: true
+      files:
+        type: files
+        template: blocks/image

site/blueprints/pages/notes.yml

@@ -0,0 +1,35 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Notes
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 📖
+
+# Define the form layout with two columns
+# More about columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
+
+columns:
+  - width: 1/3
+    # In the first column, we reuse the `notes` section
+    # (defined in `/site/blueprints/sections/notes.yml` twice with different page status and headline
+    sections:
+      drafts:
+        extends: sections/notes
+        label: Drafts
+        status: draft
+
+      unlisted:
+        extends: sections/notes
+        label: In Review
+        status: unlisted
+
+  - width: 2/3
+    # In the second column, we reuse the same section, this time for listed pages and with a different headline
+    sections:
+      listed:
+        extends: sections/notes
+        label: Published
+        status: listed
+        size: small
+        layout: cards
+
+# More about pages sections: https://getkirby.com/docs/reference/panel/sections/pages

site/blueprints/pages/photography.yml

@@ -0,0 +1,18 @@
+# Each page blueprint must have a title, the title may be different from the file name
+title: Photos
+
+# Each page can have an icon that is shown in page listings when no preview image is available.
+icon: 🖼
+
+# Here we extend two sections which are defined in `/site/blueprints/sections/albums.yml`
+# They differ in their page status and the headline.
+sections:
+  drafts:
+    extends: sections/albums
+    label: Drafts
+    status: draft
+
+  listed:
+    extends: sections/albums
+    label: Published Albums
+    status: listed

site/blueprints/sections/albums.yml

@@ -0,0 +1,16 @@
+# This section blueprint defines a pages section that can be reused across multiple blueprints
+# or multiple times within the same blueprint, see `/site/blueprints/pages/photography.yml`  and `/site/blueprints/site.yml`
+# Sections can have different layouts and display additional information or a preview image
+# More about pages sections: https://getkirby.com/docs/reference/panel/sections/pages
+type: pages
+label: Photography
+parent: kirby.page("photography")
+size: small
+info: "{{ page.images.count }} image(s)"
+layout: cards
+template: album
+empty: No albums yet
+image:
+  query: page.cover
+  cover: true
+  ratio: 5/4

site/blueprints/sections/notes.yml

@@ -0,0 +1,15 @@
+# This section blueprint defines a pages section that can be reused across multiple blueprints
+# or multiple times within the same blueprint, see `/site/blueprints/pages/notes.yml` and `/site/blueprints/site.yml`
+# Sections can have different layouts and display additional information or a preview image
+# More about pages sections: https://getkirby.com/docs/reference/panel/sections/pages
+type: pages
+label: Notes
+parent: kirby.page("notes")
+info: "{{ page.published }}"
+template: note
+empty: No notes yet
+sortBy: date desc
+image:
+  query: page.cover
+  cover: true
+  ratio: 3/2

site/blueprints/site.yml

@@ -0,0 +1,32 @@
+# The `site.yml` blueprint defines the look of the start page (Dashboard) of the Panel.
+
+# The site blueprint usually provides easy access to all main pages of the site.
+# In this example blueprint, we also show subpages of the `photography` and `notes` pages.
+# More about the site blueprint: https://getkirby.com/docs/reference/panel/blueprints/site
+
+# The layout of this form has two columns:
+columns:
+  # The first column has one section for the subpages of the `photography` page in card layout
+  # It reuses the pages section defined in `/site/blueprints/sections/albums.yml`
+  - width: 1/2
+    sections:
+      albums: sections/albums
+
+  # The second column has two sections, `notes` and `pages`
+  - width: 1/2
+    sections:
+      # The `notes` section reuses the pages section defined in `/site/blueprints/sections/notes.yml`
+      notes: sections/notes
+
+      # The `pages` pages section shows other main pages of the site
+      # Using the `templates` option, we limit which types of pages are shown
+      # Using the `create` option, we limit the type of page that can be created when a new page is created
+      # Note that the `sandbox` page and the `error` page that also exist in the content folder but use different blueprints thus do not show up in the list
+      # Since the error page's blueprint is set to `read: false`, it wouldn't show up here even if you added the error blueprint to the templates list
+      pages:
+        type: pages
+        create: default
+        templates:
+          - about
+          - home
+          - default

site/blueprints/users/default.yml

@@ -0,0 +1,41 @@
+# User blueprints are used to create new user roles, define form fields for each user role and set role permissions.
+# By default, Kirby only has the `admin` role, a user role that is allowed to do anything.
+# The title is required, everything else is optional.
+# The default user blueprint does not define a role, but a standard set of fields
+# available for each defined user role with blueprints that only contain a title.
+# More about users, roles and permissions: https://getkirby.com/docs/guide/users/managing-users
+title: User
+
+columns:
+  - width: 1/2
+    fields:
+      street:
+        label: Street
+        type: text
+      zip:
+        label: ZIP
+        type: text
+        width: 1/4
+      city:
+        label: City
+        type: text
+        width: 3/4
+      country:
+        label: Country
+        type: text
+
+  - width: 1/2
+    fields:
+      website:
+        label: Website
+        type: url
+      fediverse:
+        label: Fediverse URL
+        type: url
+        icon: mastodon
+        placeholder: https://example.com/@username
+      instagram:
+        label: Instagram
+        type: text
+        icon: instagram
+        placeholder: username

site/collections/notes.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * Collections help with keeping your code DRY 
+ * if you need to reuse the same set up pages, files or users in multiple places across your site.
+ * 
+ * More about collections:
+ * https://getkirby.com/docs/guide/templates/collections
+ */
+return function () {
+    return page('notes')
+        ->children()
+        ->listed()
+        ->sortBy('date', 'desc');
+};

site/config/config.php

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * The config file is optional. It accepts a return array with config options
+ * Note: Never include more than one return statement, all options go within this single return array
+ * In this example, we set debugging to true, so that errors are displayed onscreen. 
+ * This setting must be set to false in production.
+ * All config options: https://getkirby.com/docs/reference/system/options
+ */
+return [
+    'url' => 'https://robbis.space',
+    'server' => [
+        'HTTP_HOST'             => 'robbis.space',
+        'SERVER_NAME'           => 'robbis.space',
+        'HTTP_X_FORWARDED_HOST' => 'robbis.space',
+        'HTTPS'                 => 'on',
+    ],
+    'panel' => [
+    'install' => true,
+    ],
+    'debug' => true,
+];

site/controllers/album.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Controllers allow you to separate the logic of your templates from your markup.
+ * This is especially useful for complex logic, but also in general to keep your templates clean.
+ *
+ * In this example, we define the `$gallery` variable which is passed to the template
+ *
+ * More about controllers:
+ * https://getkirby.com/docs/guide/templates/controllers
+ */
+return function ($page) {
+
+    $gallery = $page->images()->sortBy('sort', 'filename');
+
+    return [
+        'gallery' => $gallery
+    ];
+
+};

site/controllers/note.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Controllers allow you to separate the logic of your templates from your markup.
+ * This is especially useful for complex logic, but also in general to keep your templates clean.
+ *
+ * In this example, we split the tags from the tags field to create a nice tag list
+ *
+ * More about controllers:
+ * https://getkirby.com/docs/guide/templates/controllers
+ */
+return function ($page) {
+    return [
+        'tags' => $page->tags()->split(','),
+    ];
+};

site/controllers/notes.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Controllers allow you to separate the logic of your templates from your markup.
+ * This is especially useful for complex logic, but also in general to keep your templates clean.
+ *
+ * In this example, we handle tag filtering and paginating notes in the controller,
+ * before we pass the currently active tag and the notes to the template.
+ *
+ * More about controllers:
+ * https://getkirby.com/docs/guide/templates/controllers
+ */
+return function ($page) {
+
+    /**
+     * We use the collection helper to fetch the notes collection defined in `/site/collections/notes.php`
+     * 
+     * More about collections:
+     * https://getkirby.com/docs/guide/templates/collections
+     */
+    $notes = collection('notes');
+
+    $tag = param('tag');
+    if (empty($tag) === false) {
+        $notes = $notes->filterBy('tags', $tag, ',');
+    }
+
+    return [
+        'tag'   => $tag,
+        'notes' => $notes->paginate(6)
+    ];
+
+};

site/models/album.php

@@ -0,0 +1,23 @@
+<?php
+
+/**
+ * Page models extend Kirby's default page object.
+ *
+ * In page models you can define methods that are then available
+ * everywhere in Kirby where you call a page of the extended type.
+ *
+ * In this example, we define the cover method that either returns
+ * an image selected in the cover field or the first image in the folder.
+ *
+ * You can see the method in use in the `home.php` and `photography.php` templates
+ * and in the `site/blueprints/sections/albums.yml` image query
+ *
+ * More about models: https://getkirby.com/docs/guide/templates/page-models
+ */
+class AlbumPage extends Page
+{
+    public function cover()
+    {
+        return $this->content()->get('cover')->toFile() ?? $this->image();
+    }
+}

site/models/note.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * Page models extend Kirby's default page object.
+ *
+ * In page models you can define methods that are then available
+ * everywhere in Kirby where you call a page of the extended type.
+ *
+ * In this example, we define the cover method that either returns
+ * an image selected in the cover field or the first image in the folder.
+ *
+ * You can see the method in use in the `note.php` snippet.
+ * and in the `site/blueprints/sections/notes.yml` image query
+ *
+ * We also define a custom date handler here, which keeps date formatting
+ * for the published date consistent in templates, snippets and blueprints.
+ *
+ * More about models: https://getkirby.com/docs/guide/templates/page-models
+ */
+class NotePage extends Page
+{
+    public function cover()
+    {
+        return $this->content()->cover()->toFile() ?? $this->image();
+    }
+
+    public function published($format = null)
+    {
+        return parent::date()->toDate($format ?? 'd M, Y');
+    }
+}

site/snippets/blocks/gallery.php

@@ -0,0 +1,23 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+?>
+<figure class="gallery">
+  <ul>
+    <?php foreach ($block->images()->toFiles() as $image): ?>
+    <li>
+      <?php snippet('image', [
+        'alt'      => $image->alt(),
+        'contain'  => $block->crop()->isTrue(),
+        'lightbox' => true,
+        'ratio'    => $block->ratio()->or('auto'),
+        'src'      => $image->url(),
+      ]) ?>
+    </li>
+    <?php endforeach ?>
+  </ul>
+  <?php if ($block->caption()->isNotEmpty()): ?>
+  <figcaption>
+    <?= $block->caption() ?>
+  </figcaption>
+  <?php endif ?>
+</figure>

site/snippets/blocks/image.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  Block snippets control the HTML for individual blocks
+  in the blocks field. This image snippet overwrites
+  Kirby's default image block to add custom classes
+  and data attributes.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+
+$src = null;
+
+if ($block->location()->value() === 'web') {
+    $alt = $block->alt();
+    $src = $block->src();
+} else if ($image = $block->image()->toFile()) {
+    $alt = $block->alt()->or($image->alt());
+    $src = $image->url();
+}
+
+?>
+<?php if ($src): ?>
+<figure>
+  <?php snippet('image', [
+    'alt'      => $alt,
+    'contain'  => $block->crop()->isFalse(),
+    'lightbox' => $block->link()->isEmpty(),
+    'href'     => $block->link()->or($src),
+    'src'      => $src,
+    'ratio'    => $block->ratio()->or('auto')
+  ]) ?>
+
+  <?php if ($block->caption()->isNotEmpty()): ?>
+  <figcaption class="img-caption">
+    <?= $block->caption() ?>
+  </figcaption>
+  <?php endif ?>
+</figure>
+<?php endif ?>

site/snippets/blocks/video.php

@@ -0,0 +1,24 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  Block snippets control the HTML for individual blocks
+  in the blocks field. This video snippet overwrites
+  Kirby's default video block to add custom classes
+  and style attributes.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<?php if ($block->url()->isNotEmpty()): ?>
+<figure>
+  <span class="video" style="--w:16;--h:9">
+    <?= video($block->url()) ?>
+  </span>
+  <?php if ($block->caption()->isNotEmpty()): ?>
+  <figcaption class="video-caption"><?= $block->caption() ?></figcaption>
+  <?php endif ?>
+</figure>
+<?php endif ?>

site/snippets/footer.php

@@ -0,0 +1,51 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  This footer snippet is reused in all templates.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+  </main>
+
+  <footer class="footer">
+    <div class="grid">
+      <div class="column" style="--columns: 8">
+        <h2><a href="https://getkirby.com">Made with Kirby</a></h2>
+        <p>
+          Kirby: the file-based CMS that adapts to any project, loved by developers and editors alike
+        </p>
+      </div>
+      <div class="column" style="--columns: 2">
+        <h2>Pages</h2>
+        <ul>
+          <?php foreach ($site->children()->listed() as $example): ?>
+          <li><a href="<?= $example->url() ?>"><?= $example->title()->esc() ?></a></li>
+          <?php endforeach ?>
+        </ul>
+      </div>
+      <div class="column" style="--columns: 2">
+        <h2>Kirby</h2>
+        <ul>
+          <li><a href="https://getkirby.com">Website</a></li>
+          <li><a href="https://getkirby.com/docs">Docs</a></li>
+          <li><a href="https://forum.getkirby.com">Forum</a></li>
+          <li><a href="https://chat.getkirby.com">Chat</a></li>
+          <li><a href="https://github.com/getkirby">GitHub</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+
+  <?= js([
+    'assets/js/prism.js',
+    'assets/js/lightbox.js',
+    'assets/js/index.js',
+    '@auto'
+  ]) ?>
+
+</body>
+</html>

site/snippets/header.php

@@ -0,0 +1,87 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  This header snippet is reused in all templates.
+  It fetches information from the `site.txt` content file
+  and contains the site navigation.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+  <?php
+  /*
+    In the title tag we show the title of our
+    site and the title of the current page
+  */
+  ?>
+  <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
+
+  <?php
+  /*
+    Stylesheets can be included using the `css()` helper.
+    Kirby also provides the `js()` helper to include script file.
+    More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
+  */
+  ?>
+  <?= css([
+    'assets/css/prism.css',
+    'assets/css/lightbox.css',
+    'assets/css/index.css',
+    '@auto'
+  ]) ?>
+
+  <?php
+  /*
+    The `url()` helper is a great way to create reliable
+    absolute URLs in Kirby that always start with the
+    base URL of your site.
+  */
+  ?>
+  <link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
+</head>
+<body>
+
+  <header class="header">
+    <?php
+    /*
+      We use `$site->url()` to create a link back to the homepage
+      for the logo and `$site->title()` as a temporary logo. You
+      probably want to replace this with an SVG.
+    */
+    ?>
+    <a class="logo" href="<?= $site->url() ?>">
+      <?= $site->title()->esc() ?>
+    </a>
+
+    <nav class="menu">
+      <?php
+      /*
+        In the menu, we only fetch listed pages,
+        i.e. the pages that have a prepended number
+        in their foldername.
+
+        We do not want to display links to unlisted
+        `error`, `home`, or `sandbox` pages.
+
+        More about page status:
+        https://getkirby.com/docs/reference/panel/blueprints/page#statuses
+      */
+      ?>
+      <?php foreach ($site->children()->listed() as $item): ?>
+      <a <?php e($item->isOpen(), 'aria-current="page"') ?> href="<?= $item->url() ?>"><?= $item->title()->esc() ?></a>
+      <?php endforeach ?>
+      <?php snippet('social') ?>
+    </nav>
+  </header>
+
+  <main class="main">

site/snippets/image.php

@@ -0,0 +1,18 @@
+<?php
+
+$attrs = attr([
+  'data-lightbox' => $lightbox ?? false,
+  'href'          => $href     ?? $src,
+]);
+
+?>
+<a <?= $attrs ?>>
+  <img
+    src="<?= esc($src, 'attr') ?>"
+    alt="<?= esc($alt, 'attr') ?>"
+    style="
+      aspect-ratio: <?= $ratio ?? 'auto' ?>;
+      object-fit: <?= ($contain ?? false) ? 'contain' : 'cover' ?>
+    "
+  >
+</a>

site/snippets/intro.php

@@ -0,0 +1,20 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  This intro snippet is reused in multiple templates.
+  While it does not contain much code, it helps to keep your
+  code DRY and thus facilitate maintenance when you have
+  to make changes.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<header class="h1">
+  <h1><?= $page->headline()->or($page->title())->esc() ?></h1>
+  <?php if ($page->subheadline()->isNotEmpty()): ?>
+  <p class="color-grey"><?= $page->subheadline()->esc() ?></p>
+  <?php endif ?>
+</header>

site/snippets/layouts.php

@@ -0,0 +1,23 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  This layouts snippet renders the content of a layout
+  field with our custom grid system.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<?php foreach ($field->toLayouts() as $layout): ?>
+<section class="grid margin-xl" id="<?= esc($layout->id(), 'attr') ?>" style="--gutter: 1.5rem">
+  <?php foreach ($layout->columns() as $column): ?>
+  <div class="column" style="--columns:<?= esc($column->span(), 'css') ?>">
+    <div class="text">
+      <?= $column->blocks() ?>
+    </div>
+  </div>
+  <?php endforeach ?>
+</section>
+<?php endforeach ?>

site/snippets/note.php

@@ -0,0 +1,30 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  The note snippet renders an excerpt of a blog article.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<article class="note-excerpt">
+  <a href="<?= $note->url() ?>">
+    <header>
+      <figure class="img" style="--w: 16; --h:9">
+        <?php if ($cover = $note->cover()): ?>
+          <img src="<?= $cover->crop(320, 180)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
+        <?php endif ?>
+      </figure>
+
+      <h2 class="note-excerpt-title"><?= $note->title()->esc() ?></h2>
+      <time class="note-excerpt-date" datetime="<?= $note->published('c') ?>"><?= $note->published() ?></time>
+    </header>
+    <?php if (($excerpt ?? true) !== false): ?>
+    <div class="note-excerpt-text">
+      <?= $note->text()->toBlocks()->excerpt(280) ?>
+    </div>
+    <?php endif ?>
+  </a>
+</article>

site/snippets/pagination.php

@@ -0,0 +1,26 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  The pagination snippet renders prev/next links in the
+  blog, when articles spread across multiple pages
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<?php if ($pagination->hasPages()): ?>
+<nav class="pagination">
+  <?php if ($pagination->hasPrevPage()): ?>
+  <a class="pagination-prev" href="<?= $pagination->prevPageUrl() ?>">&larr;</a>
+  <?php else: ?>
+  <span class="pagination-prev">&larr;</span>
+  <?php endif ?>
+  <?php if ($pagination->hasNextPage()): ?>
+  <a class="pagination-next" href="<?= $pagination->nextPageUrl() ?>">&rarr;</a>
+  <?php else: ?>
+  <span class="pagination-next">&rarr;</span>
+  <?php endif ?>
+</nav>
+<?php endif ?>

site/snippets/prevnext.php

@@ -0,0 +1,27 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  The prevnext snippet renders the nice "keep on reading"
+  section below each article in the blog, to jump between
+  articles. It reuses the note snippet to render a full
+  excerpt of the article.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<nav class="blog-prevnext">
+  <h2 class="h2">Keep on reading</h2>
+
+  <div class="autogrid" style="--gutter: 1.5rem">
+    <?php if ($prev = $page->prevListed()): ?>
+    <?php snippet('note', ['note' => $prev, 'excerpt' => false])  ?>
+    <?php endif ?>
+
+    <?php if ($next = $page->nextListed()): ?>
+    <?php snippet('note', ['note' => $next, 'excerpt' => false])  ?>
+    <?php endif ?>
+  </div>
+</nav>

site/snippets/social.php

@@ -0,0 +1,27 @@
+<?php
+/*
+  Snippets are a great way to store code snippets for reuse
+  or to keep your templates clean.
+
+  In this snippet the svg() helper is a great way to embed SVG
+  code directly in your HTML. Pass the path to your SVG
+  file to load it.
+
+  More about snippets:
+  https://getkirby.com/docs/guide/templates/snippets
+*/
+?>
+<span class="social">
+  <a href="https://mastodon.social/@getkirby" aria-label="Follow us on Mastodon">
+    <?= svg('assets/icons/mastodon.svg') ?>
+  </a>
+  <a href="https://instagram.com/getkirby" aria-label="Follow us on Instagram">
+    <?= svg('assets/icons/instagram.svg') ?>
+  </a>
+  <a href="https://youtube.com/kirbycasts" aria-label="Watch our videos on YouTube">
+    <?= svg('assets/icons/youtube.svg') ?>
+  </a>
+  <a href="https://chat.getkirby.com" aria-label="Chat with us on Discord">
+    <?= svg('assets/icons/discord.svg') ?>
+  </a>
+</span>

site/templates/about.php

@@ -0,0 +1,51 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This about page example uses the content from our layout field
+  to create most parts of the page and keeps it modular. Only the
+  contact box at the bottom is pre-defined with a set of fields
+  in the about.yml blueprint.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+<?php snippet('intro') ?>
+<?php snippet('layouts', ['field' => $page->layout()])  ?>
+
+<aside class="contact">
+  <h2 class="h1">Get in contact</h2>
+  <div class="grid" style="--gutter: 1.5rem">
+    <section class="column text" style="--columns: 4">
+      <h3>Address</h3>
+      <?= $page->address() ?>
+    </section>
+    <section class="column text" style="--columns: 4">
+      <h3>Email</h3>
+      <p><?= Html::email($page->email()) ?></p>
+      <h3>Phone</h3>
+      <p><?= Html::tel($page->phone()) ?></p>
+    </section>
+    <section class="column text" style="--columns: 4">
+      <h3>On the web</h3>
+      <ul>
+        <?php foreach ($page->social()->toStructure() as $social): ?>
+        <li><?= Html::a($social->url(), $social->platform()) ?></li>
+        <?php endforeach ?>
+      </ul>
+    </section>
+  </div>
+</aside>
+
+<?php snippet('footer') ?>

site/templates/album.php

@@ -0,0 +1,47 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This example template makes use of the `$gallery` variable defined
+  in the `album.php` controller (/site/controllers/album.php)
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+<article>
+  <?php snippet('intro') ?>
+  <div class="grid">
+
+    <div class="column" style="--columns: 4">
+      <div class="text">
+        <?= $page->text() ?>
+      </div>
+    </div>
+
+    <div class="column" style="--columns: 8">
+      <ul class="album-gallery">
+        <?php foreach ($gallery as $image): ?>
+        <li>
+          <a href="<?= $image->url() ?>" data-lightbox>
+            <figure class="img" style="--w:<?= $image->width() ?>;--h:<?= $image->height() ?>">
+              <img src="<?= $image->resize(800)->url() ?>" alt="<?= $image->alt()->esc() ?>">
+            </figure>
+          </a>
+        </li>
+        <?php endforeach ?>
+      </ul>
+    </div>
+
+</article>
+<?php snippet('footer') ?>

site/templates/default.php

@@ -0,0 +1,30 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This default template must not be removed. It is used whenever Kirby
+  cannot find a template with the name of the content file.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+
+<article>
+  <h1 class="h1"><?= $page->title()->esc() ?></h1>
+  <div class="text">
+    <?= $page->text()->kt() ?>
+  </div>
+</article>
+
+<?php snippet('footer') ?>

site/templates/home.php

@@ -0,0 +1,61 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This home template renders content from others pages, the children of
+  the `photography` page to display a nice gallery grid.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+
+?>
+<?php snippet('header') ?>
+  <?php snippet('intro') ?>
+  <?php
+  /*
+    We always use an if-statement to check if a page exists to
+    prevent errors in case the page was deleted or renamed before
+    we call a method like `children()` in this case
+  */
+  ?>
+  <?php if ($photographyPage = page('photography')): ?>
+  <ul class="home-grid">
+    <?php foreach ($photographyPage->children()->listed() as $album): ?>
+    <li>
+      <a href="<?= $album->url() ?>">
+        <figure>
+          <?php
+          /*
+            The `cover()` method defined in the `album.php`
+            page model can be used everywhere across the site
+            for this type of page
+
+            We can automatically resize images to a useful
+            size with Kirby's built-in image manipulation API
+          */
+          ?>
+          <?php if ($cover = $album->cover()): ?>
+          <img src="<?= $cover->resize(1024, 1024)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
+          <?php endif ?>
+          <figcaption>
+            <span>
+              <span class="example-name"><?= $album->title()->esc() ?></span>
+            </span>
+          </figcaption>
+        </figure>
+      </a>
+    </li>
+    <?php endforeach ?>
+  </ul>
+  <?php endif ?>
+<?php snippet('footer') ?>

site/templates/note.php

@@ -0,0 +1,59 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This note template renders a blog article. It uses the `$page->cover()`
+  method from the `note.php` page model (/site/models/page.php)
+
+  It also receives the `$tag` variable from its controller
+  (/site/controllers/note.php) if a tag filter is activated.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+
+<?php if ($cover = $page->cover()): ?>
+<a href="<?= $cover->url() ?>" data-lightbox class="img" style="--w:2; --h:1">
+  <img src="<?= $cover->crop(1200, 600)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
+</a>
+<?php endif ?>
+
+<article class="note">
+  <header class="note-header h1">
+    <h1 class="note-title"><?= $page->title()->esc() ?></h1>
+    <?php if ($page->subheading()->isNotEmpty()): ?>
+    <p class="note-subheading"><small><?= $page->subheading()->esc() ?></small></p>
+    <?php endif ?>
+  </header>
+  <div class="note text">
+    <?= $page->text()->toBlocks() ?>
+  </div>
+  <footer class="note-footer">
+    <?php if (!empty($tags)): ?>
+    <ul class="note-tags">
+      <?php foreach ($tags as $tag): ?>
+      <li>
+        <a href="<?= $page->parent()->url(['params' => ['tag' => $tag]]) ?>"><?= esc($tag) ?></a>
+      </li>
+      <?php endforeach ?>
+    </ul>
+    <?php endif ?>
+
+    <time class="note-date" datetime="<?= $page->date()->toDate('c') ?>">Published on <?= $page->date()->esc() ?></time>
+  </footer>
+
+  <?php snippet('prevnext') ?>
+</article>
+
+<?php snippet('footer') ?>

site/templates/notes.php

@@ -0,0 +1,46 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This template lists all the subpages of the `notes` page with
+  their title date sorted by date and links to each subpage.
+
+  This template receives additional variables like $tag and $notes
+  from the `notes.php` controller in `/site/controllers/notes.php`
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+
+<?php if (empty($tag) === false): ?>
+<header class="h1">
+  <h1>
+    <small>Tag:</small> <?= esc($tag) ?>
+    <a href="<?= $page->url() ?>" aria-label="All Notes">&times;</a>
+  </h1>
+</header>
+<?php else: ?>
+  <?php snippet('intro') ?>
+<?php endif ?>
+
+<ul class="grid">
+  <?php foreach ($notes as $note): ?>
+  <li class="column" style="--columns: 4">
+      <?php snippet('note', ['note' => $note]) ?>
+  </li>
+  <?php endforeach ?>
+</ul>
+
+<?php snippet('pagination', ['pagination' => $notes->pagination()]) ?>
+<?php snippet('footer') ?>

site/templates/photography.php

@@ -0,0 +1,43 @@
+<?php
+/*
+  Templates render the content of your pages.
+
+  They contain the markup together with some control structures
+  like loops or if-statements. The `$page` variable always
+  refers to the currently active page.
+
+  To fetch the content from each field we call the field name as a
+  method on the `$page` object, e.g. `$page->title()`.
+
+  This template lists all all the subpages of the `phototography`
+  page with title and cover image.
+
+  Snippets like the header and footer contain markup used in
+  multiple templates. They also help to keep templates clean.
+
+  More about templates: https://getkirby.com/docs/guide/templates/basics
+*/
+?>
+<?php snippet('header') ?>
+<?php snippet('intro') ?>
+
+<ul class="grid" style="--gutter: 1.5rem">
+  <?php foreach ($page->children()->listed() as $project): ?>
+  <li class="column" style="--columns: 3">
+    <a href="<?= $project->url() ?>">
+      <figure>
+        <span class="img" style="--w:4;--h:5">
+          <?php if ($cover = $project->cover()): ?>
+            <img src="<?= $cover->crop(400, 500)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
+          <?php endif ?>
+        </span>
+        <figcaption class="img-caption">
+          <?= $project->title()->esc() ?>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <?php endforeach ?>
+</ul>
+
+<?php snippet('footer') ?>