wholteza/blog
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Redesign of index

Browse Source 
Squashed commit of the following:

commit 1d157b529f
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 20:53:00 2025 +0200

    Improve on profile

commit 3e3c209ac9
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 20:28:21 2025 +0200

    Finish styling index

commit 4e68f393bd
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 19:45:22 2025 +0200

    Links

commit fcba900a7e
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 15:37:35 2025 +0200

    add fetchpriority

commit 0478cb71b9
Author: wholteza <zackarias@montell.se>
Date:   Thu Sep 18 14:44:35 2025 +0200

    wip redesign
This commit is contained in:
wholteza
2025-09-19 20:54:49 +02:00
parent 215c9ff878
commit 9293108dcf
5 changed files with 139 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/@zblog/toolchain/src/start-page-plugin.ts
View File

@@ -14,13 +14,13 @@ export class StartPagePlugin implements IPluginBuilder {
return (builderContext) => { return (builderContext) => {
let htmlTemplate = readFileAsText(this.options.indexTemplatePath); let htmlTemplate = readFileAsText(this.options.indexTemplatePath);
const links = builderContext.menuManifest const links = builderContext.menuManifest
.map((m) => `<a href='${m.link}'>${m.name}</a>`) .map((m) => {
const name = m.name.slice(m.name.indexOf("-") + 1).replaceAll("-", " ");
return `<div class="entry"><h2>${name}</h2><a href='${m.link}'>Read here!</a></div>`
})
.reverse(); .reverse();
const unorderedListItems = links.map((l) => `<li>${l}</li>`).join("\r\n");
const html = ` const html = `
<ul> ${links.join("")}
${unorderedListItems}
<ul>
`; `;
htmlTemplate = htmlTemplate.replace("{{content}}", html); htmlTemplate = htmlTemplate.replace("{{content}}", html);
writeTextAsFile( writeTextAsFile(

BIN
src/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

8
src/index.ts
View File

@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
{ {
path: "src/templates/404.html", path: "src/templates/404.html",
nameOverride: "Not Found Page", nameOverride: "Not Found Page",
menuEntry: true, menuEntry: false,
}, },
{
path: "src/assets/profile.jpg",
},
{
path: "src/assets/favicon.ico",
}
], ],
}), }),
new StartPagePlugin({ new StartPagePlugin({

149
src/templates/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,48 +8,152 @@
<style> <style>
html { html {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 1.3em; font-size: 17px;
line-height: 26px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-family: monospace;
} }
a {
color: #FFF;
}
body { body {
max-width: 800px; max-width: 800px;
color: #fbfbfe; color: #fbfbfe;
background-color: #1c1b22; background-color: #1c1b28;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
ul {
list-style-type: none;
padding: 0;
.content {
display: flex;
width: 100%;
flex: 1;
flex-direction: column;
} }
li:nth-child(1){
display: none; .content .entry {
margin-top: 1rem;
h2 {
color: #00FFFF;
text-transform: capitalize;
}
h2::after {
margin-top: 1rem;
top: 8px;
border-bottom: 3px dotted #00FFFF;
border-top: 3px dotted #00FFFF;
content: "";
width: 100%;
display: block;
position: relative;
box-sizing: border-box;
height: 8px;
}
h2 a {
color: white;
}
} }
li {
margin: 1em 0; .profile {
padding: 8px; border-color: #00FFFF;
border-radius: 8px;
border-style: solid;
border-width: 1px; border-width: 1px;
border-color: #aaa; border-style: solid;
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: monospace;
display: flex;
flex-direction: column;
flex: 1;
} }
li::before {
content: "📝"; .profile .picture {
margin-right: 8px; border-radius: 50%;
} }
a {
color: #fbfbfe; .profile ul {
text-decoration: none; margin: 0;
}
.profile li {}
.banner {
margin-top: 1rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner .title {
display: flex;
flex-direction: row;
flex: 1;
}
.banner .title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
.banner .title .name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
} }
</style> </style>
</head> </head>
<body> <body>
{{content}} <div class="banner">
<div class="title">
<div class="name">Zackarias Montell</div>
</div>
</div>
<div class="profile">
<img class="picture" src="profile.jpg" width="150" height="150" fetchpriority="high" />
<p>Software developer from Sweden. This is my place. Sometimes I publish thoughts or projects.</p>
<p>Things I do:</p>
<ul>
<li>Program things for fun. This site is built using <a href="https://git.zacke.dev/wholteza/blog">my own blog
framework</a> that generates a static website from markdown + a little bit of html templating.</li>
<li>I build physical things as well. Lately it has been <a
href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev2">keyboards</a> in multiple <a
href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev1">revisions</a>.</li>
<li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures">I find the process interesting..</a> and i
enjoy drinking beer.</li>
<li>Running and biking. You can find me on <a href="https://www.strava.com/athletes/41297534">strava</a>.
</li>
</ul>
<p><a href="https://git.zacke.dev/explore/repos">Gitea</a></p>
<p><a href="https://github.com/Wholteza">Github</a></p>
<p><a href="mailto:contact@montell.se">contact@montell.se</a> (not actually created yet but try changing out contact
for
my first name.)</p>
</div>
<div class="content">
{{content}}
</div>
</body> </body>
</html>
</html>