added notify support, added tips-tricks-trivia document

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@electron/remote": "^2.0.10",
+    "@quasar/cli": "^2.3.0",
     "@quasar/extras": "^1.16.4",
     "app-root-path": "^3.1.0",
     "axios": "^1.2.1",

quasar.config.js

@@ -28,7 +28,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['i18n', 'axios', 'externalLinkManager'],
+    boot: ['i18n', 'axios', 'externalLinkManager', 'notify-defaults'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
@@ -115,7 +115,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Dialog']
+      plugins: ['Dialog', 'Notify']
     },
 
     // animations: 'all', // --- includes all animations

src/App.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
+import { tipsTricksTriviaNotification } from 'app/src/scripts/appInfo/tipsTricksTriviaNotification'
 
 /**
  * Local router variable
@@ -20,15 +21,23 @@ const testingType = window.extraEnvVariables.TEST_ENV
  */
 const testingComponentName = window.extraEnvVariables.COMPONENT_NAME
 
+/**
+ * Determine if some testing is happening
+ */
+const isComponentTesting = (testingType && testingType === 'components' && testingComponentName)
+
 /**
  * In case of some testing happening:
  * - Reroute to the proper component path route assuming all is properly set.
  * - Otherwise, make sure we are on homepage on load.
  */
-if (testingType && testingType === 'components' && testingComponentName) {
+if (isComponentTesting) {
   router.push({ path: `/componentTesting/${testingComponentName}` })
 } else {
   router.push({ path: '/' })
+  // TODO add checking if "Did you know" popup should show
+  // TODO add checking if "Did you know" popup should be showing a mascot or an icon
+  tipsTricksTriviaNotification(false)
 }
 
 </script>

src/boot/notify-defaults.ts

@@ -0,0 +1,8 @@
+import { Notify } from 'quasar'
+
+Notify.setDefaults({
+  position: 'bottom-right',
+  timeout: 4000,
+  progress: true,
+  textColor: 'cultured'
+})

src/components/AppControlMenus/_data/helpInfo.ts

@@ -32,8 +32,8 @@ export const helpInfo: I_appMenusDataList = {
       mode: 'item',
       text: i18n.global.t('AppControlMenus.helpInfo.items.tipsTricksTrivia'),
       icon: 'mdi-fire-alert',
-      submenu: undefined,
-      trigger: undefined,
+      trigger: openDialogMarkdownDocument,
+      triggerArguments: ['tipsTricksTrivia'],
       conditions: true,
       specialColor: undefined
     },

src/components/DialogMarkdownDocument/DialogMarkdownDocument.vue

@@ -121,10 +121,18 @@ onMounted(() => {
     width: 1100px;
   }
 
+  &.tipsTricksTrivia .q-card {
+    width: 1100px;
+  }
+
   &__content {
     overflow: auto;
     max-height: calc(100vh - 235px);
-    height: 850px;
+    min-height: 650px;
+
+    &.tipsTricksTrivia {
+      padding-right: 40px;
+    }
 
     &.changeLog {
       padding-right: 40px;

src/components/FantasiaMascotImage/FantasiaMascotImage.vue

@@ -16,17 +16,7 @@
 
 <script setup lang="ts">
 
-/**
- * A list of all Fantasia mascot images currently avaiable
- */
-const fantasiaImageList: { [key: string]: string } = {
-  didYouKnow: 'images/fantasiaMascot/fantasia_didYouKnow.png',
-  flop: 'images/fantasiaMascot/fantasia_flop.png',
-  hug: 'images/fantasiaMascot/fantasia_hug.png',
-  reading: 'images/fantasiaMascot/fantasia_reading.png',
-  cooking: 'images/fantasiaMascot/fantasia_cooking.png',
-  error: 'images/fantasiaMascot/fantasia_error.png'
-}
+import { fantasiaImageList, determineCurrentImage } from 'app/src/scripts/appInfo/fantasiaMascotImageManager'
 
 /**
  * All component props
@@ -69,31 +59,10 @@ const props = defineProps({
  */
 const isRandom = ((imageUrl: string) => (imageUrl === ''))(props.fantasiaImage)
 
-/**
- * Get a random image URL from the whole list of all available images
- */
-const randomMascotImage = (list: { [key: string]: string }) => {
-  // Cryptic code from SO: https://stackoverflow.com/a/15106541
-  const keys = Object.keys(list)
-  return list[keys[keys.length * Math.random() << 0]]
-}
-
-/**
- * Determine what current URL link we will be rendering.
- * If a specific image URL if one is chosen, otherwise return a random image URL.
- */
-const determineCurrentImage = (list: { [key: string]: string }) => {
-  if (isRandom) {
-    return randomMascotImage(list)
-  } else {
-    return list[props.fantasiaImage]
-  }
-}
-
 /**
  * Currently selected image URL for rendering
  */
-const currentMascotImage = determineCurrentImage(fantasiaImageList)
+const currentMascotImage = determineCurrentImage(fantasiaImageList, isRandom, props.fantasiaImage)
 
 </script>
 

src/css/globals/quasarComponentsAdjustments.scss

@@ -115,3 +115,40 @@ body.desktop .q-focusable:focus > .q-focus-helper {
   user-select: none;
   pointer-events: none;
 }
+
+.q-notification {
+  &.bg-info {
+    max-width: 550px;
+    border: 2px solid $qNotify-bgColor;
+    color: $qNotify-color;
+
+    i {
+      color: $qNotify-icon-color;
+    }
+  }
+
+  &__message {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &__caption {
+    opacity: 1;
+  }
+
+  &__avatar {
+    height: 135px;
+    width: 135px;
+    margin-right: 30px;
+    flex-shrink: 0;
+    border-radius: 0;
+    margin-top: 15px;
+    margin-bottom: 15px;
+
+    img {
+      object-fit: contain;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}

src/css/quasar.variables.scss

@@ -47,6 +47,11 @@ $qCard-errorPage-border-color: $dark;
 $qCard-errorPage-border-size: 2px;
 $qCard-errorPage-border-radius: 5px;
 
+/* QUASAR COMPONENT - NOTIFY */
+$qNotify-bgColor: $dark;
+$qNotify-color: $dark;
+$qNotify-icon-color: $dark;
+
 /* COMPONENT - GLOBAL WINDOW BUTTONS */
 $globalWindowButtons_height: 35px;
 $globalWindowButtons_color: $accent;

src/i18n/en-US/documents/tipsTricksTrivia.md

@@ -0,0 +1,21 @@
+- Typing `@` symbol while editing big text editor fields will allow you to link to other documents directly inside the text-editor!
+- `CTRL+SHIFT` will bring up a full-page search in case you are hunting for that particular word in the current document!
+- Any field in the document editing mode with the small dropdown arrow allows for custom values! Just close the menu of predefined values with ESC, type your desired value and confirm with `ENTER`.
+- It is possible to search through all documents and all of their fields at once using the following in either the Quick search popup or any of the relationship searches: `%field-name:whatever-you-need`
+- There is a whole list of really helpful keybinds that can make your use of FA a lot quicker and easier!
+- The settings menu contains a whole assortment of both big and small tweaks to tailor the app to your needs!
+- FA has a Dark Mode that is no mere afterthought and is fully serviceable!
+- Many parts of the app react to a middle-mouse click. For example, you can close document tabs or open hierarchical tree items with it directly!
+- Fantasia Archive is free; no strings attached: No ads, no trackers, no crypto-mining happening on your PC and all your data is all yours!
+- If these tips annoy you, there is a switch to turn them off in the program settings.
+- The Relationship searching functionality is packed to the brim with extra features you can use to find what you need! Read all about it in the `Advanced search guide` in the Help menu!
+- Your project gets auto-saved on exit, but it is recommended to use the `Save` function once in a while to make sure the data stays safe.
+- The left hierarchical tree is expandable with a mouse-drag and the program remembers where you left it the next time you launch!
+- Don't hesitate to add as many sub-categories as you want. You can always move stuff around later and reorganize your project structure.
+- Tags are a very powerful feature that allow you to add semi-categories to the project tree and create additional search parameters to aid navigation.
+- There is a roadmap of planned features on Patreon! If you are curious about what will eventually come, feel free to read it.
+- This software is actually a local website pretending to be a desktop application! Technology is crazy!
+- If you ever need a good, offline map-making software, look at Wonderdraft and Dungeondraft by Megasploot!
+- The adorable little arcane dragon you might have seen while using the app is called Fantasia and she is the official mascot of FA!
+- If you ever feel like sponsoring the development, there is Patreon. If you can't/don't want to; that is perfectly fine too - just have fun with the app and build something cool with it!
+- DISCLAIMER: No magical creatures were harmed during the making of this software.

src/i18n/en-US/index.ts

@@ -8,6 +8,7 @@ import advancedSearchCheatSheet from './documents/advancedSearchCheatSheet.md'
 import advancedSearchGuide from './documents/advancedSearchGuide.md'
 import changeLog from './documents/changeLog.md'
 import license from './documents/license.md'
+import tipsTricksTrivia from './documents/tipsTricksTrivia.md'
 
 export default {
   // GLOBAL - DOCUMENTS
@@ -15,7 +16,8 @@ export default {
     advancedSearchCheatSheet: specialCharacterFixer(advancedSearchCheatSheet),
     advancedSearchGuide: specialCharacterFixer(advancedSearchGuide),
     changeLog: specialCharacterFixer(changeLog),
-    license: specialCharacterFixer(license)
+    license: specialCharacterFixer(license),
+    tipsTricksTrivia: specialCharacterFixer(tipsTricksTrivia)
   },
 
   // GLOBAL - APP TEXTS
@@ -31,6 +33,11 @@ export default {
     ctaText: 'Return to app start screen'
   },
 
+  // QUASAR COMPONENT - NOTIFY
+  QuasarNotify: {
+    didYouKnow: 'Did you know?'
+  },
+
   // COMPONENT - GLOBAL WINDOW BUTTONS
   GlobalWindowButtons: {
     minimizeButton: 'Minimize',

src/scripts/_utilities/mdListArrayConvertor.ts

@@ -0,0 +1,13 @@
+export function mdListArrayConvertor (mdString: string) {
+  // Remove leading "- "
+  let removedLeads = mdString.replaceAll('\n- ', '\n')
+  if (removedLeads.substring(0, 2) === '- ') { removedLeads = removedLeads.slice(2) }
+
+  // Cleaned up ` characters and replace them with "
+  const cleanedString = removedLeads.replaceAll('`', '"')
+
+  // Split the list by leading newline characters and remove the last empty line (if present)
+  const tipArray = cleanedString.split('\n')
+  if (tipArray[tipArray.length - 1] === '') { tipArray.pop() }
+  return tipArray
+}

src/scripts/appInfo/fantasiaMascotImageManager.ts

@@ -0,0 +1,32 @@
+/**
+ * A list of all Fantasia mascot images currently avaiable
+ */
+export const fantasiaImageList: { [key: string]: string } = {
+  didYouKnow: 'images/fantasiaMascot/fantasia_didYouKnow.png',
+  flop: 'images/fantasiaMascot/fantasia_flop.png',
+  hug: 'images/fantasiaMascot/fantasia_hug.png',
+  reading: 'images/fantasiaMascot/fantasia_reading.png',
+  cooking: 'images/fantasiaMascot/fantasia_cooking.png',
+  error: 'images/fantasiaMascot/fantasia_error.png'
+}
+
+/**
+ * Get a random image URL from the whole list of all available images
+ */
+export const randomMascotImage = (list: { [key: string]: string }) => {
+  // Cryptic code from SO: https://stackoverflow.com/a/15106541
+  const keys = Object.keys(list)
+  return list[keys[keys.length * Math.random() << 0]]
+}
+
+/**
+ * Determine what current URL link we will be rendering.
+ * If a specific image URL if one is chosen, otherwise return a random image URL.
+ */
+export const determineCurrentImage = (list: { [key: string]: string }, isRandom: boolean, id: string) => {
+  if (isRandom) {
+    return randomMascotImage(list)
+  } else {
+    return list[id]
+  }
+}

src/scripts/appInfo/tipsTricksTriviaNotification.ts

@@ -0,0 +1,21 @@
+import { Notify } from 'quasar'
+import { i18n } from 'app/src/i18n/externalFileLoader'
+
+import { fantasiaImageList, determineCurrentImage } from 'app/src/scripts/appInfo/fantasiaMascotImageManager'
+import { mdListArrayConvertor } from '../_utilities/mdListArrayConvertor'
+
+export const tipsTricksTriviaNotification = (hideMascot: boolean) => {
+  const messageList = mdListArrayConvertor(i18n.global.t('documents.tipsTricksTrivia'))
+
+  const randomMessage = messageList[messageList.length * Math.random() << 0]
+
+  Notify.create({
+    timeout: 15000,
+    icon: (hideMascot) ? 'mdi-help' : undefined,
+    color: 'info',
+    message: i18n.global.t('QuasarNotify.didYouKnow'),
+    avatar: (!hideMascot) ? determineCurrentImage(fantasiaImageList, true, '') : undefined,
+    caption: randomMessage,
+    actions: [{ icon: 'mdi-close', color: 'white' }]
+  })
+}