Create a Clojurebridge London website
This section is new, so feedback is appreciated
We have a very simple website for ClojureBridge London and we would like to know how to make it easier to use.
We would also like to have a website create with Clojure or preferably ClojureScript, so we can host the website on GitHub pages.
An example ClojureScript website using Bootstrap CSS library
Clojure Study Group project contains examples of code you can include to create your ClojureScript website
Create a ClojureScript project
Create a ClojureScript website for ClojureBridge London
Create a project using the figwheel template, adding reagent library.
lein new figwheel clojurebridge-website -- --reagent
This will create a project with a working web page (usually described as a single page app).
Add Bootstrap CSS library
Bootstrap is a simple way to structure and make your website more appealing, using a wide range of CSS styles available.
Add Bootstrap to project web page
Edit the resources/public/index.html
file in your project
Add the following line of code inside the <head>
tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
See the Clojure study group index.html file for an example
The Bootstrap Introduction documentation includes examples of layouts and component styles you can include in your website.
Adding sections to the website
Create a function for each section of the website you want to add.
Reagent examples
Introduction to Reagent has many simple examples of functions you can include in the website
Guide to Reagent has even more examples
Create a banner heading using Bootstrap jumbotron style
(defn website-title []
[:div {:class "jumbotron practicalli-jumbotron"}
[:h1 (get-in @app-state [:website :title])]
[:h4 (get-in @app-state [:website :description])]])
Writing html in Clojure with hiccup
Rather than write <div> </div>
, <h1> </h1>
, <p> </p>
pairs of tags in html, we define our content using a syntax called hiccup.
A vector, []
is used to hold the name of the html tag, represented by a keyword such as :div
Defining our content in this way makes it easier to generate and transform using Clojure, so you can generate structure and content dynamically too.