feat: add comment form

src/components/Comments.astro

@@ -0,0 +1,103 @@
+---
+import nameGen from "@/scripts/name-gen";
+let slug = Astro.url.pathname.replace(/^\/|\/$/g, "");
+---
+
+<form
+  action="https://qiao.xinshijiededa.men/api/handle/form"
+  method="post"
+  class="comment-form"
+>
+  <div class="form-group">
+    <label for="fields[name]">昵称 *</label>
+    <input type="text" name="fields[name]" placeholder={nameGen()} required />
+  </div>
+
+  <div class="form-group">
+    <label for="fields[email]">Email *</label>
+    <input
+      type="text"
+      name="fields[email]"
+      placeholder="不会公开显示"
+      required
+    />
+  </div>
+
+  <div class="form-group">
+    <label for="fields[message]">留言 *</label>
+    <textarea
+      name="fields[message]"
+      id="message"
+      cols="30"
+      rows="10"
+      placeholder="请洒潘江，各倾陆海云尔……"
+      required></textarea>
+  </div>
+
+  <div class="form-group hidden">
+    <!-- <label for="options[captcha]">验证码，别勾选我！</label> -->
+    <!-- <input type="checkbox" name="fields[captcha]" /> -->
+    <label for="options[slug]">Slug</label>
+    <input type="text" name="options[slug]" value={slug} />
+  </div>
+
+  <button type="submit" class="form-button">发送</button>
+</form>
+
+<style lang="less">
+  .comment-form {
+    font-family: Arial, sans-serif;
+    font-size: 115%;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .form-group {
+    margin-bottom: 20px;
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: bold;
+      user-select: none;
+    }
+    input,
+    textarea {
+      width: 100%;
+      padding: 8px 10px;
+      border: 2px solid #e1e1e1;
+      border-radius: 2px;
+      font-size: 16px;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        border: 2px solid #737373;
+      }
+    }
+    textarea {
+      resize: vertical;
+      min-height: 200px;
+      max-height: 600px;
+    }
+  }
+
+  .form-button {
+    background-color: #3498db;
+    color: #ffffff;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+    &:hover {
+      background-color: #2980b9;
+    }
+  }
+
+  .hidden {
+    display: none;
+    user-select: none;
+  }
+</style>

src/layouts/Default.astro

@@ -3,6 +3,7 @@ import Paper from "@/components/FakePaper.astro";
 import { Icon } from "astro-icon";
 import "@/styles/icon.less";
 import LicenceBox from "@/components/licences/LicenceBox.astro";
+import Comments from "@/components/Comments.astro";
 
 const { frontmatter } = Astro.props;
 const cover = frontmatter.hide_cover ? undefined : frontmatter.photo;
@@ -69,6 +70,12 @@ import "@/styles/article.less";
   <LicenceBox name={licence} />
 </Paper>
 
+<section id="comments">
+  <Paper padding={true} paper={true}>
+    <Comments />
+  </Paper>
+</section>
+
 <style is:global lang="less">
   .paper {
     max-width: 1024px;
@@ -108,4 +115,8 @@ import "@/styles/article.less";
       margin: 0.8rem 0;
     }
   }
+
+  section#comments {
+    margin: 1rem 0;
+  }
 </style>

src/scripts/name-gen.ts

@@ -0,0 +1,232 @@
+import { pick } from "./serendipity";
+
+const el1 = [
+  "废墟",
+  "深海",
+  "反应堆",
+  "学园",
+  "腐烂",
+  "东京",
+  "三维",
+  "深刻",
+  "四次元",
+  "流星",
+  "闪光",
+  "内存",
+  "南极",
+  "消极",
+  "幽浮",
+  "网路",
+  "暗狱",
+  "离子态",
+  "液态",
+  "黑色",
+  "抱抱",
+  "社会",
+  "原味",
+  "毛茸茸",
+  "香香",
+  "逻辑门",
+  "霹雳",
+  "午夜",
+  "美工刀",
+  "爆浆",
+  "机关枪",
+  "无响应",
+  "手术台",
+  "东欧",
+  "北欧",
+  "世界",
+  "麻风病",
+  "虚拟",
+  "可穿戴",
+  "速冻",
+  "智能",
+  "2000",
+  "甜味",
+  "华丽",
+  "玛利亚",
+  "无",
+  "梦之",
+  "星系",
+  "断桥",
+  "无尽",
+  "星尘",
+  "蔷薇",
+  "无政府",
+  "酷酷",
+  "西伯利亚",
+  "人造",
+  "法外",
+  "女子",
+  "微型",
+  "男子",
+  "超",
+  "毁灭",
+  "大型",
+  "绝望",
+  "阴间",
+  "死亡",
+  "坟场",
+  "可执行",
+  "高科技",
+  "奇妙",
+  "地雷",
+  "魔法",
+  "极限",
+  "无聊",
+  "满洲",
+  "奉天",
+];
+const el2 = [
+  "小丑",
+  "仿生",
+  "纳米",
+  "原子",
+  "丧",
+  "电子",
+  "十字架",
+  "咩咩",
+  "赛博",
+  "野猪",
+  "外星",
+  "窒息",
+  "变态",
+  "触手",
+  "小众",
+  "悲情",
+  "飞行",
+  "绿色",
+  "电动",
+  "铁锈",
+  "碎尸",
+  "电音",
+  "蠕动",
+  "酸甜",
+  "虚构",
+  "乱码",
+  "碳水",
+  "内脏",
+  "含糖",
+  "脑浆",
+  "血管",
+  "逃课",
+  "绷带",
+  "不合格",
+  "光滑",
+  "酸性",
+  "碱性",
+  "404",
+  "变身",
+  "反常",
+  "碳基",
+  "矫情",
+  "病娇",
+  "进化",
+  "潮湿",
+  "砂糖",
+  "阴暗",
+  "变异",
+  "复合盐",
+  "伏特加",
+  "抑郁",
+  "睡觉",
+  "自闭",
+  "暴躁",
+  "沉默",
+  "不爱说话",
+  "废物",
+  "失败",
+  "幻想型",
+  "社恐",
+  "粘液",
+  "苦涩",
+  "浓厚",
+  "快乐",
+  "强制",
+  "中二病",
+  "恶魔",
+  "emo",
+  "激光",
+  "高科技",
+  "发射",
+  "限量版",
+  "迷因",
+  "堕落",
+  "放射性",
+];
+const el3 = [
+  "天使",
+  "精灵",
+  "女孩",
+  "男孩",
+  "宝贝",
+  "小妈咪",
+  "菇",
+  "虫",
+  "公主",
+  "少女",
+  "少年",
+  "1号机",
+  "子",
+  "恐龙",
+  "食人鱼",
+  "小飞船",
+  "舞女",
+  "酱",
+  "史莱姆",
+  "废料",
+  "生物",
+  "物质",
+  "奶茶",
+  "搅拌机",
+  "液",
+  "火锅",
+  "祭司",
+  "体",
+  "头子",
+  "实验品",
+  "试验体",
+  "小猫咪",
+  "猫",
+  "样本",
+  "颗粒",
+  "血块",
+  "汽水",
+  "蛙",
+  "软体",
+  "机器人",
+  "人质",
+  "小熊",
+  "圣母",
+  "胶囊",
+  "乙女",
+  "主义者",
+  "屑",
+  "垢",
+  "污渍",
+  "废人",
+  "毛血旺",
+  "怪人",
+  "肉",
+  "河豚",
+  "豚",
+  "藻类",
+  "唾沫",
+  "咒语",
+  "建筑",
+  "球",
+  "小狗",
+  "碳",
+  "元素",
+  "巴图鲁",
+  "木桶饭",
+  "猫头鹰",
+  "火焰鸟",
+  "团子",
+  "精",
+];
+
+export default function nameGen() {
+  return pick(el1) + pick(el2) + pick(el3);
+}

src/scripts/serendipity.ts

@@ -0,0 +1 @@
+export const pick = (arr: any[]) => arr[Math.floor(Math.random() * arr.length)];

src/styles/article.less

@@ -39,11 +39,18 @@ article > h6 {
 article {
   font-family: "Noto Sans SC", "Noto Sans CJK SC", "Open Sans", "Helvetica Neue", Helvetica,
     Arial, sans-serif;
-  font-size: 16px;
+  font-size: 17px;
   text-align: left;
   line-height: 175%;
   margin: 14px 7px;
 
+  @media (min-width: 800px) {
+    padding: 8px 24px;
+  }
+  @media (min-width: 1200px) {
+    padding: 8px 32px;
+  }
+
   code {
     font-size: 94%;
     word-break: break-all;
@@ -124,7 +131,6 @@ article {
     margin: 0;
     padding: 0 8px 0 12px;
     font-size: 95%;
-    line-height: 160%;
   }
 
   & blockquote cite::before {