Compare commits
5 Commits
playground
...
redesign
| Author | SHA1 | Date | |
|---|---|---|---|
| 1d157b529f | |||
| 3e3c209ac9 | |||
| 4e68f393bd | |||
| fcba900a7e | |||
| 0478cb71b9 |
@@ -14,13 +14,13 @@ export class StartPagePlugin implements IPluginBuilder {
|
||||
return (builderContext) => {
|
||||
let htmlTemplate = readFileAsText(this.options.indexTemplatePath);
|
||||
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();
|
||||
const unorderedListItems = links.map((l) => `<li>${l}</li>`).join("\r\n");
|
||||
const html = `
|
||||
<ul>
|
||||
${unorderedListItems}
|
||||
<ul>
|
||||
${links.join("")}
|
||||
`;
|
||||
htmlTemplate = htmlTemplate.replace("{{content}}", html);
|
||||
writeTextAsFile(
|
||||
|
||||
BIN
src/assets/favicon.ico
Normal file
BIN
src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/profile.jpg
Normal file
BIN
src/assets/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
|
||||
{
|
||||
path: "src/templates/404.html",
|
||||
nameOverride: "Not Found Page",
|
||||
menuEntry: true,
|
||||
menuEntry: false,
|
||||
},
|
||||
{
|
||||
path: "src/assets/profile.jpg",
|
||||
},
|
||||
{
|
||||
path: "src/assets/favicon.ico",
|
||||
}
|
||||
],
|
||||
}),
|
||||
new StartPagePlugin({
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -7,48 +8,152 @@
|
||||
<style>
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 1.3em;
|
||||
font-size: 17px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 800px;
|
||||
color: #fbfbfe;
|
||||
background-color: #1c1b22;
|
||||
background-color: #1c1b28;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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:nth-child(1){
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
margin: 1em 0;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border-style: solid;
|
||||
|
||||
.profile {
|
||||
border-color: #00FFFF;
|
||||
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: "📝";
|
||||
margin-right: 8px;
|
||||
|
||||
.profile .picture {
|
||||
border-radius: 50%;
|
||||
}
|
||||
a {
|
||||
color: #fbfbfe;
|
||||
text-decoration: none;
|
||||
|
||||
.profile ul {
|
||||
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>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user