@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import type { SeaweedLayoutProps } from "./props";
+	import ChumBucket from "../../modules/seaweed/ChumBucket.svelte";
+	import { PinyaPageLayout } from "../index";
+	import { SocialSection } from "../../components/index";
+	import EntryGroup from "./EntryGroup.svelte";
+	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
+	import { CodeBlock, TextChip } from "../../elements/index";
+	import { SvelteMap } from "svelte/reactivity";
+	import EntryOrderConfig2 from "./EntryOrderConfig2.svelte";
+	import CreateUrlForm from "../../../template/seaweed/CreateUrlForm.svelte";
+
+	let {
+		children,
+		sideSection,
+		entryList, // todo
+		layout = $bindable(), // todo
+		domain = "http://localhost:5173/seaweed2",
+		queryTerms
+	}: SeaweedLayoutProps = $props();
+
+	let isAdvanceSettingOn = $state(true);
+	let orderUrl = $state("");
+
+	let queryStates = new SvelteMap<string, boolean>(queryTerms.map(term => [term, true]));
+	let styleStr = $state("");
+	let queryQt = $derived.by(() => {
+		const qtArr = [...queryStates.entries()
+			.filter(([, state]) => state)
+			.map(([term]) => term)
+		];
+
+		if (qtArr.length === queryStates.size) {
+			return "";
+		}
+
+		const qtStr = qtArr.join(",");
+
+		if (qtStr) {
+			return `qt=${qtStr}`;
+		}
+
+		return "qt=clear";
+	});
+
+	$effect(() => {
+		const chipList: string[] = [];
+		const termList: string[] = [];
+		queryStates.entries()
+			.filter(([_, state]) => state)
+			.forEach(([term, state], idx) => {
+				const qtTerm = `.qt-${term}`;
+				termList.push(qtTerm);
+				chipList.push(`.text-chip${qtTerm}`);
+			});
+		styleStr = `<style>
+			${termList.join(", ")} {
+				font-weight: bolder;
+				color: var(--color-secondary-400);
+			}
+
+			${chipList.join(", ")} {
+				background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+				color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+			}
+			</style>`;
+	});
+
+	let advancedQuery = $derived.by(() => {
+		const query = [orderUrl, queryQt]
+			.filter(q => q)
+			.join("&");
+		if (query) {
+			return `${query}`;
+		}
+
+		return "";
+	});
+
+	let advancedUrl = $derived.by(() => `${domain}/?${advancedQuery}`);
+</script>
+
+<svelte:head>
+	{@html styleStr}
+</svelte:head>
+
+
+{#snippet socialSection()}
+	<SocialSection></SocialSection>
+{/snippet}
+<PinyaPageLayout>
+	{#snippet appBarLead()}
+		<div></div>
+	{/snippet}
+
+	<div id="upper-section">
+
+		<div class="upper-section-start">
+			{@render sideSection(socialSection)}
+		</div>
+
+		<div class="upper-section-end">
+			{@render children()}
+		</div>
+	</div>
+
+	<!--todo: render list #migration-->
+	{#each layout as group (group.title)}
+		<EntryGroup {...group}></EntryGroup>
+	{/each}
+
+	{#snippet footer()}
+		<div class="footer">
+			<ChumBucket></ChumBucket>
+
+			<div class="default-card advanced-setting mt-16 mb-32">
+				<h1>Advanced settings</h1>
+				<p>This one is for those curious how I customize this page.</p>
+
+				<PineappleSwitch name="advanced-setting-slider"
+				                 bind:checked={isAdvanceSettingOn}>
+				</PineappleSwitch>
+				Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
+
+				{#if (isAdvanceSettingOn)}
+
+					<h3 class="mt-6">Query terms to bold</h3>
+					<div class="query-term-grid max-w-2xl">
+						{#each queryStates as [term, shouldBold] (term)}
+							<button
+								class="bg-transparent hover:brightness-110"
+								onclick={() => { queryStates.set(term, !shouldBold); }}
+							>
+								<TextChip queryClass={shouldBold ? 'highlight-chip' : ''}>
+									<!-- todo: change shouldBold -->
+									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
+										{#if (shouldBold)}✓{/if}
+										{term}
+									</span>
+								</TextChip>
+							</button>
+						{/each}
+					</div>
+
+					<EntryOrderConfig2
+						{layout}
+						bind:orderUrl={orderUrl}
+						allEntries={entryList}
+					></EntryOrderConfig2>
+
+					<br>
+					<p>Copy the url below and open a new page with it</p>
+					<CodeBlock code={advancedUrl} lang="markdown" classes="max-w-2xl" />
+					<CreateUrlForm queryParams={advancedQuery}></CreateUrlForm>
+				{/if}
+			</div>
+		</div>
+	{/snippet}
+</PinyaPageLayout>
+
+<style>
+    :global(html) {
+        --color-bg-footer: var(--color-surface-200);
+        --color-footer-border: var(--color-primary-500);
+    }
+
+    :global(html.dark) {
+        --color-bg-footer: var(--color-surface-900);
+        --color-footer-border: var(--color-primary-950);
+    }
+
+    .footer {
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 3lh;
+        background-color: var(--color-bg-footer);
+        border-top: 2px solid var(--color-footer-border);
+    }
+
+    #upper-section {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 2rem;
+        justify-content: center;
+    }
+
+    .query-term-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25em;
+        margin-top: 1lh;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SeaweedLayoutProps } from "./props";
+declare const SeaweedLayout: import("svelte").Component<SeaweedLayoutProps, {}, "layout">;
+type SeaweedLayout = ReturnType<typeof SeaweedLayout>;
+export default SeaweedLayout;

package/dist/ui/templates/seaweed-layout/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SeaweedLayout } from "./SeaweedLayout.svelte";
+export { default as EntryGroup } from "./EntryGroup.svelte";
+export * from "./props";
+export * from "./ProjectComponentProps";

package/dist/ui/templates/seaweed-layout/index.js

@@ -0,0 +1,4 @@
+export { default as SeaweedLayout } from "./SeaweedLayout.svelte";
+export { default as EntryGroup } from "./EntryGroup.svelte";
+export * from "./props";
+export * from "./ProjectComponentProps";

package/dist/ui/templates/seaweed-layout/props.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+interface ProjectComponentProps {
+}
+type ComponentSnippet = Snippet<[ProjectComponentProps]>;
+export interface SnippetMeta {
+    key: string;
+    component: ComponentSnippet;
+}
+export interface ProjectGroup {
+    key: string;
+    title: string;
+    entryList: SnippetMeta[];
+}
+export interface SeaweedLayoutProps {
+    name: string;
+    email: string;
+    linkedinSlug: string;
+    domain: string;
+    sideSection: Snippet<[Snippet]>;
+    children: Snippet;
+    entryList: SnippetMeta[];
+    layout: ProjectGroup[];
+    queryTerms: string[];
+}
+export {};

package/dist/ui/templates/seaweed-layout/props.js

@@ -0,0 +1 @@
+export {};

package/dist/util/util.d.ts

@@ -8,3 +8,4 @@ export declare const createExternalLinkWarningFunction: (args: ExternalLinkWarni
 export interface RawGlob {
     default: string;
 }
+export declare const getQueryTerms: (modules: Record<string, unknown>) => string[];

package/dist/util/util.js

@@ -25,3 +25,12 @@ export const createExternalLinkWarningFunction = (args) => {
         location.href = args.href;
     });
 };
+export const getQueryTerms = (modules) => {
+    const re = new RegExp("qt-(\\w+)+", "g");
+    const queryTerms = new Set();
+    for (const path in modules) {
+        const modStr = modules[path];
+        [...modStr.matchAll(re).map(i => i[1])].forEach(term => queryTerms.add(term));
+    }
+    return [...queryTerms].sort();
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -32,6 +32,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.6",
     "prisma": "^5.12.1",
+    "shiki-transformer-copy-button": "0.0.3",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
@@ -54,6 +55,7 @@
     "mode-watcher": "^0.5.1",
     "node-html-parser": "^6.1.5",
     "publint": "^0.2.7",
+    "shiki": "^3.2.1",
     "string-width": "^7.1.0",
     "svelte": "^5.0.0",
     "svelte-modals": "^2.0.1",

package/src/lib/styles/app.css

@@ -4,7 +4,7 @@
 @import "@skeletonlabs/skeleton/themes/crimson";
 @import "./turnip-theme.css";
 
-@source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -51,3 +51,94 @@ a.external-link {
     --tw-ring-color: rgb(var(--color-text-400));
     /*background-color: red;*/
 }
+
+@layer base {
+    .game-link-section {
+        @apply mt-6 flex gap-2 justify-center;
+    }
+
+    .game-video-cover {
+        @apply rounded-t-lg max-h-64 object-cover w-full;
+    }
+
+    .text-chip-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .text-chip {
+        background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
+        color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
+    }
+}
+
+/*https://shiki.style/guide/dual-themes*/
+html.dark .shiki,
+html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.shiki {
+    span {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
+
+/* region shiki copy button */
+pre:has(code) {
+    position: relative;
+}
+
+pre button.copy {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    height: 28px;
+    width: 28px;
+    padding: 0;
+    display: flex;
+
+    & span {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    & .ready {
+        background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
+
+        @variant dark {
+            background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
+        }
+    }
+
+    & .success {
+        display: none;
+        background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
+
+        @variant dark {
+            background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
+        }
+    }
+
+    &.copied {
+        & .success {
+            display: block;
+        }
+
+        & .ready {
+            display: none;
+        }
+    }
+}
+
+/* endregion shiki copy button */