add stylesheet for syntax highlighting and add toc

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>

css/default.css

@@ -9,20 +9,80 @@
   font-style: normal;
 }
 
+@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css");
+
+
+:root {
+  --yellow: #b58900;
+  --orange: #cb4b16;
+  --red: #dc322f;
+ 	--magenta: #d33682;
+  --violet: #6c71c4;
+  --blue: #268bd2;
+  --cyan: #2aa198;
+  --green: #859900;
+  --fg0: #93a1a1;
+  --fg1: #839496;
+  --fg2: #657b83;
+  --fg3: #586e75;
+  --fg4: #073642;
+  --fg5: #002b36;
+  --bg0: #fdf6e3 ;
+  --bg1: #eee8d5;
+  --dark: #002b36;
+  --light: #fdf6e3; 
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg0: #073642;
+    --bg1: #002b36;
+    --fg5: #fdf6e3 ;
+    --fg4: #eee8d5;
+    --fg3: #93a1a1;
+    --fg2: #839496;
+    --fg1: #657b83;
+    --fg0: #586e75;
+  } 
+}
+
 html {
   font-size: 62.5%;
+  background-color: var(--bg0);
+  color: var(--fg2);
 }
 
 body {
   font-size: 1.6rem;
-  color: #000;
+  word-wrap: break-word;
+}
+
+h1, h2, h3 {
+ color: var(--fg3);
 }
 
 header {
-  border-bottom: 0.2rem solid #000;
+  border-bottom: 0.2rem solid var(--magenta);
   margin: 4.2rem 0;
 }
 
+main a, footer a {
+  color: var(--blue);
+}
+
+main a:hover, footer a:hover {
+  color: var(--light);
+  background: var(--blue);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  transition-duration: 0.1s;
+}
+
 nav {
   text-align: center;
   margin: 0 auto 3rem;
@@ -31,22 +91,22 @@ nav {
 nav a {
   font-size: 1.8rem;
   font-weight: bold;
-  color: black;
+  color: var(--cyan);
-  text-decoration: none;
   text-transform: uppercase;
+  padding: 0.5rem;
 }
 
-
 nav a:hover {
-  color: pink;
+  background: var(--cyan);
+  color: var(--dark);
 }
 
 footer {
   margin-top: 3rem;
   padding: 1.2rem 0;
-  border-top: 0.2rem solid #000;
+  border-top: 0.2rem solid var(--magenta);
   font-size: 1.2rem;
-  color: #555;
+  color: var(--fg0);
 }
 
 h1 {
@@ -57,10 +117,15 @@ h2 {
   font-size: 2rem;
 }
 
-article .header {
+.post-title {
+  text-align: center;
+  color: var(--fg5) !important;
+}
+
+article .post-header {
   font-size: 1.4rem;
   font-style: italic;
-  color: #555;
+  color: var(--fg0);
 }
 
 .logo {
@@ -74,23 +139,41 @@ article .header {
 
 .logo a {
   font-weight: bold;
-  font-family: "Monoid Bold";
+  font-family: "Monoid Bold", sans-serif;
   font-size: 3rem;
-  color: #000;
+  color: var(--green);
   text-decoration: none;
 }
 
-.subdomains {
+article > section {
-  list-style-type: none;
+  overflow: auto;
 }
 
-.subdomains li {
+.toc {
-  display: inline-block;
+  padding: 2rem;
+  float: right;
+  border-radius: 1rem;
+  background: var(--bg1);
 }
 
-.subdomains img {
+.post-teaser > .toc {
-  width: 30px;
+  display: none;
-  height: 30px;
+}
+
+code {
+  font-family: 'Cascadia Code', sans-serif;
+}
+
+code {
+  border-radius: 0.2rem;
+  background: var(--bg1);
+}
+
+pre {
+  padding: 2rem;
+  border-radius: 1rem;
+  background: var(--bg1);
+  overflow: scroll;
 }
 
 @media (max-width: 319px) {

css/highlight.css

@@ -0,0 +1,31 @@
+/* Solarized theme for Pandoc Code */
+pre code { color: var(--fg2); }
+code span.kw { color: var(--green); } /* Keyword */
+code span.dt { color: var(--yellow); } /* DataType */
+code span.dv { color: var(--cyan); } /* DecVal */
+code span.bn { color: var(--cyan); } /* BaseN */
+code span.fl { color: var(--cyan); } /* Float */
+code span.ch { color: var(--cyan); } /* Char */
+code span.st { color: var(--cyan); } /* String */
+code span.co { color: var(--fg0); font-style: italic; } /* Comment */
+code span.ot { color: var(--blue); } /* Other */
+code span.al { color: var(--red); } /* Alert */
+code span.fu { color: var(--blue); } /* Function */
+code span.cn { color: var(--cyan); } /* Constant */
+code span.sc { color: var(--red); } /* SpecialChar */
+code span.vs { color: var(--fg2); } /* VerbatimString */
+code span.ss { color: var(--red); } /* SpecialString */
+code span.im { color: var(--fg2); } /* Import */
+code span.va { color: var(--blue); } /* Variable */
+code span.cf { color: var(--green); } /* ControlFlow */
+code span.op { color: var(--green); } /* Operator */
+code span.bu { color: var(--fg2); } /* BuiltIn */
+code span.ex { color: var(--fg2); } /* Extension */
+code span.pp { color: var(--orange); } /* Preprocessor */
+code span.at { color: var(--fg2); } /* Attribute */
+code span.er { color: var(--red); } /* Error */
+code span.wa { color: var(--orange); font-style: italic; } /* Warning */
+code span.do { color: var(--fg0); font-style: italic; } /* Documentation */
+code span.an { color: var(--fg0); font-style: italic; } /* Annotation */
+code span.cv { color: var(--fg0); font-style: italic; } /* CommentVar */
+code span.in { color: var(--fg0); font-weight:normal; font-style: normal; } /* Information */

flake.nix

@@ -18,7 +18,7 @@
             LANG = "en_US.UTF-8";
           };
           
-          site = pkgs.haskellPackages.callCabal2nix "nattopages" ./. { };
+          site = pkgs.haskellPackages.callCabal2nix "nattopages" ./src { };
           nattopages = pkgs.stdenv.mkDerivation {
             name = "nattopages";
             src = ./.;
@@ -27,7 +27,7 @@
             buildPhase = (pkgs.lib.concatStringsSep "\n" vars ) + ''
               log=$(site build)
               mkdir -p $out
-              cp -r _site/* $out
+              cp -r \_site/* $out
             '';
           };
         in

index.html

@@ -4,10 +4,5 @@ home: true
 ---
 
 <h2>Welcome</h2>
-
+$partial("templates/post-preview-list.html")$
-<p>These are some pages by natto:</p>
+<p>Find more in the <a href="/archive.html">archives</a>.</p>
-
-<h2>Posts</h2>
-$partial("templates/post-list.html")$
-
-<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>

posts/2022-12-05-placeholder.org

@@ -1,227 +1,13 @@
 ---
 title: alo
-tags: amaang
+tags: amaang, shararati
 ---
-this is so true
-
-* a
-3
 
 
-* a
+* The
-* a
+
-* a
+alo, i am a.
-* a
+
-* a
+#+BEGIN_EXPORT HTML
-* a
+<!--more-->
-* a
+#+END_EXPORT
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-* a
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3
-3

src/nattopages.cabal

@@ -8,5 +8,7 @@ executable site
   main-is:          site.hs
   build-depends:    base == 4.*
                   , hakyll == 4.15.*
+                  , pandoc == 2.*
+                  , text == 1.*
   ghc-options:      -threaded -rtsopts -with-rtsopts=-N
   default-language: Haskell2010

src/site.hs

@@ -1,9 +1,15 @@
 --------------------------------------------------------------------------------
 {-# LANGUAGE OverloadedStrings #-}
 
+import Data.Functor.Identity (runIdentity)
+import Data.Text (Text)
+import qualified Data.Text as T
 import Hakyll
+import Text.Pandoc (WriterOptions (writerHighlightStyle, writerNumberSections, writerTOCDepth, writerTableOfContents, writerTemplate))
+import Text.Pandoc.Templates (Template, compileTemplate)
 
 --------------------------------------------------------------------------------
+
 main :: IO ()
 main = hakyllWith config $ do
   match "images/*" $ do
@@ -39,25 +45,12 @@ main = hakyllWith config $ do
         >>= loadAndApplyTemplate "templates/default.html" tagCtx
         >>= relativizeUrls
 
-  create ["archive/tags.html"] $ do
-    route idRoute
-    compile $ do
-      let tagListCtx =
-            field "tags" (\_ -> renderTagList tags)
-              <> constField "title" "Tag List"
-              <> defaultCtx
-
-      makeItem ""
-        >>= loadAndApplyTemplate "templates/tags.html" tagListCtx
-        >>= loadAndApplyTemplate "templates/default.html" tagListCtx
-        >>= relativizeUrls
-
   match "posts/*org" $ do
     route $ setExtension "html"
     compile $
-      pandocCompiler
+      pandocCompilerWith defaultHakyllReaderOptions writerOptions
         >>= saveSnapshot "content"
-        >>= loadAndApplyTemplate "templates/post.html" (postCtx tags)
+        >>= loadAndApplyTemplate "templates/post.html" (postCtx tags <> teaserField "teaser" "content")
         >>= loadAndApplyTemplate "templates/default.html" (postCtx tags)
         >>= relativizeUrls
 
@@ -68,6 +61,7 @@ main = hakyllWith config $ do
       let archiveCtx =
             listField "posts" (postCtx tags) (return posts)
               <> constField "title" "Archives"
+              <> field "tags" (\_ -> renderTagList tags)
               <> defaultCtx
 
       makeItem ""
@@ -78,7 +72,7 @@ main = hakyllWith config $ do
   match "index.html" $ do
     route idRoute
     compile $ do
-      posts <- recentFirst =<< loadAll "posts/*"
+      posts <- fmap (take 10) . recentFirst =<< loadAllSnapshots "posts/*" "content"
       let indexCtx =
             listField "posts" (postCtx tags) (return posts)
               <> defaultCtx
@@ -88,6 +82,10 @@ main = hakyllWith config $ do
         >>= loadAndApplyTemplate "templates/default.html" indexCtx
         >>= relativizeUrls
 
+  match "images/*" $ do
+    route idRoute
+    compile copyFileCompiler
+
   match "templates/*" $ compile templateBodyCompiler
 
 config :: Configuration
@@ -103,7 +101,9 @@ config =
 postCtx :: Tags -> Context String
 postCtx tags =
   tagsField "tags" tags
+    --    <> teaserFieldWithSeparator "((.tease.))" "teaser" "content"
     <> dateField "date" "%B %e, %Y"
+    <> teaserField "teaser" "content"
     <> defaultCtx
 
 defaultCtx :: Context String
@@ -125,3 +125,22 @@ defaultCtx =
       where
         mkItem :: a -> Item a
         mkItem a = Item {itemIdentifier = "subdomain", itemBody = a}
+
+writerOptions :: WriterOptions
+writerOptions =
+  defaultHakyllWriterOptions
+    { writerNumberSections = True,
+      writerTableOfContents = True,
+      writerTOCDepth = 2,
+      writerTemplate = Just tocTemplate
+    }
+
+tocTemplate :: Text.Pandoc.Templates.Template Text
+tocTemplate =
+  either error id . runIdentity . compileTemplate "" $
+    T.unlines
+      [ "<div class=\"toc\"><div class=\"toc-header\">Table of Contents</div>",
+        "$toc$",
+        "</div>",
+        "$body$"
+      ]

templates/archive.html

@@ -1,3 +1,7 @@
-<p><a href="/archive/tags.html">Tags</a></p>
+<p>
-Here you can find all my previous posts:
+ <h3> Here you can find all my previous posts: </h3>
+</p>
 $partial("templates/post-list.html")$
+
+<h3>Tags</strong></h3>
+<div class="tags">$tags$</div>

templates/default.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>nattopages - $title$</title>
         <link rel="stylesheet" href="/css/default.css" />
+        <link rel="stylesheet" href="/css/highlight.css" />
     </head>
     <body>
         <header>
@@ -28,11 +29,13 @@
             <a href="https://git.weirdnatto.in/natto1784/nattopages">Source</a> available under MIT License<br>
             Site proudly generated by
             <a href="http://jaspervdj.be/hakyll">Hakyll</a><br>
-            PGP Fingerprint: 53EC 089E F230 E47A 83BA  8F81 9594 9BD4 B853 F559
+            53EC 089E F230 E47A 83BA  8F81 9594 9BD4 B853 F559
-            <ul class="subdomains">
+            <ul class="subdomains" style="list-style-type: none;">
                 $for(subdomains)$
-                    <li>
+                    <li style="display: inline-block;">
-                      <a href="https://$name$.$domain$"> <img src="/images/logos/$name$.png" alt="https://$name$.$domain$"/> </a>
+                      <a href="https://$name$.$domain$">
+                        <img src="/images/logos/$name$.png" alt="https://$name$.$domain$" width="30" height="30"/>
+                      </a>
                     </li>
                 $endfor$
             </ul>

templates/post-list.html

@@ -1,6 +1,6 @@
 <ul>
     $for(posts)$
-        <li>
+        <li class="post-item">
           <a href="$url$">$title$</a> - $date$
         </li>
     $endfor$

templates/post-preview-list.html

@@ -0,0 +1,23 @@
+<ul>
+    $for(posts)$
+        <li class="post-item post-preview-item" style="list-style-type: none;" >
+            <article>
+                <h1 class="post-title">$title$</h1>
+                <div class="post-header">
+                    <div class="post-date" >
+                        Posted $date$
+                    </div>
+                    <div class="tags" >
+                        $if(tags)$
+                          Tags: $tags$
+                        $endif$
+                    </div>
+                </div>
+                <div class="post-teaser">
+                    $teaser$
+                </div>
+                <a href="$url$">Read more</a>
+            </article>
+        </li>
+    $endfor$
+</ul>

templates/post.html

@@ -1,5 +1,6 @@
 <article>
-    <section class="header">
+    <h1 class="post-title">$title$</h1>
+    <section class="post-header">
         Posted on $date$
         $if(author)$
             by $author$
@@ -8,6 +9,7 @@
             Tags: $tags$
         $endif$
     </section>
+    <hr>
     <section>
         $body$
     </section>

templates/tag.html

@@ -1,2 +1,2 @@
-Here are all the posts marked with tag $tag$:
+Here are all the posts marked with tag <strong style="font-size: 3rem;">$tag$</strong>:
 $partial("templates/post-list.html")$

templates/tags.html

@@ -1,6 +0,0 @@
-$if(tags)$
-    Here is a list of all the tags:
-    <div class="tags"><p>$tags$</p></div>
-$else$
-    There are no tags
-$endif$