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

@@ -201,6 +201,12 @@ i {
   align-items: center;
 }
 
+.item-list {
+  padding-left: 16px;
+  list-style: disc;
+  margin: var(--gap-small) 0;
+}
+
 .content-list {
   display: flex;
   flex-direction: column;

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,45 @@
+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>
       <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 +48,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,63 +57,46 @@ 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.
-      </p>
-      <p className="text-details margin-paragraph">
-        The user-interface icons are licensed under the{" "}
-        <a className="link" target="_blank" href="/icons/icons-license.txt">
-          MIT license
-        </a>
-        .
-      </p>
-      <p className="text-details margin-paragraph">
-        The content for the study cards generated is dual-licensed under{" "}
-        <a
-          className="link"
-          target="_blank"
-          rel="noreferrer"
-          href="https://en.wiktionary.org/wiki/Wiktionary:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License"
-        >
-          Creative Commons Attribution-ShareAlike 3.0 Unported License
-        </a>{" "}
-        and the{" "}
-        <a
-          className="link"
-          target="_blank"
-          rel="noreferrer"
-          href="https://en.wiktionary.org/wiki/Wiktionary:GNU_Free_Documentation_License"
-        >
-          GNU Free Documentation License
-        </a>
-        .
-      </p>
-      <p className="text-details margin-paragraph">
-        The rest of the application and its assets are licensed under the{" "}
-        <a
-          className="link"
-          target="_blank"
-          rel="noreferrer"
-          href="https://www.gnu.org/licenses/agpl-3.0.en.html"
-        >
-          GNU Affero General Public License version 3
-        </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>
+          same terms listed below
+        </strong>
         .
       </p>
+      <ul className="item-list">
+        <li className="margin-small">
+          <a className="link" target="_blank" href="/icons/icons-license.txt">
+            User interface icons
+          </a>
+        </li>
+        <li className="margin-small">
+          <a
+            className="link"
+            target="_blank"
+            rel="noreferrer"
+            href="https://creativecommons.org/licenses/by-sa/3.0/"
+          >
+            Study cards text
+          </a>
+        </li>
+        <li className="margin-small">
+          <a
+            className="link"
+            target="_blank"
+            href="/static/js/full-license-manifest.txt"
+          >
+            3rd-party javascript libraries
+          </a>
+        </li>
+        <li className="margin-small">
+          <a
+            className="link"
+            target="_blank"
+            rel="noreferrer"
+            href="https://www.gnu.org/licenses/agpl-3.0.en.html"
+          >
+            Study Card Tool original source code
+          </a>
+        </li>
+      </ul>
       <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 +114,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
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://git.studycardtool.org/tcoh/app"
+        >
+          here
+        </a>
+        .
       </p>
     </div>
   );