@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.4
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.
- package/dist/assets/icons/icon-check-dark-contrast.svg +1 -0
- package/dist/assets/icons/icon-check-light-contrast.svg +1 -0
- package/dist/assets/icons/icon-copy-dark-contrast.svg +1 -0
- package/dist/assets/icons/icon-copy-light-contrast.svg +1 -0
- package/dist/components/PineappleSlideToggle.svelte +12 -6
- package/dist/components/PineappleSlideToggle.svelte.d.ts +3 -2
- package/dist/components/dialog_manager/DialogManager.d.ts +14 -0
- package/dist/components/dialog_manager/DialogManager.js +14 -0
- package/dist/components/dialog_manager/DialogManagerStore.d.ts +0 -15
- package/dist/components/dialog_manager/DialogManagerStore.js +0 -15
- package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js +1 -1
- package/dist/components/dialog_overlay/DialogOverlay.svelte +1 -1
- package/dist/components/pineapple/PineappleBaseLayout.svelte +2 -1
- package/dist/styles/app.css +92 -1
- package/dist/styles/turnip-theme.css +6 -2
- package/dist/template/seaweed/CreateUrlForm.svelte +17 -11
- package/dist/template/seaweed/CreateUrlForm.svelte.d.ts +4 -1
- package/dist/template/seaweed/ToastSettings.d.ts +15 -0
- package/dist/template/seaweed/ToastSettings.js +1 -0
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte +34 -1
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +0 -1
- package/dist/ui/elements/CodeBlock/CodeBlock.svelte +65 -0
- package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts +5 -0
- package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts +11 -0
- package/dist/ui/elements/CodeBlock/CodeBlockProps.js +1 -0
- package/dist/ui/elements/CodeBlock/index.d.ts +2 -0
- package/dist/ui/elements/CodeBlock/index.js +2 -0
- package/dist/ui/elements/PineappleSwitch.svelte +29 -0
- package/dist/ui/elements/PineappleSwitch.svelte.d.ts +10 -0
- package/dist/ui/elements/index.d.ts +10 -8
- package/dist/ui/elements/index.js +10 -8
- package/dist/ui/elements/pinya-card/component.svelte +10 -8
- package/dist/ui/elements/pinya-card/component.svelte.d.ts +3 -3
- package/dist/ui/elements/pinya-card/props.d.ts +3 -0
- package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte +35 -0
- package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts +18 -0
- package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts +18 -0
- package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.js +1 -0
- package/dist/ui/elements/text-chip/TextChip.svelte +15 -0
- package/dist/ui/elements/text-chip/TextChip.svelte.d.ts +4 -0
- package/dist/ui/elements/text-chip/TextChipProps.d.ts +4 -0
- package/dist/ui/elements/text-chip/TextChipProps.js +1 -0
- package/dist/ui/elements/text-chip/index.d.ts +2 -0
- package/dist/ui/elements/text-chip/index.js +2 -0
- package/dist/ui/modules/index.d.ts +2 -1
- package/dist/ui/modules/index.js +2 -1
- package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte +10 -20
- package/dist/ui/modules/projects/Hepcat.svelte +71 -0
- package/dist/ui/modules/projects/Hepcat.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/Pengi.svelte +60 -0
- package/dist/ui/modules/projects/Pengi.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/Soulwork.svelte +55 -0
- package/dist/ui/modules/projects/Soulwork.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/ThisWebpage.svelte +62 -0
- package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/index.d.ts +4 -0
- package/dist/ui/modules/projects/index.js +4 -0
- package/dist/ui/modules/seaweed/ChumBucket.svelte +36 -37
- package/dist/ui/templates/PinyaBase.svelte +9 -6
- package/dist/ui/templates/PinyaBase.svelte.d.ts +1 -1
- package/dist/ui/templates/index.d.ts +3 -2
- package/dist/ui/templates/index.js +3 -2
- package/dist/ui/templates/pinya-page-layout/component.svelte +17 -10
- package/dist/ui/templates/pinya-page-layout/component.svelte.d.ts +2 -1
- package/dist/ui/templates/seaweed-layout/EntryGroup.svelte +89 -0
- package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte +45 -0
- package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts +9 -0
- package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/ProjectComponentProps.js +1 -0
- package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte +316 -0
- package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts +14 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.md +4 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte +196 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/index.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/index.js +4 -0
- package/dist/ui/templates/seaweed-layout/props.d.ts +25 -0
- package/dist/ui/templates/seaweed-layout/props.js +1 -0
- package/dist/util/util.d.ts +1 -0
- package/dist/util/util.js +9 -0
- package/package.json +5 -6
- package/src/lib/styles/app.css +92 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
|
|
@@ -1,24 +1,30 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
|
|
3
3
|
import { Switch } from "@skeletonlabs/skeleton-svelte";
|
|
4
|
+
import type { Snippet } from "svelte";
|
|
5
|
+
|
|
4
6
|
interface Props {
|
|
5
7
|
checked?: boolean;
|
|
6
8
|
name: string;
|
|
7
|
-
onChange?:
|
|
8
|
-
children?:
|
|
9
|
+
onChange?: (() => void);
|
|
10
|
+
children?: Snippet;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
let {
|
|
12
14
|
checked = $bindable(false),
|
|
13
15
|
name,
|
|
14
16
|
onChange = undefined,
|
|
15
|
-
children
|
|
17
|
+
children = undefined,
|
|
16
18
|
}: Props = $props();
|
|
17
19
|
</script>
|
|
18
20
|
|
|
19
21
|
<Switch name={name}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
controlBase="bg-red-500"
|
|
23
|
+
checked={checked}
|
|
24
|
+
onCheckedChange={(e) => {
|
|
25
|
+
checked = e.checked;
|
|
26
|
+
onChange?.();
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
23
29
|
{@render children?.()}
|
|
24
30
|
</Switch>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
1
2
|
interface Props {
|
|
2
3
|
checked?: boolean;
|
|
3
4
|
name: string;
|
|
4
|
-
onChange?:
|
|
5
|
-
children?:
|
|
5
|
+
onChange?: (() => void);
|
|
6
|
+
children?: Snippet;
|
|
6
7
|
}
|
|
7
8
|
declare const PineappleSlideToggle: import("svelte").Component<Props, {}, "checked">;
|
|
8
9
|
type PineappleSlideToggle = ReturnType<typeof PineappleSlideToggle>;
|
|
@@ -79,3 +79,17 @@ export declare class DialogManager {
|
|
|
79
79
|
toggleDialogOverlay(): void;
|
|
80
80
|
parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]>;
|
|
81
81
|
}
|
|
82
|
+
/**
|
|
83
|
+
* strictly must be declared last! or you might receive a weird error that looks like:
|
|
84
|
+
*
|
|
85
|
+
* 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
|
|
86
|
+
* |- TypeError: Cannot read properties of undefined (reading '0')
|
|
87
|
+
* at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
|
|
88
|
+
* at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
|
|
89
|
+
* at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
|
|
90
|
+
* at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
|
|
91
|
+
*
|
|
92
|
+
* what this means is that one member of dialogManager cannot be initialized. in our case, it was the
|
|
93
|
+
* defaultDialogMessage not yet being initialized
|
|
94
|
+
*/
|
|
95
|
+
export declare const dialogManager: DialogManager;
|
|
@@ -261,3 +261,17 @@ export class DialogManager {
|
|
|
261
261
|
});
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
|
+
/**
|
|
265
|
+
* strictly must be declared last! or you might receive a weird error that looks like:
|
|
266
|
+
*
|
|
267
|
+
* 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
|
|
268
|
+
* |- TypeError: Cannot read properties of undefined (reading '0')
|
|
269
|
+
* at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
|
|
270
|
+
* at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
|
|
271
|
+
* at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
|
|
272
|
+
* at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
|
|
273
|
+
*
|
|
274
|
+
* what this means is that one member of dialogManager cannot be initialized. in our case, it was the
|
|
275
|
+
* defaultDialogMessage not yet being initialized
|
|
276
|
+
*/
|
|
277
|
+
export const dialogManager = new DialogManager();
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import type { DialogMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
|
|
6
6
|
import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
|
|
7
|
-
import { DialogManager } from "./DialogManager";
|
|
8
7
|
/**
|
|
9
8
|
* Enables the dialogue overlay
|
|
10
9
|
*
|
|
@@ -24,17 +23,3 @@ export declare const enableDialogueOverlay: import("svelte/store").Writable<bool
|
|
|
24
23
|
export declare const dialogVariableStore: DialogMapStore;
|
|
25
24
|
export declare const updateRate: number;
|
|
26
25
|
export declare const defaultDialogMessage: DialogDetail[];
|
|
27
|
-
/**
|
|
28
|
-
* strictly must be declared last! or you might receive a weird error that looks like:
|
|
29
|
-
*
|
|
30
|
-
* 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
|
|
31
|
-
* |- TypeError: Cannot read properties of undefined (reading '0')
|
|
32
|
-
* at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
|
|
33
|
-
* at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
|
|
34
|
-
* at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
|
|
35
|
-
* at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
|
|
36
|
-
*
|
|
37
|
-
* what this means is that one member of dialogManager cannot be initialized. in our case, it was the
|
|
38
|
-
* defaultDialogMessage not yet being initialized
|
|
39
|
-
*/
|
|
40
|
-
export declare const dialogManager: DialogManager;
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import { createNewMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
|
|
6
6
|
import { writable } from "svelte/store";
|
|
7
|
-
import { DialogManager } from "./DialogManager";
|
|
8
7
|
/**
|
|
9
8
|
* Enables the dialogue overlay
|
|
10
9
|
*
|
|
@@ -29,17 +28,3 @@ export const defaultDialogMessage = [
|
|
|
29
28
|
textContent: `<p>I don't really have anything to say. Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
|
|
30
29
|
}
|
|
31
30
|
];
|
|
32
|
-
/**
|
|
33
|
-
* strictly must be declared last! or you might receive a weird error that looks like:
|
|
34
|
-
*
|
|
35
|
-
* 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
|
|
36
|
-
* |- TypeError: Cannot read properties of undefined (reading '0')
|
|
37
|
-
* at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
|
|
38
|
-
* at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
|
|
39
|
-
* at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
|
|
40
|
-
* at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
|
|
41
|
-
*
|
|
42
|
-
* what this means is that one member of dialogManager cannot be initialized. in our case, it was the
|
|
43
|
-
* defaultDialogMessage not yet being initialized
|
|
44
|
-
*/
|
|
45
|
-
export const dialogManager = new DialogManager();
|
package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BehaviorStatus } from "../../core/BehaviorStatus";
|
|
2
2
|
import { SetVariableNode } from "../SetVariableNode";
|
|
3
|
-
import { dialogManager } from "../../../DialogManagerStore";
|
|
4
3
|
import { btreeUtils } from "../../core/BTreeUtils";
|
|
4
|
+
import { dialogManager } from "../../../../..";
|
|
5
5
|
export class JumpCommand {
|
|
6
6
|
setVariableNode = new SetVariableNode();
|
|
7
7
|
process(nodeArgs) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import AresHappy from "../../assets/characters/ares/ares_happy.webp";
|
|
3
3
|
import { onMount } from "svelte";
|
|
4
|
-
import { dialogManager } from "../dialog_manager/DialogManagerStore";
|
|
5
4
|
import { DialogState } from "../../types/pineapple_fiber/DialogState";
|
|
5
|
+
import { dialogManager } from "../dialog_manager/DialogManager";
|
|
6
6
|
|
|
7
7
|
let currentMessage = $state("");
|
|
8
8
|
dialogManager.currentMessage.subscribe((value) => {
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
import AresLogo from "../../assets/characters/ares/ares_logo.webp";
|
|
17
17
|
import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
|
|
18
18
|
import CloseIcon from "../../assets/icons/close.svg";
|
|
19
|
-
import {
|
|
19
|
+
import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
|
|
20
20
|
import Toast from "./toast/Toast.svelte";
|
|
21
21
|
import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
|
|
22
22
|
import { fade } from "svelte/transition";
|
|
23
|
+
import { dialogManager } from "../dialog_manager/DialogManager";
|
|
23
24
|
|
|
24
25
|
interface Props {
|
|
25
26
|
showDialogByDefault?: boolean;
|
package/dist/styles/app.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@import "@skeletonlabs/skeleton/themes/crimson";
|
|
5
5
|
@import "./turnip-theme.css";
|
|
6
6
|
|
|
7
|
-
@source "
|
|
7
|
+
@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
|
|
8
8
|
|
|
9
9
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
10
|
|
|
@@ -51,3 +51,94 @@ a.external-link {
|
|
|
51
51
|
--tw-ring-color: rgb(var(--color-text-400));
|
|
52
52
|
/*background-color: red;*/
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
@layer base {
|
|
56
|
+
.game-link-section {
|
|
57
|
+
@apply mt-6 flex gap-2 justify-center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.game-video-cover {
|
|
61
|
+
@apply rounded-t-lg max-h-64 object-cover w-full;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.text-chip-container {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-wrap: wrap;
|
|
67
|
+
gap: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.text-chip {
|
|
71
|
+
background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
|
|
72
|
+
color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*https://shiki.style/guide/dual-themes*/
|
|
77
|
+
html.dark .shiki,
|
|
78
|
+
html.dark .shiki span {
|
|
79
|
+
color: var(--shiki-dark) !important;
|
|
80
|
+
background-color: var(--shiki-dark-bg) !important;
|
|
81
|
+
/* Optional, if you also want font styles */
|
|
82
|
+
font-style: var(--shiki-dark-font-style) !important;
|
|
83
|
+
font-weight: var(--shiki-dark-font-weight) !important;
|
|
84
|
+
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.shiki {
|
|
88
|
+
span {
|
|
89
|
+
white-space: pre-wrap;
|
|
90
|
+
word-wrap: break-word;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* region shiki copy button */
|
|
95
|
+
pre:has(code) {
|
|
96
|
+
position: relative;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
pre button.copy {
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 16px;
|
|
102
|
+
top: 16px;
|
|
103
|
+
height: 28px;
|
|
104
|
+
width: 28px;
|
|
105
|
+
padding: 0;
|
|
106
|
+
display: flex;
|
|
107
|
+
|
|
108
|
+
& span {
|
|
109
|
+
width: 100%;
|
|
110
|
+
aspect-ratio: 1 / 1;
|
|
111
|
+
background-repeat: no-repeat;
|
|
112
|
+
background-position: center;
|
|
113
|
+
background-size: cover;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
& .ready {
|
|
117
|
+
background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
|
|
118
|
+
|
|
119
|
+
@variant dark {
|
|
120
|
+
background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
& .success {
|
|
125
|
+
display: none;
|
|
126
|
+
background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
|
|
127
|
+
|
|
128
|
+
@variant dark {
|
|
129
|
+
background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&.copied {
|
|
134
|
+
& .success {
|
|
135
|
+
display: block;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
& .ready {
|
|
139
|
+
display: none;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* endregion shiki copy button */
|
|
@@ -246,7 +246,7 @@ html.dark {
|
|
|
246
246
|
filter: brightness(140%);
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
-
h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3 {
|
|
249
|
+
h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
|
|
250
250
|
text-align: center;
|
|
251
251
|
margin-top: 0;
|
|
252
252
|
font-weight: bolder;
|
|
@@ -257,6 +257,10 @@ html.dark {
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
|
|
261
|
+
margin-top: 0.5lh;
|
|
262
|
+
}
|
|
263
|
+
|
|
260
264
|
h1 {
|
|
261
265
|
@apply text-4xl;
|
|
262
266
|
}
|
|
@@ -269,7 +273,7 @@ html.dark {
|
|
|
269
273
|
@apply text-2xl;
|
|
270
274
|
}
|
|
271
275
|
|
|
272
|
-
h4 {
|
|
276
|
+
h4, .fake-h4 {
|
|
273
277
|
@apply text-xl;
|
|
274
278
|
}
|
|
275
279
|
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
|
|
3
|
-
import {
|
|
3
|
+
import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
|
|
4
|
+
import { getContext } from "svelte";
|
|
5
|
+
import type { ToastSettings } from "./ToastSettings";
|
|
6
|
+
import { PinyaButton } from "../../ui/elements/index";
|
|
7
|
+
|
|
8
|
+
export const toast: ToastContext = getContext("toast");
|
|
9
|
+
|
|
4
10
|
|
|
5
11
|
interface Props {
|
|
6
12
|
queryParams?: string;
|
|
@@ -8,8 +14,6 @@
|
|
|
8
14
|
|
|
9
15
|
let { queryParams = "" }: Props = $props();
|
|
10
16
|
|
|
11
|
-
const toastStore = getToastStore();
|
|
12
|
-
|
|
13
17
|
let request: CreateUrlRequest = $state({
|
|
14
18
|
queryParams: "",
|
|
15
19
|
shortUrl: "",
|
|
@@ -22,14 +26,15 @@
|
|
|
22
26
|
|
|
23
27
|
|
|
24
28
|
const failToast: ToastSettings = {
|
|
25
|
-
|
|
29
|
+
title: "Adding new url failed",
|
|
30
|
+
type: "error"
|
|
26
31
|
};
|
|
27
32
|
const toastMap = new Map<CreateUrlResult, ToastSettings>([
|
|
28
33
|
[CreateUrlResult.Success, {
|
|
29
|
-
|
|
34
|
+
title: "Successfully added new url"
|
|
30
35
|
}],
|
|
31
36
|
[CreateUrlResult.Duplicate, {
|
|
32
|
-
|
|
37
|
+
title: "Short url already used; try again with another url"
|
|
33
38
|
}],
|
|
34
39
|
[CreateUrlResult.Fail, failToast]
|
|
35
40
|
]);
|
|
@@ -44,7 +49,7 @@
|
|
|
44
49
|
resp.json()
|
|
45
50
|
).then(json => {
|
|
46
51
|
const properResp = jsonToCreateUrlResponse(json);
|
|
47
|
-
|
|
52
|
+
toast.create(toastMap.get(properResp.result) ?? failToast);
|
|
48
53
|
});
|
|
49
54
|
};
|
|
50
55
|
</script>
|
|
@@ -53,23 +58,24 @@
|
|
|
53
58
|
<label for="short-url">Short URL for url shortener</label>
|
|
54
59
|
<input bind:value={request.shortUrl}
|
|
55
60
|
name="short-url"
|
|
56
|
-
class="input"
|
|
61
|
+
class="input border-[2px] border-primary-500"
|
|
57
62
|
type="text"
|
|
58
63
|
placeholder="short-url" />
|
|
59
64
|
<label for="password">Password</label>
|
|
60
65
|
<input bind:value={request.password}
|
|
61
66
|
name="password"
|
|
62
|
-
class="input"
|
|
67
|
+
class="input border-[2px] border-primary-500"
|
|
63
68
|
type="password"
|
|
64
69
|
placeholder="ILoveTurnips" />
|
|
65
|
-
<
|
|
70
|
+
<PinyaButton onclick={post}>Send link</PinyaButton>
|
|
66
71
|
</div>
|
|
67
72
|
|
|
68
73
|
<style>
|
|
69
74
|
.local-list {
|
|
70
75
|
display: flex;
|
|
71
76
|
flex-direction: column;
|
|
72
|
-
gap: 0.
|
|
77
|
+
gap: 0.5lh;
|
|
78
|
+
margin-top: 1lh;
|
|
73
79
|
}
|
|
74
80
|
|
|
75
81
|
.send-link {
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
|
|
1
2
|
interface Props {
|
|
2
3
|
queryParams?: string;
|
|
3
4
|
}
|
|
4
|
-
declare const CreateUrlForm: import("svelte").Component<Props, {
|
|
5
|
+
declare const CreateUrlForm: import("svelte").Component<Props, {
|
|
6
|
+
toast: ToastContext;
|
|
7
|
+
}, "">;
|
|
5
8
|
type CreateUrlForm = ReturnType<typeof CreateUrlForm>;
|
|
6
9
|
export default CreateUrlForm;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface ToastSettings {
|
|
2
|
+
/** The unique toast ID. */
|
|
3
|
+
id?: string;
|
|
4
|
+
/** The unique toast title text. */
|
|
5
|
+
title?: string;
|
|
6
|
+
/** The unique toast description text. */
|
|
7
|
+
description?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Define the toast type.
|
|
10
|
+
* @default info
|
|
11
|
+
*/
|
|
12
|
+
type?: "info" | "error" | "success";
|
|
13
|
+
/** The duration of the toast. Default varies by type. */
|
|
14
|
+
duration?: number;
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
|
|
9
9
|
import CloseIcon from "../../../assets/icons/close.svg";
|
|
10
10
|
import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
|
|
11
|
-
import "./entry-order-config.postcss";
|
|
12
11
|
|
|
13
12
|
interface Props {
|
|
14
13
|
seaweedTemplateData: SeaweedTemplateData;
|
|
@@ -260,5 +259,39 @@
|
|
|
260
259
|
tfoot > tr {
|
|
261
260
|
display: flex;
|
|
262
261
|
}
|
|
262
|
+
.btn-group > button {
|
|
263
|
+
padding: 0.3em 0.75em;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.btn-group-header > h2 {
|
|
267
|
+
font-weight: bolder;
|
|
268
|
+
padding-top: 1lh;
|
|
269
|
+
padding-bottom: 1lh;
|
|
270
|
+
margin-bottom: 0;
|
|
271
|
+
padding-inline-start: 1em;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.dark .btn-group-header > h2 {
|
|
275
|
+
color: rgb(var(--theme-font-color-dark));
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.dark .entry-group {
|
|
279
|
+
background-color: rgb(var(--color-surface-800));
|
|
280
|
+
}
|
|
263
281
|
|
|
282
|
+
tbody tr:nth-child(odd) {
|
|
283
|
+
background-color: rgb(var(--color-surface-500));
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.dark tbody tr:nth-child(odd) {
|
|
287
|
+
background-color: rgb(var(--color-surface-900));
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
tbody tr:nth-child(even) {
|
|
291
|
+
background-color: rgb(var(--color-surface-200));
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.dark tbody tr:nth-child(even) {
|
|
295
|
+
background-color: rgb(var(--color-surface-800));
|
|
296
|
+
}
|
|
264
297
|
</style>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
|
|
2
|
+
|
|
3
|
+
<script module>
|
|
4
|
+
import { addCopyButton } from "shiki-transformer-copy-button";
|
|
5
|
+
import { createHighlighterCoreSync } from "shiki/core";
|
|
6
|
+
import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
|
|
7
|
+
// Themes
|
|
8
|
+
// https://shiki.style/themes
|
|
9
|
+
import themeLight from "shiki/themes/catppuccin-latte.mjs";
|
|
10
|
+
import themeDark from "shiki/themes/catppuccin-frappe.mjs";
|
|
11
|
+
// Languages
|
|
12
|
+
// https://shiki.style/languages
|
|
13
|
+
import console from "shiki/langs/console.mjs";
|
|
14
|
+
import html from "shiki/langs/html.mjs";
|
|
15
|
+
import css from "shiki/langs/css.mjs";
|
|
16
|
+
import js from "shiki/langs/javascript.mjs";
|
|
17
|
+
import ts from "shiki/langs/typescript.mjs";
|
|
18
|
+
import markdown from "shiki/langs/markdown.mjs";
|
|
19
|
+
|
|
20
|
+
// https://shiki.style/guide/sync-usage
|
|
21
|
+
const shiki = createHighlighterCoreSync({
|
|
22
|
+
engine: createJavaScriptRegexEngine(),
|
|
23
|
+
// Implement your import theme.
|
|
24
|
+
themes: [themeLight, themeDark],
|
|
25
|
+
// Implement your imported and supported languages.
|
|
26
|
+
langs: [console, html, css, js, ts, markdown]
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<script lang="ts">
|
|
31
|
+
import type { CodeBlockProps } from "./CodeBlockProps";
|
|
32
|
+
|
|
33
|
+
let {
|
|
34
|
+
code = "",
|
|
35
|
+
lang = "console",
|
|
36
|
+
// Base Style Props
|
|
37
|
+
base = " overflow-hidden",
|
|
38
|
+
rounded = "rounded-container",
|
|
39
|
+
shadow = "",
|
|
40
|
+
classes = "",
|
|
41
|
+
// Pre Style Props
|
|
42
|
+
preBase = "",
|
|
43
|
+
prePadding = "[&>pre]:p-4",
|
|
44
|
+
preClasses = ""
|
|
45
|
+
}: CodeBlockProps = $props();
|
|
46
|
+
|
|
47
|
+
// Shiki convert to HTML
|
|
48
|
+
const generatedHtml = $derived(shiki.codeToHtml(code, {
|
|
49
|
+
lang,
|
|
50
|
+
themes: {
|
|
51
|
+
light: "catppuccin-latte",
|
|
52
|
+
dark: "catppuccin-frappe"
|
|
53
|
+
},
|
|
54
|
+
transformers: [
|
|
55
|
+
addCopyButton({ toggle: 2000 })
|
|
56
|
+
]
|
|
57
|
+
}));
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<div
|
|
61
|
+
class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
|
|
62
|
+
>
|
|
63
|
+
<!-- Output Shiki's Generated HTML -->
|
|
64
|
+
{@html generatedHtml}
|
|
65
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { CodeBlockProps } from "./CodeBlockProps";
|
|
2
|
+
/** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
|
|
3
|
+
declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
|
|
4
|
+
type CodeBlock = ReturnType<typeof CodeBlock>;
|
|
5
|
+
export default CodeBlock;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface CodeBlockProps {
|
|
2
|
+
code?: string;
|
|
3
|
+
lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
|
|
4
|
+
base?: string;
|
|
5
|
+
rounded?: string;
|
|
6
|
+
shadow?: string;
|
|
7
|
+
classes?: string;
|
|
8
|
+
preBase?: string;
|
|
9
|
+
prePadding?: string;
|
|
10
|
+
preClasses?: string;
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Switch } from "@skeletonlabs/skeleton-svelte";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
name: string;
|
|
8
|
+
onChange?: (() => void);
|
|
9
|
+
children?: Snippet;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let {
|
|
13
|
+
checked = $bindable(false),
|
|
14
|
+
name,
|
|
15
|
+
onChange = undefined,
|
|
16
|
+
children = undefined
|
|
17
|
+
}: Props = $props();
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<Switch name={name}
|
|
21
|
+
controlActive="bg-secondary-400 dark:bg-secondary-500"
|
|
22
|
+
controlInactive="bg-surface-700 dark:bg-surface-800"
|
|
23
|
+
checked={checked}
|
|
24
|
+
onCheckedChange={(e) => {
|
|
25
|
+
checked = e.checked;
|
|
26
|
+
onChange?.();
|
|
27
|
+
}}>
|
|
28
|
+
{@render children?.()}
|
|
29
|
+
</Switch>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
interface Props {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
name: string;
|
|
5
|
+
onChange?: (() => void);
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
}
|
|
8
|
+
declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
|
|
9
|
+
type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
|
|
10
|
+
export default PineappleSwitch;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
export { default as ImageIcon } from
|
|
2
|
-
export { default as TextLink } from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
1
|
+
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
2
|
+
export { default as TextLink } from "./TextLink.svelte";
|
|
3
|
+
export * from "./ColorScheme";
|
|
4
|
+
export * from "./GeneralUIProps";
|
|
5
|
+
export * from "./OnBackground";
|
|
6
|
+
export * from "./pinya-card/index";
|
|
7
|
+
export * from "./WrapperProps";
|
|
8
|
+
export * from "./pinya-button/index";
|
|
9
|
+
export * from "./text-chip";
|
|
10
|
+
export * from "./CodeBlock";
|