reuse styles for rendering sidebar and markdown

.github/workflows/upload.yaml

@@ -0,0 +1,68 @@
+name: Upload
+
+on:
+  push:
+    branches:
+      - master
+      - main
+  pull_request: {}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Get yarn cache
+      id: yarn-cache
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+
+    - uses: actions/cache@v2
+      name: Cache node modules of yarn
+      with:
+        path: ${{ steps.yarn-cache.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: ACTIONS_ALLOW_UNSECURE_COMMANDS
+      id: ACTIONS_ALLOW_UNSECURE_COMMANDS
+      run: echo 'ACTIONS_ALLOW_UNSECURE_COMMANDS=true' >> $GITHUB_ENV
+
+    - name: add cr
+      run: |
+        mkdir -p $GITHUB_WORKSPACE/bin
+        wget -O $GITHUB_WORKSPACE/bin/cr http://repo.calcit-lang.org/binaries/linux/cr
+        chmod +x $GITHUB_WORKSPACE/bin/cr
+        echo "::add-path::$GITHUB_WORKSPACE/bin"
+
+    - name: "prepare modules"
+      run: >
+        mkdir -p ~/.config/calcit/modules/ && cd ~/.config/calcit/modules/
+        && git clone https://github.com/calcit-lang/lilac.git
+        && git clone https://github.com/calcit-lang/memof.git
+        && git clone https://github.com/Respo/respo.calcit.git
+        && git clone https://github.com/Respo/reel.calcit.git
+        && git clone https://github.com/Respo/respo-markdown.calcit.git
+        && git clone https://github.com/Respo/respo-ui.calcit.git
+        && git clone https://github.com/Respo/respo-router.calcit.git
+
+    - name: "compiles to js"
+      run: >
+        cr --emit-js --once
+        && yarn && yarn vite build --base=./
+
+    - name: Deploy to server
+      id: deploy
+      uses: Pendect/action-rsyncer@v1.1.0
+      env:
+        DEPLOY_KEY: ${{secrets.rsync_private_key}}
+      with:
+        flags: '-avzr --progress'
+        options: ''
+        ssh_options: ''
+        src: 'dist/*'
+        dest: 'rsync-user@tiye.me:/web-assets/repo/${{ github.repository }}'
+
+    - name: Display status from deploy
+      run: echo "${{ steps.deploy.outputs.status }}"

assets/github-gist.css

@@ -0,0 +1,72 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ * https://raw.githubusercontent.com/isagalaev/highlight.js/master/src/styles/github-gist.css
+ */
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

assets/main.css

@@ -1,4 +1,8 @@
 
+@import url("./github-gist.css");
+@import url("../node_modules/github-markdown-css/github-markdown.css");
+@import url("../node_modules/cirru-color/assets/cirru.css");
+
 body {
   margin: 0;
   overscroll-behavior-y: none;
@@ -30,3 +34,34 @@ body * {
 ::-webkit-resizer {
   background-color:transparent;
 }
+
+pre {
+  background-color: hsla(0, 0%, 96%, 0.5);
+  border: 1px solid #eee;
+  padding: 2px 8px;
+  line-height: 1.4;
+  min-width: 400px;
+}
+
+.doc-entry:hover {
+  background-color: hsla(190, 10%, 80%, 0.1);
+}
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: #ccc;
+}
+::-moz-placeholder { /* Firefox 19+ */
+  color: #ccc;
+}
+:-ms-input-placeholder { /* IE 10+ */
+  color: #ccc;
+}
+:-moz-placeholder { /* Firefox 18- */
+  color: #ccc;
+}
+
+
+.calcit-tile {
+  background-image: url('./calcit-tile.png');
+  background-size: 163px 395px;
+}

compact.cirru

@@ -1,18 +1,23 @@
 
 {} (:package |app)
   :configs $ {} (:init-fn |app.main/main!) (:reload-fn |app.main/reload!)
-    :modules $ [] |respo.calcit/ |lilac/ |memof/ |respo-ui.calcit/ |respo-markdown.calcit/ |reel.calcit/
+    :modules $ [] |respo.calcit/ |lilac/ |memof/ |respo-ui.calcit/ |respo-markdown.calcit/ |reel.calcit/ |respo-router.calcit/
     :version |0.0.1
   :entries $ {}
   :files $ {}
     |app.comp.container $ {}
       :ns $ quote
         ns app.comp.container $ :require (respo-ui.core :as ui)
-          respo.core :refer $ defcomp defeffect <> >> div button textarea span input
+          respo-ui.core :refer $ hsl
+          respo.core :refer $ defcomp defeffect <> >> div button textarea span input list->
           respo.comp.space :refer $ =<
           reel.comp.reel :refer $ comp-reel
           respo-md.comp.md :refer $ comp-md
           app.config :refer $ dev?
+          app.schema :refer $ docs
+          "\"remarkable" :refer $ Remarkable
+          "\"highlight.js" :default hljs
+          "\"cirru-color" :as color
       :defs $ {}
         |comp-container $ quote
           defcomp comp-container (reel)
@@ -21,32 +26,136 @@
                 states $ :states store
                 cursor $ or (:cursor states) ([])
                 state $ or (:data states)
-                  {} $ :content "\""
+                  {} $ :selected ([])
               div
-                {} $ :style (merge ui/global ui/row)
-                textarea $ {}
-                  :value $ :content state
-                  :placeholder "\"Content"
-                  :style $ merge ui/expand ui/textarea
-                    {} $ :height 320
-                  :on-input $ fn (e d!)
-                    d! cursor $ assoc state :content (:value e)
-                =< 8 nil
-                div
-                  {} $ :style ui/expand
-                  comp-md "|This is some content with `code`"
-                  =< |8px nil
-                  button $ {} (:style ui/button) (:inner-text "\"Run")
-                    :on-click $ fn (e d!)
-                      println $ :content state
+                {} (:class-name "\"calcit-tile")
+                  :style $ merge ui/fullscreen ui/global ui/row
+                list->
+                  {} $ :style
+                    merge ui/row $ {}
+                      :background-color $ hsl 0 0 94 0.8
+                  apply-args
+                      []
+                      , docs ([]) (:selected state)
+                    fn (acc entries base-path selected)
+                      let
+                          base-path' base-path $ ; "\"problem in compiling tail recursions"
+                          next-acc $ conj acc
+                            [] (count acc)
+                              comp-sidebar
+                                >> states $ count acc
+                                first selected
+                                , entries $ fn (p d!)
+                                  d! cursor $ assoc state :selected (conj base-path' p)
+                        if (empty? selected) next-acc $ let
+                            s0 $ first selected
+                            target $ find entries
+                              fn (entry)
+                                = s0 $ :key entry
+                          if
+                            or (nil? target)
+                              empty? $ get target :children
+                            , next-acc $ recur next-acc (get target :children) (conj base-path s0) (rest selected)
+                let
+                    target $ find-target docs (:selected state)
+                  if (some? target)
+                    div
+                      {} $ :style
+                        merge ui/expand $ {} (:padding "\"8px 16px")
+                          :background-color $ hsl 0 0 100 0.6
+                      div $ {}
+                        :innerHTML $ .!render md (:content target)
+                    div
+                      {} $ :style
+                        merge ui/expand $ {} (:padding "\"20px 16px")
+                      do $ <> "\"Empty"
+                        {} (:font-family ui/font-fancy) (:font-style :italic)
+                          :color $ hsl 0 0 80
                 when dev? $ comp-reel (>> states :reel) reel ({})
+        |md $ quote
+          def md $ new Remarkable
+            js-object (:html false) (:breaks true)
+              :highlight $ fn (code lang)
+                if (= lang "\"cirru") (color/generate code)
+                  .-value $ .!highlightAuto hljs code lang
+        |style-entry $ quote
+          def style-entry $ {} (:padding "\"0 8px") (:cursor :pointer) (:transition-duration "\"200ms") (:line-height 2.4)
+            :border-bottom $ str "\"1px solid " (hsl 0 0 92)
+            :border-left $ str "\"0px solid " (hsl 200 90 60)
+            :background-color $ hsl 0 0 100 0.6
+        |comp-sidebar $ quote
+          defcomp comp-sidebar (states selected entries on-select)
+            let
+                cursor $ :cursor states
+                state $ or (:data states)
+                  {} $ :query "\""
+              div
+                {} $ :style
+                  {} (:min-width 200) (:max-width 240)
+                    :border-right $ str "\"1px solid " (hsl 0 0 94)
+                input $ {}
+                  :style $ merge ui/input
+                    {} (:width "\"100%") (:border :none) (:line-height 32) (:height 32)
+                      :border-bottom $ str "\"1px solid " (hsl 0 0 90)
+                  :placeholder "\"Search..."
+                  :value $ :query state
+                  :on-input $ fn (e d!)
+                    d! cursor $ assoc state :query (:value e)
+                list-> ({})
+                  -> entries
+                    filter $ fn (entry)
+                      if
+                        blank? $ :query state
+                        , true $ -> (:title entry) .!toLowerCase
+                          .includes? $ :query state
+                    map-indexed $ fn (idx entry)
+                      [] idx $ div
+                        {} (:class-name "\"doc-entry")
+                          :style $ merge style-entry
+                            if
+                              = selected $ :key entry
+                              {} (:background-color :white)
+                                :border-left $ str "\"10px solid " (hsl 200 90 70)
+                          :on-click $ fn (e d!)
+                            on-select (:key entry) d!
+                        <> $ :title entry
+        |find-target $ quote
+          defn find-target (entries path)
+            if (empty? path) nil $ let
+                p0 $ first path
+              if-let
+                target $ find entries
+                  fn (entry)
+                    = p0 $ :key entry
+                if
+                  = 1 $ count path
+                  , target $ recur (:children target) (rest path)
+                w-log nil
     |app.schema $ {}
       :ns $ quote (ns app.schema)
       :defs $ {}
         |store $ quote
           def store $ {}
             :states $ {}
               :cursor $ []
+        |docs $ quote
+          def docs $ []
+            {} (:title "\"Guide") (:key :guide)
+              :content $ load-doc "\"guide.md"
+            {} (:title "\"Design") (:key :design)
+              :content $ load-doc "\"design.md"
+              :children $ []
+                {} (:title "\"Guide") (:key :guide)
+                  :content $ load-doc "\"guide.md"
+                {} (:title "\"Design") (:key :design)
+                  :content $ load-doc "\"design.md"
+                {} (:title "\"Overview") (:key :overview)
+                  :content $ load-doc "\"overview.md"
+            {} (:title "\"About") (:key :about)
+              :content $ load-doc "\"about.md"
+        |load-doc $ quote
+          defmacro load-doc (filename)
+            read-file $ str "\"docs/" filename
     |app.updater $ {}
       :ns $ quote
         ns app.updater $ :require
@@ -71,6 +180,9 @@
           app.config :as config
           "\"./calcit.build-errors" :default build-errors
           "\"bottom-tip" :default hud!
+          "\"highlight.js" :default hljs
+          "\"highlight.js/lib/languages/bash" :default bash-lang
+          "\"highlight.js/lib/languages/clojure" :default clojure-lang
       :defs $ {}
         |render-app! $ quote
           defn render-app! () $ render! mount-target (comp-container @*reel) dispatch!
@@ -83,7 +195,7 @@
         |*reel $ quote
           defatom *reel $ -> reel-schema/reel (assoc :base schema/store) (assoc :store schema/store)
         |main! $ quote
-          defn main! ()
+          defn main! () (.!registerLanguage hljs "\"clojure" clojure-lang) (.!registerLanguage hljs "\"bash" bash-lang)
             println "\"Running mode:" $ if config/dev? "\"dev" "\"release"
             if config/dev? $ load-console-formatter!
             render-app!

docs/about.md

@@ -0,0 +1,4 @@
+
+## About
+
+about me.

docs/design.md

@@ -0,0 +1,8 @@
+
+## design
+
+Some design:
+
+1. Like this.
+2. Like that.
+3. Then with that.