moved type definitions to a separate directory and fixed some documentations under utils/

utils/types/dropDown.ts

@@ -0,0 +1,60 @@
+/**
+ * Types for DropDown component
+ * @module utils/dropDown
+ */
+
+/**
+ * Enum for interaction mode of DropDown component
+ * @readonly
+ * @enum {string}
+ */
+export const enum DropDownMode {
+    onMouseHover = "mousehover",
+    onClick = "click",
+}
+
+/**
+ * Enum for alignment of DropDown component
+ * @readonly
+ * @enum {number}
+ */
+export const enum DropDownAlignment {
+    Left,
+    Right,
+}
+
+/**
+ * Interface for the entry of DropDown menu
+ * @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;
+    link: string;
+}
+
+/**
+ * Interface for the property of DropDown component
+ * @typedef {object} DropDownProperty
+ * @property {string} label Label of the component
+ * @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;
+    mode: DropDownMode | string;
+    entries: Array<DropDownEntry>;
+    alignment?: DropDownAlignment | number;
+}
+
+export type { DropDownProperty, DropDownEntry };

utils/types/galleryEntry.ts

@@ -0,0 +1,18 @@
+/**
+ * Type for gallery image entry data
+ * @module utils/galleryEntry
+ */
+
+/**
+ * Interface for gallery image entry
+ * @property {number} id id from database
+ * @property {string} imagePath image URL
+ * @property {string} caption caption of the image
+ */
+interface GalleryEntry {
+    id: number;
+    imagePath: string;
+    caption: string;
+}
+
+export type { GalleryEntry };

utils/types/hamburgerMenu.ts

@@ -0,0 +1,18 @@
+/**
+ * Type for HamburgerMenu component
+ * @module utils/hamburgerMenu
+ */
+
+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>;
+}
+
+export type { HamburgerMenuProperty };

utils/types/linkCard.ts

@@ -0,0 +1,22 @@
+/**
+ * Type for LinkCard component
+ * @module utils/linkCard
+ */
+
+/**
+ * Interface that defines property for LinkCard component
+ * @property {string} title title of link
+ * @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;
+    description: string;
+    link: string;
+    imagePath?: string;
+}
+
+export type { LinkCardProperty };

utils/types/news.ts

@@ -0,0 +1,50 @@
+/**
+ * Types for news data
+ * @module utils/news
+ */
+
+/**
+ * Enumeration for news entry type of either article or tweet style
+ * @readonly
+ * @enum {number}
+ */
+const enum EntryType {
+    Article,
+    Tweet,
+}
+
+/**
+ * Interface for article information
+ * @typedef {object} ArticleInfo
+ * @property {number | null} date Unix time of article creation
+ * @property {string | null} article content of article itself
+ * @property {string | null} linkPath path to the article
+ * @property {string | null} coverImagePath Path to the cover image
+ */
+interface ArticleInfo {
+    date: number | null;
+    cardContent: string | null;
+    article: string | null;
+    linkPath: string | null;
+    coverImagePath: string | null;
+}
+
+/**
+ * Interface for news
+ * @typedef {object} NewsEntry
+ * @property {number | null} date Unix time of creation
+ * @property {EntryType | null} entryType Type of news
+ * @property {string | null} cardContent Content displayed on card
+ * @property {string | null} linkPath Link path to the article
+ * @property {string | null} coverImagePath Path to the cover image
+ */
+interface NewsEntry {
+    date: number | null;
+    entryType: EntryType | null;
+    cardContent: string | null;
+    linkPath: string | null;
+    coverImagePath: string | null;
+}
+
+export type { ArticleInfo, NewsEntry };
+export { EntryType };

utils/types/newsCard.ts

@@ -0,0 +1,20 @@
+/**
+ * Type for NewsCard component
+ * @module utils/newsCard
+ */
+
+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;
+    isNew: boolean;
+}
+
+export type { NewsCardProperty };

utils/types/pageTop.ts

@@ -0,0 +1,18 @@
+/**
+ * Type for PageTop component
+ * @module utils/pageTop
+ */
+
+/**
+ * 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;
+    imagePath: string;
+}
+
+export type { PageTopProperty };

utils/types/pankuzuList.ts

@@ -0,0 +1,20 @@
+/**
+ * Type for PankuzuList component
+ * @module utils/pankuzuList
+ */
+
+/**
+ * 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;
+}
+
+export type { PankuzuListProperty };

utils/types/qAndABox.ts

@@ -0,0 +1,18 @@
+/**
+ * Type for QAndABox component
+ * @module utils/qAndABox
+ */
+
+/**
+ * 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;
+}
+
+export type { QAndABoxProperty };

utils/types/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 };