feat: add basic site

.gitignore

@@ -0,0 +1,2 @@
+public/
+node_modules/

config.toml

@@ -0,0 +1,10 @@
+# The URL the site will be built for
+base_url = "https://blog.kasperhermansen.com"
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here

content/_index.md

@@ -0,0 +1,4 @@
++++
+[extra]
+section_path = "posts/_index.md"
++++

content/posts/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Kasper Hermansen"
+path = "posts"
+sort_by = "date"
+paginate_by = 5
++++

content/posts/first.md

@@ -0,0 +1,39 @@
++++
+title = "My first post" 
+date = 2019-11-27
+draft = true
++++
+
+This is my first blog post.
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis. <!-- more -->
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis.
+
+```rust
+fn main() -> eyre::Result<()> {
+    Ok(())
+}
+```
+
+![image](https://images.unsplash.com/photo-1680188591202-22a2f6d7d6af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1270&q=80)
+
+

content/posts/second.md

@@ -0,0 +1,39 @@
++++
+title = "My second post" 
+date = 2020-11-27
+draft = true
++++
+
+This is my first blog post.
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis.
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis.
+
+```rust
+fn main() -> eyre::Result<()> {
+    Ok(())
+}
+```
+
+![image](https://images.unsplash.com/photo-1680188591202-22a2f6d7d6af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1270&q=80)
+
+

content/posts/third.md

@@ -0,0 +1,39 @@
++++
+title = "My second post" 
+date = 2020-12-27
+draft = true
++++
+
+This is my first blog post.
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis.
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
+anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
+aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia
+pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
+commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
+proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
+eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
+duis.
+
+```rust
+fn main() -> eyre::Result<()> {
+    Ok(())
+}
+```
+
+![image](https://images.unsplash.com/photo-1680188591202-22a2f6d7d6af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1270&q=80)
+
+

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "kasperhermansen-blog",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://git.front.kjuulh.io/kjuulh/kasperhermansen-blog",
+  "author": "kjuulh <contact@kjuulh.io>",
+  "license": "MIT",
+  "scripts": {
+    "compile": "tailwindcss -i ./styles/styles.css -o ./static/styles/styles.css",
+    "compile:watch": "tailwindcss -i ./styles/styles.css -o ./static/styles/styles.css --watch=always",
+    "serve:watch": "zola serve --drafts",
+    "dev": "yarn compile:watch & yarn serve:watch"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "tailwindcss": "^3.3.1"
+  },
+  "devDependencies": {
+    "@catppuccin/tailwindcss": "^0.1.1",
+    "@tailwindcss/cli": "^0.1.2"
+  }
+}

styles/styles.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body,
+    body > div:first-child {
+        @apply h-full bg-base text-text;
+    }
+}
+
+.blog-content {
+  @apply prose lg:prose-lg max-w-3xl prose-headings:text-peach prose-p:text-gray-100 prose-a:text-orange-200 prose-strong:text-white;
+}
+
+.blog-summary {
+  @apply prose 
+    lg:prose-lg 
+    prose-headings:text-peach 
+    prose-p:text-gray-400 
+    prose-a:text-orange-300 
+    prose-strong:text-gray-300
+    pl-6
+    ml-6
+    border-l-2
+    border-peach
+    ;
+}
+
+.blog-summary > p:first-child {
+  @apply mt-0;
+}

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./templates/**/*.html"],
+  theme: {},
+  variants: {},
+  plugins: [
+      require('@tailwindcss/typography'),
+      require("@catppuccin/tailwindcss")({
+        prefix: false,
+        defaultFlavour: "frappe"
+      }),
+  ]
+}
+

templates/base.html

@@ -0,0 +1,22 @@
+{% import "macros/macros.html" as post_macros %}
+{% import "macros/prev.html" as prev_macros %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>kasperhermansen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+  <link rel="stylesheet" href="{{ get_url(path="styles/styles.css") | safe }}" />
+</head>
+
+<body>
+  <section class="section container mx-auto">
+      {% block content %} {% endblock %}
+  </section>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1 @@
+{% extends "section.html" %}

templates/macros/macros.html

@@ -0,0 +1,36 @@
+{% macro list_posts(pages) %}
+<ul>
+  {%- for page in pages %}
+  <section class="list-item">
+    <h1 class="title text-peach">
+      <a href={{ page.permalink }}>{{page.title}}</a>
+    </h1>
+
+    <div class="meta">
+      {%- if page.date %}
+      <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+      {% endif -%}
+      {% if page.draft %}
+      <span class="draft-label">DRAFT</span>
+      {% endif %}
+    </div>
+
+    <br />
+    <div class="blog-summary ">
+      {% if page.description %}
+      {{ page.description }}
+      {% elif page.summary %}
+      {{ page.summary | safe }}&hellip;
+      {% else %}
+      {% set hide_read_more = true %}
+      {% endif %}
+    </div>
+
+    {% if not hide_read_more %}
+    <a class="readmore text-peach" href={{ page.permalink }}>Read more ⟶</a>
+    {% endif %}
+  </section>
+
+  {% endfor -%}
+</ul>
+{% endmacro list_posts %}

templates/macros/prev.html

@@ -0,0 +1,10 @@
+
+{% macro page_back_link(page) %}
+{% set top_section = get_section(path=page.ancestors | last) %}
+<a class="previous" href="{{ top_section.permalink }}">‹ back</a>
+{% endmacro page_back_link %}
+
+{% macro section_back_link(section) %}
+{% set top_section = get_section(path=section.ancestors | last) %}
+<a class="previous" href="{{ top_section.permalink }}">‹ back</a>
+{% endmacro section_back_link %}

templates/page.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+{{ prev_macros::page_back_link(page=page) }}
+
+<div class="mx-auto px-4 max-w-3xl py-8">
+<article class="blog-content">
+  <h1 class="title">
+    {{ page.title }}
+  </h1>
+  <p class="subtitle"><strong>{{ page.date }}</strong></p>
+  {{ page.content | safe }}
+</article>
+
+{% if page.lower or page.higher %}
+    <div class="flex place-content-around max-w-lg mx-auto">
+        {% if page.lower %}
+            <a class="previous" href="{{ page.lower.permalink }}">‹ {{ page.lower.title }}</a>
+        {% endif %}
+        {% if page.higher %}
+            <a class="next" href="{{ page.higher.permalink }}">{{ page.higher.title }} ›</a>
+        {% endif %}
+    </div>
+{% endif %}
+</div>
+
+{% endblock content %}
+

templates/section.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+
+<div class="container mx-auto px-4 max-w-3xl py-8 space-y-4">
+  
+  {% if section.ancestors | length > 0 %}
+{{ prev_macros::section_back_link(section=section) }}
+{% endif %}
+
+{% if section.extra.section_path -%}
+    {% set section = get_section(path=section.extra.section_path) %}
+{% endif -%}
+<h1 class="title text-peach text-3xl">
+  {{ section.title }}
+</h1>
+
+<main>
+  {%- if paginator %}
+    {%- set show_pages = paginator.pages -%}
+  {% else %}
+    {%- set show_pages = section.pages -%}
+  {% endif -%}
+
+  {{ post_macros::list_posts(pages=show_pages) }}
+</main>
+{% if paginator %}
+<ul class="pagination">
+    {% if paginator.previous %}
+        <span class="page-item page-prev">
+            <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
+        </span>
+    {% endif %}
+
+    {% if paginator.next %}
+        <span class="page-item page-next">
+            <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
+        </span>
+    {% endif %}
+</ul>
+{% endif %}
+
+</div>
+{% endblock content %}