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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +85 -0
  2. package/dist/components/blog_template/BlogTemplate.svelte +14 -17
  3. package/dist/components/blog_template/BlogTemplate.svelte.d.ts +2 -1
  4. package/dist/ui/components/randomized-background/RandomizedBackground.svelte +9 -1
  5. package/dist/ui/elements/PinyaCard/PinyaCard.svelte +13 -6
  6. package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte +2 -1
  7. package/dist/ui/templates/PinyaPageLayout/runes.svelte.d.ts +1 -0
  8. package/dist/ui/templates/PinyaPageLayout/runes.svelte.js +1 -0
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -26,3 +26,88 @@ yarn build
26
26
  You can preview the production build with `yarn preview`.
27
27
 
28
28
  > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
29
+
30
+ ## Installing as a package
31
+
32
+ ```bash
33
+ yarn add @turnipxenon2/pineapple
34
+ ```
35
+
36
+ **Manual steps**
37
+
38
+ We still have to do some manual set up to our project to make it work.
39
+
40
+ 1. **Configure Tailwind.** Open your global stylesheet in `/src/app.css` and add the following imports:
41
+
42
+ ```css
43
+ @import 'tailwindcss';
44
+ @import '@skeletonlabs/skeleton/optional/presets';
45
+ @import '@skeletonlabs/skeleton';
46
+ @import '@skeletonlabs/skeleton/themes/cerberus';
47
+ @import '../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
48
+
49
+ @plugin '@tailwindcss/forms';
50
+ @plugin '@tailwindcss/typography';
51
+
52
+ @source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
53
+ @source '../node_modules/@turnipxenon/pineapple/dist/styles'
54
+ ```
55
+
56
+ 2. **Set Active Theme.** Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.
57
+
58
+ ```html
59
+ <html lang="en" data-theme="turnip">
60
+ ...
61
+ </html>
62
+ ```
63
+
64
+ 3. We have to setup +layout.svelte to and import some dependencies
65
+
66
+ As a reference as to why we need to do above, we use the UI framework Skeleton, which has the same setup. But, we have to make some modifications to make our project and Skeleton to work as a package.
67
+
68
+ **Reference**
69
+
70
+ - https://next.skeleton.dev/docs/get-started/installation/sveltekit
71
+ - https://inlang.com/m/gerre34r/library-inlang-paraglideJs/sveltekit
72
+
73
+ - Just use skeleton or use the base project?
74
+
75
+ **Current steps how to use this package in another project**
76
+
77
+ 1. Create using Skeleton: https://next.skeleton.dev/docs/get-started/installation/sveltekit
78
+ 2. Follow instructions and skeleton UI package
79
+ 3. Install pineapple
80
+ 4. Set up ModeWatcher and Modals, primarily in +layout.svelte
81
+ 5. Set up ParaglideJS internationalization (beta not SvelteKit)
82
+ 6. Add this to `+layout.svelte`
83
+
84
+ ```sveltehtml
85
+ <script lang="ts">
86
+ import { PinyaPageLayout, PinyaBase } from '@turnipxenon/pineapple/templates';
87
+ import '../app.css';
88
+
89
+ let { children } = $props();
90
+ </script>
91
+
92
+ <PinyaBase>
93
+ <PinyaPageLayout>
94
+ {@render children()}
95
+ </PinyaPageLayout>
96
+ </PinyaBase>
97
+ ```
98
+
99
+ TODO: if we are happy with our base, publish it to github and link the corresponding git commits here
100
+
101
+
102
+ ## Local linking
103
+
104
+ 1. In pineapple, run `yarn link`
105
+ 2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
106
+
107
+ **To unlink:**
108
+
109
+ 1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
110
+ 2. In pineapple, run `yarn unlink`
111
+ 3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
112
+
113
+ To reinstall a single package: `yarn add @turnipxenon/pineapple --no-package-lock --no-save`
package/dist/components/blog_template/BlogTemplate.svelte CHANGED
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
  import "./blog-template.css";
3
- import { enableBackground } from "../../store";
4
- import { onDestroy, onMount } from "svelte";
3
+ import { onDestroy, onMount, type Snippet } from "svelte";
5
4
  import BlogTemplateInner from "./BlogTemplateInner.svelte";
6
5
  import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
7
6
  import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
8
- import { default as Card } from "../Card.svelte";
7
+ import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
8
+ import { appState } from "../../ui/templates/index";
9
9
 
10
10
  // grab page meta from the adjacent meta.json
11
11
  interface Props {
@@ -13,7 +13,7 @@
13
13
  shouldFillWholePage?: boolean;
14
14
  shouldEnableDialogOverlay?: boolean;
15
15
  includeDataNoSnippet?: boolean;
16
- children?: import('svelte').Snippet;
16
+ children?: Snippet;
17
17
  }
18
18
 
19
19
  let {
@@ -24,7 +24,6 @@
24
24
  children
25
25
  }: Props = $props();
26
26
 
27
- enableBackground.set(!shouldFillWholePage);
28
27
  let initialDialogState = false;
29
28
 
30
29
  onMount(() => {
@@ -33,10 +32,11 @@
33
32
  });
34
33
 
35
34
  onDestroy(() => {
36
- enableBackground.set(true);
35
+ appState.bgOpacity = 1;
37
36
  enableDialogueOverlay.set(initialDialogState);
38
37
  });
39
38
 
39
+ appState.bgOpacity = shouldFillWholePage ? 0.2 : 1;
40
40
  </script>
41
41
 
42
42
  {#if shouldFillWholePage}
@@ -46,21 +46,18 @@
46
46
  </BlogTemplateInner>
47
47
  </div>
48
48
  {:else}
49
- <Card includeDataNoSnippet={includeDataNoSnippet}>
50
- {#snippet content()}
51
- <div class="default-card">
52
- <BlogTemplateInner pageMeta={pageMeta}>
53
- {@render children?.()}
54
- </BlogTemplateInner>
55
- </div>
56
- {/snippet}
57
- </Card>
49
+ <PinyaCard {includeDataNoSnippet} widthClass="max-w-4xl">
50
+ <BlogTemplateInner pageMeta={pageMeta}>
51
+ {@render children?.()}
52
+ </BlogTemplateInner>
53
+ </PinyaCard>
58
54
  {/if}
59
55
 
60
56
  <style>
61
57
  .whole-page {
62
- height: 100%;
58
+ height: 100vh;
63
59
  width: 100%;
64
- max-width: var(--default-card-max-width);
60
+ padding-right: 2em;
61
+ padding-left: 2em;
65
62
  }
66
63
  </style>
package/dist/components/blog_template/BlogTemplate.svelte.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import "./blog-template.css";
2
+ import { type Snippet } from "svelte";
2
3
  import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
3
4
  interface Props {
4
5
  pageMeta: SimplePageMeta;
5
6
  shouldFillWholePage?: boolean;
6
7
  shouldEnableDialogOverlay?: boolean;
7
8
  includeDataNoSnippet?: boolean;
8
- children?: import('svelte').Snippet;
9
+ children?: Snippet;
9
10
  }
10
11
  declare const BlogTemplate: import("svelte").Component<Props, {}, "">;
11
12
  type BlogTemplate = ReturnType<typeof BlogTemplate>;
package/dist/ui/components/randomized-background/RandomizedBackground.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
10
10
  import RandomizedImage from './RandomizedImage.svelte';
11
11
  import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
12
+ import { appState } from "../../templates/index";
12
13
 
13
14
  let { enabled }: {
14
15
  enabled: boolean
@@ -47,6 +48,8 @@
47
48
  }
48
49
  generatedImageList = gi;
49
50
  });
51
+
52
+ let bgStyle = $derived(`opacity: ${appState.bgOpacity}`);
50
53
  </script>
51
54
 
52
55
  <svelte:head>
@@ -63,7 +66,12 @@
63
66
 
64
67
  <!--todo: add a letterbox beyond 1960px + 16 rem-->
65
68
  {#if enabled && generatedImageList.length > 0}
66
- <div class="default-background" aria-hidden="true" transition:fade>
69
+ <div
70
+ class="default-background"
71
+ aria-hidden="true"
72
+ style={bgStyle}
73
+ transition:fade
74
+ >
67
75
  {#each generatedImageList as imageItem, idx (idx)}
68
76
  <RandomizedImage src={imageItem} {rng} />
69
77
  {/each}
package/dist/ui/elements/PinyaCard/PinyaCard.svelte CHANGED
@@ -10,13 +10,20 @@ let {
10
10
  borderClass = "border-[2px] border-primary-500 dark:border-0",
11
11
  marginClass = "",
12
12
  className,
13
+ includeDataNoSnippet = false,
13
14
  children
14
15
  }: PinyaCardProps = $props();
16
+
17
+ let cardClass = $derived(`card bg-surface-200 dark:bg-surface-900 text-start rounded-xl
18
+ ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`);
15
19
  </script>
16
20
 
17
- <div
18
- class={`card bg-surface-200 dark:bg-surface-900 text-start rounded-xl
19
- ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
20
- >
21
- {@render children?.()}
22
- </div>
21
+ {#if includeDataNoSnippet}
22
+ <div data-nosnippet class={cardClass}>
23
+ {@render children?.()}
24
+ </div>
25
+ {:else }
26
+ <div class={cardClass}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte CHANGED
@@ -9,6 +9,7 @@
9
9
  import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
10
10
  import { localizeHref } from "../../../paraglide/runtime";
11
11
  import { appState } from "./runes.svelte";
12
+ import { enableBackground } from "../../../store";
12
13
 
13
14
  let {
14
15
  children,
@@ -68,7 +69,7 @@
68
69
  {@render header('hidden shadow-none w-full')}
69
70
  {@render header('fixed z-15 w-[105vw]')}
70
71
 
71
- <RandomizedBackground enabled={true} />
72
+ <RandomizedBackground enabled={$enableBackground} />
72
73
 
73
74
  <div class="default-page-container">
74
75
  {@render children?.()}
package/dist/ui/templates/PinyaPageLayout/runes.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ interface AppStore {
5
5
  isLanguagePickerAvailable: boolean;
6
6
  allowDialog?: boolean;
7
7
  enableDialogOnByDefault?: boolean;
8
+ bgOpacity: number;
8
9
  }
9
10
  export declare const appState: AppStore;
10
11
  export {};
package/dist/ui/templates/PinyaPageLayout/runes.svelte.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export const appState = $state({
2
2
  title: '',
3
3
  isLanguagePickerAvailable: true,
4
+ bgOpacity: 1,
4
5
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@turnipxenon/pineapple",
3
3
  "description": "personal package for base styling for other personal projects",
4
- "version": "3.1.0-alpha.1",
4
+ "version": "3.1.0-alpha.2",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && yarn package",