Add blog

OkuBrowser · Oct 10, 2024 · 8f15b67 · 8f15b67
1 parent b792019
commit 8f15b67
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 4 deletions.
diff --git a/blog/greetings.vox b/blog/greetings.vox
@@ -0,0 +1,8 @@
+---
+title = "Greetings!"
+date = 2024-10-09T00:00:00+00:00
+layout = "post"
+permalink = "date"
+---
+
+Welcome to the Oku blog! Here, you'll find posts regarding project milestones and development progress.
diff --git a/layouts/default.vox b/layouts/default.vox
@@ -6,9 +6,20 @@
         {% include head.html %}
     </head>
     <body>
-        <div class="container">
+        <a id="skip" href="#skip-target">Skip to main content</a>
+        {% include header.html %}
+        <div class="container" id="skip-target">
+            {% assign output_name = page.url | split: "/" | last %}
+            {% if output_name != 'index.html' %}
+                {% if page.collections.first %}
+                <p>
+                    <a href="{{ global.url | append: "/" | append: page.collections.first | append: "/index.html" }}" title="Back to index">← {{ page.collections.first | capitalize }}</a>
+                </p>
+                {% endif %}
+            {% endif %}
             {{ layouts | map: "rendered" | first }}
         </div>
+        <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
     </body>
     <footer class="container">
         <small>

diff --git a/layouts/index.vox b/layouts/index.vox
@@ -6,9 +6,20 @@
         {% include head.html %}
     </head>
     <body>
-        <div class="container glass center">
+        <a id="skip" href="#skip-target">Skip to main content</a>
+        {% include header.html %}
+        <div class="container glass center" id="skip-target">
+            {% assign output_name = page.url | split: "/" | last %}
+            {% if output_name != 'index.html' %}
+                {% if page.collections.first %}
+                <p>
+                    <a href="{{ global.url | append: "/" | append: page.collections.first | append: "/index.html" }}" title="Back to index">← {{ page.collections.first | capitalize }}</a>
+                </p>
+                {% endif %}
+            {% endif %}
             {{ layouts | map: "rendered" | first }}
         </div>
+        <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
     </body>
     <footer class="container">
         <small>

diff --git a/layouts/post.vox b/layouts/post.vox
@@ -0,0 +1,9 @@
+---
+layout = "default"
+---
+
+<article class="post">
+  <h1 class="post-title">{{ page.data.title }}</h1>
+  <time datetime="{{ page.date.rfc_2822 }}" class="post-date">{{ page.date.short_day }}, {{ page.date.day }} {{ page.date.short_month }} {{ page.date.year }}</time>
+  {{ page.rendered }}
+</article>
diff --git a/about.vox → pages/about.vox b/about.vox → pages/about.vox
diff --git a/pages/blog_index.vox b/pages/blog_index.vox
@@ -0,0 +1,7 @@
+---
+layout = "default"
+depends = ["blog"]
+permalink = "blog/index.html"
+---
+{% assign posts = blog | sort: "date.rfc_3339" | reverse %}
+{% include index.voxs posts = posts minimal = true %}
diff --git a/prebuild.sh b/prebuild.sh
@@ -2,4 +2,4 @@
 mkdir -p ./output/css
 mkdir -p ./output/assets
 grass ./sass/main.scss > ./output/css/main.css
-cp -ar ./assets/* ./output/assets
+cp -a ./assets/* ./output/assets
diff --git a/sass/main.scss b/sass/main.scss
@@ -19,4 +19,4 @@
     }
 }
 
-@import "variables", "typography", "code", "site";
+@import "variables", "typography", "code", "posts", "masthead", "site";
diff --git a/sass/masthead.scss b/sass/masthead.scss
@@ -0,0 +1,23 @@
+.masthead {
+    padding-top: var(--spacer);
+    padding-bottom: var(--spacer);
+    margin-bottom: var(--spacer-2);
+}
+
+.masthead small:not(:last-of-type)::after {
+    content: " • ";
+}
+
+.masthead-title {
+    margin-bottom: 0;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    small {
+        font-weight: 400;
+        opacity: .5;
+    }
+}
diff --git a/sass/posts.scss b/sass/posts.scss
@@ -0,0 +1,58 @@
+.page,
+.post {
+    margin-bottom: 4em;
+    box-shadow: none;
+    background: none;
+
+    li+li {
+        margin-top: .25rem;
+    }
+}
+
+.page-title,
+.post-title {
+    color: var(--heading-color);
+    margin-top: 0;
+}
+
+.post-title a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+        text-decoration: wavy underline;
+    }
+}
+
+.post-date {
+    display: block;
+    margin-top: -.5rem;
+    margin-bottom: var(--spacer);
+    color: var(--border-color);
+}
+
+.related {
+    padding-top: var(--spacer-2);
+    padding-bottom: var(--spacer-2);
+    margin-bottom: var(--spacer-2);
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.related-posts {
+    padding-left: 0;
+    list-style: none;
+
+    h3 {
+        margin-top: 0;
+    }
+
+    a {
+        text-decoration: none;
+
+        small {
+            color: var(--gray-600);
+        }
+    }
+}
diff --git a/sass/site.scss b/sass/site.scss
@@ -1,3 +1,14 @@
+#skip {
+  position: absolute;
+  top: -1000%;
+  left: -1000%;
+}
+
+#skip:focus {
+  top: 10px;
+  left: 10px;
+}
+
 * {
   box-sizing: border-box;
 }

diff --git a/snippets/header.html b/snippets/header.html
@@ -0,0 +1,8 @@
+<header class="masthead center">
+    <h3 class="masthead-title">
+        <a href="{{ global.url }}" title="Home">{{ global.title }}</a>
+        <small>{{ global.description }}</small>
+    </h3>
+    <small><a href="{{ global.url }}/about" title="About">about</a></small>
+    <small><a href="{{ global.url }}/blog" title="Blog">blog</a></small>
+</header>
diff --git a/snippets/index.voxs b/snippets/index.voxs
@@ -0,0 +1,30 @@
+{% if include.minimal %}
+  {% for post in include.posts %}
+  <article class="post">
+    <h1 class="post-title">
+      <a href="{{ post.url | prepend: "/" | prepend: global.url }}">
+        {{ post.data.title }}
+      </a>
+    </h1>
+    {% if post.date %}
+    <time datetime="{{ post.date.rfc_2822 }}" class="post-date">{{ post.date.short_day }}, {{ post.date.day }} {{ post.date.short_month }} {{ post.date.year }}</time>
+    {% endif %}
+  </article>
+  {% endfor %}
+{% else %}
+<div class="posts">
+  {% for post in include.posts %}
+  <article class="post">
+    <h1 class="post-title">
+      <a href="{{ post.url | prepend: "/" | prepend: global.url }}">
+        {{ post.data.title }}
+      </a>
+    </h1>
+    {% if post.date %}
+    <time datetime="{{ post.date.rfc_2822 }}" class="post-date">{{ post.date.short_day }}, {{ post.date.day }} {{ post.date.short_month }} {{ post.date.year }}</time>
+    {% endif %}
+    {{ post.rendered }}
+  </article>
+  {% endfor %}
+</div>
+{% endif %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ @@
         }
     }
-    @import "variables", "typography", "code", "site";
+    @import "variables", "typography", "code", "posts", "masthead", "site";