Skip to content

Instantly share code, notes, and snippets.

@gkmngrgn
Last active June 29, 2020 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gkmngrgn/5ec1ae269fc5e3391c7e6fb7a88738d8 to your computer and use it in GitHub Desktop.
Save gkmngrgn/5ec1ae269fc5e3391c7e6fb7a88738d8 to your computer and use it in GitHub Desktop.
HTML & CSS Backend with Lisp
;;; I wrote this snippet after I read this article:
;;; https://blog.cloudflare.com/the-languages-which-almost-became-css/
;;;
;;; The question is, what happens if I want to use LISP for coding CSS, HTML,
;;; and backend-side (render the template and publish it in a server)? Is it
;;; possible to keep the code simple, and readable or is it waste of time?
;;;
;;; In the code, there's no server implementation because I need a Linux to test
;;; it. That would be easy to do that with 'woo.
;;;
;;; ~ Gökmen Görgen
;;; IMPORT SECTION
(ql:quickload 'cl-css)
(ql:quickload 'macro-html)
(ql:quickload 'local-time)
(ql:quickload 'make-hash)
(defpackage my-html.main-page
(:use :cl :make-hash)
(:export :content))
(in-package :my-html.main-page)
(rename-package :macro-html :html)
(rename-package :cl-css :css)
(named-readtables:in-readtable html:syntax)
;;; HELPER FUNCTIONS
(defun today ()
(local-time:format-timestring nil
(local-time:now)
:format '(:day "." :month "." :year)))
;;; STYLES
(defun css-main ()
(css:css '(("body" :margin 20px
:padding 0px)
("body h1.title" :font-size 48px
:margin-bottom 0px)
("body p.hero" :color "#444"
:font-size 24px))))
;;; PARTIAL HTML TEMPLATES
(defun add-title (title)
(html:h1 [:class "title"]
title))
(defun add-quote (author quote)
(html:p [:class "hero"]
quote
(html:br)
"~ " author))
(defun html-header (&key title)
(html:head
(html:meta :name "charset"
:value "utf-8")
(html:style (css-main))
(html:title title)))
(defun html-body (&key author quote)
(html:body
(add-title (format nil "Quote of the day (~a)" (today)))
(add-quote author quote)))
;;; EXPORTS
(defun content (context-data)
(html:html-doctype)
(html:html
(html-header :title (gethash 'title context-data))
(html-body :author (gethash 'author context-data)
:quote (gethash 'quote context-data))))
;;; TEST
(let ((context-data '(title "Quotes"
author "Frederick P. Brooks"
quote "Good judgement comes from experience, and experience comes from bad judgement.")))
(content (make-hash :size 3
:test 'eq
:initial-contents context-data)))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment