前端初始化

2024-05-16 20:53:13 +08:00 · 2024-05-16 20:53:13 +08:00 · ae5506cac3
commit ae5506cac3
parent 4fd22abf7a
3 changed files with 77 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -1,4 +1,53 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
 <title>DEMO</title>
+<style>
+    :root {
+        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+        line-height: 1.5;
+        font-weight: 400;
+
+        color-scheme: light dark;
+        color: rgba(255, 255, 255, 0.87);
+        background-color: #242424;
+
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    a {
+        font-weight: 500;
+        color: #646cff;
+        text-decoration: inherit;
+    }
+
+    a:hover {
+        color: #535bf2;
+    }
+
+    body {
+        margin: 0;
+        display: flex;
+        place-items: center;
+        min-width: 320px;
+        min-height: 100vh;
+    }
+
+    @media (prefers-color-scheme: light) {
+        :root {
+            color: #213547;
+            background-color: #ffffff;
+        }
+
+        a:hover {
+            color: #747bff;
+        }
+
+        button {
+            background-color: #f9f9f9;
+        }
+    }
+</style>
 <script defer type="module" src="./main.js"></script>
--- a/main.js
+++ b/main.js
@ -1 +1,27 @@
-console.log('main.js')
+import { div, main, section, aside, h3, p, ul, li } from '@laniakeasupercluster/widgets'
+
+const blogData = [
+    { id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() },
+    { id: '2', title: 'Blog 2', content: 'Content 2', date: new Date() },
+    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
+]
+const tagData = ['JavaScript', 'CSS', 'HTML', 'Web']
+const articleData = ['Article 1', 'Article 2', 'Article 3']
+
+document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).p('1rem').childs([
+    main.grid({ gap: '1rem' }).childs(blogData.map(blog => section.childs([
+        h3.text(blog.title),
+        p.text(blog.content),
+        p.text(blog.date),
+    ]))),
+    aside.grid({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
+        div.childs([
+            h3.text('# TAG'),
+            ul.bg('#ececec').radius('1rem').childs(tagData.map(tag => li.text(tag))),
+        ]),
+        div.childs([
+            h3.text('# 归档'),
+            ul.childs(articleData.map(article => li.text(article))),
+        ]),
+    ]),
+]))
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
  "author": "satori <huan0016@gmail.com>",
  "license": "MIT",
  "dependencies": {
+    "@laniakeasupercluster/widgets": "^1.1.3",
    "axios": "^0.27.2",
    "express": "^4.17.1",
    "express-session": "^1.17.2",