misc help changes; font spaces savings

- Add headers to all help pages - Adjust code samples to be correctly highlighted - Use Fira Sans for help pages as well - save some space by only shipping woff2 files
beancount · Dec 31, 2023 · d0569ac · d0569ac
1 parent 330e258
commit d0569ac
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 36 deletions.
diff --git a/frontend/build.ts b/frontend/build.ts
@@ -37,7 +37,7 @@ async function runBuild(dev: boolean) {
     external: ["fs", "path"], // for web-tree-sitter
     loader: {
       ".wasm": "file",
-      ".woff": "file",
+      ".woff": "empty",
       ".woff2": "file",
     },
     plugins: [svelte({ preprocess: typescript() })],

diff --git a/frontend/css/fonts.css b/frontend/css/fonts.css
@@ -7,7 +7,3 @@
 @import url("@fontsource/fira-mono/500.css");
 @import url("@fontsource/fira-sans/400.css");
 @import url("@fontsource/fira-sans/500.css");
-
-/* The help pages */
-@import url("@fontsource/source-serif-pro/400.css");
-@import url("@fontsource/source-serif-pro/600.css");
diff --git a/frontend/css/help.css b/frontend/css/help.css
@@ -8,14 +8,16 @@
 
 .help-text {
   max-width: var(--help-max-width);
-  font: 16px var(--font-family-alternative);
+  font-size: 16px;
 }
 
-.help-text h2,
-.help-text h3,
-.help-text h4,
-.help-text h5 {
-  font-family: var(--font-family);
+.help-text .cm-editor {
+  font-size: 14px;
+}
+
+.help-text h1 {
+  margin: 0 0 1rem;
+  font-weight: 500;
 }
 
 .help-text > div {

diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -1,7 +1,6 @@
 :root {
   /* Fonts */
   --font-family: "Fira Sans", sans-serif;
-  --font-family-alternative: "Source Serif Pro", sans-serif;
   --font-family-monospaced: "Fira Mono", monospace;
   --font-family-editor: "Source Code Pro", monospace;
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -61,7 +61,6 @@
     "@fontsource/fira-mono": "^5.0.1",
     "@fontsource/fira-sans": "^5.0.1",
     "@fontsource/source-code-pro": "^5.0.1",
-    "@fontsource/source-serif-pro": "^5.0.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.0.0",
     "@ungap/custom-elements": "^1.0.0",

diff --git a/src/fava/help/beancount_syntax.md b/src/fava/help/beancount_syntax.md
@@ -1,3 +1,5 @@
+# Beancount Syntax
+
 Below is a short reference of the Beancount language syntax. Also see the full
 [Syntax Documentation](http://furius.ca/beancount/doc/syntax) and the
 [Syntax Cheat Sheet](http://furius.ca/beancount/doc/cheatsheet).
@@ -54,7 +56,8 @@ To open or close an account use the `open` and `close` directives:
 
 <pre><textarea is="beancount-textarea" is="beancount-textarea">
 2015-05-29 open Expenses:Restaurant
-2015-05-29 open Assets:Checking     USD,EUR  ; Currency constraints
+; Account with some currency constraints:
+2015-05-29 open Assets:Checking     USD,EUR
 ; ...
 2016-02-23 close Assets:Checking</textarea></pre>
 
@@ -98,19 +101,20 @@ You can use this directive to fill the historical price database:
   Expenses:Restaurant       101.23 USD
 
 2015-05-30 ! "Cable Co" "Phone Bill" #tag ^link
-  id: "TW378743437"               ; Meta-data
+  id: "TW378743437"
   Expenses:Home:Phone  87.45 USD
   Assets:Checking                 ; You may leave one amount out</textarea></pre>
 
 ### Postings
 
 <pre><textarea is="beancount-textarea">
-...    123.45 USD                             ; simple
-...        10 GOOG {502.12 USD}               ; with cost
-...   1000.00 USD   @ 1.10 CAD                ; with price
-...        10 GOOG {502.12 USD} @ 1.10 CAD    ; with cost & price
-...        10 GOOG {502.12 USD / 2014-05-12}  ; with date
-! ...   123.45 USD ...                        ; with flag</textarea></pre>
+2015-05-30 * "Example transaction with various postings"
+  Account:Name   123.45 USD                           ; simple units
+  Account:Name      10 GOOG {502.12 USD}              ; with cost
+  Account:Name  1000.00 USD  @ 1.10 CAD               ; with price
+  Account:Name      10 GOOG {502.12 USD} @ 1.10 CAD   ; with cost & price
+  Account:Name      10 GOOG {502.12 USD, 2014-05-12}  ; with cost date
+  ! Account:Name 123.45 USD                           ; with flag</textarea></pre>
 
 ### Balance Assertions and Padding
 
@@ -142,9 +146,11 @@ option "title" "My Personal Ledger"</textarea></pre>
 
 <pre><textarea is="beancount-textarea">
 pushtag #trip-to-peru
-...
+; ... the given tag will be added to all entries in between the pushtag and poptag
 poptag  #trip-to-peru</textarea></pre>
 
+### Comments
+
 <pre><textarea is="beancount-textarea">
 ; inline comments begin with a semi-colon
 * any line not starting with a valid directive is also ignored silently</textarea></pre>
diff --git a/src/fava/help/budgets.md b/src/fava/help/budgets.md
@@ -1,3 +1,5 @@
+# Budgets
+
 Budgets on a per-account basis can be added via `custom` directives in the
 Beancount file:
 
@@ -20,10 +22,10 @@ This makes the budgets very flexible, allowing for a monthly budget, being taken
 over by a weekly budget, and so on.
 
 Fava displays budgets in both charts and reports. You can find a visualization
-of the global budget in the `Net Profit` and `Expenses` charts for the
-`Income Statement` report.
+of the global budget in the `Net Profit` and `Expenses` charts for the Income
+Statement report.
 
-The `Expenses` `Income Statement` report is a good starting point for getting
-access to the full budget information in Fava. The `Changes` charts visualize
-the data. The `Changes (monthly)` and `Balances (monthly)` reports show,
-respectively, the monthly and cumulative (over the selected period) budgets.
+The Income Statement report is a good starting point for getting access to the
+full budget information in Fava. The `Changes` charts visualize the data. The
+`Changes (monthly)` and `Balances (monthly)` reports show, respectively, the
+monthly and cumulative (over the selected period) budgets.
diff --git a/src/fava/help/extensions.md b/src/fava/help/extensions.md
@@ -1,3 +1,5 @@
+# Extensions
+
 Fava supports extensions. Extensions allow you to register hooks and generate
 your own report pages.
 

diff --git a/src/fava/help/features.md b/src/fava/help/features.md
@@ -1,3 +1,5 @@
+# Fava's features
+
 This is an overview of some of the more advanced features that Fava has to
 offer.
 

diff --git a/src/fava/help/filters.md b/src/fava/help/filters.md
@@ -1,3 +1,5 @@
+# Filters
+
 With the text inputs at the top right of the page, you can filter the entries
 that are displayed in Fava's reports. If you use multiple filters, the entries
 matching all of them will be selected.

diff --git a/src/fava/help/import.md b/src/fava/help/import.md
@@ -1,3 +1,5 @@
+# Import
+
 Fava can use Beancount's import system to semi-automatically import entries into
 your Beancount ledger. See
 [Importing External Data in Beancount](http://furius.ca/beancount/doc/ingest)

diff --git a/src/fava/help/options.md b/src/fava/help/options.md
@@ -1,10 +1,12 @@
+# Options
+
 To customize some of Fava's behaviour, you can add custom entries like the
 following to your Beancount file.
 
 <pre><textarea is="beancount-textarea">
 2016-06-14 custom "fava-option" "default-file"
 2016-04-14 custom "fava-option" "auto-reload" "true"
-2016-04-14 custom "fava-option" "currency-column" "100" </textarea></pre>
+2016-04-14 custom "fava-option" "currency-column" "100"</textarea></pre>
 
 Below is a list of all possible options for Fava.
 

diff --git a/tests/test_application.py b/tests/test_application.py
@@ -166,7 +166,7 @@ def test_jump_handler(
         assert get_url in {expect, expect_url}
 
 
-def test_help_ages(test_client: FlaskClient) -> None:
+def test_help_pages(test_client: FlaskClient) -> None:
     """Help pages."""
     result = test_client.get("/long-example/help/")
     assert result.status_code == 200