@turnipxenon/pineapple 2.4.76 → 2.4.78

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

@@ -40,6 +40,43 @@ export interface PageMeta {
      */
     title: string;
 }
+export interface SimplePageMeta {
+    datePublished?: string;
+    description?: string;
+    imageAlt?: string;
+    /**
+     * imageID is an ID that NavigationComponent can use to identify imported images
+     *
+     * To use imageID:
+     * 1. Add the imageID entry to the meta.json for the page
+     * 2. Create a typescript file with the variable ImageMap: Map<string, string>
+     * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
+     * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
+     * 4. Add ImageMap as an argument to your NavigationComponent.
+     * Overall, this involves four files
+     * - Your navigation page: ./+page.svelte
+     * - Your image map typescript: ImageMap.ts
+     * - The page you want with an image represented in the navigation: ./topic1/+page.svelte
+     * - The meta for that page: ./topic1/meta.json
+     *
+     * imageID takes precedence over imageURL
+     */
+    imageID?: string;
+    /**
+     * imageURL is only limited to absolute paths (includes files in static folder)
+     *
+     * if imageID is defined, this will be ignored
+     */
+    imageUrl?: string;
+    lastUpdated?: string;
+    shouldGroup?: boolean;
+    shouldHide?: boolean;
+    tags: string[];
+    /**
+     * title defaults to the directory name if it's an empty string.
+     */
+    title: string;
+}
 /**
  * todo: doc
  * @param parentList

package/dist/components/overrideable_meta/OverridableMetaProps.d.ts

@@ -4,4 +4,6 @@ export interface OverridableMetaProps {
     ogTitle?: string;
     ogDescription?: string;
     ogImage?: string;
+    datePublished?: string;
+    lastUpdated?: string;
 }

package/dist/template/seaweed/SeaweedTemplate.svelte

@@ -17,6 +17,7 @@ import { Chip } from "../../index";
 import ChumBucket from "./ChumBucket.svelte";
 export let seaweedTemplateData;
 export let projectFirstGroupedEntries;
+export let getAllEntryFromGlobal;
 export let getEntryFromGlobal;
 export let letChaos = true;
 export let name = "Turnip";
@@ -244,6 +245,8 @@ $:
 						<EntryOrderConfig bind:seaweedEntries={seaweedTemplateData.groupedEntries}
 						                  seaweedTemplateData={seaweedTemplateData}
 						                  bind:orderUrl={orderUrl}
+						                  getAllEntryFromGlobal={getAllEntryFromGlobal}
+						                  getEntryFromGlobal={getEntryFromGlobal}
 						                  updateUrl={updateUrl}></EntryOrderConfig>
 
 						<br>

package/dist/template/seaweed/SeaweedTemplate.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
     props: {
         seaweedTemplateData: SeaweedTemplateData;
         projectFirstGroupedEntries: ReadonlyArray<EntryGroup>;
+        getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
         getEntryFromGlobal: (name: string) => undefined | ComponentMeta;
         letChaos?: boolean | undefined;
         name?: string | undefined;

package/dist/template/seaweed/entries/WorkExperience.svelte

@@ -5,109 +5,109 @@ import ElementVisibilityDetector from "../../../components/ElementVisbilityDetec
 export let entryProps;
 export let isVisible;
 let { email, letChaos, linkedinSlug, name } = entryProps;
-</script>
-
-<div class="experience-and-about-div">
-
-	<div class="greater-about-div">
-
-		<Card includeDataNoSnippet={false}>
-			<section class="section-card" slot="content">
-
-				<h1>About</h1>
-
-				<p>
-					Hi! My name is {name}! I work as a software developer. Outside of that, I like making games, and
-					trying to do everything in between required to make one. I have some showcased below, our visit
-					my itch.io page for more of them.
-				</p>
-				<!-- todo: link the degree details idk -->
-				<p>
-					I also graduated with BS Computing Science, Specializing in Software Practice, and a
-					certificate in Computer Game Development at University of Alberta.
-				</p>
-				{#if entryProps.seaweedTemplateData.shouldAddFunNote}
-					<p>
-						I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
-						Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
-					</p>
-				{/if}
-
-				<!-- todo: maybe put cute stuff here -->
-				<!--						</ToggleableContent>-->
-			</section>
-		</Card>
-
-		<Card>
-			<section class="section-card" slot="content">
-				<SocialSection email={email} linkedinSlug={linkedinSlug}></SocialSection>
-				<ElementVisibilityDetector bind:isVisible={isVisible}>
-				</ElementVisibilityDetector>
-			</section>
-		</Card>
-
-	</div>
-
-	<Card>
-		<section class="section-card" slot="content">
-			<h1>Experience</h1>
-
-			<h2>Highlight</h2>
-			<p>I like French Fries</p>
-
-			<h2>Software Engineer</h2>
-			<div class="two-column-separated">
-				<div>July 2023 – January 2024</div>
-				<div style="text-align: end">Control, Remote</div>
-			</div>
-			<ul>
-				<li>
-					Developed things
-				</li>
-				<li>
-					Woah
-				</li>
-			</ul>
-			<br>
-
-			<h2>Software Engineer Intern</h2>
-			<div class="two-column-separated">
-				<div>May 2022 – Aug 2022</div>
-				<div style="text-align: end">Pou Company</div>
-			</div>
-			<ul>
-				<li>
-					Stuff
-				</li>
-				<li>
-					Golang
-				</li>
-			</ul>
-			<br>
-			<!-- todo: turn off flashing when accordion is expanded -->
-			<Accordion>
-				<AccordionItem>
-					<div slot="summary">
-						<h2 class="accordion-header">More experience</h2>
-					</div>
-					<svelte:fragment slot="content">
-						<section class="more-section">
-							<h2>Software Engineer Intern</h2>
-							<div class="two-column-separated">
-								<div>May 2021 – Dec 2021</div>
-								<div style="text-align: end">Testing</div>
-							</div>
-							<ul>
-								<li>
-									Amazing
-								</li>
-							</ul>
-							<br>
-						</section>
-					</svelte:fragment>
-				</AccordionItem>
-			</Accordion>
-		</section>
-	</Card>
-
+</script>
+
+<div class="experience-and-about-div">
+
+	<div class="greater-about-div">
+
+		<Card includeDataNoSnippet={false}>
+			<section class="section-card" slot="content">
+
+				<h1>About</h1>
+
+				<p>
+					Hi! My name is {name}! I work as a software developer. Outside of that, I like making games, and
+					trying to do everything in between required to make one. I have some showcased below, our visit
+					my itch.io page for more of them.
+				</p>
+				<!-- todo: link the degree details idk -->
+				<p>
+					I also graduated with BS Computing Science, Specializing in Software Practice, and a
+					certificate in Computer Game Development at University of Alberta.
+				</p>
+				{#if entryProps.seaweedTemplateData.shouldAddFunNote}
+					<p>
+						I'm inspired by games like Harvest Moon: Friends of Mineral Town, Rune Factory 4, Theatrhythm,
+						Bravely Default: Flying Fairy, Boku no Natsuyasumi 2, and A Short Hike.
+					</p>
+				{/if}
+
+				<!-- todo: maybe put cute stuff here -->
+				<!--						</ToggleableContent>-->
+			</section>
+		</Card>
+
+		<Card>
+			<section class="section-card" slot="content">
+				<SocialSection email={email} linkedinSlug={linkedinSlug}></SocialSection>
+				<ElementVisibilityDetector bind:isVisible={isVisible}>
+				</ElementVisibilityDetector>
+			</section>
+		</Card>
+
+	</div>
+
+	<Card>
+		<section class="section-card" slot="content">
+			<h1>Experience</h1>
+
+			<h2>Highlight</h2>
+			<p>I like French Fries</p>
+
+			<h2>Software Engineer</h2>
+			<div class="two-column-separated">
+				<div>July 2023 – January 2024</div>
+				<div style="text-align: end">Control, Remote</div>
+			</div>
+			<ul>
+				<li>
+					Developed things
+				</li>
+				<li>
+					Woah
+				</li>
+			</ul>
+			<br>
+
+			<h2>Software Engineer Intern</h2>
+			<div class="two-column-separated">
+				<div>May 2022 – Aug 2022</div>
+				<div style="text-align: end">Pou Company</div>
+			</div>
+			<ul>
+				<li>
+					Stuff
+				</li>
+				<li>
+					Golang
+				</li>
+			</ul>
+			<br>
+			<!-- todo: turn off flashing when accordion is expanded -->
+			<Accordion>
+				<AccordionItem>
+					<div slot="summary">
+						<h2 class="accordion-header">More experience</h2>
+					</div>
+					<svelte:fragment slot="content">
+						<section class="more-section">
+							<h2>Software Engineer Intern</h2>
+							<div class="two-column-separated">
+								<div>May 2021 – Dec 2021</div>
+								<div style="text-align: end">Testing</div>
+							</div>
+							<ul>
+								<li>
+									Amazing
+								</li>
+							</ul>
+							<br>
+						</section>
+					</svelte:fragment>
+				</AccordionItem>
+			</Accordion>
+		</section>
+	</Card>
+
 </div>

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -1,6 +1,4 @@
 <script>import {
-  GetAllEntryFromGlobal,
-  GetEntryFromGlobal
 } from "../SeaweedTemplateData";
 import { removeProxyWrapperOnString } from "./EntryOrderConfig";
 import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
@@ -11,6 +9,8 @@ export let seaweedTemplateData;
 export let seaweedEntries;
 export let orderUrl;
 export let updateUrl;
+export let getAllEntryFromGlobal;
+export let getEntryFromGlobal;
 const updateOrderQuery = () => {
   orderUrl = "order=" + seaweedEntries.map((g) => {
     const groupUrl = g.items.map(
@@ -22,7 +22,7 @@ const updateOrderQuery = () => {
 };
 const addEntry = (group) => {
   return (selected) => {
-    const c = GetEntryFromGlobal(selected);
+    const c = getEntryFromGlobal(selected);
     if (c) {
       group.items.push(c);
       seaweedEntries = seaweedEntries;
@@ -87,7 +87,7 @@ const removeEntry = (entry, group) => {
     }
   };
 };
-const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
+const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
 </script>
 
 <br>

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
+import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
 import "./entry-order-config.postcss";
 declare const __propDef: {
     props: {
@@ -7,6 +7,8 @@ declare const __propDef: {
         seaweedEntries: EntryGroup[];
         orderUrl: string;
         updateUrl: (data: SeaweedTemplateData) => void;
+        getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+        getEntryFromGlobal: (s: string) => ComponentMeta | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.76",
+  "version": "2.4.78",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/components/BlogTemplate.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" xmlns="http://www.w3.org/1999/html">
+	import { Card, type SimplePageMeta } from "$pkg";
+
+	// grab page meta from the adjacent meta.json
+	export let pageMeta: SimplePageMeta;
+</script>
+
+<Card>
+	<div slot="content" class="default-card">
+		<article>
+			<hgroup>
+				{#if pageMeta.title}
+					<h1>{pageMeta.title}</h1>
+				{/if}
+				{#if pageMeta.datePublished}
+					<p>Published: {pageMeta.datePublished}</p>
+				{/if}
+				{#if pageMeta.lastUpdated}
+					<p>Last updated: {pageMeta.lastUpdated}</p>
+				{/if}
+				{#if pageMeta.tags.length > 0}
+					<section id="article-tags">
+						Tags:
+						{#each pageMeta.tags as tag}
+							<span class="badge variant-filled">{tag}</span>
+						{/each}
+					</section>
+				{/if}
+			</hgroup>
+
+			<slot />
+		</article>
+	</div>
+</Card>
+
+<style>
+    hgroup {
+        margin-bottom: 1lh;
+    }
+
+    .badge {
+        margin-inline-end: 0.5em;
+    }
+</style>

package/src/lib/components/index.ts

@@ -1,8 +1,9 @@
-// noinspection JSUnusedGlobalSymbols
-
-export { default as LazyAsset } from "./LazyAsset.svelte";
-export { default as Card } from "./Card.svelte";
-export { default as Chip } from "./chip/Chip.svelte";
-export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
-export { default as SocialSection } from "./SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+// noinspection JSUnusedGlobalSymbols
+
+export { default as LazyAsset } from "./LazyAsset.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Chip } from "./chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
+export { default as SocialSection } from "./SocialSection.svelte";
+export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+export { default as BlogTemplate } from "./BlogTemplate.svelte";

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

@@ -48,6 +48,49 @@ export interface PageMeta {
 	title: string;
 }
 
+export interface SimplePageMeta {
+	datePublished?: string;
+	description?: string;
+
+	imageAlt?: string; // defaults to directory name
+	/**
+	 * imageID is an ID that NavigationComponent can use to identify imported images
+	 *
+	 * To use imageID:
+	 * 1. Add the imageID entry to the meta.json for the page
+	 * 2. Create a typescript file with the variable ImageMap: Map<string, string>
+	 * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
+	 * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
+	 * 4. Add ImageMap as an argument to your NavigationComponent.
+	 * Overall, this involves four files
+	 * - Your navigation page: ./+page.svelte
+	 * - Your image map typescript: ImageMap.ts
+	 * - The page you want with an image represented in the navigation: ./topic1/+page.svelte
+	 * - The meta for that page: ./topic1/meta.json
+	 *
+	 * imageID takes precedence over imageURL
+	 */
+	imageID?: string;
+
+	/**
+	 * imageURL is only limited to absolute paths (includes files in static folder)
+	 *
+	 * if imageID is defined, this will be ignored
+	 */
+	imageUrl?: string;
+
+	lastUpdated?: string;
+
+	shouldGroup?: boolean;
+	shouldHide?: boolean;
+	tags: string[];
+
+	/**
+	 * title defaults to the directory name if it's an empty string.
+	 */
+	title: string;
+}
+
 /**
  * todo: doc
  * @param parentList

package/src/lib/components/overrideable_meta/OverridableMetaProps.ts

@@ -4,4 +4,6 @@ export interface OverridableMetaProps {
 	ogTitle?: string;
 	ogDescription?: string;
 	ogImage?: string;
+	datePublished?: string;
+	lastUpdated?: string;
 }

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -23,6 +23,7 @@
 
 	export let seaweedTemplateData: SeaweedTemplateData;
 	export let projectFirstGroupedEntries: ReadonlyArray<EntryGroup>;
+	export let getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
 	export let getEntryFromGlobal: (name: string) => undefined | ComponentMeta;
 	export let letChaos = true;
 	export let name = "Turnip";
@@ -306,6 +307,8 @@
 						<EntryOrderConfig bind:seaweedEntries={seaweedTemplateData.groupedEntries}
 						                  seaweedTemplateData={seaweedTemplateData}
 						                  bind:orderUrl={orderUrl}
+						                  getAllEntryFromGlobal={getAllEntryFromGlobal}
+						                  getEntryFromGlobal={getEntryFromGlobal}
 						                  updateUrl={updateUrl}></EntryOrderConfig>
 
 						<br>