diff --git a/.github/workflows/clojure.yml b/.github/workflows/clojure.yml index 29fe36a2..e230d566 100644 --- a/.github/workflows/clojure.yml +++ b/.github/workflows/clojure.yml @@ -1,5 +1,4 @@ name: Clojure CI - on: [push] jobs: @@ -9,7 +8,7 @@ jobs: - uses: actions/checkout@v1 - uses: actions/setup-java@v1 with: - java-version: '13' + java-version: '14' - name: Setup Clojure uses: DeLaGuardo/setup-clojure@2.0 with: @@ -25,4 +24,31 @@ jobs: continue-on-error: true with: clj-kondo-args: --lint src - github_token: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file + github_token: ${{ secrets.GITHUB_TOKEN }} + + deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v2 + with: + persist-credentials: false + - uses: actions/setup-java@v1 + with: + java-version: '14' + - name: Setup Clojure + uses: DeLaGuardo/setup-clojure@2.0 + with: + tools-deps: '1.10.1.469' + - uses: actions/setup-node@v1 + with: + node-version: '12' + - name: Build Project + run: | + make web + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@releases/v3 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BRANCH: gh-pages # The branch the action should deploy to. + FOLDER: resources/public # The folder the action should deploy. \ No newline at end of file diff --git a/README.md b/README.md index 9051278a..3c4b4950 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ # reveal-cljs +![Clojure CI](https://github.com/n2o/reveal-cljs/workflows/Clojure%20CI/badge.svg) [![https://github.com/n2o/reveal-cljs/releases](https://img.shields.io/github/release/n2o/reveal-cljs.svg)](https://github.com/n2o/reveal-cljs/releases) [![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) Inspired by the great work on [reveal.js](https://github.com/hakimel/reveal.js/) and the dislike towards JavaScript, this small project was created to provide a -simple wrapper in ClojureScript to create awesome presentations. +simple wrapper in ClojureScript to create awesome presentations. All features +from reveal.js can be used. Check the +[official documentation of reveal.js](https://revealjs.com/) for more +information about it. + +🌅 Find a demo of reveal-cljs on this page: https://n2o.github.io/reveal-cljs/ It uses Hiccup-syntax for templating, which makes it very easy to create slides. @@ -13,7 +19,7 @@ Start the project with `make repl` and see your live slides. Start *speaker-mode* by pressing s in the slides in your browser. -![sample.png](img/sample.png) +[![sample.png](img/sample.png)](https://n2o.github.io/reveal-cljs/) ## Requirements @@ -75,6 +81,16 @@ is all put into one task: Follow the steps on the terminal to find your prepared presentation. +## Software + +This project uses external packages, which can be removed by you, since most +of them are not essential: + +* [reveal.js](https://github.com/hakimel/reveal.js) ([MIT License](https://github.com/hakimel/reveal.js/blob/master/LICENSE)) +* [Bootstrap Grid](https://github.com/twbs/bootstrap) ([MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE)) +* [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)) +* [Clojure](https://clojure.org/) ([EPL-1.0 License](https://opensource.org/licenses/eclipse-1.0.php)) + ## License Copyright © 2016 – 2020 Christian Meter and Contributors diff --git a/deps.edn b/deps.edn index 99962b8b..412af234 100644 --- a/deps.edn +++ b/deps.edn @@ -1,12 +1,12 @@ {:deps {org.clojure/clojure {:mvn/version "1.10.1"} - org.clojure/clojurescript {:mvn/version "1.10.520"} - com.bhauman/figwheel-main {:mvn/version "0.2.4"} + org.clojure/clojurescript {:mvn/version "1.10.773"} + com.bhauman/figwheel-main {:mvn/version "0.2.9"} com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"} - org.clojure/core.async {:mvn/version "1.1.587"} + org.clojure/core.async {:mvn/version "1.2.603"} hiccups {:mvn/version "0.3.0"}} :paths ["src" "target" "resources"] :aliases {:fig {:main-opts ["-m" "figwheel.main" "-b" "dev" "--repl"]} :fig/simple {:main-opts ["-m" "figwheel.main" "-O" "simple" "-bo" "dev"]} :fig/min {:main-opts ["-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]} - :outdated {:extra-deps {olical/depot {:mvn/version "1.8.4"}} + :outdated {:extra-deps {olical/depot {:mvn/version "2.0.1"}} :main-opts ["-m" "depot.outdated.main"]}}} \ No newline at end of file diff --git a/package.json b/package.json index 2e5f02f3..f0e512bb 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "A ClojureScript wrapper for reveal.js", "main": "reveal.core", "dependencies": { - "reveal.js": "hakimel/reveal.js#3.9.2" + "@fortawesome/fontawesome-free": "^5.13.0", + "bootstrap-4-grid": "^3.4.0", + "reveal.js": "hakimel/reveal.js#4.0.2" }, "devDependencies": {}, "repository": { @@ -13,4 +15,4 @@ }, "author": "Christian Meter", "license": "MIT" -} \ No newline at end of file +} diff --git a/resources/public/.nojekyll b/resources/public/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/resources/public/css/main.css b/resources/public/css/main.css new file mode 100644 index 00000000..dfcc7a8d --- /dev/null +++ b/resources/public/css/main.css @@ -0,0 +1,19 @@ +.statement { + color: #ffc107; +} + +.issue { + color: #546e7a; +} + +.pro { + color: #81c784; +} + +.con { + color: #f44336; +} + +.mr { + margin-right: 0.5em; +} \ No newline at end of file diff --git a/resources/public/index.html b/resources/public/index.html index 68e6c963..e98a98f9 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -1,18 +1,30 @@ - - - - - - - - - -
-
-
+ + + reveal-cljs + + + + + - - - + + + + + + + + + +
+
+
+ + + + + + + diff --git a/src/reveal/core.cljs b/src/reveal/core.cljs index bd167d67..2a5e81c7 100644 --- a/src/reveal/core.cljs +++ b/src/reveal/core.cljs @@ -7,12 +7,13 @@ ;; When changing comments, you manually need to refresh your browser -(def options (clj->js {:controls true - :progress true - :transition "fade" ; e.g. none/fade/slide/convex/concave/zoom - :slideNumber false - :dependencies [{:src "node_modules/reveal.js/plugin/notes/notes.js" - :async true}]})) +(def options (clj->js {:hash true + :controls true + :controlsTutorial true + :progress false + :transition "fade" ; e.g. none/fade/slide/convex/concave/zoom + :slideNumber "c" + :plugins [js/RevealNotes]})) ;; ----------------------------------------------------------------------------- diff --git a/src/reveal/slides.cljs b/src/reveal/slides.cljs index 58a2ed04..dcf156c7 100644 --- a/src/reveal/slides.cljs +++ b/src/reveal/slides.cljs @@ -7,6 +7,54 @@ [:p "Based on " [:a {:href "http://lab.hakim.se/reveal-js/"} "reveal.js"]]]) +(def ^:private argument + [:div.argument + [:i.mr.statement.fas.fa-circle {:data-id "premise"}] + [:i.mr.pro.fas.fa-long-arrow-alt-right {:data-id "relation"}] + [:i.statement.fas.fa-circle {:data-id "conclusion"}]]) + +(def slide-auto-animate + [:section + [:section {:data-auto-animate "data-auto-animate"} + [:h2 "Auto Animate"] + [:p "Automatically animate CSS / SVGs on a slide" + [:small "Press " [:code "space"] " for next animation step"]] + (last argument)] + [:section {:data-auto-animate "data-auto-animate"} + argument] + [:section {:data-auto-animate "data-auto-animate"} + [:i.statement.fas.fa-circle {:data-id "conclusion"}] + [:div.row + [:div.offset-4.col-2 + [:i.relation.pro.fas.fa-long-arrow-alt-right {:data-id "relation" :data-fa-transform "rotate--40"}]] + [:div.col-2 + [:i.relation.con.fas.fa-long-arrow-alt-left {:data-id "relation-con" :data-fa-transform "rotate-40"}]]] + [:div.row + [:div.offset-3.col-2 + [:i.statement.fas.fa-circle {:data-id "premise"}]] + [:div.offset-2.col-2 + [:i.statement.fas.fa-circle {:data-id "premise-con"}]]]] + [:section {:data-auto-animate "data-auto-animate"} + [:div.row + [:div.col-12 + [:i.issue.fas.fa-circle {:data-id "issue"}]]] + [:div.row + [:div.col-12 + [:i.relation.issue.fas.fa-long-arrow-alt-up {:data-id "relation-position"}]]] + [:div.row + [:div.col-12 + [:i.statement.fas.fa-circle {:data-id "conclusion"}]]] + [:div.row + [:div.offset-4.col-2 + [:i.relation.pro.fas.fa-long-arrow-alt-right {:data-id "relation" :data-fa-transform "rotate--40"}]] + [:div.col-2 + [:i.relation.con.fas.fa-long-arrow-alt-left {:data-id "relation-con" :data-fa-transform "rotate-40"}]]] + [:div.row + [:div.offset-3.col-2 + [:i.statement.fas.fa-circle {:data-id "premise"}]] + [:div.offset-2.col-2 + [:i.statement.fas.fa-circle {:data-id "premise-con"}]]]]]) + (def slide-2 [:section [:section @@ -16,10 +64,11 @@ [:section [:h2 "Tutorial"] [:p "Watch the full tutorial of reveal.js " - [:a {:href "https://github.com/hakimel/reveal.js/blob/master/demo.html"} "on this site"]]]]) + [:a {:href "https://revealjs.com"} "on revealjs.com"]]]]) (defn all "Add here all slides you want to see in your presentation." [] [slide-1 - slide-2]) + slide-auto-animate + slide-2]) \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 71267349..1dcaae4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,16 @@ # yarn lockfile v1 -reveal.js@hakimel/reveal.js#3.9.2: - version "3.9.2" - resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/94d98ff7d89e35c7d5b289ba387cdb0d42b30793" +"@fortawesome/fontawesome-free@^5.13.0": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.1.tgz#c53b4066edae16cd1fd669f687baf031b45fb9d6" + integrity sha512-D819f34FLHeBN/4xvw0HR0u7U2G7RqjPSggXqf7LktsxWQ48VAfGwvMrhcVuaZV2fF069c/619RdgCCms0DHhw== + +bootstrap-4-grid@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/bootstrap-4-grid/-/bootstrap-4-grid-3.4.0.tgz#62769a992484b9338a0e7219842c90aa70e62f54" + integrity sha512-0bemukOEqWgO3Fd1SPFd2yUTEuqLBsPOfX7haNTw4iAbZAqW8doSbqu7VBo1sKBP73mAJMLquIgGCRVBPTDZ8A== + +reveal.js@hakimel/reveal.js#4.0.2: + version "4.0.2" + resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/bd19860b4d6e85ff98067546faa4ffd87527a0ba"