Added rudimentary blog posts functionality

At the moment, it seems a little hacky: templates from Kit.Templates are
compiled as html in a _templates directory, so that Hakyll can use them.
It seems that I might have to compile twice at times, as templates may
not be cached when I want to apply them. Might have to sort this out, or
it is a happy hack..
This commit is contained in:
Etienne Werly 2022-09-21 19:56:36 +02:00
parent 4bb7d7b140
commit 2d5e928689
9 changed files with 168 additions and 7 deletions

View file

@ -16,3 +16,15 @@ main = hakyll $ do
match "src/Css/*.hs" $ do
route $ moveFromToWithExtension "src/Css/" "css/" "css"
compile runGHC
match "src/Kit/Templates/*.hs" $ do
route $ moveFromToWithExtension "src/Kit/Templates" "../_templates" "html"
compile runGHC
match "posts/*.md" $ do
route $ setExtension "html"
compile
$ pandocCompiler
>>= loadAndApplyTemplate "_templates/post.html" defaultContext
match "_templates/*" $ compile templateBodyCompiler

View file

@ -23,6 +23,7 @@ library
Css.Default
Kit.Atoms.Button
Kit.Pages.Index
Kit.Templates.Post
Routes
other-modules:
Paths_etienne_moqueur

View file

@ -0,0 +1,117 @@
---
title: 'Building my new website: goals and dreams'
description: 'A first post to describe what I want to achieve, and the how and why.'
---
This first post has two objectives:
* It is for me: a way to keep notes and to populate this site with real content.
* It is for others: a resource to gather ideas and such.
## What?
### A personal website
It'd be a website that compiles some personal posts. It should be
* A landing page (a personal one, not professional)
* A blog, with random articles: math, computers, birds, who knows what
* A photo gallery
* Music?
* A pattern guide / style guide
### A lightweight static site
* Very humble resources, smallest footprint possible.
* Static content
* If possible, no JS!
### Landing page
* Social handles
* Short bio
* Photo
### Blog
* Content written in md
* Tags
* Archives and per-tag browsing
### Photo
* Galleries (& tags?)
* Thumbnails for easy loading
* AVIF, or at least the lightest formats possible
### Music
Could be a place to share creations...
### Pattern guide
A place to include all atomic components, with short doc, source code and lineage
## Why?
* As an ambitious project
* As a Haskell project
* As a replacement of social nets
* As a way to try to go lightweight on a full-scale site
## Who?
Friends who want to check my photos, randos of the net that want to see dotfiles or notmuch setups...
### Languages?
The blog posts would be in english, except maybe articles about birds or whatnot? The photo galleries... english? french? The landing page?
**As a first goal, a working instance with english. Goal to go full multi-lang support**
## How?
### Haskell
* Hakyll for static site compilation & deployment
* Blaze + Clay for markup & styling
* Own code: probably a Component data type. Ideally, it should be as separated as possible from other libs. The dream goal would be to have a Component type that does not include Hakyll, Clay and Blaze but makes it possible to define components with lineage *etc*.
* I want a full kit!
* A [frontend workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) to display components. Should make it easy to add doc, include source code and present lineage.
### Easy workflow
* Articles should be easy to write as plain md files, no fuss
* Photo galleries should be just folders with a photo and a md/yaml with the same name for title description *etc*.
### Should be possible to scale
* Component based
* Differentiate the component mechanisms and the site building: a project 'component' which deploys as an accessible lib for the other, and a project 'site' which depends on component and builds and deploys the site.
* Also make a kit as a different project.
There should be at least four projects:
1. **"backend"**: aka low-level Haskell utils to define components that include html, css and dependencies.
2. **kit**: aka an atomic design suite to build pages bottom-up
3. **content**: mainly a Hakyll core with easy-to-add content.
4. **workshop**: an automated frontend workshop maker that binds well with Hakyll.
## When?
No hurry, I'd like to make it in under a year though...
## Project launch
Above was the first brief I made, and as I launch the project a few things have already changed.
* I will use Hamlet in place of Blaze, even though Blaze is used as Hamlet renders to the Html type defined in Blaze.
* The idea of a Component data type that would smartly make a dependency graph of the different components used and use that information to generate a css file with only the actually used components seems to hard for now. It resorted to write my own css files.
As of today I have the following file structure:
```
___src/___Core/... (Backend: compilers, routers, renderers and such)
| |_Kit/___Atoms/... (Components: Hamlet + Clay)
| | |_Molecules/...
| | |_Organisms/...
| | |_Templates/...
| | |_Pages/...
| |_Css/... (Styling: Clay css, import from kit and assemble)
| |_Workshop/___Core/... (Some logic/styling to make a frontend workshop)
| |_... (generate the frontend workshop)
|_posts/... (YYYY-mm-dd-title.md blog posts)
|_photos/___album1/___photo1.jpg
| |_photo1.md (photo metadata)
|_album2/...
```

5
posts/post Executable file
View file

@ -0,0 +1,5 @@
#!/usr/bin/zsh
postName=$*
vim "$(date +%Y-%m-%d)-${postName// /-}.md"

View file

@ -13,7 +13,7 @@ import Routes
import Text.Blaze.Html.Renderer.String
import Text.Hamlet ( HtmlUrl )
renderHamlet :: HtmlUrl Routes -> IO ()
renderHamlet :: HtmlUrl Route -> IO ()
renderHamlet ham = putStr . renderHtml $ ham render
renderClay :: Css -> IO ()

View file

@ -5,7 +5,7 @@ import Routes
import Text.Hamlet
import Clay
buttonWithText :: String -> HtmlUrl Routes
buttonWithText :: String -> HtmlUrl Route
buttonWithText text = [hamlet|
<button>#{text}
|]

View file

@ -5,7 +5,7 @@ import Kit.Atoms.Button
import Core.Render (renderHamlet)
import Text.Hamlet
index :: HtmlUrl Routes
index :: HtmlUrl Route
index = [hamlet|
$doctype 5
<html>

23
src/Kit/Templates/Post.hs Normal file
View file

@ -0,0 +1,23 @@
module Kit.Templates.Post (postHamlet, main) where
import Core.Render
import Routes
import Text.Hamlet
postHamlet :: HtmlUrl Route
postHamlet = [hamlet|
$doctype 5
<html>
<head>
<title>
\$title$
<link rel=stylesheet href=@{DefaultStylesheet}>
<meta charset=utf-8>
<body>
<h1>
\$title$
\$body$
|]
main :: IO ()
main = renderHamlet postHamlet

View file

@ -1,13 +1,16 @@
module Routes
( Routes(..)
( Route(..)
, render
) where
import Text.Hamlet
import Data.Text ( pack )
import Text.Hamlet ( Render )
data Routes = Home
data Route = Home
| DefaultStylesheet
| Post String
render :: Render Routes
render :: Render Route
render Home _ = "/"
render DefaultStylesheet _ = "/css/default.css"
render (Post postId) _ = "/posts/" <> pack postId