Add a preprocessing script

Update css
Merge remote-tracking branch 'origin/tailwind' into tailwind
2023-10-13 12:53:00 +03:00 · 2023-10-13 12:51:58 +03:00 · 2023-04-28 15:58:44 +03:00 · 2023-04-28 15:55:33 +03:00 · 2023-04-27 22:03:38 +03:00 · 2023-04-27 21:53:31 +03:00
9 changed files with 193 additions and 51 deletions
--- a/.build.yml
+++ b/.build.yml
@ -0,0 +1,9 @@
+image: nixos/unstable
+environment:
+  NIX_CONFIG: "experimental-features = nix-command flakes"
+sources:
+  - https@git.sr.ht/~masse/rauhala.info
+tasks:
+  - build: |
+      cd rauhala.info
+      nix build
--- a/preprocess.sh
+++ b/preprocess.sh
@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+tailwindcss -i tailwind.css -o rauhala.info/css/index.css
--- a/rauhala.info/contact.markdown
+++ b/rauhala.info/contact.markdown
@ -5,4 +5,4 @@ title: Contact
 I live in Espoo Finland. You can contact me on any of the following services.

 - **Email**: mats.rauhala@iki.fi
- **Mastodon**: MasseR@haskell.social
+- **Mastodon**: MasseR@rauhala.info
--- a/rauhala.info/css/index.css
+++ b/rauhala.info/css/index.css
@ -550,6 +550,10 @@ video {
  }
 }

+.visible {
+  visibility: visible;
+}
+
 .absolute {
  position: absolute;
 }
@ -591,6 +595,22 @@ video {
  display: grid;
 }

+.hidden {
+  display: none;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .max-w-2xl {
  max-width: 42rem;
 }
@ -603,10 +623,6 @@ video {
  max-width: 36rem;
 }

-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .shrink {
  flex-shrink: 1;
 }
@ -627,6 +643,10 @@ video {
  align-items: center;
 }

+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-center {
  justify-content: center;
 }
@ -635,6 +655,10 @@ video {
  justify-content: space-between;
 }

+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
@ -653,6 +677,10 @@ video {
  border-radius: 0.25rem;
 }

+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border-b {
  border-bottom-width: 1px;
 }
@ -666,16 +694,34 @@ video {
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }

+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }

+.bg-sky-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+}
+
 .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }

+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
@ -686,6 +732,11 @@ video {
  padding-right: 1.5rem;
 }

+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
@ -705,11 +756,29 @@ video {
  line-height: 1.75rem;
 }

+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
 }

+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
 .font-semibold {
  font-weight: 600;
 }
@ -718,6 +787,11 @@ video {
  line-height: 1.5rem;
 }

+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
@ -733,6 +807,11 @@ video {
  color: rgb(17 24 39 / var(--tw-text-opacity));
 }

+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .first\:border-none:first-child {
  border-style: none;
 }
@ -742,6 +821,10 @@ video {
  color: rgb(156 163 175 / var(--tw-text-opacity));
 }

+.group:hover .group-hover\:block {
+  display: block;
+}
+
 .group:hover .group-hover\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
--- a/rauhala.info/profile.html
+++ b/rauhala.info/profile.html
@ -0,0 +1,42 @@
+<div class="flex">
+  <div class="w-1/3 bg-sky-200">
+    <img class="rounded-full drop-shadow" src="./images/profile.jpg"/>
+    <div>
+      <div class="">
+        <h2 class="text-xl font-bold">Mats Rauhala</h2>
+        <h3 class="text-sm">Lead Software Developer</h3>
+      </div>
+    </div>
+  </div>
+  <div class="w-full">
+    <div>
+      <h2 class="text-xl">Working on</h2>
+      <!-- Skills -->
+      <!-- Take ideas from https://www.mockplus.com/blog/post/profile-page-design -->
+      <!-- XXX: Convert to alpine.js to remove some repetition? -->
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Haskell</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Functional programming</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Databases</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Kubernetes</button>
+      </div>
+    </div>
+    <div>
+      <!-- Past experience -->
+      <!-- I'm thinking of something like closeable boxes for more information? -->
+    </div>
+  </div>
+  <div class="bg-sky-200 w-1/3">
+    <h2 class="text-lg font-medium">Biography</h2>
+    <p>A software developer from southern Finland<p>
+    <h2 class="text-lg font-medium">Location</h2>
+    Espoo, Finland
+  </div>
+
+</div>
--- a/rauhala.info/templates/default.html
+++ b/rauhala.info/templates/default.html
@ -1,37 +1,50 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>rauhala.info - $title$</title>
-        <link rel="stylesheet" href="/css/highlight.css">
-        <link rel="stylesheet" href="/css/index.css">
-    </head>
-    <body>
-        <header>
-            <nav class="bg-gray-800">
-              <div class="flex flex-1 items-center justify-center">
-                <!-- Git logo from https://git-scm.com/downloads/logos -->
-                <!-- Logo by Jason Long -->
-                <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/">Home</a>
-                <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/posts.html">Posts</a>
-                <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/projects.html">Projects</a>
-                <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="https://git.rauhala.info">Git</a>
-                <a class="text-gray-300 hover:text-gray-400 rounded px-3" href="/contact.html">Contact</a>
-              </div>
-            </nav>
-        </header>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>rauhala.info - $title$</title>
+    <link rel="stylesheet" href="/css/highlight.css">
+    <link rel="stylesheet" href="/css/index.css">
+  </head>
+  <body>
+    <div class="h-screen">
+      <header>
+        <nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg width-full align-center justify-between">
+          <ul class="flex gap-2 p-2">
+            <li class="hover:text-gray-400"><a href="/">Home</a></li>
+            <li class="hover:text-gray-400"><a href="/posts.html">Posts</a></li>
+            <li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
+          </ul>
+          <ul class="flex gap-2 p-2">
+            <li class="group">Git
+              <!-- Hide the dropdown by default, but make it visible on the parent hover
+                   see the 'group' on the toplevel
+                -->
+              <ul class="hidden bg-gray-800 text-gray-300 rounded p-2 group-hover:block absolute">
+                <li class="hover:text-gray-400"><a href="https://git.rauhala.info/MasseR">Gitea</a></li>
+                <li class="hover:text-gray-400"><a href="https://github.com/MasseR">GitHub</a></li>
+              </ul>
+            </li>
+            <li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
+          </ul>
+        </nav>
+      </header>

-        <main role="main">
+      <main role="main" class="">
+        <div>
+          $body$
+        </div>
+      </main>
+
+      <footer class="">
+        <div class="flex justify-center">
          <div>
-            $body$
+            Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a>
          </div>
-        </main>
-
-        <footer>
-            Site proudly generated by
-            <a href="http://jaspervdj.be/hakyll">Hakyll</a>
-        </footer>
-    </body>
+        </div>
+      </footer>
+    </div>
+  </body>
 </html>
--- a/rauhala.info/templates/post.html
+++ b/rauhala.info/templates/post.html
@ -1,5 +1,5 @@
 <div class="container mx-auto mt-10 mb-10">
-  <article class="flex max-w-xl flex-col items-start justify-center">
+  <article class="max-w-xl flex-col items-start justify-center">
    <div class="flex items-center gap-x-4 text-xs">
      <time datetime="$date$" class="text-gray-500">$date$</time>
    </div>
--- a/rauhala.info/templates/project.html
+++ b/rauhala.info/templates/project.html
@ -22,16 +22,3 @@
    </article>
  </section>
 </div>
-
-<div class="sidebar-container">
-  <article>
-    <section>
-      $body$
-    </section>
-  </article>
-  <div class="sidebar">
-    <a href="$github$">Github</a>
-    <a href="$issues$">Issues</a>
-    $if(badge)$<img src="$badge$" />$endif$
-  </div>
-</div>
--- a/site/app/site.hs
+++ b/site/app/site.hs
@ -50,7 +50,12 @@ main = hakyllWith defaultConfiguration{ignoreFile = ignore} $ do
      >>= relativizeUrls


-  match (fromList ["index.markdown", "contact.markdown"]) $ do
+  match "profile.html" $ do
+    route $ constRoute "index.html"
+    compile $ getResourceBody
+      >>= loadAndApplyTemplate "templates/default.html" defaultContext
+      >>= relativizeUrls
+  match (fromList ["contact.markdown"]) $ do
    route   $ setExtension "html"
    compile $ pandocCompiler
      >>= loadAndApplyTemplate "templates/default.html" defaultContext
Author	SHA1	Message	Date
Mats Rauhala	b4a98f936e	Add a preprocessing script	2023-10-13 12:53:00 +03:00
Mats Rauhala	e10433f84a	Update css	2023-10-13 12:51:58 +03:00
Mats Rauhala	3b0daa16cc	Merge remote-tracking branch 'origin/tailwind' into tailwind	2023-04-28 15:58:44 +03:00
Mats Rauhala	cc6f4661c7	Add a build manifest	2023-04-28 15:55:33 +03:00
Mats Rauhala	48948ca623	Trial the skills	2023-04-27 22:03:38 +03:00
Mats Rauhala	bb00c393a4	Start replacing the profile	2023-04-27 21:53:31 +03:00
Mats Rauhala	06f95f0aa6	I had double projects set up for some reason	2023-04-25 21:41:30 +03:00
Mats Rauhala	8fcf863e6a	The post had some problems on a narrower screen	2023-04-25 21:38:48 +03:00
Mats Rauhala	a732c620a8	Some padding	2023-04-25 21:35:58 +03:00
Mats Rauhala	a1f344a510	Change contact address	2023-04-25 21:35:41 +03:00
Mats Rauhala	933403e249	Comments	2023-04-25 21:30:09 +03:00
Mats Rauhala	57096e5d06	Two git	2023-04-25 21:28:57 +03:00
Mats Rauhala	b02f086730	Update navbar	2023-04-25 21:11:00 +03:00