feat: add projects.html template

config.toml

@@ -76,6 +76,10 @@ url = "https://github.com/st1020/kita"
 name = "rss"
 url = "/atom.xml"
 
+[[extra.menu]]
+name = "Projects"
+url = "/projects"
+
 [[extra.menu]]
 name = "Tags"
 url = "/tags"

content/pages/projects/data.toml

@@ -0,0 +1,54 @@
+[[project]]
+name = "lorem"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["nisi", "saepe"]
+links = [
+    { name = "github", url = "https://example.com" },
+    { name = "docs", url = "https://example.com" },
+]
+
+[[project]]
+name = "ipsum"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["lorem", "ipsum"]
+links = [
+    { name = "homepage", url = "https://example.com" },
+    { name = "source", url = "https://example.com" },
+    { name = "docs", url = "https://example.com" },
+]
+
+[[project]]
+name = "dolor sit"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["amet", "ipsum", "vero", "optio"]
+links = [{ name = "github", url = "https://example.com" }]
+
+[[project]]
+name = "amet"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["lorem", "ipsum"]
+links = [
+    { name = "website", url = "https://example.com" },
+    { name = "github", url = "https://example.com" },
+    { name = "docs", url = "https://example.com" },
+    { name = "wiki", url = "https://example.com" },
+]
+
+[[project]]
+name = "lorem-ipsum"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["dolor", "lorem", "ipsum", "amet"]
+links = [
+    { name = "github", url = "https://example.com" },
+    { name = "docs", url = "https://example.com" },
+]
+
+[[project]]
+name = "praesentium"
+desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, nisi saepe dolor unde iusto dolore nam, vero optio consequuntur repudiandae et! Atque libero expedita laudantium cupiditate, sit explicabo sequi ipsa!"
+tags = ["lorem", "ipsum"]
+links = [
+    { name = "homepage", url = "https://example.com" },
+    { name = "github", url = "https://example.com" },
+    { name = "docs", url = "https://example.com" },
+]

content/pages/projects/index.md

@@ -0,0 +1,5 @@
++++
+title = "Projects"
+path = "projects"
+template = "projects.html"
++++

static/main.css

@@ -1168,6 +1168,11 @@ body {
   margin-bottom: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1269,6 +1274,10 @@ body {
   height: 100%;
 }
 
+.min-h-\[12rem\] {
+  min-height: 12rem;
+}
+
 .min-h-\[18rem\] {
   min-height: 18rem;
 }
@@ -1373,6 +1382,11 @@ body {
   gap: 0.625rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -1615,6 +1629,10 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .no-underline {
   text-decoration-line: none;
 }

templates/projects.html

@@ -0,0 +1,32 @@
+{% extends "index.html" %}<!---->
+{% block main %}<!---->
+{% for asset in page.assets %}<!---->
+{% if asset is ending_with("data.toml") %}<!---->
+{% set data = load_data(path=asset, format="toml") %}<!---->
+<h1 class="mb-16">{{ page.title }}</h1>
+
+{% for project in data.project %}
+<div class="not-prose min-h-[12rem] w-full py-2">
+  <div class="flex h-full w-full flex-col rounded-lg bg-black/[3%] px-5 py-1.5 dark:bg-white/[8%]">
+    <h3 class="my-2 text-xl font-bold text-black dark:text-white">{{ project.name }}</h3>
+    <p>{{ project.desc }}</p>
+    <div class="my-2 flex items-center justify-between">
+      <div class="flex gap-x-2 text-sm opacity-60">
+        {% for tag in project.tags %}
+        <span>#{{ tag }}</span>
+        {% endfor %}
+      </div>
+      <div class="flex gap-x-2">
+        {% for link in project.links %}
+        <a class="underline" href="{{ link.url }}" target="_blank">{{ link.name }}</a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endfor %}<!---->
+
+{% break %}<!---->
+{% endif %}<!---->
+{% endfor %}<!---->
+{% endblock main %}