@turnipxenon/pineapple 2.4.29 → 2.4.31

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -0,0 +1,229 @@
+<script>import NavigationControl from "./NavigationControl.svelte";
+import { Card, createGoToFunction } from "../..";
+import { parsePageMeta } from "./PageMeta";
+export let title = void 0;
+export let fileList;
+export let parentSubpath;
+export let compareFn;
+export let pageSize = 5;
+export let currentIndex = 0;
+const pageFlatList = parsePageMeta(fileList, compareFn);
+$:
+  visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
+</script>
+
+<div class="navigation-wrapper">
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+	<div class="navigation-component">
+		{#if (title)}
+			<Card>
+				<h1 slot="content" class="default-card navigation-title">
+					{title}
+				</h1>
+			</Card>
+		{/if}
+		<!-- all the misc routes-->
+		{#each visiblePages as pageMeta}
+			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
+			<button class="navigation-element"
+			        title={fullPath}
+			        on:click={createGoToFunction(fullPath)}>
+				{#if pageMeta.image}
+					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{/if}
+				<section class="blurb-text">
+					<h2>{pageMeta.title}</h2>
+					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+					<p>{pageMeta.description ?? ""}</p>
+					Tags:
+					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+						{#each pageMeta.tags as tagValue}
+							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+						{/each}
+					{:else}
+						None
+					{/if}
+				</section>
+			</button>
+		{/each}
+
+		{#if visiblePages.length === 0}
+			<Card>
+				<p class="default-card" slot="content">Sorry, no content was found</p>
+			</Card>
+		{/if}
+	</div>
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+</div>
+
+<style>
+    img {
+        height: 20em;
+        width: 20em;
+        -o-object-fit: cover;
+           object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    @media (max-width: 50rem) {
+        img {
+            max-height: 20rem;
+            width: 100%;
+            flex-basis: 100%;
+            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
+        }
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    .navigation-element:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .navigation-element:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .navigation-element {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .navigation-element > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .navigation-element:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        background-color: rgb(var(--color-surface-100));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(23 23 23 / 0.05);
+        border-radius: var(--theme-rounded-container);
+}
+
+    .dark .navigation-element {
+        background-color: rgb(var(--color-surface-800));
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+        --tw-ring-inset: inset;
+        --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+    a.navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    a.navigation-element:hover {
+        --tw-brightness: brightness(1.05);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-element {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+}
+
+    .navigation-element:hover {
+        --tw-scale-x: 101%;
+        --tw-scale-y: 101%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+    .navigation-element {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .navigation-element) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .navigation-element {
+        display: flex;
+        flex-wrap: wrap;
+        text-align: start;
+        padding: 0;
+    }
+
+    .navigation-title {
+        text-align: center;
+    }
+
+    .blurb-text {
+        flex: 1;
+        padding: 2em;
+    }
+
+    .navigation-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+</style>

package/dist/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type ParsePageMetaCompareFn } from "./PageMeta";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        fileList: Record<string, unknown>;
+        /**
+             * Should include a slash before and after the path
+             */ parentSubpath: string;
+        compareFn: undefined | ParsePageMetaCompareFn;
+        pageSize?: number | undefined;
+        currentIndex?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavigationComponentProps = typeof __propDef.props;
+export type NavigationComponentEvents = typeof __propDef.events;
+export type NavigationComponentSlots = typeof __propDef.slots;
+export default class NavigationComponent extends SvelteComponent<NavigationComponentProps, NavigationComponentEvents, NavigationComponentSlots> {
+}
+export {};

package/dist/components/navigation_component/NavigationControl.svelte

@@ -0,0 +1,121 @@
+<script>import { onMount } from "svelte";
+export let currentIndex = 0;
+export let contentLength;
+export let pageSize;
+import { Card } from "../..";
+import { page } from "$app/stores";
+import { goto } from "$app/navigation";
+const queryIndex = $page.url.searchParams.get("index");
+if (queryIndex) {
+  currentIndex = parseInt(queryIndex) || 0;
+}
+const queryPageSize = $page.url.searchParams.get("pageSize");
+if (queryPageSize) {
+  pageSize = parseInt(queryPageSize) || 5;
+}
+const movePage = (isNext) => {
+  if (isNext) {
+    currentIndex = currentIndex + 1;
+  } else {
+    currentIndex = currentIndex - 1;
+  }
+  const query = new URLSearchParams($page.url.searchParams.toString());
+  query.set("index", currentIndex.toString());
+  goto(`?${query.toString()}`);
+};
+onMount(() => {
+  const query = new URLSearchParams($page.url.searchParams.toString());
+  query.set("index", currentIndex.toString());
+  query.set("pageSize", pageSize.toString());
+  goto(`?${query.toString()}`);
+});
+</script>
+
+<div class="navigation-control-container">
+	<button class="navigation-control-button"
+	        disabled={currentIndex <= 0}
+	        on:click={() => {movePage(false)}}>{"<"}</button>
+	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
+	<button class="navigation-control-button"
+	        disabled={(currentIndex + 1) * pageSize >= contentLength}
+	        on:click={() => {movePage(true)}}>{">"}</button>
+</div>
+
+<style>
+    .navigation-control-container {
+        display: flex;
+        justify-content: space-between;
+        margin: 1lh 0;
+    }
+
+    :is(.dark .navigation-control-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
+
+    .navigation-control-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .navigation-control-button:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .navigation-control-button {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .navigation-control-button > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .navigation-control-button:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .navigation-control-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
+
+    :is(.dark .navigation-control-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-secondary));
+}
+</style>

package/dist/components/navigation_component/NavigationControl.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        currentIndex?: number | undefined;
+        contentLength: number;
+        pageSize: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavigationControlProps = typeof __propDef.props;
+export type NavigationControlEvents = typeof __propDef.events;
+export type NavigationControlSlots = typeof __propDef.slots;
+export default class NavigationControl extends SvelteComponent<NavigationControlProps, NavigationControlEvents, NavigationControlSlots> {
+}
+export {};

package/dist/components/navigation_component/PageMeta.d.ts

@@ -0,0 +1,23 @@
+export interface PageMeta {
+    relativeLink: string;
+    nestedPages: PageMeta[];
+    title: string;
+    tags: string[];
+    /**
+     * Images are only limited to absolute paths (includes files in static folder)
+     */
+    image?: string;
+    imageAlt?: string;
+    description?: string;
+    datePublished?: string;
+    lastUpdated?: string;
+    shouldGroup?: boolean;
+}
+/**
+ * todo: doc
+ * @param parentList
+ * @param child
+ */
+export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMeta) => boolean;
+export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
+export declare const parsePageMeta: (fileList: Record<string, unknown>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];

package/dist/components/navigation_component/PageMeta.js

@@ -0,0 +1,76 @@
+/**
+ * todo: doc
+ * @param parentList
+ * @param child
+ */
+export const findPageMetaParent = (parentList, child) => {
+    let isChild = false;
+    parentList.every(parent => {
+        if (child.relativeLink.startsWith(`${parent.relativeLink}/`)) {
+            const isNestedChild = findPageMetaParent(parent.nestedPages, child);
+            if (!isNestedChild) {
+                parent.nestedPages.push(child);
+            }
+            isChild = true;
+            return false;
+        }
+        return true;
+    });
+    return isChild;
+};
+export const parsePageMeta = (fileList, compareFn) => {
+    const pageFlatList = [];
+    // save for the future
+    // let pageGroupedList: PageMeta[] = [];
+    for (const path in fileList) {
+        const pathParts = path.split("/");
+        pathParts.pop();
+        // get title
+        const title = pathParts[pathParts.length - 1].replaceAll("-", " ");
+        // get url path
+        const subPath = pathParts.filter(s => {
+            return s !== "." && s.indexOf("(") !== 0;
+        });
+        // todo: consider
+        // subPath.unshift("/misc");
+        const meta = {
+            relativeLink: subPath.join("/"),
+            title,
+            tags: [],
+            nestedPages: []
+            // todo: transform the data in server.ts?
+        };
+        const body = fileList[path].default;
+        // let metadata : undefined | Map<string, string | string[]>;
+        if (body.startsWith("<!--")) {
+            // todo: absorb more metadata
+            const metadata = JSON.parse(body.slice("<!--".length, body.indexOf("-->")));
+            meta.title = metadata["title"] ?? meta.title;
+            meta.tags = metadata["tags"];
+            meta.description = metadata["description"];
+            meta.datePublished = metadata["datePublished"];
+            meta.lastUpdated = metadata["lastUpdated"];
+            meta.shouldGroup = metadata["shouldGroup"];
+            meta.image = metadata["image"];
+            if (meta.image) {
+                meta.imageAlt = metadata["imageAlt"];
+                if (!meta.imageAlt) {
+                    console.warn(`Accessibility issues: image alt missing for image ${meta.image}`);
+                }
+            }
+        }
+        pageFlatList.push(meta);
+    }
+    pageFlatList.sort((a, b) => a.relativeLink.localeCompare(b.relativeLink));
+    // find groupings
+    // todo: we don't even have use for this yet!
+    // pageFlatList.forEach(p => {
+    // 	if (!findPageMetaParent(pageGroupedList, p)) {
+    // 		pageGroupedList.push(p);
+    // 	}
+    // });
+    if (compareFn) {
+        pageFlatList.sort(compareFn);
+    }
+    return pageFlatList;
+};

package/dist/components/navigation_component/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NavigationComponent } from "./NavigationComponent.svelte";
+export * from "./PageMeta";

package/dist/components/navigation_component/index.js

@@ -0,0 +1,3 @@
+// noinspection JSUnusedGlobalSymbols
+export { default as NavigationComponent } from "./NavigationComponent.svelte";
+export * from "./PageMeta";

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export * from "./components/overrideable_meta/index";
+export * from "./components/navigation_component/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export * from "./components/overrideable_meta/index";
+export * from "./components/navigation_component/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.29",
+  "version": "2.4.31",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/components/navigation_component/NavigationComponent.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import NavigationControl from "$pkg/components/navigation_component/NavigationControl.svelte";
+	import { Card, createGoToFunction } from "$pkg";
+	import { parsePageMeta, type ParsePageMetaCompareFn } from "$pkg/components/navigation_component/PageMeta";
+
+	export let title: string | undefined = undefined;
+	export let fileList: Record<string, unknown>;
+	/**
+	 * Should include a slash before and after the path
+	 */
+	export let parentSubpath: string;
+	export let compareFn: undefined | ParsePageMetaCompareFn;
+	export let pageSize = 5;
+	export let currentIndex = 0;
+
+	const pageFlatList = parsePageMeta(fileList, compareFn);
+
+	$: visiblePages = pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize);
+</script>
+
+<div class="navigation-wrapper">
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+	<div class="navigation-component">
+		{#if (title)}
+			<Card>
+				<h1 slot="content" class="default-card navigation-title">
+					{title}
+				</h1>
+			</Card>
+		{/if}
+		<!-- all the misc routes-->
+		{#each visiblePages as pageMeta}
+			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
+			<button class="navigation-element"
+			        title={fullPath}
+			        on:click={createGoToFunction(fullPath)}>
+				{#if pageMeta.image}
+					<img src={pageMeta.image} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+				{/if}
+				<section class="blurb-text">
+					<h2>{pageMeta.title}</h2>
+					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+					<p>{pageMeta.description ?? ""}</p>
+					Tags:
+					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+						{#each pageMeta.tags as tagValue}
+							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+						{/each}
+					{:else}
+						None
+					{/if}
+				</section>
+			</button>
+		{/each}
+
+		{#if visiblePages.length === 0}
+			<Card>
+				<p class="default-card" slot="content">Sorry, no content was found</p>
+			</Card>
+		{/if}
+	</div>
+
+	<NavigationControl bind:currentIndex={currentIndex}
+	                   bind:contentLength={pageFlatList.length}
+	                   bind:pageSize={pageSize}></NavigationControl>
+
+</div>
+
+<style lang="postcss">
+    img {
+        height: 20em;
+        width: 20em;
+        object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    @media (max-width: 50rem) {
+        img {
+            max-height: 20rem;
+            width: 100%;
+            flex-basis: 100%;
+            border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
+        }
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
+    .navigation-element {
+        @apply btn card card-hover bg-surface-100 dark:bg-surface-900;
+        display: flex;
+        flex-wrap: wrap;
+        text-align: start;
+        padding: 0;
+    }
+
+    .navigation-title {
+        text-align: center;
+    }
+
+    .blurb-text {
+        flex: 1;
+        padding: 2em;
+    }
+
+    .navigation-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+</style>