From 0c4333e325b79068082815d21ff00b2f37ac7ffb Mon Sep 17 00:00:00 2001 From: Amneesh Singh Date: Fri, 13 May 2022 07:41:43 +0530 Subject: [PATCH] add stylesheet for syntax highlighting and add toc Signed-off-by: Amneesh Singh --- css/default.css | 121 ++++++++++-- css/highlight.css | 31 +++ flake.nix | 4 +- index.html | 9 +- posts/2022-12-05-placeholder.org | 230 +---------------------- scripts/default.js | 0 nattopages.cabal => src/nattopages.cabal | 2 + site.hs => src/site.hs | 51 +++-- templates/archive.html | 8 +- templates/default.html | 11 +- templates/post-list.html | 2 +- templates/post-preview-list.html | 23 +++ templates/post.html | 4 +- templates/tag.html | 2 +- templates/tags.html | 6 - 15 files changed, 223 insertions(+), 281 deletions(-) create mode 100644 css/highlight.css create mode 100644 scripts/default.js rename nattopages.cabal => src/nattopages.cabal (83%) rename site.hs => src/site.hs (73%) create mode 100644 templates/post-preview-list.html delete mode 100644 templates/tags.html diff --git a/css/default.css b/css/default.css index 0f6aa4e..38f1286 100644 --- 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) { diff --git a/css/highlight.css b/css/highlight.css new file mode 100644 index 0000000..669c99a --- /dev/null +++ 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 */ diff --git a/flake.nix b/flake.nix index 433b1a2..c0cfdd9 100644 --- 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 diff --git a/index.html b/index.html index 89e6225..68abac3 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,5 @@ home: true ---

Welcome

- -

These are some pages by natto:

- -

Posts

-$partial("templates/post-list.html")$ - -

…or you can find more in the archives.

+$partial("templates/post-preview-list.html")$ +

Find more in the archives.

diff --git a/posts/2022-12-05-placeholder.org b/posts/2022-12-05-placeholder.org index ded7b95..f102062 100644 --- 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 + +#+END_EXPORT diff --git a/scripts/default.js b/scripts/default.js new file mode 100644 index 0000000..e69de29 diff --git a/nattopages.cabal b/src/nattopages.cabal similarity index 83% rename from nattopages.cabal rename to src/nattopages.cabal index 84b965d..00df65e 100644 --- a/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 diff --git a/site.hs b/src/site.hs similarity index 73% rename from site.hs rename to src/site.hs index a337cf0..26e2f16 100644 --- a/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 + [ "
Table of Contents
", + "$toc$", + "
", + "$body$" + ] diff --git a/templates/archive.html b/templates/archive.html index 95b8454..c984fec 100644 --- a/templates/archive.html +++ b/templates/archive.html @@ -1,3 +1,7 @@ -

Tags

-Here you can find all my previous posts: +

+

Here you can find all my previous posts:

+

$partial("templates/post-list.html")$ + +

Tags

+
$tags$
diff --git a/templates/default.html b/templates/default.html index 5edc40c..2100e95 100644 --- a/templates/default.html +++ b/templates/default.html @@ -6,6 +6,7 @@ nattopages - $title$ +
@@ -28,11 +29,13 @@ Source available under MIT License
Site proudly generated by Hakyll
- PGP Fingerprint: 53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559 -
    + 53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559 +
      $for(subdomains)$ -
    • - https://$name$.$domain$ +
    • + + https://$name$.$domain$ +
      • $endfor$
    diff --git a/templates/post-list.html b/templates/post-list.html index 7d63ae3..db3b496 100644 --- a/templates/post-list.html +++ b/templates/post-list.html @@ -1,6 +1,6 @@
      $for(posts)$ -
    • +
    • $title$ - $date$
      • $endfor$ diff --git a/templates/post-preview-list.html b/templates/post-preview-list.html new file mode 100644 index 0000000..5a13743 --- /dev/null +++ b/templates/post-preview-list.html @@ -0,0 +1,23 @@ +
        + $for(posts)$ +
      • +
        +

        $title$

        +
        +
        + Posted $date$ +
        +
        + $if(tags)$ + Tags: $tags$ + $endif$ +
        +
        +
        + $teaser$ +
        + Read more +
        +
        • + $endfor$ +
      diff --git a/templates/post.html b/templates/post.html index 569a283..e7c6a10 100644 --- a/templates/post.html +++ b/templates/post.html @@ -1,5 +1,6 @@
      -
      +

      $title$

      +
      Posted on $date$ $if(author)$ by $author$ @@ -8,6 +9,7 @@ Tags: $tags$ $endif$
      +
      $body$
      diff --git a/templates/tag.html b/templates/tag.html index f795e17..7e12fd9 100644 --- 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 $tag$: $partial("templates/post-list.html")$ diff --git a/templates/tags.html b/templates/tags.html deleted file mode 100644 index 3e98ec7..0000000 --- a/templates/tags.html +++ /dev/null @@ -1,6 +0,0 @@ -$if(tags)$ - Here is a list of all the tags: -

      $tags$

      -$else$ - There are no tags -$endif$