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:
parent
4bb7d7b140
commit
2d5e928689
9 changed files with 168 additions and 7 deletions
12
app/Main.hs
12
app/Main.hs
|
@ -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
|
||||
|
|
|
@ -23,6 +23,7 @@ library
|
|||
Css.Default
|
||||
Kit.Atoms.Button
|
||||
Kit.Pages.Index
|
||||
Kit.Templates.Post
|
||||
Routes
|
||||
other-modules:
|
||||
Paths_etienne_moqueur
|
||||
|
|
117
posts/2022-09-21-building-my-new-website-goals-and-dreams.md
Normal file
117
posts/2022-09-21-building-my-new-website-goals-and-dreams.md
Normal 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
5
posts/post
Executable file
|
@ -0,0 +1,5 @@
|
|||
#!/usr/bin/zsh
|
||||
|
||||
postName=$*
|
||||
|
||||
vim "$(date +%Y-%m-%d)-${postName// /-}.md"
|
|
@ -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 ()
|
||||
|
|
|
@ -5,7 +5,7 @@ import Routes
|
|||
import Text.Hamlet
|
||||
import Clay
|
||||
|
||||
buttonWithText :: String -> HtmlUrl Routes
|
||||
buttonWithText :: String -> HtmlUrl Route
|
||||
buttonWithText text = [hamlet|
|
||||
<button>#{text}
|
||||
|]
|
||||
|
|
|
@ -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
23
src/Kit/Templates/Post.hs
Normal 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
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue