├── .gitignore ├── resources └── public │ ├── css │ └── style.css │ └── index.html ├── .circleci └── config.yml ├── dev └── user.clj ├── README.md ├── project.clj └── src └── clojure_virtual_study_group └── core.cljs /.gitignore: -------------------------------------------------------------------------------- 1 | /resources/public/js/compiled/** 2 | figwheel_server.log 3 | pom.xml 4 | *jar 5 | /lib/ 6 | /classes/ 7 | /out/ 8 | /target/ 9 | .lein-deps-sum 10 | .lein-repl-history 11 | .lein-plugins/ 12 | .repl 13 | .nrepl-port 14 | -------------------------------------------------------------------------------- /resources/public/css/style.css: -------------------------------------------------------------------------------- 1 | /* some style */ 2 | 3 | /* Customise Bootstrap jumbotron */ 4 | 5 | .practicalli-jumbotron { 6 | background-color: #63b132; 7 | color: white; 8 | font-family: Ubuntu, sans-serif; 9 | } 10 | -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 |

Figwheel template

14 |

Checkout your developer console.

15 |

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Clojure CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-clojure/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/clojure:lein-2.8.1 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/postgres:9.4 16 | 17 | working_directory: ~/repo 18 | 19 | environment: 20 | LEIN_ROOT: "true" 21 | # Customize the JVM maximum heap limit 22 | JVM_OPTS: -Xmx3200m 23 | 24 | steps: 25 | - checkout 26 | 27 | # Download and cache dependencies 28 | - restore_cache: 29 | keys: 30 | - v1-dependencies-{{ checksum "project.clj" }} 31 | # fallback to using the latest cache if no exact match is found 32 | - v1-dependencies- 33 | 34 | - run: lein deps 35 | 36 | - save_cache: 37 | paths: 38 | - ~/.m2 39 | key: v1-dependencies-{{ checksum "project.clj" }} 40 | 41 | # run tests! 42 | # - run: lein cljsbuild test 43 | 44 | # build 45 | - run: lein cljsbuild once min 46 | -------------------------------------------------------------------------------- /dev/user.clj: -------------------------------------------------------------------------------- 1 | (ns user 2 | (:require 3 | [figwheel-sidecar.repl-api :as f])) 4 | 5 | ;; user is a namespace that the Clojure runtime looks for and 6 | ;; loads if its available 7 | 8 | ;; You can place helper functions in here. This is great for starting 9 | ;; and stopping your webserver and other development services 10 | 11 | ;; The definitions in here will be available if you run "lein repl" or launch a 12 | ;; Clojure repl some other way 13 | 14 | ;; You have to ensure that the libraries you :require are listed in your dependencies 15 | 16 | ;; Once you start down this path 17 | ;; you will probably want to look at 18 | ;; tools.namespace https://github.com/clojure/tools.namespace 19 | ;; and Component https://github.com/stuartsierra/component 20 | 21 | 22 | (defn fig-start 23 | "This starts the figwheel server and watch based auto-compiler." 24 | [] 25 | ;; this call will only work are long as your :cljsbuild and 26 | ;; :figwheel configurations are at the top level of your project.clj 27 | ;; and are not spread across different lein profiles 28 | 29 | ;; otherwise you can pass a configuration into start-figwheel! manually 30 | (f/start-figwheel!)) 31 | 32 | (defn fig-stop 33 | "Stop the figwheel server and watch based auto-compiler." 34 | [] 35 | (f/stop-figwheel!)) 36 | 37 | ;; if you are in an nREPL environment you will need to make sure you 38 | ;; have setup piggieback for this to work 39 | (defn cljs-repl 40 | "Launch a ClojureScript REPL that is connected to your build and host environment." 41 | [] 42 | (f/cljs-repl)) 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # clojure-virtual-study-group 2 | 3 | ## Build Status 4 | 5 | [![CircleCI](https://circleci.com/gh/practicalli/clojure-study-group-website.svg?style=svg)](https://circleci.com/gh/practicalli/clojure-study-group-website) 6 | 7 | ``` 8 | _____ _ _ _____ _ _ _____ 9 | / __ \ | (_) / ___| | | | | __ \ 10 | | / \/ | ___ _ _ _ _ __ ___ \ `--.| |_ _ _ __| |_ _ | | \/_ __ ___ _ _ _ __ 11 | | | | |/ _ \| | | | | '__/ _ \ `--. \ __| | | |/ _` | | | | | | __| '__/ _ \| | | | '_ \ 12 | | \__/\ | (_) | | |_| | | | __/ /\__/ / |_| |_| | (_| | |_| | | |_\ \ | | (_) | |_| | |_) | 13 | \____/_|\___/| |\__,_|_| \___| \____/ \__|\__,_|\__,_|\__, | \____/_| \___/ \__,_| .__/ 14 | _/ | __/ | | | 15 | |__/ |___/ |_| 16 | ``` 17 | 18 | ## Overview 19 | A website langing pages for the Practicalli Clojure virtual Study Group. 20 | 21 | The website is created in ClojureScript with Bootstrap CSS library for styles. 22 | 23 | 24 | ## Setup 25 | 26 | Start an interactive development environment (REPL driven by Figwheel), either use your favourite editor or on the command line, run: 27 | 28 | lein figwheel 29 | 30 | and open your browser at [localhost:3449](http://localhost:3449/) (this should open automatically though). 31 | 32 | Each time you save changes or evaluate code it is auto compiled and all changes are sent to the browser without the need to reload. After the compilation process is complete, you will get a Browser Connected REPL. An easy way to try it is: 33 | 34 | (js/alert "Am I connected?") 35 | 36 | and you should see an alert in the browser window. 37 | 38 | To clean all compiled files: 39 | 40 | lein clean 41 | 42 | ## Production build 43 | 44 | To create a production build run: 45 | 46 | lein do clean, cljsbuild once min 47 | 48 | And open your browser in `resources/public/index.html`. You will not 49 | get live reloading, nor a REPL. 50 | 51 | ## Deployment 52 | 53 | Current deployment is manually copying the following files to the `clojure-study-group` project: 54 | 55 | * `resources/public/index.html` 56 | * `resources/public/css/` 57 | * `resources/public/js` 58 | 59 | 60 | ## License 61 | 62 | Copyright © 2019 Practicalli 63 | 64 | Distributed under the Creative Commons Attribution Share-Alike 4.0 International. 65 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject clojure-virtual-study-group "0.1.0-SNAPSHOT" 2 | :description "FIXME: write this!" 3 | :url "http://example.com/FIXME" 4 | :license {:name "Eclipse Public License" 5 | :url "http://www.eclipse.org/legal/epl-v10.html"} 6 | 7 | 8 | 9 | :min-lein-version "2.7.1" 10 | 11 | :dependencies [[org.clojure/clojure "1.9.0"] 12 | [org.clojure/clojurescript "1.10.238"] 13 | [org.clojure/core.async "0.4.474"] 14 | [reagent "0.7.0"]] 15 | 16 | :plugins [[lein-figwheel "0.5.16"] 17 | [lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]] 18 | 19 | :source-paths ["src"] 20 | 21 | :cljsbuild {:builds 22 | [{:id "dev" 23 | :source-paths ["src"] 24 | 25 | ;; The presence of a :figwheel configuration here 26 | ;; will cause figwheel to inject the figwheel client 27 | ;; into your build 28 | :figwheel {:on-jsload "clojure-virtual-study-group.core/on-js-reload" 29 | ;; :open-urls will pop open your application 30 | ;; in the default browser once Figwheel has 31 | ;; started and compiled your application. 32 | ;; Comment this out once it no longer serves you. 33 | :open-urls ["http://localhost:3449/index.html"]} 34 | 35 | :compiler {:main clojure-virtual-study-group.core 36 | :asset-path "js/compiled/out" 37 | :output-to "resources/public/js/compiled/clojure_virtual_study_group.js" 38 | :output-dir "resources/public/js/compiled/out" 39 | :source-map-timestamp true 40 | ;; To console.log CLJS data-structures make sure you enable devtools in Chrome 41 | ;; https://github.com/binaryage/cljs-devtools 42 | :preloads [devtools.preload]}} 43 | ;; This next build is a compressed minified build for 44 | ;; production. You can build this with: 45 | ;; lein cljsbuild once min 46 | {:id "min" 47 | :source-paths ["src"] 48 | :compiler {:output-to "resources/public/js/compiled/clojure_virtual_study_group.js" 49 | :main clojure-virtual-study-group.core 50 | :optimizations :advanced 51 | :pretty-print false}}]} 52 | 53 | :figwheel {;; :http-server-root "public" ;; default and assumes "resources" 54 | ;; :server-port 3449 ;; default 55 | ;; :server-ip "127.0.0.1" 56 | 57 | :css-dirs ["resources/public/css"] ;; watch and update CSS 58 | 59 | ;; Start an nREPL server into the running figwheel process 60 | ;; :nrepl-port 7888 61 | 62 | ;; Server Ring Handler (optional) 63 | ;; if you want to embed a ring handler into the figwheel http-kit 64 | ;; server, this is for simple ring servers, if this 65 | 66 | ;; doesn't work for you just run your own server :) (see lein-ring) 67 | 68 | ;; :ring-handler hello_world.server/handler 69 | 70 | ;; To be able to open files in your editor from the heads up display 71 | ;; you will need to put a script on your path. 72 | ;; that script will have to take a file path and a line number 73 | ;; ie. in ~/bin/myfile-opener 74 | ;; #! /bin/sh 75 | ;; emacsclient -n +$2 $1 76 | ;; 77 | ;; :open-file-command "myfile-opener" 78 | 79 | ;; if you are using emacsclient you can just use 80 | ;; :open-file-command "emacsclient" 81 | 82 | ;; if you want to disable the REPL 83 | ;; :repl false 84 | 85 | ;; to configure a different figwheel logfile path 86 | ;; :server-logfile "tmp/logs/figwheel-logfile.log" 87 | 88 | ;; to pipe all the output to the repl 89 | ;; :server-logfile false 90 | } 91 | 92 | 93 | ;; Setting up nREPL for Figwheel and ClojureScript dev 94 | ;; Please see: 95 | ;; https://github.com/bhauman/lein-figwheel/wiki/Using-the-Figwheel-REPL-within-NRepl 96 | :profiles {:dev {:dependencies [[binaryage/devtools "0.9.9"] 97 | [figwheel-sidecar "0.5.16"] 98 | [cider/piggieback "0.3.1"]] 99 | ;; need to add dev source path here to get user.clj loaded 100 | :source-paths ["src" "dev"] 101 | ;; for CIDER 102 | ;; :plugins [[cider/cider-nrepl "0.12.0"]] 103 | :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]} 104 | ;; need to add the compliled assets to the :clean-targets 105 | :clean-targets ^{:protect false} ["resources/public/js/compiled" 106 | :target-path]}}) 107 | -------------------------------------------------------------------------------- /src/clojure_virtual_study_group/core.cljs: -------------------------------------------------------------------------------- 1 | ;; Clojure Virtual Study Group website 2 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 3 | ;; 4 | ;; A website to guide developers into Clojure via video broadcasting 5 | ;; Videos are published on YouTube in the jr0cket channel and as a playlist 6 | ;; The study group website will allow people to search through the content 7 | ;; of each video and find the parts they want to learn next. 8 | ;; This website will contain full details to help people follow them study group, 9 | ;; including code examples, descriptions, transcripts, etc. 10 | 11 | 12 | (ns clojure-virtual-study-group.core 13 | (:require [reagent.core :as reagent :refer [atom]])) 14 | 15 | 16 | ;; Debugging in the Browser / JavaScript console 17 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 18 | 19 | (enable-console-print!) 20 | 21 | (println "This text is printed from src/clojure-virtual-study-group/core.cljs. Go ahead and edit it and see reloading in action.") 22 | 23 | 24 | ;; Application State 25 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 26 | ;; State changes will come from API calls to YouTube (assuming that is possible) 27 | ;; Otherwise state will be updated from content files (describing content and providing links) 28 | ;; State will be used to control what data should be show, and presentation managed by CSS 29 | 30 | ;; define your app data so that it doesn't get over-written on reload 31 | (defonce 32 | app-state 33 | (atom 34 | {:website 35 | {:title "Clojure Virtual Study Group" 36 | :description "Learn to think Functionally with Clojure in a series of YouTube broadcasts" 37 | :copyright "2019 Practicalli"} 38 | :broadcasts 39 | {:CSG-001 {:url "https://www.youtube.com/watch?v=MZcuL4lRw5E" 40 | :title "Overview of Clojure" 41 | :description "Discussing the uses of Clojure and a tour of its syntax"}}})) 42 | 43 | 44 | 45 | ;; Reagent components 46 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 47 | 48 | ;; Ensure all components and sub-components are treated as reagent components, 49 | ;; by placing them in [] rather than as function calls (e.g. in the reagent/render-component) 50 | ;; and any component that render-component manages. 51 | 52 | ;; Components could include: 53 | ;; * study-group-website - the main component 54 | ;; * broadcast-recording 55 | ;; * scheduled-broadcast 56 | ;; * broadcast-description 57 | ;; * thumbnail of study session 58 | ;; * an ordered list of study sessions 59 | ;; * full display of a study session 60 | 61 | 62 | 63 | (defn broadcast-card [] 64 | [:div {:class "card mb-4 shadow-sm" 65 | :width "18rem"} 66 | [:img {:src "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Clojure_logo.svg/200px-Clojure_logo.svg.png"}] 67 | [:div {:class "card-body"} 68 | [:h5 {:class "card-title"} 69 | (get-in @app-state [:broadcasts :CSG-001 :title])] 70 | [:p {:class "card-text"} 71 | (get-in @app-state [:broadcasts :CSG-001 :description])] 72 | [:a {:href "https://www.youtube.com/watch?v=MZcuL4lRw5E" 73 | :class "btn btn-primary"} 74 | "Play Broadcast"]]]) 75 | 76 | 77 | 78 | (defn website-title [] 79 | [:div {:class "jumbotron practicalli-jumbotron"} 80 | [:h1 (get-in @app-state [:website :title])] 81 | [:h4 (get-in @app-state [:website :description])]]) 82 | 83 | (defn study-group-website [] 84 | [:div {:class "container"} 85 | [website-title] 86 | 87 | ;; Broadcasts 88 | [:div {:class "row"} 89 | 90 | [:div {:class "col-md-3"} 91 | [broadcast-card]] 92 | [:div {:class "col-md-3"} 93 | [broadcast-card]] 94 | [:div {:class "col-md-3"} 95 | [broadcast-card]] 96 | [:div {:class "col-md-3"} 97 | [broadcast-card]] 98 | [:div {:class "col-md-3"} 99 | [broadcast-card]] 100 | [:div {:class "col-md-3"} 101 | [broadcast-card]] 102 | [:div {:class "col-md-3"} 103 | [broadcast-card]] 104 | [:div {:class "col-md-3"} 105 | [broadcast-card]] 106 | ] 107 | ]) 108 | 109 | 110 | 111 | ;; Reagent specific code 112 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 113 | 114 | (reagent/render-component [study-group-website] 115 | (. js/document (getElementById "app"))) 116 | 117 | (defn on-js-reload [] 118 | ;; optionally touch your app-state to force rerendering depending on 119 | ;; your application 120 | ;; (swap! app-state update-in [:__figwheel_counter] inc) 121 | ) 122 | 123 | ;; REPL design journal 124 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 125 | 126 | ;; Testing update of app-state 127 | #_(swap! app-state assoc-in [:website :title] "Test Title Update") 128 | 129 | ;; Reset app-state to known start state 130 | #_(reset! 131 | app-state 132 | {:website 133 | {:title "Clojure Virtual Study Group" 134 | :description "Learn to think Functionally with Clojure in a series of YouTube broadcasts" 135 | :copyright "2019 Practicalli"} 136 | :broadcasts 137 | {:1 {:url "https://www.youtube.com/watch?v=MZcuL4lRw5E" 138 | :title "Overview of Clojure" 139 | :description "Discussing the uses of Clojure and a tour of its syntax"}}}) 140 | 141 | #_@app-state 142 | 143 | 144 | #_(get-in @app-state [:broadcasts :CSG-001 :description]) 145 | 146 | #_(reset! 147 | app-state 148 | {:website 149 | {:title "Clojure Virtual Study Group" 150 | :description "Learn to think Functionally with Clojure in a series of YouTube broadcasts" 151 | :copyright "2019 Practicalli"} 152 | :broadcasts 153 | {:CSG-001 {:url "https://www.youtube.com/watch?v=MZcuL4lRw5E" 154 | :title "Overview of Clojure" 155 | :description "Discussing the uses of Clojure and a tour of its syntax"}}}) 156 | --------------------------------------------------------------------------------