mirror of
https://github.com/sbrow/thor.git
synced 2026-08-26 11:23:32 -04:00
fix: fixed some css issues.
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
- [ ] add content-hash fingerprinting for tailwind cache busting.
|
||||||
|
- [ ] create template language
|
||||||
|
- Look at the source for 3 template languages that support mustache syntax,
|
||||||
|
and see how they implement the tempaltes, then pick the best one. One of them
|
||||||
|
should be Hugo / go.
|
||||||
+39
-37
@@ -13,27 +13,16 @@ MONTHS: [12]string = {
|
|||||||
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
|
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
|
||||||
}
|
}
|
||||||
|
|
||||||
CSS :: `
|
HEADER :: `
|
||||||
body { background: #020617; color: #e2e8f0; font-family: system-ui, sans-serif; max-width: 720px; margin: 0 auto; padding: 2rem; line-height: 1.6; }
|
<header>
|
||||||
a { color: #7dd3fc; }
|
<nav>
|
||||||
h1, h2, h3 { color: #f1f5f9; line-height: 1.3; }
|
<ul>
|
||||||
nav { display: flex; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #1e293b; }
|
<li class="mr-auto"><a href="/">Home</a></li>
|
||||||
pre { background: #1e293b; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
<li><a href="/ideas/">Ideas</a></li>
|
||||||
code { font-family: monospace; font-size: 0.9em; }
|
<li><a href="/posts/">Posts</a></li>
|
||||||
p code { background: #1e293b; padding: 0.1em 0.3em; border-radius: 0.25em; }
|
</ul>
|
||||||
blockquote { border-left: 4px solid #475569; margin: 0; padding: 0.5rem 0 0.5rem 1rem; color: #94a3b8; }
|
</nav>
|
||||||
img { max-width: 100%; }
|
</header>
|
||||||
hr { border: none; border-top: 1px solid #1e293b; }
|
|
||||||
table { border-collapse: collapse; width: 100%; }
|
|
||||||
th, td { border: 1px solid #334155; padding: 0.5rem; }
|
|
||||||
`
|
|
||||||
|
|
||||||
NAV :: `
|
|
||||||
<nav>
|
|
||||||
<a href="/">Home</a>
|
|
||||||
<a href="/posts/">Posts</a>
|
|
||||||
<a href="/ideas/">Ideas</a>
|
|
||||||
</nav>
|
|
||||||
`
|
`
|
||||||
|
|
||||||
render_site :: proc(pages: []Page, output_dir: string) {
|
render_site :: proc(pages: []Page, output_dir: string) {
|
||||||
@@ -56,7 +45,7 @@ render_site :: proc(pages: []Page, output_dir: string) {
|
|||||||
render_page_html :: proc(page: Page) -> string {
|
render_page_html :: proc(page: Page) -> string {
|
||||||
body := fmt.aprintf(
|
body := fmt.aprintf(
|
||||||
`<main>
|
`<main>
|
||||||
<article>
|
<article class="prose">
|
||||||
<h1>%s</h1>
|
<h1>%s</h1>
|
||||||
%s %s
|
%s %s
|
||||||
</article>
|
</article>
|
||||||
@@ -82,9 +71,10 @@ render_home_html :: proc(pages: []Page) -> string {
|
|||||||
|
|
||||||
body := fmt.aprintf(
|
body := fmt.aprintf(
|
||||||
`<main>
|
`<main>
|
||||||
<header>
|
<header class="text-center mb-28">
|
||||||
<h1>%s</h1>
|
<img class="mx-auto w-18 h-18 rounded-full" src="/avatar.jpg">
|
||||||
<p>%s</p>
|
<h1 class="text-2xl/12 mt-2.5 mb-0 font-bold">%s</h1>
|
||||||
|
<p class="text-slate-400">%s</p>
|
||||||
</header>
|
</header>
|
||||||
<ul>
|
<ul>
|
||||||
%s
|
%s
|
||||||
@@ -103,7 +93,8 @@ render_posts_html :: proc(pages: []Page) -> string {
|
|||||||
parts: [dynamic]string
|
parts: [dynamic]string
|
||||||
defer delete(parts)
|
defer delete(parts)
|
||||||
|
|
||||||
append(&parts, "<main>\n <h1>Posts</h1>\n")
|
append(&parts, "<main>\n")
|
||||||
|
append(&parts, ` <h1 class="text-center">Posts</h1>` + "\n")
|
||||||
|
|
||||||
current_year := ""
|
current_year := ""
|
||||||
open := false
|
open := false
|
||||||
@@ -114,17 +105,20 @@ render_posts_html :: proc(pages: []Page) -> string {
|
|||||||
year := get_year(page.date)
|
year := get_year(page.date)
|
||||||
if year != current_year {
|
if year != current_year {
|
||||||
if open {
|
if open {
|
||||||
append(&parts, " </ul>\n")
|
append(&parts, " </ul>\n </section>\n")
|
||||||
}
|
}
|
||||||
open = true
|
open = true
|
||||||
current_year = year
|
current_year = year
|
||||||
append(&parts, fmt.aprintf(" <h2>%s</h2>\n <hr>\n <ul>\n", year))
|
append(
|
||||||
|
&parts,
|
||||||
|
fmt.aprintf(" <section>\n <h2>%s</h2>\n <hr class=\"text-slate-800 mb-1\">\n <ul>\n", year),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
append(&parts, render_post_item(page))
|
append(&parts, render_post_item(page))
|
||||||
append(&parts, "\n")
|
append(&parts, "\n")
|
||||||
}
|
}
|
||||||
if open {
|
if open {
|
||||||
append(&parts, " </ul>\n")
|
append(&parts, " </ul>\n </section>\n")
|
||||||
}
|
}
|
||||||
append(&parts, "</main>\n")
|
append(&parts, "</main>\n")
|
||||||
|
|
||||||
@@ -141,16 +135,20 @@ render_chrome :: proc(page_title: string, body: string) -> string {
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>%s</title>
|
<title>%s</title>
|
||||||
<style>%s</style>
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
%s%s
|
%s%s<footer>
|
||||||
|
<a href="https://github.com/sbrow" target="_blank" rel="noopener noreferrer me" title="Github">GitHub</a>
|
||||||
|
<a href="/index.xml" target="_blank" rel="noopener noreferrer me" title="Rss">RSS</a>
|
||||||
|
<p class="pt-5 prose">Proudly built with <a href="https://odin-lang.org/">Odin</a></p>
|
||||||
|
<p><small>©</small> 2026</p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`,
|
`,
|
||||||
page_title,
|
page_title,
|
||||||
CSS,
|
HEADER,
|
||||||
NAV,
|
|
||||||
body,
|
body,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -158,18 +156,22 @@ render_chrome :: proc(page_title: string, body: string) -> string {
|
|||||||
render_post_item :: proc(page: Page) -> string {
|
render_post_item :: proc(page: Page) -> string {
|
||||||
date_html := ""
|
date_html := ""
|
||||||
if page.date != "" {
|
if page.date != "" {
|
||||||
date_html = fmt.aprintf(" <time>%s</time>", format_date(page.date))
|
date_html = fmt.aprintf(
|
||||||
|
"<time datetime=\"%s\">%s</time>",
|
||||||
|
page.date,
|
||||||
|
format_date(page.date),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
star := ""
|
star := ""
|
||||||
if page.is_starred {
|
if page.is_starred {
|
||||||
star = " \xe2\x98\x85"
|
star = `<span class="text-yellow-500 mr-2">★</span>`
|
||||||
}
|
}
|
||||||
return fmt.aprintf(
|
return fmt.aprintf(
|
||||||
` <li><a href="%s">%s</a>%s%s</li>`,
|
` <li class="flex justify-between"><a href="%s">%s</a><span>%s%s</span></li>`,
|
||||||
page.permalink,
|
page.permalink,
|
||||||
page.title,
|
page.title,
|
||||||
date_html,
|
|
||||||
star,
|
star,
|
||||||
|
date_html,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user