From 46d009ca0dc0a0787025991d4220853adf1db0d0 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Sun, 13 Mar 2022 22:34:31 +0100 Subject: [PATCH] First modification --- flake.lock | 14 +- flake.nix | 11 +- hakyll.patch => nix/hakyll.patch | 0 .../haskell-overlay.nix | 34 +-- nix/pure-css/default.nix | 55 ++++ nix/pure-css/npm-packages.nix | 30 +++ src/css/styles.css | 250 ++++++++++++++++++ src/index.html | 4 +- src/js/ui.js | 56 ++++ src/templates/default.html | 39 +++ ssg/src/Main.hs | 26 +- ssg/ssg.cabal | 4 +- 12 files changed, 476 insertions(+), 47 deletions(-) rename hakyll.patch => nix/hakyll.patch (100%) rename haskell-overlay.nix => nix/haskell-overlay.nix (63%) create mode 100644 nix/pure-css/default.nix create mode 100644 nix/pure-css/npm-packages.nix create mode 100644 src/css/styles.css create mode 100644 src/js/ui.js diff --git a/flake.lock b/flake.lock index 6df7dfd..c8f9a03 100644 --- a/flake.lock +++ b/flake.lock @@ -2,11 +2,11 @@ "nodes": { "flake-utils": { "locked": { - "lastModified": 1623875721, - "narHash": "sha256-A8BU7bjS5GirpAUv4QA+QnJ4CceLHkcXdRp4xITDB0s=", + "lastModified": 1644229661, + "narHash": "sha256-1YdnJAsNy69bpcjuoKdOYQX0YxZBiCYZo4Twxerqv7k=", "owner": "numtide", "repo": "flake-utils", - "rev": "f7e004a55b120c02ecb6219596820fcd32ca8772", + "rev": "3cecb5b042f7f209c56ffd8371b2711a290ec797", "type": "github" }, "original": { @@ -17,16 +17,16 @@ }, "nixpkgs": { "locked": { - "lastModified": 1627528535, - "narHash": "sha256-+E0LxCLav1GmbQbqwCKP39DRMn6NeEq00drC8udnYIY=", + "lastModified": 1646933238, + "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" } }, diff --git a/flake.nix b/flake.nix index 193512d..9454b98 100644 --- a/flake.nix +++ b/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 diff --git a/hakyll.patch b/nix/hakyll.patch similarity index 100% rename from hakyll.patch rename to nix/hakyll.patch diff --git a/haskell-overlay.nix b/nix/haskell-overlay.nix similarity index 63% rename from haskell-overlay.nix rename to nix/haskell-overlay.nix index 8d1fbd7..13abebf 100644 --- a/haskell-overlay.nix +++ b/nix/haskell-overlay.nix @@ -15,40 +15,32 @@ final: prev: in { myHaskellPackages = prev.haskell.packages.${haskellCompiler}.override { overrides = hpFinal: hpPrev: - let - hakyll-src = hpPrev.callHackage "hakyll" "4.14.0.0" {}; - 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 [ + rec { + hakyll = pipe hpPrev.hakyll [ doJailbreak dontCheck - (withPatch ./hakyll.patch) - (withFlags [ "-f" "watchServer" "-f" "previewServer" ]) + # (withPatch ./hakyll.patch) + (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 - ".git" - ".github" - ] ./.; + ../.gitignore + "../.git" + "../.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" - cp -r dist/* "$out/dist" + mkdir -p "$out" + cp -r dist/* "$out" ''; }; }; diff --git a/nix/pure-css/default.nix b/nix/pure-css/default.nix new file mode 100644 index 0000000..faa8f8a --- /dev/null +++ b/nix/pure-css/default.nix @@ -0,0 +1,55 @@ +{ pkgs ? import {} }: + +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 + ''; + +} diff --git a/nix/pure-css/npm-packages.nix b/nix/pure-css/npm-packages.nix new file mode 100644 index 0000000..70d93a5 --- /dev/null +++ b/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; } diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..e89fff8 --- /dev/null +++ b/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 `
` 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 `
` 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` `
` is the parent `
` 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 `
  • `. + */ + #menu .pure-menu-selected, + #menu .pure-menu-heading { + background: #1f8dd6; + } + /* + This styles a link within a selected menu item `
  • `. + */ + #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; + } +} diff --git a/src/index.html b/src/index.html index 30f5fb6..9cedece 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ stylesheet: "default" title: "Hello, world!" --- -
    +

    Hello, world!

    A woman sitting on a bench amongst trees at the end of a boardwalk leading to a pond with mountains in the background
    -
    +

    Blog Posts

      $for(posts)$ diff --git a/src/js/ui.js b/src/js/ui.js new file mode 100644 index 0000000..17bd342 --- /dev/null +++ b/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)); diff --git a/src/templates/default.html b/src/templates/default.html index b099c14..0de6347 100644 --- a/src/templates/default.html +++ b/src/templates/default.html @@ -40,10 +40,49 @@ + + + +
      + + + + + + + +
      + + + + + + + + + + +
      +
      $body$ + diff --git a/ssg/src/Main.hs b/ssg/src/Main.hs index cd565dd..95a1f8d 100644 --- a/ssg/src/Main.hs +++ b/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" - , feedDescription = "My Site Description" - , feedAuthorName = "My Name" - , feedAuthorEmail = "me@myemail.com" + { feedTitle = "www.nani.wtf" + , feedDescription = "???" + , feedAuthorName = "h7x4" + , feedAuthorEmail = "h7x4@protonmail.com" , feedRoot = root } diff --git a/ssg/ssg.cabal b/ssg/ssg.cabal index ed6c19c..ff92dbc 100644 --- a/ssg/ssg.cabal +++ b/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 - , pandoc == 2.11.* + , hakyll >= 4.15 + , pandoc == 2.14.* , slugger >= 0.1.0.1 , text >= 1.2 ghc-options: -Wall -threaded