Update styles.

tim-br · May 17, 2024 · 6e1d601 · 6e1d601
1 parent 6857770
commit 6e1d601
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 42 deletions.
diff --git a/css/md.css b/css/md.css
@@ -0,0 +1,110 @@
+/* Set a base font size and line height */
+body {
+  font-family: 'Georgia', serif; /* Choose a highly readable serif font */
+  font-size: 18px; /* Base font size */
+  line-height: 1.6; /* Line height for readability */
+  color: #333; /* Text color for good contrast */
+  background-color: #fff; /* Light background color */
+  margin: 0;
+  padding: 0;
+  padding: 20px;
+}
+
+/* Style headers to be distinguishable and readable */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Arial', sans-serif; /* Use a different font for headers */
+  line-height: 1.25; /* Tighter line height for headers */
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+/* Paragraphs should have a clear margin to separate them */
+p {
+  margin: 1em 0;
+}
+
+/* Style links to be clearly distinguishable */
+a {
+  color: #0066cc; /* Color for links */
+  text-decoration: underline;
+}
+
+a:hover {
+  color: #004499; /* Darker color for hover state */
+}
+
+/* Lists should have clear spacing and indentation */
+ul, ol {
+  margin: 1em 0;
+  padding-left: 2em;
+}
+
+/* Blockquotes should stand out */
+blockquote {
+  margin: 1.5em 0;
+  padding: 0.5em 10px;
+  color: #555;
+  border-left: 5px solid #ccc;
+  background: #f9f9f9;
+}
+
+/* Code blocks should have a different background and font */
+pre {
+  background: #f4f4f4;
+  padding: 10px;
+  border: 1px solid #ddd;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'Courier New', Courier, monospace;
+  background: #f4f4f4;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+/* Images should be responsive */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make tables readable */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+th {
+  background: #f4f4f4;
+}
diff --git a/index.html b/index.html
@@ -20,11 +20,15 @@ <h1 class="text-5xl font-bold text-white">Timothy Williams</h1>
         <h2 class="text-3xl font-bold text-white mb-6">Posts</h2>
         $partial("templates/post-list.html")$
       </section>
-      
+
       <section class="mb-12">
           <h2 class="text-3xl font-bold text-white mb-6">Projects</h2>
           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               <!-- Projects in cards -->
+              <div class="bg-gray-800 p-6 rounded-md shadow-md hover:shadow-lg">
+                <a href="https://github.com/tim-br/simple-ts-framework" class="text-blue-400 hover:text-blue-600 font-semibold">Simple TypeScript Frontend Framework</a>
+                <p class="text-gray-400 mt-2">A simple component based frontend framework entiretly built in TypeScript. The process of building this is described in a blog series that begins here: <a href="/posts/2024-05-17-simple_ts_generics.html" class="text-blue-400 hover:text-blue-600 font-semibold">here</a>.</p>
+              </div>
               <div class="bg-gray-800 p-6 rounded-md shadow-md hover:shadow-lg">
                   <a href="https://github.com/tim-br/hview" class="text-blue-400 hover:text-blue-600 font-semibold">HView</a>
                   <p class="text-gray-400 mt-2">Inspired by LiveView, a Haskell library for dynamic HTML updates via JSON. In πρῶτο-ἄλφα (proto-alpha phase).</p>

diff --git a/nauths.cabal b/nauths.cabal
@@ -19,7 +19,8 @@ executable nauths
   main-is:             site.hs
   default-language:    Haskell2010
   build-depends:       base >= 4.7 && < 5,
-                       hakyll
+                       hakyll,
+                       pandoc >= 2.9 && <3.2
   ghc-options:         -Wall
                        -Wcompat
                        -Widentities

diff --git a/posts/2024-05-17-simple_ts_generics.markdown b/posts/2024-05-17-simple_ts_generics.markdown
@@ -32,18 +32,18 @@ npm init -y
 
 Then we shall install a few dependencies:
 
+``` bash
+npm install typescript 
+npm install express --save-dev
+```
+
 Typescript is the language we are using.
 
 Express is used to serve pages.
 
 Express is a dev dependency for now, as we might deploy this using amplify or something similar for static sites. Also, we won't use TypeScript on the backend, to simplify the code and reduce dependencies.
 
-``` bash
-npm install typescript 
-npm install express --save-dev
-```
-
-Create a `server` directory with a JavaScript file:
+Next, we shall create a `server` directory with a JavaScript file:
 
 ``` bash
 mkdir server
@@ -108,7 +108,7 @@ Of course, we will need to initialize the typescript config file:
 npx tsc --init
 ```
 
-And you can replace the contents with this:
+And we can replace the contents with this:
 
 ``` json
 {

diff --git a/site.hs b/site.hs
@@ -1,8 +1,8 @@
 --------------------------------------------------------------------------------
 {-# LANGUAGE OverloadedStrings #-}
-import           Data.Monoid (mappend)
 import           Hakyll
-
+import Text.Pandoc.Options
+import Text.Pandoc.Extensions (githubMarkdownExtensions)
 
 --------------------------------------------------------------------------------
 
@@ -63,13 +63,60 @@ main = hakyll $ do
     --         >>= loadAndApplyTemplate "templates/default.html" defaultContext
     --         >>= relativizeUrls
 
+    -- Custom Pandoc options for GitHub Flavored Markdown
+
+    -- Configure reader options for GFM specifically
+    let readerOptions = defaultHakyllReaderOptions {
+        readerExtensions = Text.Pandoc.Extensions.githubMarkdownExtensions
+    }
+
+    let writerOptions = defaultHakyllWriterOptions {
+        writerExtensions = Text.Pandoc.Extensions.githubMarkdownExtensions
+    }
+
+    -- Custom Pandoc compiler that uses the GFM-specific reader options
+    let customPandocCompiler = pandocCompilerWith readerOptions writerOptions
+
+
     match "posts/*" $ do
         route $ setExtension "html"
-        compile $ pandocCompiler
-            >>= loadAndApplyTemplate "templates/post.html"    postCtx
-            >>= loadAndApplyTemplate "templates/default.html" postCtx
+        compile $ customPandocCompiler
+            >>= loadAndApplyTemplate "templates/post.html" postCtx
             >>= relativizeUrls
 
+    -- match "posts/index.html" $ do
+    --     route idRoute
+    --     compile $ do
+    --         posts <- recentFirst =<< loadAll "posts/*"
+    --         let indexCtx =
+    --                 listField "posts" postCtx (return posts) `mappend`
+    --                 constField "title" "Posts Archive" <>
+    --                 defaultContext
+
+    --         getResourceBody
+    --             >>= applyAsTemplate indexCtx
+    --             >>= loadAndApplyTemplate "templates/default.html" indexCtx
+    --             >>= relativizeUrls
+
+    match "index.html" $ do
+        route idRoute
+        compile $ do
+            snippet <- loadBody "web-content/snippet.md"
+            posts <- recentFirst =<< loadAll "posts/*"
+            let indexCtx =
+                    listField "posts" postCtx (return posts) `mappend`
+                    constField "title" "Home"                `mappend`
+                    constField "snippet" snippet             `mappend`
+                    defaultContext
+
+            getResourceBody
+                >>= applyAsTemplate indexCtx
+                >>= loadAndApplyTemplate "templates/default.html" indexCtx
+                >>= relativizeUrls
+
+    -- match "templates/*" $ compile templateCompiler
+
+
     -- create ["posts/index.html"] $ do  -- Changed from "archive.html" to "posts/index.html"
     --     route idRoute
     --     compile $ do
@@ -98,29 +145,10 @@ main = hakyll $ do
     --             >>= loadAndApplyTemplate "templates/default.html" archiveCtx
     --             >>= relativizeUrls
 
-
-    match "index.html" $ do
-        route idRoute
-        compile $ do
-            snippet <- loadBody "web-content/snippet.md"
-            posts <- recentFirst =<< loadAll "posts/*"
-            let indexCtx =
-                    listField "posts" postCtx (return posts) `mappend`
-                    constField "title" "Home"                `mappend`
-                    constField "snippet" snippet             `mappend`
-                    defaultContext
-
-            getResourceBody
-                >>= applyAsTemplate indexCtx
-                >>= loadAndApplyTemplate "templates/default.html" indexCtx
-                >>= relativizeUrls
-
-    -- match "templates/*" $ compile templateCompiler
-
-
 --------------------------------------------------------------------------------
 postCtx :: Context String
 postCtx =
     dateField "date" "%B %e, %Y" `mappend`
+    constField "author" "Timothy Williams" `mappend`
     defaultContext
 
diff --git a/templates/post.html b/templates/post.html
@@ -1,8 +1,19 @@
-<div class="info">
-    Posted on $date$
-    $if(author)$
-        by $author$
-    $endif$
-</div>
-
-$body$
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>$title$</title>
+    <link rel="stylesheet" href="/css/md.css">
+</head>
+<body class="font-sans bg-gray-900 text-gray-200">
+    <div class="info">
+        Posted on $date$
+        $if(author)$
+            by $author$
+        $endif$
+    </div>
+
+    $body$
+</body>
+</html>