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

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 (15) hide show
  1. package/README.md +93 -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/components/dialog_manager/DialogManager.d.ts +1 -1
  5. package/dist/components/dialog_manager/DialogManager.js +1 -1
  6. package/dist/components/dialog_manager/DialogMangerInit.d.ts +1 -1
  7. package/dist/components/dialog_manager/index.d.ts +1 -0
  8. package/dist/components/dialog_manager/index.js +1 -0
  9. package/dist/scripts/pineapple_fiber/PineappleWeaver.js +2 -3
  10. package/dist/ui/components/randomized-background/RandomizedBackground.svelte +9 -1
  11. package/dist/ui/elements/PinyaCard/PinyaCard.svelte +13 -6
  12. package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte +2 -1
  13. package/dist/ui/templates/PinyaPageLayout/runes.svelte.d.ts +1 -0
  14. package/dist/ui/templates/PinyaPageLayout/runes.svelte.js +1 -0
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -26,3 +26,96 @@ 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
+
31
+ ## Installation as a package
32
+
33
+ TODO: If you're curious how to install this on a fresh package or a package not using Skeleton, you can ask me to document the steps but I haven't explored that since I'm focused in migrating my projects. It should just be installing Skeleton v3 and then seeing the steps below.
34
+
35
+ ## Migration from v2 to v3
36
+
37
+ ```bash
38
+ yarn add @turnipxenon2/pineapple
39
+ ```
40
+
41
+ **Manual steps**
42
+
43
+ We still have to do some manual set up to our project to make it work.
44
+
45
+ 1. Follow these steps here: https://www.skeleton.dev/docs/get-started/migrate-from-v2
46
+
47
+ 2. **Configure Tailwind.** Open your global stylesheet in `/src/styles/app.css` and add the following imports:
48
+
49
+ ```css
50
+ @import 'tailwindcss';
51
+ @import "@skeletonlabs/skeleton";
52
+ @import "@skeletonlabs/skeleton/optional/presets";
53
+ @import "@skeletonlabs/skeleton/themes/legacy";
54
+ @import '../../../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
55
+ @import '../../../node_modules/@turnipxenon/pineapple/dist/styles/turnip-theme.css';
56
+
57
+ @source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
58
+ @source '../../../node_modules/@turnipxenon/pineapple/dist/';
59
+
60
+ @plugin '@tailwindcss/forms';
61
+ @plugin '@tailwindcss/typography';
62
+ ```
63
+
64
+ 2. **Set Active Theme.** Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.
65
+
66
+ ```html
67
+ <html lang="en" data-theme="turnip">
68
+ ...
69
+ </html>
70
+ ```
71
+
72
+ 3. We have to setup +layout.svelte to and import some dependencies
73
+
74
+ 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.
75
+
76
+ **Reference**
77
+
78
+ - https://next.skeleton.dev/docs/get-started/installation/sveltekit
79
+ - https://inlang.com/m/gerre34r/library-inlang-paraglideJs/sveltekit
80
+
81
+ - Just use skeleton or use the base project?
82
+
83
+ **Current steps how to use this package in another project**
84
+
85
+ 1. Create using Skeleton: https://next.skeleton.dev/docs/get-started/installation/sveltekit
86
+ 2. Follow instructions and skeleton UI package
87
+ 3. Install pineapple
88
+ 4. Set up ModeWatcher and Modals, primarily in +layout.svelte
89
+ 5. Set up ParaglideJS internationalization (beta not SvelteKit)
90
+ 6. Add this to `+layout.svelte`
91
+
92
+ ```sveltehtml
93
+ <script lang="ts">
94
+ import { PinyaPageLayout, PinyaBase } from '@turnipxenon/pineapple/templates';
95
+ import '../app.css';
96
+
97
+ let { children } = $props();
98
+ </script>
99
+
100
+ <PinyaBase>
101
+ <PinyaPageLayout>
102
+ {@render children()}
103
+ </PinyaPageLayout>
104
+ </PinyaBase>
105
+ ```
106
+
107
+ TODO: if we are happy with our base, publish it to github and link the corresponding git commits here
108
+
109
+
110
+ ## Local linking
111
+
112
+ 1. In pineapple, run `yarn link`
113
+ 2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
114
+
115
+ **To unlink:**
116
+
117
+ 1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
118
+ 2. In pineapple, run `yarn unlink`
119
+ 3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
120
+
121
+ 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/components/dialog_manager/DialogManager.d.ts CHANGED
@@ -15,7 +15,7 @@ export declare class DialogManager implements IDialogManager {
15
15
  currentIndex: number;
16
16
  previousTimestamp: number;
17
17
  isDoneTransition: boolean;
18
- currentPortrait: import("svelte/store").Writable<unknown>;
18
+ currentPortrait: import("svelte/store").Writable<string>;
19
19
  portraitMap: Map<string, any>;
20
20
  currentState: DialogState;
21
21
  currentReadableState: import("svelte/store").Writable<DialogState>;
package/dist/components/dialog_manager/DialogManager.js CHANGED
@@ -28,7 +28,7 @@ export class DialogManager {
28
28
  currentIndex = 0;
29
29
  previousTimestamp = 0;
30
30
  isDoneTransition = false;
31
- currentPortrait = writable();
31
+ currentPortrait = writable("");
32
32
  portraitMap = new Map();
33
33
  currentState = DialogState.Visible;
34
34
  currentReadableState = writable(this.currentState);
package/dist/components/dialog_manager/DialogMangerInit.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { IDialogManager } from "./IDialogManager";
2
- export declare const getDialogManager: () => Promise<IDialogManager | undefined>;
2
+ export declare const getDialogManager: () => Promise<IDialogManager>;
package/dist/components/dialog_manager/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./DialogMangerInit";
package/dist/components/dialog_manager/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./DialogMangerInit";
package/dist/scripts/pineapple_fiber/PineappleWeaver.js CHANGED
@@ -44,8 +44,7 @@ const pineappleWeaverRun = () => {
44
44
  const template = `// this file was generated by PineappleWeaver.ts
45
45
  // do not edit!
46
46
 
47
- import type { DialogDetail } from "@turnipxenon/pineapple";
48
- import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
47
+ import { type DialogDetail, getDialogManager, PortraitType } from "@turnipxenon/pineapple";
49
48
 
50
49
  class _${fileName}Yarn {
51
50
  dialogList: DialogDetail[] = [
@@ -54,7 +53,7 @@ ${dialogDetailListToString(dialogDetailList)}
54
53
 
55
54
  /* Remember to call DialogManager.subscribeToSetDialogChoice before calling this in Svelte */
56
55
  setDialogTree = () => {
57
- dialogManager.setDialogTree(this.dialogList);
56
+ getDialogManager().then((dm) => dm?.setDialogTree(this.dialogList));
58
57
  };
59
58
  }
60
59
 
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.3",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && yarn package",