satori/kana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端初始化

Browse Source
This commit is contained in:
觉 2024-05-16 20:53:13 +08:00
parent 4fd22abf7a
commit ae5506cac3
3 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -1,4 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DEMO</title> <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> <script defer type="module" src="./main.js"></script>

28
main.js
View File

@ -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))),
]),
]),
]))

1
package.json
View File

@ -7,6 +7,7 @@
"author": "satori <huan0016@gmail.com>", "author": "satori <huan0016@gmail.com>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@laniakeasupercluster/widgets": "^1.1.3",
"axios": "^0.27.2", "axios": "^0.27.2",
"express": "^4.17.1", "express": "^4.17.1",
"express-session": "^1.17.2", "express-session": "^1.17.2",