add stylesheet for syntax highlighting and add toc

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>
2022-05-13 07:41:43 +05:30
parent 0e6d6d79a2
commit 0c4333e325
15 changed files with 223 additions and 281 deletions
--- a/css/default.css
+++ b/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;
-  text-decoration: none;
+  color: var(--cyan);
  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 {
-  list-style-type: none;
+article > section {
+  overflow: auto;
 }

-.subdomains li {
-  display: inline-block;
+.toc {
+  padding: 2rem;
+  float: right;
+  border-radius: 1rem;
+  background: var(--bg1);
 }

-.subdomains img {
-  width: 30px;
-  height: 30px;
+.post-teaser > .toc {
+  display: none;
+}
+
+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) {
--- a/css/highlight.css
+++ b/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 */
--- a/flake.nix
+++ b/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
--- a/index.html
+++ b/index.html
@@ -4,10 +4,5 @@ home: true
 ---

 <h2>Welcome</h2>
-
-<p>These are some pages by natto:</p>
-
-<h2>Posts</h2>
-$partial("templates/post-list.html")$
-
-<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>
+$partial("templates/post-preview-list.html")$
+<p>Find more in the <a href="/archive.html">archives</a>.</p>
--- a/posts/2022-12-05-placeholder.org
+++ b/posts/2022-12-05-placeholder.org
@@ -1,227 +1,13 @@
 ---
 title: alo
-tags: amaang
+tags: amaang, shararati
 ---
-this is so true
-
-* a
-3


-* 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
-* 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
+* The
+
+alo, i am a.
+
+#+BEGIN_EXPORT HTML
+<!--more-->
+#+END_EXPORT
--- a/scripts/default.js
+++ b/scripts/default.js
--- a/src/nattopages.cabal
+++ b/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
--- a/src/site.hs
+++ b/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$"
+      ]
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -1,3 +1,7 @@
-<p><a href="/archive/tags.html">Tags</a></p>
-Here you can find all my previous posts:
+<p>
+ <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>
--- a/templates/default.html
+++ b/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
-            <ul class="subdomains">
+            53EC 089E F230 E47A 83BA  8F81 9594 9BD4 B853 F559
+            <ul class="subdomains" style="list-style-type: none;">
                $for(subdomains)$
-                    <li>
-                      <a href="https://$name$.$domain$"> <img src="/images/logos/$name$.png" alt="https://$name$.$domain$"/> </a>
+                    <li style="display: inline-block;">
+                      <a href="https://$name$.$domain$">
+                        <img src="/images/logos/$name$.png" alt="https://$name$.$domain$" width="30" height="30"/>
+                      </a>
                    </li>
                $endfor$
            </ul>
--- a/templates/post-list.html
+++ b/templates/post-list.html
@@ -1,6 +1,6 @@
 <ul>
    $for(posts)$
-        <li>
+        <li class="post-item">
          <a href="$url$">$title$</a> - $date$
        </li>
    $endfor$
--- a/templates/post-preview-list.html
+++ b/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>
--- a/templates/post.html
+++ b/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>
--- a/templates/tag.html
+++ b/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")$
--- a/templates/tags.html
+++ b/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$