From 70876ae0d2d03194ca28206aa56af45a26c8e361 Mon Sep 17 00:00:00 2001
From: st1020 <stone_1020@qq.com>
Date: Mon, 23 Oct 2023 20:39:20 +0800
Subject: [PATCH] feat: add projects.html template

---
 config.toml                      |  4 +++
 content/pages/projects/data.toml | 54 ++++++++++++++++++++++++++++++++
 content/pages/projects/index.md  |  5 +++
 static/main.css                  | 18 +++++++++++
 templates/projects.html          | 32 +++++++++++++++++++
 5 files changed, 113 insertions(+)
 create mode 100644 content/pages/projects/data.toml
 create mode 100644 content/pages/projects/index.md
 create mode 100644 templates/projects.html

diff --git a/config.toml b/config.toml
index 700cc6a..7e9cf7b 100644
--- a/config.toml
+++ b/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"
diff --git a/content/pages/projects/data.toml b/content/pages/projects/data.toml
new file mode 100644
index 0000000..cc5a4ff
--- /dev/null
+++ b/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" },
+]
diff --git a/content/pages/projects/index.md b/content/pages/projects/index.md
new file mode 100644
index 0000000..e56902d
--- /dev/null
+++ b/content/pages/projects/index.md
@@ -0,0 +1,5 @@
++++
+title = "Projects"
+path = "projects"
+template = "projects.html"
++++
diff --git a/static/main.css b/static/main.css
index 5abec0b..6d1a9a4 100644
--- a/static/main.css
+++ b/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;
 }
diff --git a/templates/projects.html b/templates/projects.html
new file mode 100644
index 0000000..f31109f
--- /dev/null
+++ b/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 %}