Landing page and UI text improvements, list 3rd-party library licenses

package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "yarn build:page && yarn build:licenses",
+    "build:page": "react-scripts build",
+    "build:licenses": "yarn licenses generate-disclaimer --production > build/static/js/full-license-manifest.txt",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "prettify": "prettier --write src/",

src/model/routing.ts

@@ -7,6 +7,7 @@ export enum AppPath {
   ExpressionSetsPractice = "expression-sets/practice",
   ExpressionSetsDetails = "expression-sets/details",
   Settings = "settings",
+  CreateCards = "settings", // TODO split from settings
 }
 
 export interface RouteOptions {

src/styles/components.css

@@ -58,6 +58,7 @@ i {
 .text-details {
   color: var(--color-default);
   font-size: var(--text-medium);
+  text-align: justify;
   line-height: 1.3rem;
 }
 

src/views/ExpressionPracticeView/DemoteExpressionButton.tsx

@@ -46,7 +46,7 @@ export function DemoteExpressionButton({
       onClick={handleClick}
     >
       <img src="/icons/x.svg" width="24" height="24" alt="" />
-      <span>Wrong</span>
+      <span>I forgot</span>
     </button>
   );
 }

src/views/ExpressionPracticeView/ExpressionPracticeCardView.tsx

@@ -38,7 +38,7 @@ export function ExpressionPracticeCardView({
             type="button"
             onClick={() => setRevealed(true)}
           >
-            Reveal
+            Tap here to reveal the full card
           </button>
         )}
       </section>

src/views/ExpressionPracticeView/PromoteExpressionButton.tsx

@@ -33,7 +33,7 @@ export function PromoteExpressionButton({
       onClick={handleClick}
     >
       <img src="/icons/check.svg" width="24" height="24" alt="" />
-      <span>Right</span>
+      <span>I remembered</span>
     </button>
   );
 }

src/views/HomeView/HomeView.tsx

@@ -1,16 +1,53 @@
+import { useContext } from "react";
+import { AppPath, AppRouting } from "../../model/routing";
+
 export function HomeView() {
+  const { setRoute } = useContext(AppRouting);
   return (
     <div className="page-with-padding content-text scroll">
       <h1 className="text-title margin-title">Study Card Tool</h1>
       <p className="text-details margin-paragraph">
-        A handy tool for vocabulary practice through repetition. Go to{" "}
-        <i>settings -&gt; create card</i> to start adding words for practicing.
-        Once you have a few go to practice and start from your daily words.
+        A handy tool for vocabulary practice through repetition. Go to
+        "settings" to add some words and you'll be ready to practice.
+      </p>
+      <nav>
+        <ol className="navigation">
+          <li
+            className="navigation-li"
+            onClick={() => setRoute({ path: AppPath.CreateCards })}
+          >
+            <div className="navigation-item">Create study cards</div>
+          </li>
+          <li
+            className="navigation-li"
+            onClick={() => setRoute({ path: AppPath.ExpressionSetsPractice })}
+          >
+            <div className="navigation-item">Practice</div>
+          </li>
+        </ol>
+      </nav>
+      <p className="text-details margin-paragraph">
+        Newly created cards will go onto the "daily" deck. As you remember and
+        forget word definitions they will move to weekly, monthly, yearly or
+        back towards the daily deck.
+      </p>
+      <p className="text-details margin-paragraph">
+        Words that are remembered beyond the highest level will be removed, and
+        words that are so poorly remembered that you find yourself attempting to
+        create cards for them more than once will have duplicate cards.
+      </p>
+      <p className="text-details margin-paragraph">
+        A guideline for creating new cards is doing so while reading a text in
+        the language that you are studying and adding unknown words as you go.
+      </p>
+      <p className="text-details margin-paragraph">
+        A guideline for practicing is to go through the daily deck once a day,
+        weekly deck once a week, monthly deck once a month and so on.
       </p>
       <h2 className="text-title margin-title">Privacy</h2>
       <p className="text-details margin-paragraph">
-        The app requests data from Wiktionary when you create study cards. Their
-        privacy policy can be found{" "}
+        There is no data collection by the app. The app makes requests to
+        Wiktionary during card creation, their privacy policy can be found{" "}
         <a
           className="link"
           target="_blank"
@@ -19,12 +56,7 @@ export function HomeView() {
         >
           on this link
         </a>
-        . Apart from the initial page load, this should be the only time any
-        data transfer happens during the usage of the app.
-      </p>
-      <p className="text-details margin-paragraph">
-        Once you save a card, it is stored on your own device and never
-        transmitted anywhere else.
+        .
       </p>
       <h2 className="text-title margin-title">Licensing</h2>
       <p className="text-details margin-paragraph">
@@ -33,10 +65,9 @@ export function HomeView() {
           You are free to use the app for any purposes. You are free to modify
           and redistribute the app as long as you grant your users access to the
           source-code, content and assets you modify and redistribute under the
-          same terms listed below.{" "}
-        </strong>{" "}
-        As long as you follow those rules, you don't need to contact the
-        author(s) about it.
+          same terms listed below
+        </strong>
+        .
       </p>
       <p className="text-details margin-paragraph">
         The user-interface icons are licensed under the{" "}
@@ -67,7 +98,19 @@ export function HomeView() {
         .
       </p>
       <p className="text-details margin-paragraph">
-        The rest of the application and its assets are licensed under the{" "}
+        A full list of licenses for the 3rd-party libraries used by the main
+        application can be found{" "}
+        <a
+          className="link"
+          target="_blank"
+          href="/static/js/full-license-manifest.txt"
+        >
+          here
+        </a>
+        .
+      </p>
+      <p className="text-details margin-paragraph">
+        The main application code and its assets are licensed under the{" "}
         <a
           className="link"
           target="_blank"
@@ -78,18 +121,6 @@ export function HomeView() {
         </a>
         .
       </p>
-      <p className="text-details margin-paragraph">
-        The official source code repository for this application can be found at{" "}
-        <a
-          className="link"
-          target="_blank"
-          rel="noreferrer"
-          href="https://git.studycardtool.org/tcoh/app"
-        >
-          git.studycardtool.org/tcoh/app
-        </a>
-        .
-      </p>
       <h2 className="text-title margin-title">Support the app</h2>
       <p className="text-details margin-paragraph">
         This app would not exist if it was not for Wiktionary and the Wikimedia
@@ -107,16 +138,17 @@ export function HomeView() {
       </p>
       <h2 className="text-title margin-title">Contributing</h2>
       <p className="text-details margin-paragraph">
-        The main thing on the roadmap is improved language support for
-        vocabulary practice. The app still needs bugfixes, code and style
-        cleanup and potentially rethinking of some existing features.
-        Contributions introducing a need for smarter backend functionality than
-        a static file server are in principle unwelcome in this project.
-      </p>
-      <p className="text-details margin-paragraph">
-        There are a few pending tasks in server configuration and testing, but
-        once those are done local gitea registrations for contributors should
-        open and potentially federated accounts as well.
+        Code, comments and feedback, design improvements are very much welcome.
+        To participate join the official repository at{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://git.studycardtool.org/tcoh/app"
+        >
+          https://git.studycardtool.org/tcoh/app
+        </a>
+        .
       </p>
     </div>
   );