First modification

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "flake-utils": {
       "locked": {
-        "lastModified": 1623875721,
+        "lastModified": 1644229661,
-        "narHash": "sha256-A8BU7bjS5GirpAUv4QA+QnJ4CceLHkcXdRp4xITDB0s=",
+        "narHash": "sha256-1YdnJAsNy69bpcjuoKdOYQX0YxZBiCYZo4Twxerqv7k=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "f7e004a55b120c02ecb6219596820fcd32ca8772",
+        "rev": "3cecb5b042f7f209c56ffd8371b2711a290ec797",
         "type": "github"
       },
       "original": {
@@ -17,16 +17,16 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1627528535,
+        "lastModified": 1646933238,
-        "narHash": "sha256-+E0LxCLav1GmbQbqwCKP39DRMn6NeEq00drC8udnYIY=",
+        "narHash": "sha256-RZJnLN0o4B35eTnUc2tEAD12X5TNeeJhhvH3Fd6Pmdo=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "2262d7863a6af007274a698367484bf4903a3299",
+        "rev": "bacbfd713b4781a4a82c1f390f8fe21ae3b8b95b",
         "type": "github"
       },
       "original": {
         "id": "nixpkgs",
-        "ref": "nixos-21.05",
+        "ref": "nixos-21.11",
         "type": "indirect"
       }
     },

flake.nix

@@ -4,7 +4,7 @@
   nixConfig.bash-prompt = "[nix]λ ";
 
   inputs = {
-    nixpkgs.url = "nixpkgs/nixos-21.05";
+    nixpkgs.url = "nixpkgs/nixos-21.11";
 
     flake-utils = {
       url = "github:numtide/flake-utils";
@@ -16,7 +16,7 @@
     flake-utils.lib.eachDefaultSystem (system:
       let
         config = {};
-        overlays = [ (import ./haskell-overlay.nix) ];
+        overlays = [ (import ./nix/haskell-overlay.nix) ];
         pkgs = import nixpkgs { inherit config overlays system; };
       in rec {
         defaultPackage = packages.website;
@@ -24,9 +24,12 @@
 
         packages = with pkgs.myHaskellPackages; { inherit ssg website; };
 
-        apps.hakyll-site = flake-utils.lib.mkApp {
+        apps.hakyll-site = let
           drv = packages.ssg;
           exePath = "/bin/hakyll-site";
+        in {
+          type = "app";
+          program = "${drv}${exePath}";
         };
 
         devShell = pkgs.myHaskellPackages.shellFor {
@@ -37,7 +40,7 @@
 
             # Helpful tools for `nix develop` shells
             #
-            #ghcid                   # https://github.com/ndmitchell/ghcid
+            ghcid                   # https://github.com/ndmitchell/ghcid
             #haskell-language-server # https://github.com/haskell/haskell-language-server
             #hlint                   # https://github.com/ndmitchell/hlint
             #ormolu                  # https://github.com/tweag/ormolu

nix/haskell-overlay.nix

@@ -15,40 +15,32 @@ final: prev:
   in {
     myHaskellPackages = prev.haskell.packages.${haskellCompiler}.override {
       overrides = hpFinal: hpPrev:
-        let
+        rec {
-          hakyll-src = hpPrev.callHackage "hakyll" "4.14.0.0" {};
+          hakyll = pipe hpPrev.hakyll [
-          pandoc-src = hpPrev.callHackage "pandoc" "2.11.4" {}; # version specified by hayll 4.14.0.0
-          slugger-src = hpPrev.callHackageDirect {
-            pkg = "slugger";
-            ver = "0.1.0.1";
-            sha256 = "sha256-ggeo5TcbI4UlK/CtG4878USX9Cm7Faz16phdjlDOGaI=";
-          } {}; # not available yet because it's so new
-        in rec {
-          hakyll = pipe hakyll-src [
             doJailbreak
             dontCheck
-            (withPatch ./hakyll.patch)
+            # (withPatch ./hakyll.patch)
-            (withFlags [ "-f" "watchServer" "-f" "previewServer" ])
+            (withFlags [ "-f" "watch" ])
           ];
 
-          pandoc = pipe pandoc-src [
+          pandoc = pipe hpPrev.pandoc [
             doJailbreak
             dontCheck
           ];
 
-          slugger = slugger-src;
+          slugger = hpPrev.slugger;
 
-          ssg = hpPrev.callCabal2nix "ssg" ./ssg {};
+          ssg = hpPrev.callCabal2nix "ssg" ../ssg {};
 
           website = prev.stdenv.mkDerivation {
             #__contentAddressed = true; # uncomment if using cas: https://www.tweag.io/blog/2020-09-10-nix-cas/
             name = "website";
             buildInputs = [ ssg ];
             src = prev.nix-gitignore.gitignoreSourcePure [
-              ./.gitignore
+              ../.gitignore
-              ".git"
+              "../.git"
-              ".github"
+              "../.github"
-            ] ./.;
+            ] ../.;
 
             # LANG and LOCALE_ARCHIVE are fixes pulled from the community:
             #   https://github.com/jaspervdj/hakyll/issues/614#issuecomment-411520691
@@ -64,8 +56,8 @@ final: prev:
             '';
 
             installPhase = ''
-              mkdir -p "$out/dist"
+              mkdir -p "$out"
-              cp -r dist/* "$out/dist"
+              cp -r dist/* "$out"
             '';
           };
         };

nix/pure-css/default.nix

@@ -0,0 +1,55 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+with pkgs.stdenv.lib;
+
+let
+
+  name = "pure-css";
+  version = "v2.0.6";
+
+  # pull in the code for building npm packages
+  nodePackages = import ./npm-packages.nix {
+    inherit pkgs;
+    inherit (pkgs) stdenv nodejs fetchurl fetchgit;
+    neededNatives = [ pkgs.python ] ++ pkgs.lib.optional
+pkgs.stdenv.isLinux pkgs.utillinux;
+    self = nodePackages;
+  };
+
+  buildModules = [
+     nodePackages."bower"
+     nodePackages."grunt"
+     nodePackages."grunt-cli"
+     nodePackages."grunt-contrib-cssmin"
+     nodePackages."grunt-contrib-clean"
+     nodePackages."grunt-contrib-copy"
+     nodePackages."grunt-contrib-concat"
+     nodePackages."grunt-contrib-compress"
+     nodePackages."grunt-contrib-csslint"
+     nodePackages."grunt-contrib-watch"
+     nodePackages."grunt-css-selectors"
+     nodePackages."grunt-pure-grids"
+     nodePackages."grunt-stripmq"
+  ];
+
+in pkgs.stdenv.mkDerivation {
+
+  name = "${name}-${version}";
+
+  src = pkgs.fetchgit {
+    url = https://github.com/pure-css/pure;
+    rev = "refs/tags/v2.0.6";
+    sha256 =
+"049ac2ef812771852978d11cd5aecac2dd561e97bb16ad89c79eb1e10aa57672";
+  };
+
+  buildInputs = buildModules;
+
+  buildCommand = ''
+    cp -r $src src
+    chmod +w src
+    cd src
+    grunt
+  '';
+
+}

nix/pure-css/npm-packages.nix

@@ -0,0 +1,30 @@
+{ pkgs, stdenv, nodejs, fetchurl, fetchgit, neededNatives, self }:
+
+rec {
+
+  nativeDeps = {};
+
+  buildNodePackage = import
+"${pkgs.path}/pkgs/development/web/nodejs/build-node-package.nix" {
+    inherit stdenv nodejs neededNatives;
+    inherit (pkgs) runCommand;
+  };
+
+  patchSource = fn: srcAttrs:
+    let src = fn srcAttrs; in pkgs.runCommand src.name {} ''
+      mkdir unpack
+      cd unpack
+      unpackFile ${src}
+      chmod -R +w */
+      mv */ package 2>/dev/null || true
+      sed -i -e "s/:\s*\"latest\"/:  \"*\"/" -e
+"s/:\s*\"\(https\?\|git\(\+\(ssh\|http\|https\)\)\?\):\/\/[^\"]*\"/:
+\"*\"/" package/package.json
+      mv */ $out
+    '';
+
+  # Backwards compat
+  patchLatest = patchSource fetchurl;
+
+} // import ./purecss-npm-generated.nix { inherit self fetchurl fetchgit;
+inherit (pkgs) lib; }

src/css/styles.css

@@ -0,0 +1,250 @@
+/* https://github.com/pure-css/pure/blob/master/site/static/layouts/side-menu/styles.css */
+
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 150px;
+        width: 150px;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 800px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: center;
+     padding: 2.5em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -150px; /* "#menu" width */
+    width: 150px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        pointer-events: none;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 150px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 150px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 150px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+}

src/index.html

@@ -6,7 +6,7 @@ stylesheet: "default"
 title: "Hello, world!"
 ---
 
-<header>
+<header class="header">
   <h1>Hello, world!</h1>
   <img
     alt="A woman sitting on a bench amongst trees at the end of a boardwalk leading to a pond with mountains in the background"
@@ -15,7 +15,7 @@ title: "Hello, world!"
   />
 </header>
 <main>
-  <section>
+  <section class="content">
     <h2>Blog Posts</h2>
     <ul>
       $for(posts)$

src/js/ui.js

@@ -0,0 +1,56 @@
+//  https://github.com/pure-css/pure/blob/master/site/static/js/ui.js
+
+(function (window, document) {
+
+    // we fetch the elements each time because docusaurus removes the previous
+    // element references on page navigation
+    function getElements() {
+        return {
+            layout: document.getElementById('layout'),
+            menu: document.getElementById('menu'),
+            menuLink: document.getElementById('menuLink')
+        };
+    }
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/);
+        var length = classes.length;
+        var i = 0;
+
+        for (; i < length; i++) {
+            if (classes[i] === className) {
+                classes.splice(i, 1);
+                break;
+            }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleAll() {
+        var active = 'active';
+        var elements = getElements();
+
+        toggleClass(elements.layout, active);
+        toggleClass(elements.menu, active);
+        toggleClass(elements.menuLink, active);
+    }
+    
+    function handleEvent(e) {
+        var elements = getElements();
+        
+        if (e.target.id === elements.menuLink.id) {
+            toggleAll();
+            e.preventDefault();
+        } else if (elements.menu.className.indexOf('active') !== -1) {
+            toggleAll();
+        }
+    }
+    
+    document.addEventListener('click', handleEvent);
+
+}(this, this.document));

src/templates/default.html

@@ -40,10 +40,49 @@
     <link rel="shortcut icon" href="/favicon.ico">
     <link rel="canonical" href="$root$$url$">
     <link rel="stylesheet" href="./css/default.css" />
+    <link rel="stylesheet" href="./css/styles.css" />
     <link rel="stylesheet" href="./css/code.css" />
+    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
   </head>
   <body>
+
+    <div id="layout">
+      <!-- Menu toggle -->
+      <a href="#menu" id="menuLink" class="menu-link">
+        <!-- Hamburger icon -->
+        <span></span>
+      </a>
+      <div id="menu"> <div class="pure-menu">
+              <a class="pure-menu-heading" href="$root$">$siteName$</a>
+    
+              <ul class="pure-menu-list">
+                  <li class="pure-menu-item"><a href="#home" class="pure-menu-link">Home</a></li>
+                  <li class="pure-menu-item"><a href="#about" class="pure-menu-link">About</a></li>
+    
+                  <li class="pure-menu-item menu-item-divided pure-menu-selected">
+                      <a href="#" class="pure-menu-link">Services</a>
+                  </li>
+    
+                  <li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Contact</a></li>
+              </ul>
+          </div>
+      </div>
+
+      <div id="main">
+        <!-- <div class="header"> -->
+        <!--   <h1>Page Title</h1> -->
+        <!--   <h2>A subtitle for your page goes here</h2> -->
+        <!-- </div> -->
+
+        <!-- <div class="content"> -->
+        <!--   <h2 class="content-subhead">How to use this layout</h2> -->
+        <!--   <p> -->
+        <!--     To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/layouts/side-menu/styles.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive. -->
+        <!--   </p> -->
+        </div>
+    </div>
     $body$
     <script async src="./js/script.js"></script>
+    <script src="./js/ui.js"></script>
   </body>
 </html>

ssg/src/Main.hs

@@ -3,6 +3,7 @@
 import Control.Monad (forM_)
 import Data.Maybe (fromMaybe)
 import Hakyll
+import Debug.Trace (trace)
 import qualified Data.Text as T
 import qualified Data.Text.Slugger as Slugger
 import Text.Pandoc
@@ -22,11 +23,11 @@ import Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
 
 root :: String
 root =
-  "https://my-site.com"
+  "https://www.nani.wtf/test/"
 
 siteName :: String
 siteName =
-  "My Site Name"
+  "Nani~"
 
 config :: Configuration
 config =
@@ -48,7 +49,6 @@ main = hakyllWith config $ do
   forM_
     [ "CNAME"
     , "favicon.ico"
-    , "robots.txt"
     , "_config.yml"
     , "images/*"
     , "js/*"
@@ -58,6 +58,10 @@ main = hakyllWith config $ do
       route idRoute
       compile copyFileCompiler
 
+  match "robots.txt" $ do
+    route (constRoute "public/robots.txt")
+    compile copyFileCompiler
+
   match "css/*" $ do
     route idRoute
     compile compressCssCompiler
@@ -65,7 +69,7 @@ main = hakyllWith config $ do
   match "posts/*" $ do
     let ctx = constField "type" "article" <> postCtx
 
-    route $ metadataRoute titleRoute
+    route $  constRoute "posts/" <> metadataRoute titleRoute
     compile $
       pandocCompilerCustom
         >>= loadAndApplyTemplate "templates/post.html" ctx
@@ -90,7 +94,7 @@ main = hakyllWith config $ do
   match "templates/*" $
     compile templateBodyCompiler
 
-  create ["sitemap.xml"] $ do
+  create ["public/sitemap.xml"] $ do
     route idRoute
     compile $ do
       posts <- recentFirst =<< loadAll "posts/*"
@@ -104,11 +108,11 @@ main = hakyllWith config $ do
       makeItem ("" :: String)
         >>= loadAndApplyTemplate "templates/sitemap.xml" sitemapCtx
 
-  create ["rss.xml"] $ do
+  create ["public/rss.xml"] $ do
     route idRoute
     compile (feedCompiler renderRss)
 
-  create ["atom.xml"] $ do
+  create ["public/atom.xml"] $ do
     route idRoute
     compile (feedCompiler renderAtom)
 
@@ -215,10 +219,10 @@ feedCompiler renderer =
 feedConfiguration :: FeedConfiguration
 feedConfiguration =
   FeedConfiguration
-    { feedTitle = "My Site"
+    { feedTitle = "www.nani.wtf"
-    , feedDescription = "My Site Description"
+    , feedDescription = "???"
-    , feedAuthorName = "My Name"
+    , feedAuthorName = "h7x4"
-    , feedAuthorEmail = "me@myemail.com"
+    , feedAuthorEmail = "h7x4@protonmail.com"
     , feedRoot = root
     }
 

ssg/ssg.cabal

@@ -10,8 +10,8 @@ executable hakyll-site
   main-is:           Main.hs
   hs-source-dirs:    src
   build-depends:     base >= 4.8
-                   , hakyll >= 4.14
+                   , hakyll >= 4.15
-                   , pandoc == 2.11.*
+                   , pandoc == 2.14.*
                    , slugger >= 0.1.0.1
                    , text >= 1.2
   ghc-options:       -Wall -threaded