@turnipxenon/pineapple 2.4.34 → 2.4.36

package/.idea/workspace.xml

@@ -4,10 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Migrate from relying on json instead of comments for meta">
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix NavigationComponent styling">
+      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page3/page5/meta.json" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page3/page7/(test_layout)/page8/meta.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/lib/components/navigation_component/PageMeta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/navigation_component/PageMeta.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page1/meta.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page1/meta.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page2/meta.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/(extra-pages)/page2/meta.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -86,40 +87,40 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;turnip/navigation&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)/pineapple/(extra-pages)/page2&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_interpreter_path&quot;: &quot;node&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev (1).executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev --open.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev offline.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev-offline.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "DefaultHtmlFileTemplate": "HTML File",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "turnip/navigation",
+    "ignore.virus.scanning.warn.message": "true",
+    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)/pineapple/(extra-pages)/page3/page7/(test_layout)/page8",
+    "list.type.of.created.stylesheet": "CSS",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_interpreter_path": "node",
+    "nodejs_package_manager_path": "yarn",
+    "npm.build.executor": "Run",
+    "npm.dev (1).executor": "Run",
+    "npm.dev --open.executor": "Run",
+    "npm.dev offline.executor": "Run",
+    "npm.dev-offline.executor": "Run",
+    "npm.dev.executor": "Run",
+    "settings.editor.selected.configurable": "preferences.pluginManager",
+    "ts.external.directory.path": "C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page3\page7\(test_layout)\page8" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page3\page5" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page2" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\navigation_component" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7\(test_layout)\page8" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3\page7" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\page3" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page1" />
@@ -246,23 +247,10 @@
       <workItem from="1711488375110" duration="856000" />
       <workItem from="1711490061858" duration="2823000" />
       <workItem from="1711492999560" duration="85000" />
-      <workItem from="1711493260312" duration="1358000" />
-    </task>
-    <task id="LOCAL-00062" summary="Improve text contrast in dark mode">
-      <option name="closed" value="true" />
-      <created>1710376338512</created>
-      <option name="number" value="00062" />
-      <option name="presentableId" value="LOCAL-00062" />
-      <option name="project" value="LOCAL" />
-      <updated>1710376338512</updated>
-    </task>
-    <task id="LOCAL-00063" summary="Add animation to dynamically added button in social section">
-      <option name="closed" value="true" />
-      <created>1710403640565</created>
-      <option name="number" value="00063" />
-      <option name="presentableId" value="LOCAL-00063" />
-      <option name="project" value="LOCAL" />
-      <updated>1710403640566</updated>
+      <workItem from="1711493260312" duration="1518000" />
+      <workItem from="1711494820779" duration="11000" />
+      <workItem from="1711495822479" duration="2695000" />
+      <workItem from="1711499095557" duration="657000" />
     </task>
     <task id="LOCAL-00064" summary="Implement normal state for PineappleBaseLayout">
       <option name="closed" value="true" />
@@ -640,7 +628,23 @@
       <option name="project" value="LOCAL" />
       <updated>1711492747331</updated>
     </task>
-    <option name="localTasksCounter" value="111" />
+    <task id="LOCAL-00111" summary="Add default sorter for NavigationComponent">
+      <option name="closed" value="true" />
+      <created>1711494655396</created>
+      <option name="number" value="00111" />
+      <option name="presentableId" value="LOCAL-00111" />
+      <option name="project" value="LOCAL" />
+      <updated>1711494655396</updated>
+    </task>
+    <task id="LOCAL-00112" summary="Fix NavigationComponent styling">
+      <option name="closed" value="true" />
+      <created>1711498416272</created>
+      <option name="number" value="00112" />
+      <option name="presentableId" value="LOCAL-00112" />
+      <option name="project" value="LOCAL" />
+      <updated>1711498416272</updated>
+    </task>
+    <option name="localTasksCounter" value="113" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -698,8 +702,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Add external link warning stub" />
-    <MESSAGE value="Refactor Game Section to separate component" />
     <MESSAGE value="Refactor GameSection out of SeaweedTemplate" />
     <MESSAGE value="Remove unnecessary imports and variables in SeaweedTemplate" />
     <MESSAGE value="Add page query param creator" />
@@ -723,6 +725,8 @@
     <MESSAGE value="Export NavigationComponent" />
     <MESSAGE value="Add a way to hide an entry in NavigationComponent" />
     <MESSAGE value="Migrate from relying on json instead of comments for meta" />
-    <option name="LAST_COMMIT_MESSAGE" value="Migrate from relying on json instead of comments for meta" />
+    <MESSAGE value="Add default sorter for NavigationComponent" />
+    <MESSAGE value="Fix NavigationComponent styling" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix NavigationComponent styling" />
   </component>
 </project>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte

@@ -35,7 +35,8 @@ $:
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
 				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+					<img src={pageMeta.imageUrl}
+					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 				{/if}
 				<section class="blurb-text">
 					<h2>{pageMeta.title}</h2>
@@ -44,7 +45,7 @@ $:
 					Tags:
 					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
 						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
 						{/each}
 					{:else}
 						None
@@ -67,28 +68,27 @@ $:
 </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) {
+    @media (max-width: 800px) {
         img {
             max-height: 20rem;
             width: 100%;
             flex-basis: 100%;
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
+
+        .navigation-element {
+            flex-direction: column;
+        }
     }
 
-    .navigation-component {
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
+    @media (min-width: 801px) {
+        .navigation-element {
+            flex-direction: row;
+        }
+
+        img {
+            width: 20em;
+        }
     }
 
     .dark .navigation-element {
@@ -210,22 +210,44 @@ $:
 
     .navigation-element {
         display: flex;
-        flex-wrap: wrap;
+        /*flex-direction: row;*/
         text-align: start;
+        align-items: flex-start;
         padding: 0;
     }
 
+    img {
+        height: 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);
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
     .navigation-title {
         text-align: center;
     }
 
     .blurb-text {
-        flex: 1;
         padding: 2em;
+        flex-grow: 1;
+        white-space: initial;
+        min-width: 0;
     }
 
     .navigation-wrapper {
         display: flex;
         flex-direction: column;
+        max-width: 1000px;
+    }
+
+    .tag-container {
+        margin: 0.25lh 0;
     }
 </style>

package/.svelte-kit/__package__/components/navigation_component/PageMeta.d.ts

@@ -49,7 +49,7 @@ export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMet
 export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
 export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList: Record<string, unknown>, imageMap: Map<string, string>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];
 /**
- * Prioritizes, in order, lastUpdated, datePublished, has description, then title
+ * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
  * @param a
  * @param b

package/.svelte-kit/__package__/components/navigation_component/PageMeta.js

@@ -100,30 +100,24 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
 const AWins = -1;
 const BWins = 1;
 /**
- * Prioritizes, in order, lastUpdated, datePublished, has description, then title
+ * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
  * @param a
  * @param b
  * @constructor
  */
 export const DefaultPageMetaSorter = (a, b) => {
-    if (a.lastUpdated && !b.lastUpdated) {
+    const aDate = a.lastUpdated || a.datePublished;
+    const bDate = b.lastUpdated || b.datePublished;
+    if (aDate && !bDate) {
         return AWins;
     }
-    else if (!a.lastUpdated && b.lastUpdated) {
+    else if (!aDate && bDate) {
         return BWins;
     }
-    else if (a.lastUpdated && b.lastUpdated) {
-        return a.lastUpdated.localeCompare(b.lastUpdated);
-    }
-    if (a.datePublished && !b.datePublished) {
-        return AWins;
-    }
-    else if (!a.lastUpdated && b.datePublished) {
-        return BWins;
-    }
-    else if (a.datePublished && b.datePublished) {
-        return a.datePublished.localeCompare(b.datePublished);
+    else if (aDate && bDate) {
+        // we invert the value because we want the dates to be in descending order
+        return -aDate.localeCompare(bDate);
     }
     if (a.description && !b.description) {
         return AWins;

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "1l3dq8o"
+	version_hash: "p3htw9"
 };
 
 export async function get_hooks() {

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -35,7 +35,8 @@ $:
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
 				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+					<img src={pageMeta.imageUrl}
+					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 				{/if}
 				<section class="blurb-text">
 					<h2>{pageMeta.title}</h2>
@@ -44,7 +45,7 @@ $:
 					Tags:
 					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
 						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
 						{/each}
 					{:else}
 						None
@@ -67,28 +68,27 @@ $:
 </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) {
+    @media (max-width: 800px) {
         img {
             max-height: 20rem;
             width: 100%;
             flex-basis: 100%;
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
+
+        .navigation-element {
+            flex-direction: column;
+        }
     }
 
-    .navigation-component {
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
+    @media (min-width: 801px) {
+        .navigation-element {
+            flex-direction: row;
+        }
+
+        img {
+            width: 20em;
+        }
     }
 
     .dark .navigation-element {
@@ -210,22 +210,44 @@ $:
 
     .navigation-element {
         display: flex;
-        flex-wrap: wrap;
+        /*flex-direction: row;*/
         text-align: start;
+        align-items: flex-start;
         padding: 0;
     }
 
+    img {
+        height: 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);
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
     .navigation-title {
         text-align: center;
     }
 
     .blurb-text {
-        flex: 1;
         padding: 2em;
+        flex-grow: 1;
+        white-space: initial;
+        min-width: 0;
     }
 
     .navigation-wrapper {
         display: flex;
         flex-direction: column;
+        max-width: 1000px;
+    }
+
+    .tag-container {
+        margin: 0.25lh 0;
     }
 </style>

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

@@ -49,7 +49,7 @@ export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMet
 export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
 export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList: Record<string, unknown>, imageMap: Map<string, string>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];
 /**
- * Prioritizes, in order, lastUpdated, datePublished, has description, then title
+ * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
  * @param a
  * @param b

package/dist/components/navigation_component/PageMeta.js

@@ -100,30 +100,24 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
 const AWins = -1;
 const BWins = 1;
 /**
- * Prioritizes, in order, lastUpdated, datePublished, has description, then title
+ * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
  * @param a
  * @param b
  * @constructor
  */
 export const DefaultPageMetaSorter = (a, b) => {
-    if (a.lastUpdated && !b.lastUpdated) {
+    const aDate = a.lastUpdated || a.datePublished;
+    const bDate = b.lastUpdated || b.datePublished;
+    if (aDate && !bDate) {
         return AWins;
     }
-    else if (!a.lastUpdated && b.lastUpdated) {
+    else if (!aDate && bDate) {
         return BWins;
     }
-    else if (a.lastUpdated && b.lastUpdated) {
-        return a.lastUpdated.localeCompare(b.lastUpdated);
-    }
-    if (a.datePublished && !b.datePublished) {
-        return AWins;
-    }
-    else if (!a.lastUpdated && b.datePublished) {
-        return BWins;
-    }
-    else if (a.datePublished && b.datePublished) {
-        return a.datePublished.localeCompare(b.datePublished);
+    else if (aDate && bDate) {
+        // we invert the value because we want the dates to be in descending order
+        return -aDate.localeCompare(bDate);
     }
     if (a.description && !b.description) {
         return AWins;

package/package.json

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

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

@@ -43,7 +43,8 @@
 			        title={fullPath}
 			        on:click={createGoToFunction(fullPath)}>
 				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl} alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
+					<img src={pageMeta.imageUrl}
+					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 				{/if}
 				<section class="blurb-text">
 					<h2>{pageMeta.title}</h2>
@@ -52,7 +53,7 @@
 					Tags:
 					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
 						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled">{tagValue}</span>
+							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
 						{/each}
 					{:else}
 						None
@@ -75,48 +76,69 @@
 </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) {
+    @media (max-width: 800px) {
         img {
             max-height: 20rem;
             width: 100%;
             flex-basis: 100%;
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
+
+        .navigation-element {
+            flex-direction: column;
+        }
     }
 
-    .navigation-component {
-        display: flex;
-        flex-direction: column;
-        gap: 2em;
+    @media (min-width: 801px) {
+        .navigation-element {
+            flex-direction: row;
+        }
+
+        img {
+            width: 20em;
+        }
     }
 
     .navigation-element {
         @apply btn card card-hover bg-surface-100 dark:bg-surface-900;
         display: flex;
-        flex-wrap: wrap;
+        /*flex-direction: row;*/
         text-align: start;
+        align-items: flex-start;
         padding: 0;
     }
 
+    img {
+        height: 20em;
+        object-fit: cover;
+        padding: var(--theme-border-base);
+        border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
+    }
+
+    .navigation-component {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+    }
+
     .navigation-title {
         text-align: center;
     }
 
     .blurb-text {
-        flex: 1;
         padding: 2em;
+        flex-grow: 1;
+        white-space: initial;
+        min-width: 0;
     }
 
     .navigation-wrapper {
         display: flex;
         flex-direction: column;
+        max-width: 1000px;
+    }
+
+    .tag-container {
+        margin: 0.25lh 0;
     }
 </style>

package/src/lib/components/navigation_component/PageMeta.ts

@@ -178,27 +178,23 @@ const AWins = -1;
 const BWins = 1;
 
 /**
- * Prioritizes, in order, lastUpdated, datePublished, has description, then title
+ * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
  * @param a
  * @param b
  * @constructor
  */
 export const DefaultPageMetaSorter: ParsePageMetaCompareFn = (a, b) => {
-	if (a.lastUpdated && !b.lastUpdated) {
-		return AWins;
-	} else if (!a.lastUpdated && b.lastUpdated) {
-		return BWins;
-	} else if (a.lastUpdated && b.lastUpdated) {
-		return a.lastUpdated.localeCompare(b.lastUpdated);
-	}
+	const aDate = a.lastUpdated || a.datePublished;
+	const bDate = b.lastUpdated || b.datePublished;
 
-	if (a.datePublished && !b.datePublished) {
+	if (aDate && !bDate) {
 		return AWins;
-	} else if (!a.lastUpdated && b.datePublished) {
+	} else if (!aDate && bDate) {
 		return BWins;
-	} else if (a.datePublished && b.datePublished) {
-		return a.datePublished.localeCompare(b.datePublished);
+	} else if (aDate && bDate) {
+		// we invert the value because we want the dates to be in descending order
+		return -aDate.localeCompare(bDate);
 	}
 
 	if (a.description && !b.description) {

package/src/routes/(pineapple)/pineapple/(extra-pages)/page1/meta.json

@@ -1,14 +1,24 @@
 {
-  "datePublished": "23-01-01",
-  "description": "random description but look at Ares!",
+  "datePublished": "2023-01-01",
+  "description": "random description but look at Ares! Let's try out a long-ish text to see how things would wrap and all that. I don't know what else to say. Please stream Umpah Umpah.",
   "imageAlt": "Image of Ares being excited",
   "imageID": "testImageID",
   "imageURL": "./favicon.png/?q=imageIDTakesPrecedence",
-  "lastUpdated": "23-02-02",
+  "lastUpdated": "2023-02-02",
   "shouldGroup": false,
   "shouldHide": false,
   "tags": [
-    "random"
+    "random",
+    "random8",
+    "random2",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random5",
+    "random4"
   ],
   "title": "Custom title for page 1!!!"
 }

package/src/routes/(pineapple)/pineapple/(extra-pages)/page3/page5/meta.json

@@ -0,0 +1,7 @@
+{
+  "datePublished": "2024-03-03",
+  "title": "555",
+  "tags": [
+    "random"
+  ]
+}

package/src/routes/(pineapple)/pineapple/(extra-pages)/page3/page7/(test_layout)/page8/meta.json

@@ -0,0 +1,7 @@
+{
+  "title": "801 yay",
+  "description": "something",
+  "tags": [
+    "random"
+  ]
+}