maint: misc presentation improvements; preview via run.sh

yozachar · Feb 18, 2024 · 64cd411 · 64cd411
1 parent 3f2f163
commit 64cd411
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 69 deletions.
diff --git a/hymnal/assets/styles/main.css b/hymnal/assets/styles/main.css
@@ -2,9 +2,11 @@
  * Black theme for reveal.js. This is the opposite of the 'white' theme.
  *
  * By Hakim El Hattab, http://hakim.se
+ *
+ * Modified by Jovial Joe Jayarson
  */
 
-@import "../fonts/NotoSerifMalayalam/NotoSerifMalayalam.css";
+@import url(../fonts/NotoSerifMalayalam/NotoSerifMalayalam.css);
 
 section.has-light-background,
 section.has-light-background h1,
@@ -17,37 +19,40 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * GLOBAL STYLES
-    *********************************************/
+  * GLOBAL STYLES
+  *********************************************/
 :root {
   --r-background-color: #191919;
   --r-main-font: NotoSerifMalayalam, Helvetica, sans-serif;
   --r-main-font-size: 42px;
-  --r-main-color: #fff;
   --r-block-margin: 20px;
   --r-heading-margin: 0 0 20px 0;
   --r-heading-font: NotoSerifMalayalam, Helvetica, sans-serif;
-  --r-heading-color: #fff;
   --r-heading-line-height: 1.2;
   --r-heading-letter-spacing: normal;
   --r-heading-text-transform: uppercase;
   --r-heading-text-shadow: none;
   --r-heading-font-weight: 600;
   --r-heading1-text-shadow: none;
-  --r-heading1-size: clamp(0.5em, 10vh, 2.5em);
-  --r-heading2-size: 1.6em; /* clamp(0.5em, 4vh, 1.6em); */
-  --r-heading3-size: clamp(0.5em, 4.3vh, 1.3em);
-  --r-heading4-size: 1em; /* clamp(0.5em, 4vh, 1em); */
+  --r-heading1-size: 3.5vmax; /* 2rem; 32px; */
+  --r-heading2-size: 1.5rem; /* 24px; */
+  --r-heading3-size: 1.25rem; /* 20px; */
+  --r-heading4-size: 1.125rem; /* 18px; */
+  /* colors */
+  --r-main-color: #fff;
+  --r-heading-color: #fff;
   --r-code-font: monospace;
   --r-link-color: #42affa;
   --r-link-color-dark: #068de9;
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
+/* Light Theme */
 @media (prefers-color-scheme: light) {
-  /* Set the variables to the values for the dark theme */
   section.has-dark-background,
   section.has-dark-background h1,
   section.has-dark-background h2,
@@ -70,6 +75,8 @@ section.has-light-background h6 {
     --r-link-color-hover: #6ca0e8;
     --r-selection-background-color: #98bdef;
     --r-selection-color: #fff;
+    --r-overlay-element-bg-color: 0, 0, 0;
+    --r-overlay-element-fg-color: 240, 240, 240;
   }
 }
 
@@ -101,11 +108,12 @@ section.has-light-background h6 {
 .reveal .slides section > section {
   line-height: 1.3;
   font-weight: inherit;
+  padding-top: 4rem;
 }
 
 /*********************************************
-    * HEADERS
-    *********************************************/
+  * HEADERS
+  *********************************************/
 .reveal h1,
 .reveal h2,
 .reveal h3,
@@ -144,8 +152,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * OTHER
-    *********************************************/
+  * OTHER
+  *********************************************/
 .reveal p {
   margin: var(--r-block-margin) 0;
   line-height: 1.3;
@@ -331,8 +339,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * LINKS
-    *********************************************/
+  * LINKS
+  *********************************************/
 .reveal a {
   color: var(--r-link-color);
   text-decoration: none;
@@ -351,8 +359,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * Frame helper
-    *********************************************/
+  * Frame helper
+  *********************************************/
 .reveal .r-frame {
   border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -368,34 +376,37 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * NAVIGATION CONTROLS
-    *********************************************/
+  * NAVIGATION CONTROLS
+  *********************************************/
 .reveal .controls {
   color: var(--r-link-color);
 }
 
 /*********************************************
-    * PROGRESS BAR
-    *********************************************/
+  * PROGRESS BAR
+  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
   color: var(--r-link-color);
 }
 
 /*********************************************
-    * PRINT BACKGROUND
-    *********************************************/
+  * PRINT BACKGROUND
+  *********************************************/
 @media print {
   .backgrounds {
     background-color: var(--r-background-color);
   }
 }
 
 /*********************************************
-   * CUSTOM DEFINITIONS
-   *********************************************/
-
-.reveal .verse-no {
+  * CUSTOM DEFINITIONS
+  *********************************************/
+.reveal .slides .verse-no {
   color: gray;
-  font-size: 0.45em;
+  font-size: 1rem;
+}
+
+.reveal .slides .line {
+  font-size: 2vmax;
 }
diff --git a/run.sh b/run.sh
@@ -21,23 +21,23 @@ echo -e "${BLUE}==> Build & Generate${RESET}"
 pdm run python ./src/hymnal/main.py &&
   pnpm build
 
-# # preview
-# pnpm preview
-
-# deploy
-commands=("docker" "podman")
-for cmd in "${commands[@]}"; do
-  if command_exists "$cmd"; then
-    echo -e "\n${BLUE}==> Deploy with '$cmd'${RESET}\n"
-    $cmd-compose -p hymnal -f ./compose.yaml down
-    $cmd-compose -p hymnal -f ./compose.yaml up -d
-    echo -e "\n${GREEN}==> Open http://[::1]:8080 in your browser${RESET}"
-    exit $?
-  else
-    echo -e "\n${YELLOW}==> Warning: Command '$cmd' not found${RESET}"
-  fi
-done
-echo -e "\n${RED}==> Error: Deploymnet failed${RESET}"
-exit 1
+# preview
+pnpm preview
+
+# # deploy
+# commands=("docker" "podman")
+# for cmd in "${commands[@]}"; do
+#   if command_exists "$cmd"; then
+#     echo -e "\n${BLUE}==> Deploy with '$cmd'${RESET}\n"
+#     $cmd-compose -p hymnal -f ./compose.yaml down
+#     $cmd-compose -p hymnal -f ./compose.yaml up -d
+#     echo -e "\n${GREEN}==> Open http://[::1]:8080 in your browser${RESET}"
+#     exit $?
+#   else
+#     echo -e "\n${YELLOW}==> Warning: Command '$cmd' not found${RESET}"
+#   fi
+# done
+# echo -e "\n${RED}==> Error: Deploymnet failed${RESET}"
+# exit 1
 
 set +e
diff --git a/src/hymnal/json2html.py b/src/hymnal/json2html.py
@@ -47,13 +47,13 @@ def _json_song_parser(hymn_path: Path, hymnal_name: str):
         hymn_number=hymn.number,
         hymnal_name=hymnal_name,
         relative_path="..",
-        start_tag="<h3>",
+        start_tag='<p class="line">',
         first_verse=hymn.verses[0] if hymn.verses else None,
         verses=hymn.verses if hymn.starts == "refrain" else hymn.verses[1:],
-        end_tag="</h3>",
-        start_ref_tag="<h3><em>",
+        end_tag="</p>",
+        start_ref_tag='<p class="line"><em>',
         refrain=hymn.refrain,
-        end_ref_tag="</em></h3>",
+        end_ref_tag="</em></p>",
     )
 
 

diff --git a/src/hymnal/main.py b/src/hymnal/main.py
@@ -20,7 +20,7 @@ def transform(program_root: Path, slug: str, hymnal_name: str):
     output_hymnal_html.mkdir(parents=True, exist_ok=True)
     # h2j_transform(temporary_source_hymnal_html, hymnal_json)
     j2h_transform(hymnal_json, output_hymnal_html, hymnal_name)
-    for asset_dirs in ("styles", "fonts"):
+    for asset_dirs in ("fonts", "scripts"):
         # $ ln -rs $(pwd)/hymnal/assets/styles $(pwd)/hymnal/{slug}/styles
         copytree(
             src=program_root / f"hymnal/{slug}/{asset_dirs}",

diff --git a/src/hymnal/templates/start-at-refrain-without-verses.html.j2 b/src/hymnal/templates/start-at-refrain-without-verses.html.j2
@@ -30,8 +30,6 @@
 
   <script src="{{ relative_path }}/lib/reveal.js/dist/reveal.js"></script>
   <script src="{{ relative_path }}/lib/reveal.js/plugin/notes/notes.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/markdown/markdown.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/highlight/highlight.js"></script>
   <script>
     // More info about initialization & config:
     // - https://revealjs.com/initialization/
@@ -40,7 +38,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(0, 0);
   </script>

diff --git a/src/hymnal/templates/start-at-refrain.html.j2 b/src/hymnal/templates/start-at-refrain.html.j2
@@ -22,7 +22,7 @@
       <section>
         {% for verse in verses %}
         <section id="verse-{{ loop.index }}">
-          <p class="verse-no">{{ loop.index }}.</p>
+          <h3 class="verse-no">{{ loop.index }}.</h3>
           {% for line in verse.lines %}
           {{ start_tag }}{{ line }}{{ end_tag }}
           {% endfor %}
@@ -40,8 +40,6 @@
 
   <script src="{{ relative_path }}/lib/reveal.js/dist/reveal.js"></script>
   <script src="{{ relative_path }}/lib/reveal.js/plugin/notes/notes.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/markdown/markdown.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/highlight/highlight.js"></script>
   <script>
     // More info about initialization & config:
     // - https://revealjs.com/initialization/
@@ -50,7 +48,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(1, 0);
   </script>

diff --git a/src/hymnal/templates/start-at-verse-with-refrain.html.j2 b/src/hymnal/templates/start-at-verse-with-refrain.html.j2
@@ -22,14 +22,14 @@
       <section>
         <section id="verse-1" class="start-here">
           <h1 class="hymn-no">{{ hymn_number }}</h1>
-          <p class="verse-no">1.</p>
+          <h3 class="verse-no">1.</h3>
           {% for line in first_verse.lines %}
           {{ start_tag }}{{ line }}{{ end_tag }}
           {% endfor %}
         </section>
         {% for verse in verses %}
         <section id="verse-{{ loop.index + 1 }}">
-          <p class="verse-no">{{ loop.index + 1}}.</p>
+          <h3 class="verse-no">{{ loop.index + 1}}.</h3>
           {% for line in verse.lines %}
           {{ start_tag }}{{ line }}{{ end_tag }}
           {% endfor %}
@@ -46,8 +46,6 @@
 
   <script src="{{ relative_path }}/lib/reveal.js/dist/reveal.js"></script>
   <script src="{{ relative_path }}/lib/reveal.js/plugin/notes/notes.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/markdown/markdown.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/highlight/highlight.js"></script>
   <script>
     // More info about initialization & config:
     // - https://revealjs.com/initialization/
@@ -56,7 +54,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(0, 0);
   </script>

diff --git a/src/hymnal/templates/start-at-verse-without-refrain.html.j2 b/src/hymnal/templates/start-at-verse-without-refrain.html.j2
@@ -22,7 +22,7 @@
       <section>
         {% for verse in verses %}
         <section id="verse-{{ loop.index + 1 }}">
-          <p class="verse-no">{{ loop.index + 1 }}.</p>
+          <h3 class="verse-no">{{ loop.index + 1 }}.</h3>
           {% for line in verse.lines %}
           {{ start_tag }}{{ line }}{{ end_tag }}
           {% endfor %}
@@ -31,7 +31,7 @@
       </section>
       <section id="verse-1" class="start-here">
         <h1 class="hymn-no">{{ hymn_number }}</h1>
-        <p class="verse-no">1.</p>
+        <h3 class="verse-no">1.</h3>
         {% for line in first_verse.lines %}
         {{ start_tag }}{{ line }}{{ end_tag }}
         {% endfor %}
@@ -41,8 +41,6 @@
 
   <script src="{{ relative_path }}/lib/reveal.js/dist/reveal.js"></script>
   <script src="{{ relative_path }}/lib/reveal.js/plugin/notes/notes.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/markdown/markdown.js"></script>
-  <script src="{{ relative_path }}/lib/reveal.js/plugin/highlight/highlight.js"></script>
   <script>
     // More info about initialization & config:
     // - https://revealjs.com/initialization/
@@ -51,7 +49,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(1, 0);
   </script>