DEV Community: Kazuki Baba

lume land code highlight setting

Kazuki Baba — Sun, 04 Sep 2022 12:38:22 +0000

lume.land is my most favorite static site generator, but I was not able to figure out how to use code_highlight plugin.

Since there was no document, I will write it here.

_config.js:

import lume from "lume/mod.ts";
import code_highlight from "lume/plugins/code_highlight.ts";

// import your favorite language
import lang_javascript from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/javascript.min.js";
import lang_bash from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/bash.min.js";

const site = lume();

// download your favorite theme
site.remoteFile(
  "_includes/css/code.css",
  "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github.min.css"
);
site.use(
  code_highlight({
    languages: {
      javascript: lang_javascript,
      bash: lang_bash,
    },
  })
);

export default site;

Because you got _includes/css/code.css, you need to load this file in style.css (which is loaded in a HTML file):

@import "css/code.css";

Lume, which is the simplest static site generator for Deno

Kazuki Baba — Thu, 13 Jan 2022 01:12:22 +0000

I tried using lume, which is the simplest static site generator for Deno. I have searched a simple static site generator, because GatsbyJS and stuff are not simple, I don't need GraphQL, ReactJS, etc. However, jekyll or Middleman are old, I want to use javascript ecosystem.

Lume is simple but new, and has necessary and sufficient features. We can use markdown, yaml, typescript, jsx, nunjucks, etc.

installation

First of all, you install deno:

brew install deno

If you use Linux/Windows(WSL), you can use Homebrew, so I recommend you to install Homebrew to any OS.

Next, you install lume:

deno run -A https://deno.land/x/lume/install.ts

And, you set up PATH environment variable in .bashrc, .zshrc and stuff:

export PATH="/Users/babakazuki/.deno/bin:$PATH"

Making a static page

First step is to make lume-example directory and lume init :

$ mkdir lume-example
$ cd lume-example 
$ lume init
Use Typescript for the configuration file? [y/N] y

How do you want to import lume?
Type a number:
1 import lume from "lume/mod.ts"
2 import lume from "https://deno.land/x/lume/mod.ts"
3 import lume from "https:/deno.land/x/lume@v1.4.2/mod.ts"
 [1] 

Do you want to import plugins?
Type the plugins you want to use separated by comma.

All available options:
- attributes https://lumeland.github.io/plugins/attributes/
- base_path https://lumeland.github.io/plugins/base_path/
- bundler https://lumeland.github.io/plugins/bundler/
- code_highlight https://lumeland.github.io/plugins/code_highlight/
- date https://lumeland.github.io/plugins/date/
- eta https://lumeland.github.io/plugins/eta/
- inline https://lumeland.github.io/plugins/inline/
- jsx https://lumeland.github.io/plugins/jsx/
- liquid https://lumeland.github.io/plugins/liquid/
- modify_urls https://lumeland.github.io/plugins/modify_urls/
- on_demand https://lumeland.github.io/plugins/on_demand/
- postcss https://lumeland.github.io/plugins/postcss/
- pug https://lumeland.github.io/plugins/pug/
- relative_urls https://lumeland.github.io/plugins/relative_urls/
- resolve_urls https://lumeland.github.io/plugins/resolve_urls/
- slugify_urls https://lumeland.github.io/plugins/slugify_urls/
- svgo https://lumeland.github.io/plugins/svgo/
- terser https://lumeland.github.io/plugins/terser/

Example: postcss, terser, base_path


Created a config file _config.ts
Do you want to configure VS Code? [y/N] y
VS Code configured

You got a _config.ts:

import lume from "lume/mod.ts";

const site = lume();

export default site;

And you got a .vscode directory, which has settings for VS Code.

Next, you want to make a index page, so you make _includes/layouts/main.njk and index.md :

$ mkdir -p _includes/layouts/
$ touch _includes/layouts/main.njk
$ touch index.md

_includes/layouts/main.njk is a layout for several pages, and index.md is a contents of the index page.

Let's edit those files.

_includes/layouts/main.njk:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <main>
      {{ content | safe }}
    </main>
  </body>
</html>

index.md:

---
title: "The first static page"
layout: layouts/main.njk
---

# The first static page

This is an example.

* foo
* bar
* baz

You can check the page by lume -s

$ lume -s
Loading config file /home/kbaba/repos/github/lume-example/_config.ts


🔥 /index.html /index.md

🍾 Site built into ./_site
No such file or directory (os error 2)

  Server started at:
  http://localhost:3000/ (local)
Warning Unable to detect your local IP address
If you're on an Ubuntu machine, try installing net-tools with 'apt install net-tools'

200 /
404 /favicon.ico
404 /favicon.ico
404 /favicon.ico
404 /favicon.ico

You access http://localhost:3000/ , you can see a built page

Setting up CSS

Lume is not able to build CSS by default, so you need to edit your _config.ts:

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site.use(postcss());

export default site;

You added the PostCSS plugin. Next, you make style files:

$ touch styles.css
$ mkdir _includes/css
$ touch _includes/css/base.css

styles.css can load by other files, it is public. _includes directory is searched for the @import. So, you make several divided css files in _includes/css directory, and you import those into styles.css

styles.css:

@import "css/base.css";

_includes/css/base.css :

body {
  background-color: antiquewhite;
}

And, you edit _includes/layouts/main.njk to add link tag in <head>:

<link rel="stylesheet" href="/styles.css">

You restart lume -s, you can see the styled page

Using images

If you want to use images by Lume, you will edit _config.ts:

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site
  .use(postcss())
  .copy("img");   // added

export default site;

This setting is meaning to copy img directory from the source to the built directory (_site). So, you make an img directory and put images into it.

$ mkdir img
$ cp /path/to/profile.jpg img/profile.jpg

And, you load the image in index.md:

---
title: The first static page
layout: layouts/main.njk
---

# The first static page

This is an example.

* foo
* bar
* baz

![profile](/img/profile.jpg)

You restart lume -s

ClojureScript + Firebase

Kazuki Baba — Thu, 31 Dec 2020 09:39:54 +0000

ClojureScript + Firebase

I'll talk about ClojureScript and Firebase. I use next libraries:

shadow-cljs ... a build tool
reagent ... React wrapper
firebase npm library

Setup a project

First of all, I generate a shadow-cljs project:

npx create-cljs-project cljs-firebase

Its results:

cd cljs-firebase
tree -a -I node_modules .
.
├── .gitignore
├── package-lock.json
├── package.json
├── shadow-cljs.edn
└── src
    ├── main
    └── test

Next, I edit a shadow-cljs.edn:

;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies
 [[binaryage/devtools "1.0.2"]
  [reagent "1.0.0"]]

 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"

        :modules
        {:main
         {:entries [cljs-firebase.core]}}

        :devtools
        {:http-root "public"
         :http-port 8080
         :preloads [devtools.preload]}

        :release
        {:output-dir "dist/js"}}}}

And, I edit a package.json:

{
  "name": "cljs-firebase",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "shadow-cljs watch app"
  },
  "devDependencies": {
    "shadow-cljs": "2.11.11"
  },
  "dependencies": {}
}

OK. I finished to set up a shadow-cljs, so I run the next command:

$ npm run dev

> cljs-firebase@0.0.1 dev /home/kbaba/repos/cljs-firebase
> shadow-cljs watch app

shadow-cljs - config: /home/kbaba/repos/cljs-firebase/shadow-cljs.edn
shadow-cljs - updating dependencies
Retrieving thheller/shadow-cljs/2.11.11/shadow-cljs-2.11.11.pom from https://repo.clojars.org/
Retrieving reagent/reagent/1.0.0/reagent-1.0.0.pom from https://repo.clojars.org/
Retrieving cljsjs/react/17.0.1-0/react-17.0.1-0.pom from https://repo.clojars.org/
Retrieving cljsjs/react-dom/17.0.1-0/react-dom-17.0.1-0.pom from https://repo.clojars.org/
Retrieving cljsjs/react-dom-server/17.0.1-0/react-dom-server-17.0.1-0.pom from https://repo.clojars.org/
Retrieving cljsjs/react-dom-server/17.0.1-0/react-dom-server-17.0.1-0.jar from https://repo.clojars.org/
Retrieving thheller/shadow-cljs/2.11.11/shadow-cljs-2.11.11-aot.jar from https://repo.clojars.org/
Retrieving reagent/reagent/1.0.0/reagent-1.0.0.jar from https://repo.clojars.org/Retrieving
 cljsjs/react-dom/17.0.1-0/react-dom-17.0.1-0.jar from https://repo.clojars.org/
Retrieving cljsjs/react/17.0.1-0/react-17.0.1-0.jar from https://repo.clojars.org/
shadow-cljs - dependencies updated
running: npm install --save --save-exact react@17.0.1 react-dom@17.0.1
+ react@17.0.1
+ react-dom@17.0.1
added 5 packages from 2 contributors and audited 104 packages in 2.176s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.11.11 running at http://localhost:9630
shadow-cljs - nREPL server started on port 27730
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:app] Build failure:
The required namespace "cljs-firebase.core" is not available.

The command setups dependencies, builds the system and runs a server at http://localhost:8080. But, I didn't write any code, so the build was failure now. I will fix those errors.

I type ctrl+c to finish npm run dev and run the next commands:

$ mkdir src/main/cljs-firebase
$ touch src/main/cljs-firebase/core.cljs

I edit src/main/cljs-firebase/core.cljs:

(ns cljs-firebase.core
  (:require [reagent.dom :as rdom]))

(defn view []
  [:div "hello world"])

(defn mount-root []
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render view root-el)))

(defn ^:export init []
  (mount-root))

I rerun npm run dev

$ npm run dev

> cljs-firebase@0.0.1 dev /home/kbaba/repos/cljs-firebase
> shadow-cljs watch app

shadow-cljs - config: /home/kbaba/repos/cljs-firebase/shadow-cljs.edn
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.11.11 running at http://localhost:9630
shadow-cljs - nREPL server started on port 38281
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:app] Build completed. (173 files, 0 compiled, 0 warnings, 7.39s)

And, I open a browser and access http://localhost:8080

Initialize Firebase

I install firebase

npm install --save firebase

And, I create a next file:

; src/main/cljs_firebase/firebase/init.cljs
(ns cljs-firebase.firebase.init
  (:require ["@firebase/app" :refer (firebase)]))

(defn initialize-firebase []
  (if (zero? (count (.-apps firebase)))
    (-> firebase
        (.initializeApp
         #js {:apiKey "..."
              :authDomain "..."
              :databaseURL "..."
              :projectId "..."
              :storageBucket "..."
              :messagingSenderId "..."
              :appId "..."}))
    (.-app firebase)))

We can use npm packages by using "" at :require, so I wrote ["@firebase/app" :refer (firebase)]. And, I initialize Firebase by config in Firebase SDK snippet.

I edit src/main/cljs_firebase/core.cljs:

 (ns cljs-firebase.core
-  (:require [reagent.dom :as rdom]))
+  (:require [reagent.dom :as rdom]
+            [cljs-firebase.firebase.init :refer [initialize-firebase]]))

 (defn view []
   [:div "hello world"])
@@ -10,4 +11,5 @@
     (rdom/render view root-el)))

 (defn ^:export init []
+  (initialize-firebase)
   (mount-root))

Next, I will connect to Firestore.

Connect to Firestore

I make a next file:

; src/main/word_penne/firebase/firestore.cljs
(ns cljs-firebase.firebase.firestore
  (:require ["@firebase/app" :refer (firebase)]
            ["@firebase/firestore"]))

(defn firestore []
  (.firestore firebase))

And I edit src/main/cljs_firebase/core.cljs

(ns cljs-firebase.core
  (:require [reagent.dom :as rdom]
            [reagent.core :as r]
            [cljs-firebase.firebase.init :refer [initialize-firebase]]
            [cljs-firebase.firebase.firestore :refer [firestore]]))

(def todos (r/atom [{:task "aaa"}]))

(defn set-todos [val]
  (reset! todos val))

(defn load-todos-from-firestore []
  (-> (firestore)
      (.collection "todo")
      (.get)
      (.then
       (fn [snapshot]
         (let [result (r/atom [])]
           (.forEach snapshot
                     (fn [doc]
                       (swap! result conj
                              (conj {:uid (.-id doc)}
                                    (js->clj (.data doc) :keywordize-keys true)))))
           (set-todos @result))))))

(defn view []
  [:div "hello world"
   [:ul
    (js/console.log @todos)
    (for [todo @todos]
      [:li (:task todo)])]])

(defn mount-root []
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render view root-el)))

(defn ^:export init []
  (initialize-firebase)
  (load-todos-from-firestore)
  (mount-root))

conclusions

I connected to Firebase and got data. Because I used npm packages directly, the system is easy to maintain. And, we can use Firebase Authentication, Functions, etc.
I made a system by using those and Reagent, re-frame, stylefy, etc.