Add "not finished warning" and add bootstrap for styling

2022-03-24 12:49:35 +01:00 · 2022-03-24 12:49:35 +01:00 · 3d4d314743
parent 21c971bde4
commit 3d4d314743
6 changed files with 196 additions and 66 deletions
--- a/src/css/styles.css
+++ b/src/css/styles.css
@ -1,7 +1,9 @@
+
 /* https://github.com/pure-css/pure/blob/master/site/static/layouts/side-menu/styles.css */

 body {
    color: #777;
+    font-size: 20px;
 }

 #navbar-image {
@ -58,9 +60,10 @@ The content `<div>` is where all your content goes.
     color: #333;
     text-align: center;
     padding: 2.5em 2em 0;
-     border-bottom: 1px solid #eee;
+     border-bottom: 1px solid #00000088;
+     margin-bottom: 2.5em;
 }
-    .header h1 {
+    /* .header h1 {
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
@ -70,7 +73,7 @@ The content `<div>` is where all your content goes.
        color: #ccc;
        padding: 0;
        margin-top: 0;
-    }
+    } */

 .content-subhead {
    margin: 50px 0 20px 0;
@ -252,3 +255,105 @@ Hides the menu at `48em`, but modify this based on your app's needs.
        left: 150px;
    }
 }
+
+/*  */
+
+.pure-menu {
+    box-sizing: border-box;
+}
+
+.pure-menu-fixed {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3;
+}
+
+.pure-menu-list,
+.pure-menu-item {
+    position: relative;
+}
+
+.pure-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.pure-menu-item {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+.pure-menu-link,
+.pure-menu-heading {
+    display: block;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+
+/* https://github.com/pure-css/pure/blob/master/src/menus/css/menus-skin.css */
+.pure-menu-separator,
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+    background-color: #ccc;
+    height: 1px;
+    margin: .3em 0;
+}
+
+.pure-menu-horizontal .pure-menu-separator {
+    width: 1px;
+    height: 1.3em;
+    margin: 0 .3em ;
+}
+
+/* Need to reset the separator since submenu is vertical */
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+    display: block;
+    width: auto;
+}
+
+.pure-menu-heading {
+    text-transform: uppercase;
+    color: #565d64;
+}
+
+.pure-menu-link {
+    color: #777;
+}
+
+.pure-menu-children {
+    background-color: #fff;
+}
+
+.pure-menu-link,
+.pure-menu-heading {
+    padding: .5em 1em;
+}
+
+.pure-menu-disabled {
+    opacity: .5;
+}
+
+.pure-menu-disabled .pure-menu-link:hover {
+    background-color: transparent;
+    cursor: default;
+}
+
+.pure-menu-active > .pure-menu-link,
+.pure-menu-link:hover,
+.pure-menu-link:focus {
+    background-color: #eee;
+}
+
+.pure-menu-selected > .pure-menu-link,
+.pure-menu-selected > .pure-menu-link:visited {
+    color: #000;
+}
+
+/*  */
+
+.nani_card-link:hover {
+  filter: brightness(90%);
+}
--- a/src/index.html
+++ b/src/index.html
@ -7,36 +7,51 @@ title: "Nani"
 ---

 <header class="header">
-  <h1>Welcome to nani.wtf</h1>
+  <h1 class="display-1">Welcome to nani.wtf</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"
    src="./images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg"
    style="max-width:500px;"
+    class="mb-4"
  />
 </header>
 <main>
  <section class="content">
-    <div class="pure-g">
-      <div class="pure-u-1-2 pure-u-md-1-2">
-        <h2>Posts</h2>
-        <ul>
-          $for(posts)$
-            <li>
-              <div><a href=".$url$">$title$</a></div>
-              <small>$date$</small>
-            </li>
-          $endfor$
-        </ul>
+    <div class="container">
+      <div class="row">
+
+        <!-- POSTS  -->
+        <div class="col">
+          <h2 class="text-center">Posts</h2>
+          <ul>
+            $for(posts)$
+              <div class="card nani_card-link my-3">
+                <img src="$image$" class="card-img-top" alt="">
+                <div class="card-body">
+                  <h5 class="card-title">$title$</h5>
+                  <small class="card-text ">$date$</small>
+                  <p class="card-text">$desc$</p>
+                </div>
+                <a href="$url$" class="stretched-link"></a>
+              </div>
+            $endfor$
+          </ul>
+        </div>
+
+        <div class="col"></div>
+
+        <!-- 語源 -->
+        <div class="col">
+          <h2 class="text-center">語源</h2>
+          <ul>
+            $for(gogen)$
+              <li>
+                <div><a href=".$url$">$titleHtml$</a></div>
+              </li>
+            $endfor$
+          </ul>
+        </div>
      </div>
-      <div class="pure-u-1-2 pure-u-md-1-2">
-        <h2>語源</h2>
-        <ul>
-          $for(gogen)$
-            <li>
-              <div><a href=".$url$">$titleHtml$</a></div>
-            </li>
-          $endfor$
-        </ul>
    </div>
  </section>
 </main>
--- a/src/templates/default.html
+++ b/src/templates/default.html
@ -45,27 +45,24 @@
      <meta property="twitter:image" content="$root$$image$">
    $endif$

-    <!-- $if(authorTwitter)$ -->
-      <!-- <meta property="twitter:creator" content="$authorTwitter$"> -->
-    <!-- $endif$ -->
-
    <link rel="shortcut icon" href="/images/nani.svg">
    <link rel="canonical" href="$root$$url$">
+    <link rel="stylesheet" href="/css/code.css" />
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
    <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/purecss@2.0.6/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="/"><img id="navbar-image" class="pure-image-responsive" src="/images/header-nani.svg"/></a>
+          <a class="pure-menu-heading" href="/">
+            <img id="navbar-image" class="pure-image-responsive py-4" src="/images/header-nani.svg"/>
+          </a>
    
              <ul class="pure-menu-list">
                  <li class="pure-menu-item"><a href="/" class="pure-menu-link">Posts</a></li>
--- a/src/templates/gogen.html
+++ b/src/templates/gogen.html
@ -14,6 +14,12 @@
      $endif$
    </header>
    <section class="content">
+      $if(notFinishedYet)$
+        <div class="d-flex justify-content-center">
+          <aside class="alert alert-warning"><strong>NOTE:</strong> This page might not be complete just yet.</aside>
+        </div>
+      $endif$
+
      $body$
    </section>
  </article>
--- a/ssg/src/Formats/Gogen.hs
+++ b/ssg/src/Formats/Gogen.hs
@ -1,44 +1,41 @@
 {-# LANGUAGE QuasiQuotes, FlexibleContexts #-}

-module Formats.Gogen (
-  convertFuriganaTitle,
-  convertFuriganaTitleHtml,
-  gogenCtx,
-) where
+module Formats.Gogen (gogenCtx) where

 import Hakyll
 import Debug.Trace (traceId)
 import Data.Maybe (fromMaybe)
-import Text.Regex.PCRE.Heavy (gsub, re)
+import Control.Applicative (empty)
+import Text.Regex.PCRE.Heavy (Regex, gsub, re)

--------------------------------------------------------------------------------
-- FURIGANA CONVERSION
-
-type FuriganaTemplate = String
-
-convertTitle = updateFieldWith "title" "???"
-
-convertFuriganaTitle :: Item a -> Compiler String
-convertFuriganaTitle =  convertTitle replaceFuriganaWithKanji
-
-convertFuriganaTitleHtml :: Item a -> Compiler String
-convertFuriganaTitleHtml = convertTitle replaceFuriganaWithHtml

 updateFieldWith :: String -> String -> (String -> String) -> Item a -> Compiler String
 updateFieldWith field defaultPreviousValue f = 
  fmap updateField . getMetadata . itemIdentifier
    where
      updateField :: Metadata -> String
-      updateField = traceId . f . fromMaybe defaultPreviousValue . lookupString field
+      updateField = f . fromMaybe defaultPreviousValue . lookupString field
+
+ifField :: String -> (Item a -> Compiler ContextField) -> Context a
+ifField key value = Context $ \k _ i -> if k == key then value i else empty
+
+--------------------------------------------------------------------------------
+-- FURIGANA CONVERSION
+
+type FuriganaTemplate = String
+
+convertTitle :: (String -> String) -> Item a -> Compiler String
+convertTitle = updateFieldWith "title" "???"
+
+furiganaRegex :: Regex
+furiganaRegex = [re|\[(.*?)\]\((.*?)\)|]

 replaceFuriganaWithKanji :: FuriganaTemplate -> String
-replaceFuriganaWithKanji = gsub [re|\[(.*?)\]\((.*?)\)|] (\(kanji:kana:_) -> kanji :: String)
+replaceFuriganaWithKanji = gsub furiganaRegex (\(kanji:_) -> kanji :: String)

 replaceFuriganaWithHtml :: FuriganaTemplate -> String
-replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
+replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub furiganaRegex matchToHtml
  where
-    regex = [re|\[(.*?)\]\((.*?)\)|]
-
    between :: String -> String -> String -> String
    between x y s = x ++ s ++ y

@ -47,7 +44,18 @@ replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
      let defaultKanji = if kanji == "" then "〇" else kanji
      in foldr1 (++) ["<rb>", defaultKanji, "</rb> <rp>(</rp><rt>", kana, "</rt><rp>)</rp>"]

+convertFuriganaTitle :: Item a -> Compiler String
+convertFuriganaTitle =  convertTitle replaceFuriganaWithKanji

+convertFuriganaTitleHtml :: Item a -> Compiler String
+convertFuriganaTitleHtml = convertTitle replaceFuriganaWithHtml
+
+convertFinishedValue :: Item a -> Compiler ContextField
+convertFinishedValue i = do 
+  s <- getMetadataField (itemIdentifier i) "finished"
+  case s of
+    Just "true" -> empty
+    _ -> return (StringField "true")

 {- |
  title: String
@ -60,10 +68,13 @@ replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
  leads_here: Maybe [String]
  alternatives: Maybe [String]
  see_also: Maybe [String]
+  sources: Maybe [String]
 -}
 gogenCtx :: Context String
 gogenCtx =
  dateField "date" "%Y-%m-%d"
+  <> ifField "notFinishedYet" convertFinishedValue
+  <> field "title" convertFuriganaTitle
  <> field "titleHtml" convertFuriganaTitleHtml
-  <> defaultContext
-  <> constField "lang" "en"
+  <> constField "lang" "en"
+  <> defaultContext
--- a/ssg/src/Main.hs
+++ b/ssg/src/Main.hs
@ -3,8 +3,6 @@
 import Control.Monad (forM_)
 import Data.Maybe (fromMaybe)
 import Hakyll
-import qualified Data.Text as T
-import qualified Data.Text.Slugger as Slugger
 import Text.Pandoc
  ( Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
    Extensions,
@ -83,8 +81,6 @@ main = hakyllWith config $ do
  match "gogen/*" $ do
    let ctx =
          constField "type" "article"
-          <> field "title" convertFuriganaTitle
-          <> field "titleHtml" convertFuriganaTitleHtml
          <> constField "root" root
          <> constField "siteName" siteName
          <> gogenCtx
@ -248,4 +244,4 @@ feedConfiguration =
    , feedAuthorName = "h7x4"
    , feedAuthorEmail = "h7x4@protonmail.com"
    , feedRoot = root
-    }
+    }