creates custom index.vto, updates posts

_config.js

@@ -11,6 +11,5 @@ const site = lume({
   .use(favicon())
   .use(picture())
   .use(transformImages())
-  // .copy("fonts")
 
 export default site;

src/_data.yml

@@ -1,12 +1,15 @@
 home:
-  welcome: Welcome.
+  welcome: Andy Zeigert on the web
+  description: Please check out my blog below for starters
 
 extra_head: <link rel="stylesheet" href="/variables.css"/>
   <link rel="me" href="https://mastodon.social/@zeigert"/>
   <link rel="me" href="https://github.com/ajzeigert"/>
   <link rel="me" href="mailto:[email protected]"/>
   <link rel="me" href="https://www.linkedin.com/in/andy-zeigert/"/>
 
+footer: Copyright © 2023 Andy Zeigert
+
 menu_links: 
   - href: https://mastodon.social/@zeigert
     text: '@zeigert'

src/index.vto

@@ -0,0 +1,46 @@
+---
+layout: layouts/base.vto
+bodyClass: body-home
+title: Home
+---
+
+<header class="page-header">
+  <h1 class="page-title">{{ home.welcome }}</h1>
+  <h4 class="page-description">{{ home.description }}</h4> 
+  <div class="search" id="search"></div>
+</header>
+
+<section class="postList">
+  {{ for post of search.pages("type=post", "date=desc", 3) }}
+  <article class="post">
+    <header class="post-header">
+      <h2 class="post-title">
+        <a href="{{ post.url }}" {{ if post.url == url }} aria-current="page"{{ /if }}>
+          {{ post.title || post.url }}
+        </a>
+      </h2>
+
+      {{ include "templates/post-details.vto" {
+        date: post.date,
+        tags: post.tags,
+        author: post.author,
+        readingInfo: post.readingInfo
+        } }}
+    </header>
+
+    <div class="post-excerpt body">
+      {{ post.excerpt |> md }}
+    </div>
+
+    <a href="{{ post.url }}" class="post-link">
+      {{ i18n.nav.continue_reading }}
+    </a>
+  </article>
+{{ /for }}
+</section>
+
+<hr>
+
+<p>{{ i18n.nav.archive }}</p>
+
+<footer><small>{{ footer }}</small></footer>

src/posts/how-this-website-is-built.md

@@ -2,10 +2,16 @@
 title: How this website is built
 date: 2023-12-21T18:33:15.415Z
 draft: false
+tags:
+    - Javascript
+    - Deno
+    - Lume
 ---
 
 I'm primarily a javascript developer. I have built many websites, from simple, single HTML documents to large "enterprise" style apps. I'm quite comfortable building React [SPAs](https://developer.mozilla.org/en-US/docs/Glossary/SPA), in which the server sends a single HTML document to the client, which in turn instructs the client to download a few kilobytes or megabytes of javascript, which then constructs the UI and makes additional calls to the server for data. This usually results in a lovely, snappy interface that users have become quite accustomed to.
 
+<!--more-->
+
 ### Drawbacks of javascript frameworks
 
 #### Bloat

src/variables.css

@@ -19,8 +19,8 @@
   /* --font-code: 1rem/1.5 var(--font-family-code); */
   --font-display: clamp(2rem, 10vw, 4rem)/1 var(--font-family-display);
   --font-display-spacing: -0.02em;
-  /* --font-title: clamp(1.5rem, 8vw, 2rem)/1.2 var(--font-family-display); */
-  /* --font-title-spacing: -0.015em; */
+  --font-title: clamp(1.5rem, 8vw, 2rem)/1.2 var(--font-family-display);
+  --font-title-spacing: -0.015em;
   /* --font-body: clamp(1rem, 5vw, 1.2rem)/1.5 var(--font-family-ui); */
   /* --font-body-bold: bold var(--font-body); */
   /* --font-ui: 1rem/1.4 var(--font-family-ui); */
@@ -35,12 +35,12 @@
 @media (prefers-color-scheme: dark) {
   :root {
     color-scheme: dark;
-    /* --color-base: hsl(220, 20%, 100%); */
-    /* --color-text: hsl(220, 20%, 80%); */
-    /* --color-dim: hsl(220, 20%, 60%); */
-    /* --color-link: hsl(220, 20%, 100%); */
+    --color-base: hsl(220, 20%, 100%);
+    --color-text: hsl(220, 20%, 80%);
+    --color-dim: hsl(220, 20%, 60%);
+    --color-link: hsl(220, 20%, 100%);
     /* --color-link-hover: hsl(220, 20%, 70%); */
-    /* --color-line: hsl(220, 20%, 20%); */
+    --color-line: hsl(220, 20%, 20%);
     /* --color-background: hsl(218, 79%, 40%); */
   }
 }