Coruscation.net
HOME
ABOUT
PROJECTS

Demonstration

Coding
Pub.Oct 13, 2024Upd.Jan 03, 2026

Code Blocks

Inline Code Block

Text around (uix.dom/create-root (js/document.getElementById "root")) the inline code block.

Code Blocks

  • Java
public static int fib(int n) { 
    if (n <= 1) {
        return n;
    }
    return fib(n - 1) + fib(n - 2);
}
  • Clojure
(defui app [{:keys [initial-route]}]
  (let [[show-header? set-header!]
        (use-state
         (some #(= % initial-route)
               ["/" "/home.html" "/template.html"
                "/index.html"]))]
    (context-binding [*header-context* [show-header? set-header!]]
      ($ router/router {:routes routes :initial-route initial-route}
         ($ main {})))))
  • Emacs Lisp
(save-excursion                 
    (goto-char (point-min))    

(with-current-buffer (current-buffer)
  (let ((ids (org-map-entries (lambda ()
                                (org-entry-get nil "custom_id")))))
    (org-map-entries (lambda ()
                       (when (not (org-entry-get nil "custom_id"))
                         (let* ((candidate-id (concat "blog_" (url-encode-url (nth 4 (org-heading-components)))))
                                (duplicates (cl-count candidate-id ids)))
                           (org-entry-put nil "custom_id" (concat candidate-id
                                                                  (prin1-to-string (+ 1 duplicates))))))
                       (setq ids (cons (org-entry-get nil "custom_id")
                                       ids))))))

H2 Sample Text

H3 Sample Text Sample Text

Some text in between

H4 Sample Text Sample Text

Some text in between

H5 Sample Text Sample Text

Some text in between

Common Elements

  • italic
  • bold
  • underline
  • verbatim
  • code
  • strike-through
  • Horizontal Rule
  • code

Other Elements

Table

NamePhoneAge
Peter123417
Anna432125

Reference

Everything should be made as simple as possible, but not any simpler – Albert Einstein

Unordered List

  • Item 1
  • Item 2
    • Level 2
      • Level 3
        • Level 4
      • Another Mark
  • Item 3
Ordered List
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Description List

Name
Description
Nested
Nested Description
Name
Description

Sample Image

1.jpg
Figure 1: This is an image
1.webp
photo-1746717410283-f4017128c38f?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=natalia-grela-sFINbLpdfqw-unsplash.jpg
Figure 2: sample high resolution vertical image
photo-1653384236127-c61634419fe0?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=johann-walter-bantz-Bp7hIvZnj9I-unsplash.jpg
Figure 3: sample high resolution horizontal iamge

Inline CLJC Code (OrgX)

You can embedded Clojure code inside a blog file using #+begin_orgx blocks.

Enable this feature first in the org metadata: 

#+ORGX: true

With the following snippet embedded in a org file. 

#+begin_orgx
  ;; You can style it using tailwindcss
  ($ :button {:class "bg-sky-600 text-neutral-50 py-1 px-2 rounded-lg" :on-click (fn [& _] #?(:cljs (js/alert "clicked!")))} "Click Me")
#+end_orgx

We can get a clickable button in the generated page:

Since the code is in CLJC, this feature works very well with static page generation / server side rendering. However, you must wrap plaform specified code in read macros like we do in a normal CLJC file.

We can access the blog page's meta data using post-props variable. 

#+begin_orgx
($ :div {:class "bg-stone-50 pl-4 py-2 border-l-3 border-sky-500"} (str (keys post-props)))
#+end_orgx
(:blog/orgx :blog/tags :blog/unlisted :blog/title :blog/show-toc? :blog/file-path :blog/author :blog/email :blog/description :blog/id :blog/category :blog/language :blog/published-date :blog/content :blog/orgx-require :blog/modified-date)

Inline Clojure Snippet

We can @@orgx:($ :span.bg-cyan-50.mt-2.pl-2.py-1.border-l-3.border-sky-500 "also have inline Clojure snippets")@@ like this.

Will be render as

We can also have inline Clojure snippets like this.

Using Other OrgX files as components

Like with MDX, we can use other orgx files as components.

First we make a note.org file with the following as contents, note the #+UNLISTED property. 

#+ORGX: true
#+UNLISTED: true
#+begin_orgx
($ :div
    ($ :div {:class "bg-stone-50 pl-4 py-2 border-l-3 border-rose-500"}
      ($ :div {:class "font-semibold mb-1 text-neutral-600"} "TIP")
      ($ :div (:children post-props))))
#+end_orgx

When we want to use this OrgX file as a components, we need to add a require declaration first. 

#+ORGX_REQUIRE: [[orgx.note :as note]]

Then we could use it like this 

#+begin_orgx
($ note/component  "This is a note")
#+end_orgx

It will be rendered as:

TIP
This is a note

Builtin Components

Simple Remarks

It has several builtin components, notebly, the following snippet: 

#+begin_orgx
($ info "This is an info")
($ note "This is a note")
($ warn "This is a warn")
($ error "This is an error")
#+end_orgx

Will be rendered as:

Info
This is an info
Note
This is a note
Warning
This is a warn
Error
This is an error

Tabs

#+attr_orgx_defui: true
#+begin_orgx_code_clj
#+begin_src clojure
(defui tabs [{:keys [tab-list default-table class]}]
  (let [[selected-tab set-selected-tab!] (use-state (or default-table
                                                        (:name (first tab-list))))]
    ($ :div.my-4.relative.border-sky-300.border-l-2.border-l-neutral-100 {:class class}
       ($ :div.my-0.flex.relative.bg-neutral-100
          (map (fn [{:keys [name]}]
                 ($ :button.font-medium.text-neutral-700.bg-neutral-50.py-1.px-2.border-t-2.border-neutral-50.min-w-28.bg-neutral-50.border-t-neutral-100
                    {:key name
                     :class (when (= name selected-tab)
                              " text-sky-800 border-sky-400 bg-sky-100 border-t-sky-400")
                     :on-click (fn []
                                 #?(:cljs
                                    (set-selected-tab! name)))}
                    name))
               tab-list))
       ($ :div.my-0.bg-neutral-50.overflow-hidden.px-2.h-full
          (:content (first (filter (fn [{:keys [name]}]
                                     (= name selected-tab))
                                   tab-list)))))))

#+end_src
#+end_orgx_code_clj

#+attr_orgx_defui: true
#+begin_orgx_code_org
#+begin_example
Well we can't display the contents recurisvely
#+end_example
#+end_orgx_code_org


#+begin_orgx
($ tabs {:tab-list [{:name "tab_demo.org" :content ($ code_org)} {:name "tabs.clj" :content ($ code_clj)}]})
#+end_orgx

Split Layout

Split layout lets you show two things side by side: 

#+attr_orgx_defui: true
#+begin_orgx_split_1
#+begin_src clojure
  ($ :button {:class "bg-sky-600 text-neutral-50 py-1 px-2 rounded-lg"
              :on-click (fn [& _]
                          #?(:cljs (js/alert "clicked!")))}
     "Click Me")
#+end_src
#+end_orgx_split_1

#+attr_orgx_defui: true
#+begin_orgx_split_2
#+begin_orgx
  ($ :button {:class "bg-sky-600 text-neutral-50 py-1 px-2 rounded-lg"
              :on-click (fn [& _]
                          #?(:cljs (js/alert "clicked!")))}
     "Click Me")
#+end_orgx
#+end_orgx_split_2

#+begin_orgx
($ split-layout
($ tabs {:tab-list [{:name "button" :content ($ split_1)}]})
($ tabs {:tab-list [{:name "showcase" :content ($ split_2)}]}))
#+end_orgx

Will be rendered as: 

($ :button {:class "bg-sky-600 text-neutral-50 py-1 px-2 rounded-lg"
            :on-click (fn [& _]
                        #?(:cljs (js/alert "clicked!")))}
   "Click Me")

Showcase

Showcase is a simple wrapper over split-layout. 

#+begin_orgx
($ showcase
  ($ tabs {:tab-list [{:name "button" :content ($ split_1)}]})
  ($ split_2))
#+end_orgx