├── .github └── workflows │ └── clojure.yml ├── .gitignore ├── .yarnrc ├── LICENSE ├── README.md ├── deps.edn ├── dev.cljs.edn ├── figwheel-main.edn ├── img └── sample.png ├── package.json ├── resources ├── logback.xml └── public │ ├── .nojekyll │ ├── css │ ├── .gitkeep │ └── main.css │ ├── img │ └── favicon.ico │ └── index.html ├── src └── reveal │ ├── core.cljs │ └── slides.cljs └── yarn.lock /.github/workflows/clojure.yml: -------------------------------------------------------------------------------- 1 | name: Clojure CI 2 | on: [push] 3 | 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v4 9 | - uses: actions/setup-java@v3 10 | with: 11 | distribution: "temurin" 12 | java-version: "21" 13 | - name: Setup Clojure 14 | uses: DeLaGuardo/setup-clojure@3.4 15 | with: 16 | cli: 1.10.1.693 17 | 18 | - name: Build Project 19 | run: clojure -A:fig/simple 20 | 21 | lint: 22 | runs-on: ubuntu-latest 23 | steps: 24 | - uses: actions/checkout@v4 25 | - uses: DeLaGuardo/clojure-lint-action@master 26 | continue-on-error: true 27 | with: 28 | clj-kondo-args: --lint src 29 | github_token: ${{ secrets.GITHUB_TOKEN }} 30 | 31 | deploy: 32 | runs-on: ubuntu-latest 33 | steps: 34 | - name: Checkout 🛎️ 35 | uses: actions/checkout@v2 36 | with: 37 | persist-credentials: false 38 | - uses: actions/setup-java@v3 39 | with: 40 | distribution: "temurin" 41 | java-version: "21" 42 | - name: Setup Clojure 43 | uses: DeLaGuardo/setup-clojure@3.4 44 | with: 45 | cli: 1.10.1.693 46 | - uses: actions/setup-node@v3 47 | with: 48 | node-version: "20" 49 | cache: "yarn" 50 | 51 | - name: Run install 52 | uses: borales/actions-yarn@v4 53 | with: 54 | cmd: install 55 | 56 | - name: Build Project 57 | run: yarn build 58 | - name: Deploy 🚀 59 | uses: JamesIves/github-pages-deploy-action@releases/v4 60 | with: 61 | folder: resources/public # The folder the action should deploy. 62 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | .idea 3 | .lsp/ 4 | /.DS_Store 5 | .DS_Store 6 | /classes 7 | /lib 8 | /target 9 | closure 10 | /core.js 11 | /coreadvanced.js 12 | /coresimple.js 13 | /out 14 | *out 15 | .lein* 16 | /pom.xml 17 | .repl* 18 | *.swp 19 | *.zip 20 | clojurescript_release_* 21 | closure-release-* 22 | .lein-repl-history 23 | .nrepl-port 24 | .nrepl-repl-history 25 | builds 26 | .cljs* 27 | node_modules 28 | nashorn_code_cache 29 | src/main/cljs/cljs/core.aot.js 30 | src/main/cljs/cljs/core.aot.js.map 31 | src/main/cljs/cljs/core.cljs.cache.aot.edn 32 | figwheel_server.log 33 | *.iml 34 | node_modules 35 | compiled 36 | .sass-cache 37 | .#* 38 | *.log 39 | .cpcache/ 40 | .cache/ 41 | .calva/ 42 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | --modules-folder resources/public/node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 -- today Christian Meter and Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reveal-cljs 2 | 3 | ![Clojure CI](https://github.com/n2o/reveal-cljs/workflows/Clojure%20CI/badge.svg) 4 | [![https://github.com/n2o/reveal-cljs/releases](https://img.shields.io/github/release/n2o/reveal-cljs.svg)](https://github.com/n2o/reveal-cljs/releases) 5 | [![https://github.com/n2o/reveal-cljs/blob/master/LICENSE](https://img.shields.io/github/license/n2o/reveal-cljs.svg)](https://github.com/n2o/reveal-cljs/blob/master/LICENSE) 6 | 7 | Inspired by the great work on [reveal.js](https://github.com/hakimel/reveal.js/) 8 | and the dislike towards JavaScript, this small project was created to provide a 9 | simple wrapper in ClojureScript to create awesome presentations. All features 10 | from reveal.js can be used. Check the 11 | [official documentation of reveal.js](https://revealjs.com/) for more 12 | information about it. 13 | 14 | 🌅 Find a demo of reveal-cljs on this page: https://n2o.github.io/reveal-cljs/ 15 | 16 | It uses Hiccup-syntax for templates, which makes it very easy to create slides. 17 | 18 | Start the project with `yarn dev` and see your live 19 | slides. Start _speaker-mode_ by pressing s in the slides in your 20 | browser. 21 | 22 | [![sample.png](img/sample.png)](https://n2o.github.io/reveal-cljs/) 23 | 24 | ## Requirements 25 | 26 | Tested with AdoptOpenJDK 16, see CI Build Job for more details in the 27 | environment. 28 | 29 | A JDK, [Clojure's CLI Tools](https://clojure.org/guides/getting_started) and 30 | [yarn](https://yarnpkg.com/en/) are necessary to 31 | build and run the project. 32 | 33 | ## Usage 34 | 35 | Set your desired options in 36 | [core.cljs](https://github.com/n2o/reveal-cljs/blob/master/src/reveal/core.cljs#L10). 37 | More options can be found 38 | [here](https://github.com/hakimel/reveal.js#configuration). 39 | 40 | Create your slides in 41 | [slides.cljs](https://github.com/n2o/reveal-cljs/blob/master/src/reveal/slides.cljs) 42 | and add them to the list in the function `all`. 43 | 44 | Then start the development server as seen in the Setup section. 45 | 46 | ## Installation & Setup 47 | 48 | Everything in one command: 49 | 50 | yarn install 51 | 52 | To get an interactive development environment, run: 53 | 54 | yarn dev 55 | 56 | Figwheel opens your browser at [localhost:9500](http://localhost:9500/). This 57 | will auto compile and send all changes to the browser without the need to 58 | reload. 59 | 60 | Open Speaker Notes by pressing s. 61 | 62 | ## Compile and Prepare for Deployment 63 | 64 | You can compile the cljs-Code and put the assets together to make your 65 | presentation ready to be deployed on a webserver (e.g. on GitHub Pages). 66 | By following these steps, you can publish the presentation on a regular 67 | server, which only needs to serve HTML, CSS and JavaScript Files. This 68 | is all put into one task: 69 | 70 | yarn build 71 | 72 | Follow the steps on the terminal to find your prepared presentation. 73 | 74 | ## Software 75 | 76 | This project uses external packages, which can be removed by you, since most 77 | of them are not essential: 78 | 79 | - [reveal.js](https://github.com/hakimel/reveal.js) ([MIT License](https://github.com/hakimel/reveal.js/blob/master/LICENSE)) 80 | - [Bootstrap Grid](https://github.com/twbs/bootstrap) ([MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE)) 81 | - [Font-Awesome](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free) ([License](https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/%40fortawesome/fontawesome-free/LICENSE.txt)) 82 | - [Clojure](https://clojure.org/) ([EPL-1.0 License](https://opensource.org/licenses/eclipse-1.0.php)) 83 | 84 | ## License 85 | 86 | Copyright © 2016 – today Christian Meter and Contributors 87 | 88 | Distributed under the [MIT](LICENSE) License. 89 | -------------------------------------------------------------------------------- /deps.edn: -------------------------------------------------------------------------------- 1 | {:deps {org.clojure/clojure {:mvn/version "1.12.0"} 2 | org.clojure/clojurescript {:mvn/version "1.11.132"} 3 | org.slf4j/slf4j-api {:mvn/version "2.0.16"} 4 | ch.qos.logback/logback-classic {:mvn/version "1.5.12"} 5 | com.bhauman/figwheel-main {:mvn/version "0.2.18"} 6 | com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"} 7 | org.clojure/core.async {:mvn/version "1.6.681"} 8 | hiccups/hiccups {:mvn/version "0.3.0"}} 9 | :paths ["src" "target" "resources"] 10 | :aliases {:fig {:main-opts ["-m" "figwheel.main" "-b" "dev" "--repl"]} 11 | :fig/simple {:main-opts ["-m" "figwheel.main" "-O" "simple" "-bo" "dev"]} 12 | :fig/min {:main-opts ["-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]} 13 | :outdated {:extra-deps {olical/depot {:mvn/version "2.3.0"}} 14 | :main-opts ["-m" "depot.outdated.main"]}}} 15 | -------------------------------------------------------------------------------- /dev.cljs.edn: -------------------------------------------------------------------------------- 1 | ;; Dev-Build 2 | {:main reveal.core} 3 | -------------------------------------------------------------------------------- /figwheel-main.edn: -------------------------------------------------------------------------------- 1 | ;; Contains figwheel-configuration for all builds 2 | {:css-dirs ["resources/public/css"]} 3 | -------------------------------------------------------------------------------- /img/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/n2o/reveal-cljs/644d4253d96a11b8a631bbc98256a85c543c1f8e/img/sample.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-cljs", 3 | "version": "1.6.0", 4 | "description": "A ClojureScript wrapper for reveal.js", 5 | "main": "reveal.core", 6 | "scripts": { 7 | "dev": "clj -M:fig", 8 | "clean": "rm -rf target/ resources/public/cljs-out resources/public/node_modules", 9 | "build": "mkdir -p resources/public/cljs-out && clojure -M:fig/simple && cp target/public/cljs-out/dev-main.js resources/public/cljs-out", 10 | "clj:outdated": "clojure -M:outdated" 11 | }, 12 | "dependencies": { 13 | "@fortawesome/fontawesome-free": "^6.6.0", 14 | "bootstrap-4-grid": "^3.4.0", 15 | "reveal.js": "hakimel/reveal.js#5.1.0" 16 | }, 17 | "devDependencies": {}, 18 | "repository": { 19 | "type": "git", 20 | "url": "git@github.com:n2o/reveal-cljs.git" 21 | }, 22 | "author": "Christian Meter", 23 | "license": "MIT" 24 | } 25 | -------------------------------------------------------------------------------- /resources/logback.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | %d{HH:mm:ss.SSS} %-5level [%thread] %logger{36} - %msg%n 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /resources/public/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/n2o/reveal-cljs/644d4253d96a11b8a631bbc98256a85c543c1f8e/resources/public/.nojekyll -------------------------------------------------------------------------------- /resources/public/css/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/n2o/reveal-cljs/644d4253d96a11b8a631bbc98256a85c543c1f8e/resources/public/css/.gitkeep -------------------------------------------------------------------------------- /resources/public/css/main.css: -------------------------------------------------------------------------------- 1 | .statement { 2 | color: #ffc107; 3 | } 4 | 5 | .issue { 6 | color: #546e7a; 7 | } 8 | 9 | .pro { 10 | color: #81c784; 11 | } 12 | 13 | .con { 14 | color: #f44336; 15 | } 16 | 17 | .mr { 18 | margin-right: 0.5em; 19 | } -------------------------------------------------------------------------------- /resources/public/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/n2o/reveal-cljs/644d4253d96a11b8a631bbc98256a85c543c1f8e/resources/public/img/favicon.ico -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | reveal-cljs 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/reveal/core.cljs: -------------------------------------------------------------------------------- 1 | (ns reveal.core 2 | (:require-macros [hiccups.core :refer [html]]) 3 | (:require [clojure.string :refer [join]] 4 | [goog.dom :as gdom] 5 | [hiccups.runtime] 6 | [reveal.slides :as slides])) 7 | 8 | 9 | ;; When changing comments, you manually need to refresh your browser 10 | (def options (clj->js {:hash true 11 | :controls true 12 | :controlsTutorial true 13 | :progress false 14 | :transition "fade" ; e.g. none/fade/slide/convex/concave/zoom 15 | :slideNumber "c" 16 | :plugins [js/RevealNotes]})) 17 | 18 | 19 | ;; ----------------------------------------------------------------------------- 20 | ;; You do not need to change anything below this comment 21 | 22 | (defn convert 23 | "Get list of all slides and convert them to html strings." 24 | [] 25 | (let [slides (slides/all)] 26 | (join (map #(html %) slides)))) 27 | 28 | (defn main 29 | "Get all slides, set them as innerHTML and reinitialize Reveal.js" 30 | [] 31 | (set! (.. (gdom/getElement "slides") -innerHTML) (convert)) 32 | (let [state (and (.isReady js/Reveal) (.getState js/Reveal))] 33 | (-> (.initialize js/Reveal options) 34 | (.then #(when state (.setState js/Reveal state))) 35 | (.then #(if (.isSpeakerNotes js/Reveal) 36 | ;; disable figwheel connection for speaker notes 37 | (when (.hasOwnProperty js/window "figwheel") 38 | (set! (.-connect js/figwheel.repl) (constantly "Disabled for speaker notes"))) 39 | 40 | ;; trigger an event which will update the speaker notes 41 | (.dispatchEvent js/Reveal (clj->js {:type "resumed"})))) 42 | (.then (fn [] "call your own init code from here"))))) 43 | (main) 44 | -------------------------------------------------------------------------------- /src/reveal/slides.cljs: -------------------------------------------------------------------------------- 1 | (ns reveal.slides) 2 | 3 | (def slide-1 4 | [:section 5 | [:h1 "reveal-cljs"] 6 | [:h5 "Create awesome Web-Presentations with ClojureScript"] 7 | [:p "Based on " 8 | [:a {:href "http://lab.hakim.se/reveal-js/"} "reveal.js"]] 9 | [:aside.notes 10 | [:ul [:li "Some notes"]]]]) 11 | 12 | (def ^:private argument 13 | [:div.argument 14 | [:i.mr.statement.fas.fa-circle {:data-id "premise"}] 15 | [:i.mr.pro.fas.fa-long-arrow-alt-right {:data-id "relation"}] 16 | [:i.statement.fas.fa-circle {:data-id "conclusion"}]]) 17 | 18 | (def slide-auto-animate 19 | [:section 20 | [:section {:data-auto-animate "data-auto-animate"} 21 | [:h2 "Auto Animate"] 22 | [:p "Automatically animate CSS / SVGs on a slide" 23 | [:small "Press " [:code "space"] " for next animation step"]] 24 | (last argument)] 25 | [:section {:data-auto-animate "data-auto-animate"} 26 | argument] 27 | [:section {:data-auto-animate "data-auto-animate"} 28 | [:i.statement.fas.fa-circle {:data-id "conclusion"}] 29 | [:div.row 30 | [:div.offset-4.col-2 31 | [:i.relation.pro.fas.fa-long-arrow-alt-right {:data-id "relation" :data-fa-transform "rotate--40"}]] 32 | [:div.col-2 33 | [:i.relation.con.fas.fa-long-arrow-alt-left {:data-id "relation-con" :data-fa-transform "rotate-40"}]]] 34 | [:div.row 35 | [:div.offset-3.col-2 36 | [:i.statement.fas.fa-circle {:data-id "premise"}]] 37 | [:div.offset-2.col-2 38 | [:i.statement.fas.fa-circle {:data-id "premise-con"}]]]] 39 | [:section {:data-auto-animate "data-auto-animate"} 40 | [:div.row 41 | [:div.col-12 42 | [:i.issue.fas.fa-circle {:data-id "issue"}]]] 43 | [:div.row 44 | [:div.col-12 45 | [:i.relation.issue.fas.fa-long-arrow-alt-up {:data-id "relation-position"}]]] 46 | [:div.row 47 | [:div.col-12 48 | [:i.statement.fas.fa-circle {:data-id "conclusion"}]]] 49 | [:div.row 50 | [:div.offset-4.col-2 51 | [:i.relation.pro.fas.fa-long-arrow-alt-right {:data-id "relation" :data-fa-transform "rotate--40"}]] 52 | [:div.col-2 53 | [:i.relation.con.fas.fa-long-arrow-alt-left {:data-id "relation-con" :data-fa-transform "rotate-40"}]]] 54 | [:div.row 55 | [:div.offset-3.col-2 56 | [:i.statement.fas.fa-circle {:data-id "premise"}]] 57 | [:div.offset-2.col-2 58 | [:i.statement.fas.fa-circle {:data-id "premise-con"}]]]]]) 59 | 60 | (def slide-2 61 | [:section 62 | [:section 63 | [:h2 "Vertical Slides"] 64 | [:p "Generate your slides " 65 | [:a {:href "https://github.com/teropa/hiccups"} "with Hiccups"]]] 66 | [:section 67 | [:h2 "Tutorial"] 68 | [:p "Watch the full tutorial of reveal.js " 69 | [:a {:href "https://revealjs.com"} "on revealjs.com"]]]]) 70 | 71 | 72 | ;; ----------------------------------------------------------------------------- 73 | 74 | (defn all 75 | "Add here all slides you want to see in your presentation." 76 | [] 77 | [slide-1 78 | slide-auto-animate 79 | slide-2]) 80 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@fortawesome/fontawesome-free@^6.6.0": 6 | version "6.6.0" 7 | resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz#0e984f0f2344ee513c185d87d77defac4c0c8224" 8 | integrity sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow== 9 | 10 | bootstrap-4-grid@^3.4.0: 11 | version "3.4.0" 12 | resolved "https://registry.yarnpkg.com/bootstrap-4-grid/-/bootstrap-4-grid-3.4.0.tgz#62769a992484b9338a0e7219842c90aa70e62f54" 13 | integrity sha512-0bemukOEqWgO3Fd1SPFd2yUTEuqLBsPOfX7haNTw4iAbZAqW8doSbqu7VBo1sKBP73mAJMLquIgGCRVBPTDZ8A== 14 | 15 | reveal.js@hakimel/reveal.js#5.1.0: 16 | version "5.1.0" 17 | resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/6b8c64ffa8fddd9ed4bcd92bcfd37b67ba410244" 18 | --------------------------------------------------------------------------------