Browse Source

First modification

main
h7x4 7 months ago
parent
commit
46d009ca0d
  1. 14
      flake.lock
  2. 11
      flake.nix
  3. 0
      nix/hakyll.patch
  4. 34
      nix/haskell-overlay.nix
  5. 55
      nix/pure-css/default.nix
  6. 30
      nix/pure-css/npm-packages.nix
  7. 250
      src/css/styles.css
  8. 4
      src/index.html
  9. 56
      src/js/ui.js
  10. 39
      src/templates/default.html
  11. 26
      ssg/src/Main.hs
  12. 4
      ssg/ssg.cabal

14
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"
}
},

11
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

0
hakyll.patch → nix/hakyll.patch

34
haskell-overlay.nix → 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"
'';
};
};

55
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
'';
}

30
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; }

250
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;
}
}

4
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)$

56
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));

39
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/[email protected]/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>

26
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 = "[email protected]mail.com"
{ feedTitle = "www.nani.wtf"
, feedDescription = "???"
, feedAuthorName = "h7x4"
, feedAuthorEmail = "[email protected]mail.com"
, feedRoot = root
}

4
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

Loading…
Cancel
Save