worked on the UI

resources/public/css/site.css

@@ -1,3 +1,6 @@
+.cj-orange-text {
+  color: #f37726ff; }
+
 /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */
 @keyframes spinAround {
   from {

resources/public/notebooks/basic_text.ipynb

@@ -88,13 +88,6 @@
    "source": [
     "(display/markdown \"## Hello, from markdown\")"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {

src/cljs/website/charting.cljs

@@ -0,0 +1,5 @@
+(ns website.charting)
+
+
+(defn charting-page []
+  [:h1 "hello world | charting page"])

src/cljs/website/core.cljs

@@ -3,7 +3,9 @@
               [secretary.core :as secretary :include-macros true]
               [accountant.core :as accountant]
               [website.tobbar :refer [topbar]]
-              [website.home :refer [home-page]]))
+              [website.home :refer [home-page]]
+              [website.install :refer [install-page]]
+              [website.charting :refer [charting-page]]))
 
 
 ;; -------------------------
@@ -22,6 +24,11 @@
 (secretary/defroute "/" []
   (reset! page #'home-page))
 
+(secretary/defroute "/charting" []
+  (reset! page #'charting-page))
+
+(secretary/defroute "/install" []
+  (reset! page #'install-page))
 
 ;; -------------------------
 ;; Initialize app

src/cljs/website/home.cljs

@@ -21,14 +21,11 @@
         [:img {:src (image @timeouts)}]]
        [:div.has-text-centered {:style {:marginTop "0.5em"}}
         [:span
-         [:i.fa-circle {:class (if (is-far @timeouts 0) "far" "fas")}] " "
+         [:i.fa-circle.cj-orange-text {:class (if (is-far @timeouts 0) "fas" "far ")}] " "
-         [:i.fa-circle {:class (if (is-far @timeouts 1) "far" "fas")}] " "
+         [:i.fa-circle.cj-orange-text {:class (if (is-far @timeouts 1) "fas" "far")}] " "
-         [:i.fa-circle {:class (if (is-far @timeouts 2) "far" "fas")}]]]])))
+         [:i.fa-circle.cj-orange-text {:class (if (is-far @timeouts 2) "fas" "far")}]]]])))
 
-
+(def description-block
-(defn home-page []
-  [:div.columns.is-variable.is-8
-   [:div.column
    [:article.message
     [:div.message-body
      [:p.subtitle (important "Clojupyter") " brings " (important "clojure") " to the " (important "jupyter notebook") "."]
@@ -40,8 +37,40 @@
        [:li "Charting"]
        [:li [notebook "geom.ipynb" "Latex, Markdown, HTML and Hiccup"]]
        [:li "parinfer"]
-        [:li "Leiningen integration"]]]]]]
+       [:li "Leiningen integration"]]]]])
+
+(def lein-plugin-example "(defproject my-project\"0.1.0-SNAPSHOT\"
+  :description \"FIXME: write description\"
+  :url \"http://example.com/FIXME\"
+  :license {:name \"Eclipse Public License\"
+  :url \"http://www.eclipse.org/legal/epl-v10.html\"}
+  :dependencies [[org.clojure/clojure \"1.9.0\"]]
+  :main ^:skip-aot my-project.core
+  :target-path \"target/%s\"
+  :plugins [[lein-jupyter \"0.1.14\"]]
+  :profiles {:uberjar {:aot :all}})")
+
+(def installation-block
+   [:article.message
+    [:div.message-body
+     [:p.subtitle (important "Getting Started") " | Leiningen plugin"]
+     [:article.content
+      [:p]
+      [:ol
+       [:li "Install the jupyter notebook globally following the " [:a {:href "http://jupyter.org/install"} "official instruction"]]
+       [:li [:div
+             [:p "Add lein-jupyter in your " [:p.is-italic {:style {:position "inline"}} "project.clj" [:code ":plugins"] "section."]]
+             [:pre lein-plugin-example]]]
+       [:li "install the jupyter kernel with lein jupyter install-kernel"]
+       [:li "run jupyter from within your project using lein jupyter notebook"]]]]])
+
+
+
+(defn home-page []
+  [:div.columns.is-variable.is-8
+   [:div.column
+    description-block
+    [:div.is-hidden-mobile installation-block]]
    [:div.column
     [examples]]])
 
-

src/cljs/website/install.cljs

@@ -0,0 +1,4 @@
+(ns website.install)
+
+(defn install-page []
+  [:h1 "hello world | install page"])

src/cljs/website/logo.cljs

@@ -1,4 +1,4 @@
 (ns website.logo)
 
 (defn logo [size]
-  [:img {:src "images/clojupyter-logo.svg" :height size :width (* 3 size) :alt "clojure logo"}])
+  [:img {:src "images/clojupyter-logo-alpha-1.svg" :height size :width (* 3 size) :alt "clojure logo"}])

src/cljs/website/tobbar.cljs

@@ -1,16 +1,29 @@
 (ns website.tobbar
    (:require [website.logo :refer [logo]]))
 
+
+(defn important [w] ;; to remove
+  [:span.has-text-weight-semibold w])
+
 (def github-link
   [:a.title.is-5 {:href "https://github.com/clojupyter"}
     [:i.fab.fa-github]])
 
-
 (defn topbar []
    [:nav.navbar.is-primary.is-transparent {:role "navigation" :aria-label "main navigation"}
     [:div.navbar-brand
-     [:a.navbar-item
+     [:a.navbar-item {:href "/"}
-      [logo 30]]]
+      [logo 30]]
+     [:div.navbar-burger
+      [:div.navbar-burger
+       [:span]
+       [:span]
+       [:span]]]]
     [:div.navbar-menu
+     [:div.navbar-start
+      [:a.navbar-item {:href "/charting" :style {:color "white"}}
+       (important [:p [:i.fas.fa-chart-bar ] " Charting"])]
+      [:a.navbar-item {:href "/install" :style {:color "white"}}
+       (important [:p [:i.fas.fa-arrow-down ] " Install"])]]
      [:div.navbar-end
       [:a.navbar-item github-link]]]])

src/sass/site.scss

@@ -2,6 +2,11 @@
 @import "../../resources/node_modules/bulma/sass/utilities/initial-variables";
 @import "../../resources/node_modules/bulma/sass/utilities/functions";
 
+$logo-orange: #f37726ff;
+
+.cj-orange-text{
+  color: $logo-orange;
+}
 
 // 6. Import the rest of Bulma
 @import "../../resources/node_modules/bulma/bulma";