Add[batch]: langs, settings

- Add: Donation section.
- Fix: delete db color in darkmode.
- UX: rename front-end use of "article" -> "text"
- Add: Icon to donate page.
- Fix: "articles" -> "texts"
- Update: icon.
- Add langs: pl, sv, nl

README.md

@@ -23,11 +23,13 @@ With that said, it currently works as so:
 1. Open your build running on `http://localhost:9630/dashboard`
 1. Navigate to "Builds"
 1. Press `Watch` button for `main` and `renderer` builds.
+1. Run `npm run dev-electron` in a new terminal.
 
 **In Terminal**
 
+1. Clone repo.
 1. `npm install`
-1. In one terminal run `npm run shadow-cljs`
+1. In one terminal run `npm dev-cljs`
 1. Open your build running on `http://localhost:9630/dashboard`
 1. Navigate to "Builds"
 1. Press `Watch` button for `main` and `renderer` builds.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Trunk",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Language learning application",
   "productName": "Trunk",
   "main": "resources/main.js",

resources/public/css/custom.css

@@ -9,3 +9,27 @@
   50% { opacity: 1 }
   80% {opacity: 1}
 }
+
+
+.tis-logo {
+  display: flex;
+  align-self: center;
+  width: 120px;
+  height: 120px;
+  background-image: url('../img/icons/tis_dark.png');
+  background-size:     cover;
+  background-repeat:   no-repeat;
+  background-position: center center;
+}
+@media(prefers-color-scheme: dark) {
+  .tis-logo {
+    width: 120px;
+    height: 120px;
+    background-image: url('../img/icons/tis_light.png');
+    background-size:     cover;
+    background-repeat:   no-repeat;
+    background-position: center center;
+
+  }
+  /* background-url:  */
+}

src/app/renderer/components.cljs

@@ -36,7 +36,7 @@
                                  (reset! sure-del? 0))))]
     (fn []
       [:div.flex.rounded-sm
-       [:button.bg-white.border.rounded.py-1.px-2.text-xs.text-red-500.hover:bg-red-500.hover:text-white.shadow
+       [:button.bg-white.border.rounded.py-1.px-2.text-xs.text-red-500.hover:bg-red-500.hover:text-white.shadow.dark:bg-gray-800.dark:text-white.dark:hover:bg-red-700
         {:on-click #(handle-wipe-db)}
         (case @sure-del?
           0 "Wipe Trunk database"
@@ -122,8 +122,8 @@
 
 (defn empty-state-with-msg
   [{:keys [top-line bottom-line]
-    :or   {top-line    "You haven't created any articles yet."
-           bottom-line "Click \"Create Article\" above to get started."}}]
+    :or   {top-line    "You haven't created any texts yet."
+           bottom-line "Click \"Create Text\" above to get started."}}]
   [empty-state
    [:div.text-center.text-gray-400
     [:div top-line]

src/app/renderer/views/article_create.cljs

@@ -21,12 +21,12 @@
         [component/page-heading "Create a new article"]
         [:form.flex.flex-col {:key "view-article-list" :on-submit handle-submit }
 
-         [component/input {:placeholder "Article Title"
+         [component/input {:placeholder "Text Title"
                            :type        "text"
                            :value       (@form :title)
                            :on-change   #(update-form %1 :title)}]
 
-         [component/input {:placeholder "Article source"
+         [component/input {:placeholder "Text source"
                            :type        "text"
                            :value       (@form :source)
                            :on-change   #(update-form %1 :source)}]

src/app/renderer/views/article_list.cljs

@@ -52,7 +52,7 @@
              [:div {:key "view-article-list"} ;; keep react happy.
               [component/page-heading "Your articles"]
               [component/input
-               {:placeholder "Search articles..."
+               {:placeholder "Search texts..."
                 :value @search-query :on-change #(reset! search-query (-> % .-target .-value))}]
               (when articles
                 (map-indexed (fn [_ item]

src/app/renderer/views/settings.cljs

@@ -14,25 +14,37 @@
    "Languages"          nil
    "Backup and Restore" nil
    "About"              nil
-   ;; "Donate"             nil
-   })
+   "Donate"             nil})
 
 (defn update-settings
   [new]
   (|> [(s-ev :settings-update) new]))
 
-(defn about []
-   [:div {:class "p-4 sm:w-full md:w-4/5 lg:w-3/5 xl:1/2"}
-    [component/card {}
-     [:div.p-2
-    [:div {:style {:width "200px" :margin "0 auto" :min-height "200px"}}
-     [:img.w-full.text-center {:src "img/animations/speech-bubbles.gif"}]]
-    [:div.py-4.text-sm."Trunk is a language learning application inpsired by "
-     [component/ext-link {:link "https://learningwithtexts.com/" :text "learning with texts,"}]
-     [:span " built by "] [:span [component/ext-link {:link "https://theiceshelf.com" :text "The Ice Shelf."}]]
-     [:span " Trunk aims to help learners improve vocabulary and text comprehension while remaining simple and pleasant to use."]]
-    [:div.mt-4.text-xs.
-     [:span "Trunk is open source software. Go to " [component/ext-link {:link "https://github.com/theiceshelf/trunk" :text "GitHub"}] " to contribute or file a bug."]]]]])
+(defn about [settings]
+  [:div {:class "p-4 sm:w-full md:w-4/5 lg:w-3/5 xl:1/2" :style {:min-height "50vh"}}
+   [component/card {}
+    [:div.p-2.text-sm
+     [:div {:style {:width "200px" :margin "0 auto" :min-height "200px"}}
+      [:img.w-full.text-center {:src "img/animations/speech-bubbles.gif"}]]
+     [:div.py-4. "Trunk is a language learning application inpsired by "
+      [component/ext-link {:link "https://learningwithtexts.com/" :text "learning with texts,"}]
+      [:span " built by "] [:span [component/ext-link {:link "https://theiceshelf.com" :text "The Ice Shelf."}]]
+      [:span " Trunk aims to help learners improve vocabulary and text comprehension while remaining simple and pleasant to use."]]
+     [:div
+      [:span "Trunk is open source software. Go to " [component/ext-link {:link "https://github.com/theiceshelf/trunk" :text "GitHub"}] " to contribute or file a bug."]]
+     [:div "You are currently using version " [:code.text-xs.px-1 (get @settings :trunk-version)] " of Trunk."]]]])
+
+(defn donate []
+  [:div {:class "p-4 sm:w-full md:w-4/5 lg:w-3/5 xl:1/2 text-sm"}
+   [component/card {}
+    [:div.p-2
+     [:div.flex.justify-center {:style {:width "200px" :margin "0 auto" :min-height "200px"}}
+      [:div.tis-logo]]
+     [:div.py-4.text-sm. "Trunk is free software. If you enjoy using it and it is
+    helping you improve in your language learning journey please consider
+    showing your support by "
+      [component/ext-link {:link "https://patreon.com/theiceshelf" :text "donating to fund its continued development. "}]]
+     [:div "If now is not a convenient time to donate consider visiting our website to find other ways to reach out and say hello!"]]]])
 
 (defn backup-restore
   [_]
@@ -102,5 +114,6 @@
           (case @current-setting
             "Languages"          [languages settings]
             "Backup and Restore" [backup-restore settings]
-            "About"              [:div.justify-center.flex.items-center.flex-1 [about]]
+            "About"              [:div.justify-center.flex.items-center.flex-1 [about settings]]
+            "Donate"             [:div.justify-center.flex.items-center.flex-1 [donate]]
             [languages settings])]]))))

src/app/shared/specs.cljs

@@ -48,7 +48,10 @@
   {"french"  "fr"
    "english" "en"
    "spanish" "es"
+   "polish"  "pl"
    "german"  "de"
+   "swedish" "sv"
+   "dutch"   "nl"
    "italian" "it"})
 
 (defn make-default-settings