101 lines
3.8 KiB
JavaScript
101 lines
3.8 KiB
JavaScript
import { div, span, main, section, aside, h3, p, ul, li, header, nav, a } from '@laniakeasupercluster/widgets'
|
|
|
|
const navData = [
|
|
{ id: '1', name: 'Home', path: '/' },
|
|
{ id: '2', name: 'Blog', path: '/blog' },
|
|
{ id: '3', name: 'About', path: '/about' },
|
|
{ id: '4', name: 'Contact', path: '/contact' }
|
|
]
|
|
|
|
document.body.appendChild(header.flex({ justifyContent: 'space-between', alignItems: 'center' }).childs([
|
|
nav.flex({ gap: '1rem' }).childs(navData.map(item => {
|
|
const link = document.createElement('a')
|
|
link.href = item.path
|
|
link.textContent = item.name
|
|
link.style.padding = '.5rem'
|
|
link.style.borderRadius = '.25rem'
|
|
link.style.color = (item.path === window.location.pathname) ? '#00C16A' : '#333'
|
|
return link
|
|
})),
|
|
div.text('sign'),
|
|
]))
|
|
|
|
const blogata = await fetch('/api/blog').then(res => res.text())
|
|
console.log(blogata)
|
|
|
|
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() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
]
|
|
const tagData = ['JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web']
|
|
const articleData = ['Article 1', 'Article 2', 'Article 3']
|
|
|
|
document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).w('1280px').mx('auto').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.flex({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
|
|
div.childs([
|
|
h3.font('bold').text('TAG'),
|
|
div.flex({ gap: '.5rem', flexWrap: 'wrap' }).childs([
|
|
// cursor-pointer overflow-clip hover:text-pink-500
|
|
...tagData.map(tag => span.bg('rgba(200,200,200,.2)').radius('.25rem').px('8px').text(tag))
|
|
]),
|
|
]),
|
|
div.childs([
|
|
h3.font('bold').text('归档'),
|
|
ul.childs(articleData.map(article => li.text(article))),
|
|
]),
|
|
]),
|
|
]))
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
font-family: inherit;
|
|
}
|
|
body > header {
|
|
gap: 1rem;
|
|
width: 100%;
|
|
line-height: 4rem;
|
|
border-bottom: 1px solid #f5f6f5;
|
|
}
|
|
body header nav {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 1.3rem;
|
|
box-sizing: border-box;
|
|
}
|
|
body aside h3 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
body aside h3::before {
|
|
content: '# ';
|
|
color: #00C16A;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|