@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.9.0",
+  "version": "3.0.0-alpha-3",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -19,42 +19,43 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/package": "^2.2.1",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-svelte": "^3.2.6",
     "prisma": "^5.12.1",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
-    "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.5"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   },
   "dependencies": {
+    "@inlang/paraglide-js": "2.0.0-beta.30",
     "@prisma/client": "^5.12.1",
-    "@skeletonlabs/skeleton": "^2.9.0",
-    "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@skeletonlabs/skeleton": "^3.1.0",
+    "@skeletonlabs/skeleton-svelte": "^1.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.14",
     "@types/htmlparser2": "^3.10.7",
     "@types/node": "^20.11.25",
     "highlight.js": "^11.8.0",
     "htmlparser2": "^9.1.0",
+    "mode-watcher": "^0.5.1",
     "node-html-parser": "^6.1.5",
     "publint": "^0.2.7",
+    "shiki": "^3.2.1",
+    "shiki-transformer-copy-button": "0.0.3",
     "string-width": "^7.1.0",
-    "svelte": "^4.2.12",
+    "svelte": "^5.0.0",
+    "svelte-modals": "^2.0.1",
+    "tailwindcss": "^4.0.14",
     "ts-node": "^10.9.1"
   },
   "exports": {
@@ -62,15 +63,29 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/ui/components/index.d.ts",
+      "svelte": "./dist/ui/components/index.js"
+    },
+    "./elements": {
+      "types": "./dist/ui/elements/index.d.ts",
+      "svelte": "./dist/ui/elements/index.js"
+    },
+    "./modules": {
+      "types": "./dist/ui/modules/index.d.ts",
+      "svelte": "./dist/ui/modules/index.js"
+    },
+    "./templates": {
+      "types": "./dist/ui/templates/index.d.ts",
+      "svelte": "./dist/ui/templates/index.js"
+    },
     "./app.postcss": "./src/lib/app.postcss",
     "./theme.postcss": "./src/lib/theme.postcss"
   },
   "files": [
     "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*",
-    "./src/lib/app.postcss",
-    "./src/lib/theme.postcss"
+    "src/lib/styles/app.css",
+    "src/lib/theme.css"
   ],
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",

package/src/lib/styles/app.css

@@ -0,0 +1,144 @@
+@import 'tailwindcss';
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+@import "@skeletonlabs/skeleton/themes/crimson";
+@import "./turnip-theme.css";
+
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@custom-variant turnip (&:where([data-theme=turnip], [data-theme=turnip] *));
+
+.footer-space {
+    width: 100%;
+    height: calc(var(--dialog-box-height) + 4em);
+}
+
+a.dialog-choice {
+    cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
+}
+
+a.external-link {
+    cursor: url("$pkg/assets/icons/external-link.svg"), auto;
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    background: rgba(var(--color-secondary-500));
+}
+
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --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 */

package/{.svelte-kit/__package__/theme.postcss → src/lib/theme.css}

@@ -1,5 +1,6 @@
 @tailwind variants;
 
+/*todo: delete after all downstream works #migration*/
 :root {
     /* =~= Theme Properties =~= */
     --theme-font-family-base: system-ui;
@@ -111,7 +112,3 @@
     --color-text-800: 38 29 28; /* ⬅ #261d1c */
     --color-text-900: 31 24 23; /* ⬅ #1f1817 */
 }
-
-.app-shell-token {
-    @apply bg-surface-600 dark:bg-surface-900;
-}

package/.eslintignore

@@ -1,16 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-
-# Don't format markdowns lol
-*.md

package/.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	parser: "@typescript-eslint/parser",
-	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-	plugins: ["svelte3", "@typescript-eslint"],
-	ignorePatterns: ["*.cjs"],
-	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
-	settings: {
-		"svelte3/typescript": () => require("typescript")
-	},
-	parserOptions: {
-		sourceType: "module",
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};

package/.gitignore

@@ -1,24 +0,0 @@
-.DS_Store
-node_modules
-/build
-build/
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-.vscode
-.idea
-.idea/
-dist
-/.vercel/
-
-# Prisma for debugging; need to migrate some Prisma function to Seaweed
-prisma
-
-#/prisma/migrations/20240408050417_init/migration.sql
-#/prisma/migrations/migration_lock.toml
-#/src/lib/server-temp/prisma.ts
-#/prisma/schema.prisma

package/.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

package/.idea/codeStyles/Project.xml

@@ -1,76 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_ATTRIBUTE_WRAP" value="0" />
-      <option name="HTML_TEXT_WRAP" value="0" />
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <Markdown>
-      <option name="MIN_LINES_AROUND_HEADER" value="2" />
-      <option name="WRAP_TEXT_IF_LONG" value="false" />
-    </Markdown>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-      <option name="IMPORT_USE_NODE_RESOLUTION" value="GLOBAL" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-        <option name="SMART_TABS" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Markdown">
-      <option name="SOFT_MARGINS" value="100,120" />
-      <indentOptions>
-        <option name="USE_TAB_CHARACTER" value="true" />
-        <option name="SMART_TABS" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/discord.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DiscordProjectSettings">
-    <option name="show" value="PROJECT" />
-    <option name="description" value="perhaps goofing around or maybe not" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,22 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="7">
-            <item index="0" class="java.lang.String" itemvalue="nobr" />
-            <item index="1" class="java.lang.String" itemvalue="noembed" />
-            <item index="2" class="java.lang.String" itemvalue="comment" />
-            <item index="3" class="java.lang.String" itemvalue="noscript" />
-            <item index="4" class="java.lang.String" itemvalue="embed" />
-            <item index="5" class="java.lang.String" itemvalue="script" />
-            <item index="6" class="java.lang.String" itemvalue="CarouselFragment" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/pineapple.iml" filepath="$PROJECT_DIR$/.idea/pineapple.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/pineapple.iml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/.svelte-kit" />
-      <excludeFolder url="file://$MODULE_DIR$/.vercel" />
-      <excludeFolder url="file://$MODULE_DIR$/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/build" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/shelf/Attempt_for_whole_blog_page/shelved.patch

@@ -1,164 +0,0 @@
-Index: src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte
-IDEA additional info:
-Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
-<+><script lang=\"ts\">\n\timport pageMeta from \"./meta.json\";\n\timport { page } from \"$app/stores\";\n\timport BlogTemplate from \"$pkg/components/blog_template/BlogTemplate.svelte\";\n</script>\n\n<BlogTemplate pageMeta={pageMeta}>\n\t<p>{$page.url}</p>\n</BlogTemplate>\n
-Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
-<+>UTF-8
-===================================================================
-diff --git a/src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte b/src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte
---- a/src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte	(revision c7975fa3143e901c95cde177c2adf81f83e6b154)
-+++ b/src/routes/(pineapple)/pineapple/(extra-pages)/page2/+page.svelte	(date 1714762255835)
-@@ -4,6 +4,11 @@
- 	import BlogTemplate from "$pkg/components/blog_template/BlogTemplate.svelte";
- </script>
- 
--<BlogTemplate pageMeta={pageMeta}>
-+<BlogTemplate pageMeta={pageMeta} shouldFillWholePage={true}>
- 	<p>{$page.url}</p>
-+	<h1>Test aoisdhfaks fasd fadskdfh kadsfhasjkfasd fklasdklf hadsklf adshfladslfadsf </h1>
-+	<h1>Test aoisdhfaks fasd fadskdfh kadsfhasjkfasd fklasdklf hadsklf adshfladslfadsf </h1>
-+	<h1>Test aoisdhfaks fasd fadskdfh kadsfhasjkfasd fklasdklf hadsklf adshfladslfadsf </h1>
-+	<h1>Test aoisdhfaks fasd fadskdfh kadsfhasjkfasd fklasdklf hadsklf adshfladslfadsf </h1>
-+	<h1>Test aoisdhfaks fasd fadskdfh kadsfhasjkfasd fklasdklf hadsklf adshfladslfadsf </h1>
- </BlogTemplate>
-Index: src/lib/components/blog_template/BlogTemplate.svelte
-IDEA additional info:
-Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
-<+><script lang=\"ts\">\n\timport { Card, type SimplePageMeta } from \"$pkg\";\n\timport \"./blog-template.css\";\n\n\t// grab page meta from the adjacent meta.json\n\texport let pageMeta: SimplePageMeta;\n</script>\n\n<Card>\n\t<div slot=\"content\" class=\"default-card\">\n\t\t<article>\n\t\t\t<hgroup>\n\t\t\t\t{#if pageMeta.title}\n\t\t\t\t\t<h1>{pageMeta.title}</h1>\n\t\t\t\t{/if}\n\t\t\t\t{#if pageMeta.datePublished}\n\t\t\t\t\t<p>Published: {pageMeta.datePublished}</p>\n\t\t\t\t{/if}\n\t\t\t\t{#if pageMeta.lastUpdated}\n\t\t\t\t\t<p>Last updated: {pageMeta.lastUpdated}</p>\n\t\t\t\t{/if}\n\t\t\t\t{#if pageMeta.tags.length > 0}\n\t\t\t\t\t<section id=\"article-tags\">\n\t\t\t\t\t\tTags:\n\t\t\t\t\t\t{#each pageMeta.tags as tag}\n\t\t\t\t\t\t\t<span class=\"badge variant-filled\">{tag}</span>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</section>\n\t\t\t\t{/if}\n\t\t\t</hgroup>\n\n\t\t\t<div class=\"article-content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</article>\n\t</div>\n</Card>\n\n<style>\n    hgroup {\n        margin-bottom: 1lh;\n    }\n\n    .badge {\n        margin-inline-end: 0.5em;\n    }\n</style>
-Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
-<+>UTF-8
-===================================================================
-diff --git a/src/lib/components/blog_template/BlogTemplate.svelte b/src/lib/components/blog_template/BlogTemplate.svelte
---- a/src/lib/components/blog_template/BlogTemplate.svelte	(revision c7975fa3143e901c95cde177c2adf81f83e6b154)
-+++ b/src/lib/components/blog_template/BlogTemplate.svelte	(date 1714762288282)
-@@ -1,40 +1,88 @@
- <script lang="ts">
--	import { Card, type SimplePageMeta } from "$pkg";
-+	import { Card, enableDialogueOverlay, type SimplePageMeta } from "$pkg";
- 	import "./blog-template.css";
-+	import { enableBackground } from "$pkg/store";
-+	import { onDestroy, onMount } from "svelte";
- 
- 	// grab page meta from the adjacent meta.json
- 	export let pageMeta: SimplePageMeta;
-+	export let shouldFillWholePage = false;
-+	export let shouldEnableDialogOverlay = false;
-+
-+	enableBackground.set(false);
-+	let initialDialogState = false;
-+
-+	onMount(() => {
-+		initialDialogState = $enableDialogueOverlay;
-+		enableDialogueOverlay.set(false);
-+	});
-+
-+	onDestroy(() => {
-+		enableBackground.set(true);
-+		enableDialogueOverlay.set(initialDialogState);
-+	});
-+
- </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>
-+{#if shouldFillWholePage}
-+	<div class="whole-page">
-+		<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>
-+
-+			<div class="article-content">
-+				<slot />
-+			</div>
-+		</article>
-+	</div>
-+{:else}
-+	<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>
- 
--			<div class="article-content">
--				<slot />
--			</div>
--		</article>
--	</div>
--</Card>
-+				<div class="article-content">
-+					<slot />
-+				</div>
-+			</article>
-+		</div>
-+	</Card>
-+{/if}
- 
- <style>
-     hgroup {
-@@ -44,4 +92,11 @@
-     .badge {
-         margin-inline-end: 0.5em;
-     }
-+
-+    .whole-page {
-+        align-self: flex-start;
-+        justify-self: flex-start;
-+        height: 100%;
-+        width: 100%;
-+    }
- </style>
-

package/.idea/shelf/Attempt_for_whole_blog_page.xml

@@ -1,4 +0,0 @@
-<changelist name="Attempt_for_whole_blog_page" date="1714762341925" recycled="false">
-  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Attempt_for_whole_blog_page/shelved.patch" />
-  <option name="DESCRIPTION" value="Attempt for whole blog page" />
-</changelist>