add

public/js/common/main.js

@@ -15,3 +15,53 @@ document.addEventListener("DOMContentLoaded", () => {
         })
     })
 })
+
+document.addEventListener("DOMContentLoaded", () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+        $el.classList.add("is-active")
+    }
+
+    function closeModal($el) {
+        $el.classList.remove("is-active")
+    }
+
+    function closeAllModals() {
+        ;(document.querySelectorAll(".modal") || []).forEach($modal => {
+            closeModal($modal)
+        })
+    }
+
+    // Add a click event on buttons to open a specific modal
+    ;(document.querySelectorAll(".js-modal-trigger") || []).forEach($trigger => {
+        const modal = $trigger.dataset.target
+        const $target = document.getElementById(modal)
+
+        $trigger.addEventListener("click", () => {
+            openModal($target)
+        })
+    })
+
+    // Add a click event on various child elements to close the parent modal
+    ;(
+        document.querySelectorAll(
+            ".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button",
+        ) || []
+    ).forEach($close => {
+        const $target = $close.closest(".modal")
+
+        $close.addEventListener("click", () => {
+            closeModal($target)
+        })
+    })
+
+    // Add a keyboard event to close all modals
+    document.addEventListener("keydown", event => {
+        const e = event || window.event
+
+        if (e.keyCode === 27) {
+            // Escape key
+            closeAllModals()
+        }
+    })
+})

source/route/views/index.ts

@@ -32,11 +32,11 @@ export default class Index {
             return h.redirect(`/login?next=${encodeURIComponent(request.path)}`).takeover()
         }
         const md = new MarkdownIt()
-        console.log(path.resolve(baseDir, "./docs/a.md"))
+        // console.log(path.resolve(baseDir, "./docs/a.md"))
 
-        var result = md.render(fs.readFileSync(path.resolve(baseDir, "./docs/a.md"), "utf-8"))
+        // var result = md.render(fs.readFileSync(path.resolve(baseDir, "./docs/a.md"), "utf-8"))
         const data = {
-            md: result,
+            // md: result,
         }
         if (isRenderHtmx) {
             return h.view("htmx/path/about.pug", data)

template/htmx/path/color.pug

@@ -8,6 +8,30 @@ title 颜色
 div(class="container page")
     style 
         :public style/views/color.css
+    if isLogin 
+      form(action="/color" method="post" style="margin: 0 auto; width: 500px;margin-top: 50px")
+        h1 提交新颜色
+        .field 
+            .label 名称
+            .control 
+              input.input(type="text" name="name" placeholder="请输入名称")
+        .field 
+            .label 颜色值
+            .control 
+              input.input(type="text" name="value" placeholder="请输入颜色值")
+        .field 
+            .label 描述
+            .control 
+              textarea.textarea(placeholder="请输入描述" name="desctibe")
+        +security
+        .field.is-grouped
+          .control
+            button.button.is-link(type="submit") 提交
+        //- div
+        //-     form(action="POST" method="post")
+        //-         div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a")
+        //-         div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b")
+        //-         button(type="submit" tabindex="2") 提交
     h1 颜色表 #{temp.a}
     div(class="color_list")
       //- -
@@ -52,27 +76,3 @@ div(class="container page")
                 button(type="submit" style="background: transparent;border:0;color:red;cursor: pointer;float: right;") 删除 
         //- div(class="color_item")
             //- img(src="/public/image/add.png", alt="添加" title="添加" class="color_add")
-    if isLogin 
-      form(action="/color" method="post" style="margin: 0 auto; width: 500px;margin-top: 50px")
-        h1 提交新颜色
-        .field 
-            .label 名称
-            .control 
-              input.input(type="text" name="name" placeholder="请输入名称")
-        .field 
-            .label 颜色值
-            .control 
-              input.input(type="text" name="value" placeholder="请输入颜色值")
-        .field 
-            .label 描述
-            .control 
-              textarea.textarea(placeholder="请输入描述" name="desctibe")
-        +security
-        .field.is-grouped
-          .control
-            button.button.is-link(type="submit") 提交
-        //- div
-        //-     form(action="POST" method="post")
-        //-         div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a")
-        //-         div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b")
-        //-         button(type="submit" tabindex="2") 提交

template/htmx/path/index.pug

@@ -13,28 +13,28 @@ block page
     //- if isLogin
     //-     button(hx-target="#single-page" hx-get="/about?htmx" hx-push-url="/about" hx-trigger="click" hx-swap="innerHTML") Click Me!
 
-    .tree#tree
+    //- .tree#tree
-        details(open="true" style="direction: ltr;")
+    //-     details(open="true" style="direction: ltr;")
-            summary
+    //-         summary
-                span.tree-item sad
+    //-             span.tree-item sad
-                a.op(href="") 新建
+    //-             a.op(href="") 新建
-            details(open="true")
+    //-         details(open="true")
-                summary
+    //-             summary
-                    span.tree-item sad
+    //-                 span.tree-item sad
-                    a.op(href="") 新建
+    //-                 a.op(href="") 新建
-                details
+    //-             details
-                    summary
+    //-                 summary
-                        span.tree-item.tree-md-file 
+    //-                     span.tree-item.tree-md-file 
-                            div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
+    //-                         div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
-                        a.op(href="") 新建
+    //-                     a.op(href="") 新建
-            details
+    //-         details
-                summary
+    //-             summary
-                    span.tree-item.tree-md-file 
+    //-                 span.tree-item.tree-md-file 
-                        div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
+    //-                     div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
-                    a.op(href="") 新建
+    //-                 a.op(href="") 新建
-            details
+    //-         details
-                summary
+    //-             summary
-                    span.tree-item.tree-md-file.active
+    //-                 span.tree-item.tree-md-file.active
-                        div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
+    //-                     div(style="flex: 1;width: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;") asda
-                    a.op(href="") 新建
+    //-                 a.op(href="") 新建
 

template/htmx/path/user.pug

@@ -43,11 +43,11 @@ form(action="/user" method="post" enctype="multipart/form-data" style="margin: 0
                 .image.is-128x128
                     img.is-rounded(src=user.avatar alt=user.username)
     +security
-    .field.is-grouped
+    .field.is-grouped(style="margin-top: 6px;")
       .control
         button.button.is-link(type="submit") 提交
-      .control
+    //-   .control
-        button.button.is-link.is-light 取消
+    //-     button.button.is-link.is-light 取消
 +script("js/page/user.js")
 
 //- form(action="", method="post" style="margin: 0 auto; width: 500px;margin-top:20px")  

template/layout/layout.pug

@@ -24,3 +24,15 @@ html(lang="zh-cn" class=hideHeader?"":"has-navbar-fixed-top")
     +script("js/common/htmx.min.js")
     +script("js/common/main.js")
     block script
+    #modal-js-example.modal
+        .modal-background
+        .modal-card
+            header.modal-card-head
+                p.modal-card-title Modal title
+                button.delete(aria-label='close')
+            section.modal-card-body
+                p 是大大撒大撒
+            footer.modal-card-foot
+                button.button.is-success Save changes
+                button.button Cancel
+        button.modal-close.is-large(aria-label='close')

template/views/index.pug

@@ -2,3 +2,6 @@ extends @/layout/single-page
 
 block page
     include @hxpath/index.pug
+    button.js-modal-trigger(data-target='modal-js-example').
+        Open JS example modal
+      

template/views/register.pug

@@ -1,5 +1,4 @@
 extends @/layout/layout
-include @/helper/flush.pug
 
 block var
     -title="注册" // 网页标题
@@ -9,6 +8,7 @@ block head
     +css("style/views/login.css")
 
 block content
+    include @/helper/flush.pug
     .login
         h1.title.is-1 注册
         form(name="form" action='/register' method='post' onsubmit="return validateForm()")

template/views/test.pug

@@ -2,13 +2,14 @@ extends @/layout/single-page
 
 block head
     link(rel="stylesheet", href="https://unpkg.com/bytemd/dist/index.css")
-    link(rel="stylesheet", href="https://unpkg.com/github-markdown-css")
+    //- link(rel="stylesheet", href="https://unpkg.com/github-markdown-css")
     script.
          let process = {}
         process.env = {}
         process.env.NODE_ENV = 'production'
     script(src="https://unpkg.com/bytemd")
     script(src="https://unpkg.com/@bytemd/plugin-gfm")
+    script(src="https://unpkg.com/bytemd@1.21.0/locales/zh_Hans.json")
 
 block page
     include @/helper/flush.pug
@@ -22,10 +23,15 @@ block page
             target: document.getElementById('root'),
             props: {
                 value: '# heading\n\nparagraph\n\n> blockquote',
+                //- locale: "https://unpkg.com/bytemd@1.21.0/locales/zh_Hans.json",
+                locale: "zh_Hans.json",
                 plugins,
             },
         })
-
+        setTimeout(()=>{
+            let el = document.querySelector(".bytemd-preview")
+            el.classList.add("content")
+        })
         editor.$on('change', (e) => {
             editor.$set({ value: e.detail.value })
         })