added slide component, twwek some pages, and enchanced docs

utils/asyncDatabase.ts

@@ -17,6 +17,13 @@ type asyncDatabaseVoidCallbackFunction = () => any;
  * @param {string} sqlQuery SQL query to execute
  * @param {asyncDatabaseRowsCallbackFunction} callback callback to perform further operations on each row
  * @returns {Promise<Type>} Promise for database operation
+ * @example
+ * interface Person {
+ *     name: string;
+ *     age: number;
+ *     birthday: string;
+ * }
+ * let allRows = await asyncDatabaseRead<Array<Person>>(db, "SELECT * FROM people;", (rows) => { return rows; });
  */
 const asyncDatabaseRead = async <Type>(
     database: sqlite3.Database,
@@ -41,6 +48,8 @@ const asyncDatabaseRead = async <Type>(
  * @param {string} sqlQuery SQL query to execute
  * @param {asyncDatabaseVoidCallbackFunction} callback callback to perform after the operation
  * @returns {Promise<Type>} Promise for database operation
+ * @example
+ * await asyncDatabaseWrite(db, "INSERT INTO people (name, age, birthday) VALUES ('Ben', 21, '1970-1-1');", () => {});
  */
 const asyncDatabaseWrite = async <Type>(
     database: sqlite3.Database,

utils/dropDown.ts

@@ -28,6 +28,12 @@ export const enum DropDownAlignment {
  * @typedef {object} DropDownEntry
  * @property {string} text Text to be displayed on the menu
  * @property {string} link Hyperlink to the page
+ * @example
+ * const menuEntries: Array<DropDownEntry> = [
+ *     { text: "Home", link: "/" },
+ *     { text: "About", link: "/about" },
+ *     { text: "Blog", link: "/blog" },
+ * ];
  */
 interface DropDownEntry {
     text: string;
@@ -41,6 +47,8 @@ interface DropDownEntry {
  * @property {(DropDownMode | string)} mode Interaction mode of the component
  * @property {Array<DropDownEntry>} entries Entries of DropDown menu
  * @property {(DropDownAlignment | number)=} alignment Explicitly assign the alignment of the component
+ * @example
+ * <DropDown label="Menu" :mode="DropDownMode.onClick" :alignment="DropDownAlignment.Left" :entries="menuEntries" />
  */
 interface DropDownProperty {
     label: string;

utils/hamburgerMenu.ts

@@ -8,6 +8,8 @@ import type { DropDownEntry } from "#imports";
 /**
  * Interface for HamburgerMenu component properties
  * @property {Array<DropDownEntry>} entries Array of {@link DropDownEntry} objects representing the menu items in the hamburger menu.
+ * @example
+ * <HamburgerMenu :entries="menuEntries" />
  */
 interface HamburgerMenuProperty {
     entries: Array<DropDownEntry>;

utils/linkCard.ts

@@ -9,6 +9,8 @@
  * @property {string} description description of link
  * @property {string} link link itself
  * @property {string=} imagePath optional path to image to display with
+ * @example
+ * <LinkCard title="Test Article" description="Test entry for the website." link="/blog/test" image-path="blog-cover-image.jpg" />
  */
 interface LinkCardProperty {
     title: string;

utils/newsCard.ts

@@ -9,6 +9,8 @@ import type { NewsEntry } from "./news";
  * Interface that defines property for NewsCard component
  * @property {NewsEntry} newsEntry Data of news
  * @property {boolean} isNew Mark the entry new
+ * @example
+ * <NewsCard :news-entry="articleData" :is-new="isFirstElement(articleData)" />
  */
 interface NewsCardProperty {
     newsEntry: NewsEntry;

utils/pageTop.ts

@@ -7,6 +7,8 @@
  * Interface that defines property for PageTop component
  * @property {string} text Text to show in top
  * @property {string} imagePath Path to image used in background
+ * @example
+ * <PageTop text="News" image-path="/images/news-top.jpg" />
  */
 interface PageTopProperty {
     text: string;

utils/pankuzuList.ts

@@ -6,6 +6,12 @@
 /**
  * Interface for PankuzuList component property.
  * @property {string=} currentPageName Name of page to show at the end of pankuzu list.
+ * @example
+ * // /about/about.vue
+ * <PankuzuList />
+ * @example
+ * // /some-dir/some-page.vue
+ * <PankuzuList currentPageName="Some Where in the maze" />
  */
 interface PankuzuListProperty {
     currentPageName?: string;

utils/qAndABox.ts

@@ -6,6 +6,10 @@
 /**
  * Interface that defines property for QAndABox component
  * @property {string} question
+ * @example
+ * <QAndABox question="Where can I find this Usage?">
+ *     <p>Read Your F* Manual.</p>
+ * </QAndABox>
  */
 interface QAndABoxProperty {
     question: string;

utils/slide.ts

@@ -0,0 +1,43 @@
+/**
+ * Types for Slide component
+ * @module utils/slide.ts
+ */
+
+/**
+ * Entries to show in the slide show
+ * @property {string} imagePath path to the image
+ * @property {string} title text to show in the h1 element
+ * @property {string} content text to show in the p element
+ * @property {string=} link optional link to a page
+ * @example
+ * let entry: SlideEntry = {
+ *     imagePath: "/images/slide/1.jpg",
+ *     title: "First Slide",
+ *     content: "This is first slide",
+ *     link: "/to-some-page",
+ * };
+ */
+interface SlideEntry {
+    imagePath: string;
+    title: string;
+    content: string;
+    link?: string;
+}
+
+/**
+ * Interface for Slide component
+ * @property {Array<SlideEntry>} entries slides to show
+ * @property {number} duration duration for each slide to show in milliseconds
+ * @property {string} width css width property value
+ * @property {string} height css height property value
+ * @example
+ * <Slide :entries="slideEntries" duration="5000" width="200px" height="150px" />
+ */
+interface SlideProperty {
+    entries: Array<SlideEntry>;
+    duration: number;
+    width: string;
+    height: string;
+}
+
+export type { SlideEntry, SlideProperty };