cleanup: small print article tweaks (#100)

* fix: contrast issues

* cleanup: small print article tweaks

- add a middle dot between reading time and the print button (looks better tbh)
- Hide the navigation bar and menu bar since the button is to print the article

* cleanup: make print button hidden on print

Alongside making sure that the content's body text color is black (also on print)

* feat: custom footer text for pdfs

recipe.yml

@@ -7,7 +7,6 @@ stages:
     labels:
       maintainer: Vanilla OS Contributors
     entrypoint:
-      workdir: /app
       exec:
         - /bin/sh
         - '-c'

src/App.vue

@@ -1,11 +1,12 @@
 <template>
   <div :class="{ 'sticky top-0 z-50 shadow': stickyTopbar }" class="bg-white dark:bg-gray-900">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <nav class="flex justify-between items-center py-4" aria-label="main navigation">
+      <nav class="flex justify-between items-center py-4 print:hidden" aria-label="main navigation">
         <router-link to="/" class="flex items-center">
           <img :src="chronosConfig.logoUrl" class="w-7 min-w-7 h-7 min-h-7" alt="Logo" />
-          <h1 class="text-lg font-semibold ml-2 hidden sm:block text-gray-900 dark:text-gray-100">{{
-            chronosConfig.logoTitle }}</h1>
+          <h1 class="text-lg font-semibold ml-2 hidden sm:block text-gray-900 dark:text-gray-100">
+            {{ chronosConfig.logoTitle }}
+          </h1>
         </router-link>
 
         <div class="flex-1 mx-4 relative">
@@ -42,8 +43,12 @@
               <div class="flex items-center space-x-2">
                 <i class="mdi material-icons text-gray-500 dark:text-gray-400">book</i>
                 <div class="flex-1">
-                  <p class="font-semibold text-gray-900 dark:text-gray-100">{{ result.Title }}</p>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ result.Description }}</p>
+                  <p class="font-semibold text-gray-900 dark:text-gray-100">
+                    {{ result.Title }}
+                  </p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ result.Description }}
+                  </p>
                 </div>
               </div>
             </span>
@@ -69,10 +74,14 @@
 
     <footer class="bg-white dark:bg-gray-900 mt-12">
       <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center">
-        <p class="text-base text-gray-600 dark:text-gray-400">
+        <p class="text-base text-gray-600 dark:text-gray-400 print:hidden">
           <strong>Chronos</strong> by <a href="https://vanillaos.org"
             class="text-blue-800 dark:text-blue-400 hover:underline">Vanilla OS</a>.
         </p>
+        <p class="text-base text-gray-600 dark:text-gray-400 hidden print:block">
+          PDF generated with <strong>Chronos</strong> by <a href="https://vanillaos.org"
+            class="text-blue-800 dark:text-blue-400 hover:underline">Vanilla OS</a>.
+        </p>
       </div>
     </footer>
   </div>
@@ -125,13 +134,15 @@ export default defineComponent({
     });
 
     // Dark mode
-    const userPrefersDark = localStorage.getItem('darkMode') === 'true' ||
-      (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const userPrefersDark =
+      localStorage.getItem("darkMode") === "true" ||
+      (!("darkMode" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
     this.isDarkMode = userPrefersDark;
     if (userPrefersDark) {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add("dark");
     } else {
-      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.remove("dark");
     }
   },
   methods: {
@@ -144,7 +155,11 @@ export default defineComponent({
     async searchArticles() {
       try {
         // @ts-ignore
-        const response = await this.$chronosAPI.searchArticles(this.chronosStore.prefLang, this.search, this.collectionShortName);
+        const response = await this.$chronosAPI.searchArticles(
+          this.chronosStore.prefLang,
+          this.search,
+          this.collectionShortName,
+        );
         if (response != null) {
           this.searchResponse = response;
         } else {
@@ -156,7 +171,9 @@ export default defineComponent({
       }
     },
     goToArticle(slug: string) {
-      this.$router.push(`/${this.collectionShortName}/${this.chronosStore.prefLang}/${slug}`);
+      this.$router.push(
+        `/${this.collectionShortName}/${this.chronosStore.prefLang}/${slug}`,
+      );
       this.searchResponse = [];
       this.search = "";
     },
@@ -168,17 +185,22 @@ export default defineComponent({
         // Fetch languages for the specific collection
         try {
           // @ts-ignore
-          this.langs = await this.$chronosAPI.getLangs(this.collectionShortName);
+          this.langs = await this.$chronosAPI.getLangs(
+            this.collectionShortName,
+          );
         } catch (error) {
-          console.error(`Error fetching languages for collection ${this.collectionShortName}:`, error);
+          console.error(
+            `Error fetching languages for collection ${this.collectionShortName}:`,
+            error,
+          );
         }
       }
     },
 
     toggleDarkMode() {
-      document.documentElement.classList.toggle('dark');
-      const isDarkMode = document.documentElement.classList.contains('dark');
-      localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
+      document.documentElement.classList.toggle("dark");
+      const isDarkMode = document.documentElement.classList.contains("dark");
+      localStorage.setItem("darkMode", isDarkMode ? "true" : "false");
       this.isDarkMode = isDarkMode;
     },
     emptySearch() {

src/views/ArticleView.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2"
+    <nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 print:hidden"
         aria-label="breadcrumbs">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <ul class="flex space-x-2">
@@ -48,8 +48,8 @@
                 </a>
             </div>
             <div class="flex flex-row justify-center mt-2 align-middle">
-                <p class="mt-4 text-gray-700 dark:text-gray-400"><b>Reading time:</b> {{ readingTime }}</p>
-                <div class="px-6 py-3.5 inline-flex justify-center align-middle cursor-pointer" @click="printArticle">
+                <p class="mt-4 text-gray-700 dark:text-gray-400"><b>Reading time:</b> {{ readingTime }} <span class="print:hidden">&middot;</span></p>
+                <div class="px-6 py-3.5 inline-flex justify-center align-middle cursor-pointer print:hidden" @click="printArticle">
                     <span class="toolBox-item-icon mdi material-icons -ml-4">print</span>
                 </div>
             </div>
@@ -76,7 +76,7 @@
             </div>
         </aside>
         <div class="w-full lg:w-3/4 lg:pl-4">
-            <div class="content prose dark:prose-invert article-content" v-html="article.Body"></div>
+            <div class="content prose dark:prose-invert print:text-black article-content" v-html="article.Body"></div>
             <div class="flex justify-between mt-8 space-x-4">
                 <div class="w-1/2">
                     <router-link v-if="previousArticle && previousArticle.Slug !== undefined"
@@ -109,7 +109,7 @@
     </div>
 
     <button @click="isSidebarVisible = !isSidebarVisible"
-        class="material-icons fixed bottom-4 right-4 bg-blue-600 text-white p-4 rounded-full z-50 md:hidden">
+        class="material-icons fixed bottom-4 right-4 bg-blue-600 text-white p-4 rounded-full z-50 md:hidden print:hidden">
         menu
     </button>