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
12 changed files with 214 additions and 195 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/.gitignore
+++ b/.gitignore
@ -3,3 +3,6 @@ _cache/
 dist/
 dist-newstyle/
 result*
+.direnv
+.envrc
+node_modules
--- a/flake.nix
+++ b/flake.nix
@ -13,6 +13,7 @@
  flake-utils.lib.eachDefaultSystem (system:
    let
      pkgs = nixpkgs.legacyPackages.${system};
+      tailwindcss-cli = pkgs.callPackage ./tailwind {};
      hp = pkgs.haskellPackages.override ( old: {
        overrides = pkgs.lib.composeExtensions ( old.overrides or (_: _: {})) (f: p: {
          build-rauhala-info = f.callPackage ./site {};
@ -31,8 +32,8 @@
          entr
          haskell-language-server
          ipfs
-          nodePackages.npm
-          node2nix
+
+          tailwindcss-cli
        ];
      };
    });
--- 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
@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 */

 /*
@ -550,6 +550,10 @@ video {
  }
 }

+.visible {
+  visibility: visible;
+}
+
 .absolute {
  position: absolute;
 }
@ -562,35 +566,11 @@ video {
  inset: 0px;
 }

-.z-10 {
-  z-index: 10;
-}
-
 .mx-auto {
  margin-left: auto;
  margin-right: auto;
 }

-.mt-10 {
-  margin-top: 2.5rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mb-10 {
  margin-bottom: 2.5rem;
 }
@ -599,15 +579,12 @@ video {
  margin-right: 2.5rem;
 }

-.ml-10 {
-  margin-left: 2.5rem;
+.mt-10 {
+  margin-top: 2.5rem;
 }

-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.mt-3 {
+  margin-top: 0.75rem;
 }

 .flex {
@ -618,12 +595,20 @@ video {
  display: grid;
 }

-.h-10 {
-  height: 2.5rem;
+.hidden {
+  display: none;
 }

-.w-10 {
-  width: 2.5rem;
+.h-screen {
+  height: 100vh;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-full {
+  width: 100%;
 }

 .max-w-2xl {
@ -638,18 +623,10 @@ video {
  max-width: 36rem;
 }

-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .shrink {
  flex-shrink: 1;
 }

-.grow {
-  flex-grow: 1;
-}
-
 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@ -666,6 +643,10 @@ video {
  align-items: center;
 }

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

+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
@ -688,32 +673,20 @@ video {
  row-gap: 4rem;
 }

-.justify-self-center {
-  justify-self: center;
+.rounded {
+  border-radius: 0.25rem;
 }

 .rounded-full {
  border-radius: 9999px;
 }

-.rounded {
-  border-radius: 0.25rem;
-}
-
-.border {
-  border-width: 1px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-b {
  border-bottom-width: 1px;
 }

-.border-r {
-  border-right-width: 1px;
+.border-t {
+  border-top-width: 1px;
 }

 .border-gray-200 {
@ -721,14 +694,9 @@ video {
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }

-.bg-white {
+.bg-gray-500 {
  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }

 .bg-gray-800 {
@ -736,13 +704,22 @@ video {
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }

-.p-4 {
-  padding: 1rem;
+.bg-sky-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
 }

-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
+.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 {
@ -755,32 +732,23 @@ video {
  padding-right: 1.5rem;
 }

-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }

-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
 }

 .pt-10 {
  padding-top: 2.5rem;
 }

-.font-sans {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }

 .text-lg {
@ -793,21 +761,16 @@ video {
  line-height: 1.25rem;
 }

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

-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .font-bold {
  font-weight: 700;
 }
@ -824,41 +787,9 @@ video {
  line-height: 1.5rem;
 }

-.leading-8 {
-  line-height: 2rem;
-}
-
-.leading-tight {
-  line-height: 1.25;
-}
-
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-
-.text-gray-500 {
+.text-gray-200 {
  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(229 231 235 / var(--tw-text-opacity));
 }

 .text-gray-300 {
@ -866,24 +797,34 @@ video {
  color: rgb(209 213 219 / var(--tw-text-opacity));
 }

-.first\:border-0:first-child {
-  border-width: 0px;
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  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;
 }

-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  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));
@ -902,11 +843,6 @@ video {
  .sm\:pt-16 {
    padding-top: 4rem;
  }
-
-  .sm\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
 }

@media (min-width: 1024px) {
--- 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
--- a/tailwind/default.nix
+++ b/tailwind/default.nix
@ -0,0 +1,20 @@
+{ lib, stdenv, fetchurl }:
+
+stdenv.mkDerivation rec {
+  pname = "tailwindcss-cli";
+  version = "3.3.1";
+  src = fetchurl {
+    url = "https://github.com/tailwindlabs/tailwindcss/releases/download/v${version}/tailwindcss-linux-x64";
+    sha256 = "sha256-i1ekM61t0SXR+iw9K9Z0y7cm3W4uQ4Kxodt/NK9fywg=";
+  };
+  dontUnpack = true;
+  dontStrip = true;
+  buildPhase = ''
+  cp $src tailwindcss
+  chmod u+x tailwindcss
+  '';
+  installPhase = ''
+  mkdir -p $out/bin
+  cp tailwindcss $out/bin/tailwindcss
+  '';
+}
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
Mats Rauhala	50e664f70b	Use the standalone cli for tailwind	2023-04-25 20:49:28 +03:00
Mats Rauhala	169a870bf4	update gitignore	2023-04-25 20:33:59 +03:00