duckylib 0.1.2 → 0.1.4

package/dist/components/buttons/Button.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+    import Heading from "../text/Heading.svelte";
+    import Text from "../text/Text.svelte"
+    import { getTheme } from "../../index.js";
+
+    interface ButtonProps {
+        label: string;
+        type?: "success" | "danger" | "primary" | "secondary";
+        onclick?: (e: MouseEvent) => void;
+        href?: string | null;
+
+        size?: "large" | "normal";
+    }
+
+    let {
+        label,
+        type = "secondary",
+        onclick = (e) => {
+            console.log(`Voided Mouse Event`, e.timeStamp);
+        },
+        href = null,
+        size = "normal"
+    }: ButtonProps = $props();
+
+    let systemMode = browser ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "dark";
+    let theme = $state(getTheme());
+
+    onMount(() => {
+        window.addEventListener("theme", (e: any) => {
+            theme = e.detail.theme;
+        })
+    })
+</script>
+
+<button
+data-theme="{theme === "system" ? systemMode : theme}"
+    class={type}
+    onclick={(e) => {
+        if (browser && href) {
+            goto(href);
+        } else if (browser) {
+            onclick(e);
+        }
+    }}><Heading size={size === "normal" ? 6 : 5} inheritColor={true}>{label}</Heading></button
+>
+
+
+<style>
+    @import url("../../styles/globals.css");
+
+    button {
+        cursor: pointer;
+
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        outline: none;
+        border: none;
+
+        padding: 0.66em 1.33em;
+        border-radius: var(--border-md);
+        background-color: var(--overlay-2);
+        color: var(--text);
+
+        font-size: 0.7em;
+        font-weight: 700;
+    }
+
+    button:hover {
+        transition: all 0.2s;
+        transform: scale(1.02) translateY(1px);
+        filter: brightness(1.1);
+    }
+
+    button:not(:hover) {
+        transition: all 0.2s;
+        transform: scale(1) translateY(0);
+        filter: brightness(1);
+    }
+
+    .danger {
+        background-color: var(--maroon);
+        color: var(--base);
+    }
+
+    .primary {
+        background-color: var(--accent);
+        color: var(--base);
+    }
+
+    .secondary {
+        background-color: var(--overlay-0);
+        color: var(--base);
+    }
+
+    .success {
+        background-color: var(--green);
+        color: var(--base);
+        
+    }
+
+    /* .success[data-theme="dark"]  */
+</style>

package/dist/components/buttons/Button.svelte.d.ts

@@ -0,0 +1,10 @@
+interface ButtonProps {
+    label: string;
+    type?: "success" | "danger" | "primary" | "secondary";
+    onclick?: (e: MouseEvent) => void;
+    href?: string | null;
+    size?: "large" | "normal";
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/containers/AgeConfirm.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { getAgeVerified } from "../../index.js";
+    import Heading from "../text/Heading.svelte";
+    import Column from "./Column.svelte";
+    import Text from "../text/Text.svelte"
+    import Row from "./Row.svelte";
+    import { onMount } from "svelte";
+    import Button from "../buttons/Button.svelte";
+    import { browser } from "$app/environment";
+    import Symbol from "../text/Symbol.svelte";
+    import { goto } from "$app/navigation";
+
+    interface AgeConfirmProps {
+        age?: number;
+        references?: ("substances" | "sexual" | "death" | "sh")[];
+    }
+
+    let {age = 18, references = []}: AgeConfirmProps = $props();
+
+    const referenceMap = {
+        "substances": "Alcohol, Drugs, and Substance Abuse",
+        "sexual": "Sexual Content",
+        "death": "Death or Dying",
+        "sh": "Suicide, self-harm, or suicidal ideation"
+    }
+
+    let ageVerified = $state(getAgeVerified());
+
+    let loaded = $state(false);
+
+    onMount(() => {
+        window.onscroll = (e) => {
+            if(!ageVerified) {
+                e.preventDefault();
+                window.scrollTo({top: 0, behavior: "instant"})
+            }
+        }
+
+        setTimeout(() => {
+            loaded = true;
+        }, 5e2)
+    })
+
+    function setAgeVerified(v: boolean) {
+        if(browser) {
+            window.localStorage.setItem("av", `${v}`)
+
+            window.location.reload();
+        }
+    }
+</script>
+
+{#if !ageVerified}
+<div>
+<Column marginLeftPx="auto" marginRightPx="auto" textWrap={true}>
+    <Column heightPx="fit" textWrap={true} widthPercent={95}>
+        {#if loaded}
+        <Symbol name="no_adult_content" sizePx={64} />
+        <Heading size={2} weight="boldest">{loaded ? `Are you ${age}+?` : ""}</Heading>
+        {#if references.length > 0}
+        <Heading size={4} weight="boldest">This site contains references to</Heading>
+            <ul style="text-align: left;">
+                {#each references.map(r => referenceMap[r]) as ref}
+                    <Text><li>{loaded ? ref : ""}</li></Text>
+                {/each}
+            </ul>
+        {/if}
+        <Text weight="normal" classList={["italic"]}>{loaded ? `You must be at least ${age} years old to access this website.` : ""}</Text>
+        <Row>
+            <Button label="I am {age} or older" size="large" type="success" onclick={(e) => {setAgeVerified(true)}} />
+            <Button label="I am younger than {age}" size="large" type="danger" onclick={(e) => {setAgeVerified(false)}} />
+        </Row>
+        {/if}
+    </Column>
+</Column>
+</div>
+{/if}
+
+<style>
+    @import url("../../styles/globals.css");
+
+    div {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 110%; 
+
+
+        padding: 0.33em;
+        margin: 0;
+        box-sizing: border-box;
+
+        background-color: var(--base);
+        color: var(--text);
+
+        z-index: 1000;
+    }
+</style>

package/dist/components/containers/AgeConfirm.svelte.d.ts

@@ -0,0 +1,7 @@
+interface AgeConfirmProps {
+    age?: number;
+    references?: ("substances" | "sexual" | "death" | "sh")[];
+}
+declare const AgeConfirm: import("svelte").Component<AgeConfirmProps, {}, "">;
+type AgeConfirm = ReturnType<typeof AgeConfirm>;
+export default AgeConfirm;

package/dist/components/containers/Column.svelte

@@ -7,7 +7,7 @@
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between";
         alignItems?: "center" | "flex-start" | "flex-end" | "space-between";
         textAlign?: "center" | "left" | "right" | "justify";
-        gapEm?: number;
+        gapEm?: number | "auto";
         textWrap?: boolean;
         flexWrap?: boolean;
 
@@ -37,13 +37,14 @@ flex-direction: column;
 flex-wrap: ${flexWrap ? "wrap" : "nowrap"};
 justify-content: ${justifyContent};
 align-items: ${alignItems};
-gap: ${gapEm}em;
+gap: ${gapEm === "auto" ? "auto" : `${gapEm}em`};
 border-radius: ${borderRadiusPx}px;
 text-align: ${textAlign};
 margin-left: ${marginLeftPx === "auto" ? "auto" : `${marginLeftPx}px`};
 margin-right: ${marginRightPx === "auto" ? "auto" : `${marginRightPx}px`};
 margin-bottom: ${marginBottomPx === "auto" ? "auto" : `${marginBottomPx}px`};
 margin-top: ${marginTopPx === "auto" ? "auto" : `${marginTopPx}px`};
+background-color: ${backgroundColor};
 
 `}">
     {@render children()}

package/dist/components/containers/Column.svelte.d.ts

@@ -4,7 +4,7 @@ interface ColumnProps {
     justifyContent?: "center" | "flex-start" | "flex-end" | "space-between";
     alignItems?: "center" | "flex-start" | "flex-end" | "space-between";
     textAlign?: "center" | "left" | "right" | "justify";
-    gapEm?: number;
+    gapEm?: number | "auto";
     textWrap?: boolean;
     flexWrap?: boolean;
     backgroundColor?: string | "transparent";

package/dist/components/containers/HorizontalRule.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+
+    interface RowProps {
+        textAlign?: "center" | "left" | "right";
+
+        borderRadiusPx?: number;
+
+        widthPx?: number | "fill" | "fit";
+        widthPercent?: number;
+
+        marginRightPx?: number | "auto";
+        marginLeftPx?: number | "auto";
+        marginTopPx?: number | "auto";
+        marginBottomPx?: number | "auto";
+    }
+
+    const { textAlign = "center", borderRadiusPx = 0, widthPx = "fill", widthPercent = 0, marginBottomPx = 0, marginLeftPx = 0, marginRightPx = 0, marginTopPx = 0 }: RowProps = $props();
+</script>
+
+<hr style="{`
+width: ${widthPercent !== 0 ? `${widthPercent}%` : widthPx === "fill" ? "100%" : widthPx === "fit" ? "auto" : `${widthPx}px`};
+${borderRadiusPx > 0 ? `border-radius: ${borderRadiusPx}px;` : ""}
+text-align: ${textAlign};
+margin-left: ${marginLeftPx === "auto" ? "auto" : `${marginLeftPx}px`};
+margin-right: ${marginRightPx === "auto" ? "auto" : `${marginRightPx}px`};
+margin-bottom: ${marginBottomPx === "auto" ? "auto" : `${marginBottomPx}px`};
+margin-top: ${marginTopPx === "auto" ? "auto" : `${marginTopPx}px`};
+`}" />
+
+<style>
+    @import url("../../styles/globals.css");
+
+    hr {
+        background-color: var(--crust) !important;
+        height: 3px;
+        border: none;
+        border-radius: var(--border-md);
+    }
+</style>

package/dist/components/containers/HorizontalRule.svelte.d.ts

@@ -0,0 +1,13 @@
+interface RowProps {
+    textAlign?: "center" | "left" | "right";
+    borderRadiusPx?: number;
+    widthPx?: number | "fill" | "fit";
+    widthPercent?: number;
+    marginRightPx?: number | "auto";
+    marginLeftPx?: number | "auto";
+    marginTopPx?: number | "auto";
+    marginBottomPx?: number | "auto";
+}
+declare const HorizontalRule: import("svelte").Component<RowProps, {}, "">;
+type HorizontalRule = ReturnType<typeof HorizontalRule>;
+export default HorizontalRule;

package/dist/components/containers/Loading.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import Heading from "../text/Heading.svelte";
+    import Column from "./Column.svelte";
+    import Text from "../text/Text.svelte"
+    import { onMount } from "svelte";
+    import Symbol from "../text/Symbol.svelte";
+
+
+    let loaded = $state(false);
+
+    onMount(() => {
+        window.onscroll = (e) => {
+            if(!loaded) {
+                e.preventDefault();
+                window.scrollTo({top: 0, behavior: "instant"})
+            }
+        }
+
+        setTimeout(() => {
+            loaded = true;
+            
+        }, 7e2)
+    })
+
+</script>
+
+{#if !loaded}
+<div>
+<Column marginLeftPx="auto" marginRightPx="auto" textWrap={true}>
+    <Column heightPx="fit" textWrap={true} widthPercent={95}>
+        <Symbol name="hourglass" sizePx={64} />
+        <Heading size={2} weight="boldest">Loading...</Heading>
+        
+        <Text weight="normal" classList={["italic"]}>Your content is loading. Thank you for your patience.</Text>
+        
+    </Column>
+</Column>
+</div>
+{/if}
+
+<style>
+    @import url("../../styles/globals.css");
+
+    div {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 110%; 
+
+
+        padding: 0.33em;
+        margin: 0;
+        box-sizing: border-box;
+
+        background-color: var(--base);
+        color: var(--text);
+
+        z-index: 2000;
+    }
+</style>

package/dist/components/containers/Loading.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Loading: import("svelte").Component<Record<string, never>, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/components/containers/Row.svelte

@@ -44,6 +44,7 @@ margin-left: ${marginLeftPx === "auto" ? "auto" : `${marginLeftPx}px`};
 margin-right: ${marginRightPx === "auto" ? "auto" : `${marginRightPx}px`};
 margin-bottom: ${marginBottomPx === "auto" ? "auto" : `${marginBottomPx}px`};
 margin-top: ${marginTopPx === "auto" ? "auto" : `${marginTopPx}px`};
+background-color: ${backgroundColor};
 `}">
     {@render children()}
 </div>

package/dist/components/containers/cards/{LinkCard.svelte → ButtonCard.svelte}

@@ -1,27 +1,27 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
     import Column from "../Column.svelte";
     import Symbol from "../../text/Symbol.svelte";
     import Row from "../Row.svelte";
     import { browser } from "$app/environment";
-    import { goto } from "$app/navigation";
+    import Text from "../../text/Text.svelte";
 
-    interface LinkCardButton {
+    interface ButtonCardButton {
         text: string;
-        href: string;
         type: "success" | "danger" | "primary" | "secondary";
+        href?: string;
+        onclick?: ((e: MouseEvent) => void) | null;
     }
 
-    interface LinkCardProps {
+    interface ButtonCardProps {
         text: string;
         title?: string;
 
-        buttons: LinkCardButton[];
+        buttons: ButtonCardButton[];
 
         symbol?: string | null;
     }
 
-    let { text, symbol = null, title = "", buttons }: LinkCardProps = $props();
+    let { text, symbol = null, title = "", buttons }: ButtonCardProps = $props();
 </script>
 
 <div>
@@ -37,9 +37,13 @@
         <p class="font-semibold">{text}</p>
         <Row gapEm={0.33} justifyContent="flex-start">
             {#each buttons as button}
-                <button class={button.type} onclick={() => {
-                    if(browser) goto(button.href)
-                }}>{button.text}</button>
+                <button class={button.type} data-icon="{button.href && !button.onclick}" onclick={async (e) => {
+                    if(button.onclick) {
+                        await button.onclick(e)
+                    } else {
+                        if(browser && button.href) window.open(button.href, "_blank")
+                    }
+                }}>{#if button.href && !button.onclick}<Row heightPx="fit" gapEm={0.66}><Text inheritColor={true} weight="bolder">{button.text}</Text><Symbol name="open_in_new" sizePx={18} inheritColor={true} /></Row>{:else}<Text inheritColor={true} weight="bolder">{button.text}</Text>{/if}</button>
             {/each}
         </Row>
     </Column>
@@ -112,6 +116,10 @@
         font-weight: 700;
     }
 
+    button[data-icon="true"] {
+        padding: 0.33em 0.66em;
+    }
+
     button:hover {
         transition: all 0.2s;
         transform: scale(1.02) translateY(1px);

package/dist/components/containers/cards/ButtonCard.svelte.d.ts

@@ -0,0 +1,15 @@
+interface ButtonCardButton {
+    text: string;
+    type: "success" | "danger" | "primary" | "secondary";
+    href?: string;
+    onclick?: ((e: MouseEvent) => void) | null;
+}
+interface ButtonCardProps {
+    text: string;
+    title?: string;
+    buttons: ButtonCardButton[];
+    symbol?: string | null;
+}
+declare const ButtonCard: import("svelte").Component<ButtonCardProps, {}, "">;
+type ButtonCard = ReturnType<typeof ButtonCard>;
+export default ButtonCard;

package/dist/components/containers/navigation/Header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import Row from "../Row.svelte";
-    import { getTheme } from "../../../index.js";
+    import { getTheme, getUserData } from "../../../index.js";
     import ThemeButton from "../../buttons/ThemeButton.svelte";
     import { page } from "$app/state";
     import { MediaQuery } from "svelte/reactivity";
@@ -10,6 +10,7 @@
     import LoginButton from "../../buttons/LoginButton.svelte";
     import UserToast from "../../buttons/UserToast.svelte";
     import { PUBLIC_MOBILE_SIZE_PX, PUBLIC_TABLET_SIZE_PX } from "$env/static/public";
+    import SearchBar, { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
 
     interface HeaderNavigation {
         label: string;
@@ -26,7 +27,16 @@
         withThemeButton?: boolean;
         withIcons?: boolean;
 
-        user?: Auth.User | null;
+        withSearchBar?: boolean;
+        onsearch?: ((query: string) => Promise<void>) | null;
+        onresult?: ((result: SearchResult) => Promise<void>) | null;
+        searchOptions?: SearchResult[];
+        searchQueryUrl?: string;
+        searchQueryObjMap?: {[key in QueryMapKeys]: string | null};
+        searchQueryDataKey?: string;
+
+        defaultNav?: boolean;
+
         authFeatures?: boolean;
 
         nav?: HeaderNavigation[];
@@ -41,12 +51,22 @@
 
     let {
         children = null,
+
         withThemeButton = true,
         withIcons = true,
+        defaultNav = true,
+
+        withSearchBar = false,
+        onsearch = null,
+        onresult = null,
+        searchOptions = [],
+        searchQueryDataKey,
+        searchQueryObjMap,
+        searchQueryUrl,
+
         emoji = "🦆",
         label = "",
 
-        user = null,
         authFeatures = false,
 
         nav = [],
@@ -56,7 +76,11 @@
         return nav;
     }
 
-    nav = [
+    function getDefaultNav(): boolean {
+        return defaultNav;
+    }
+
+    if(getDefaultNav()) nav = [
         {
             label: "Home",
             pathname: "/",
@@ -65,6 +89,14 @@
         ...getNav(),
     ];
 
+    function authFeaturesEnabled(): boolean {
+        return authFeatures;
+    }
+
+    let user: Auth.User | null = $state(null);
+
+    if(authFeaturesEnabled()) user = getUserData();
+
     const mobileQuery = new MediaQuery(`max-width: ${PUBLIC_MOBILE_SIZE_PX}px`);
     const tabletQuery = new MediaQuery(`max-width: ${PUBLIC_TABLET_SIZE_PX}px`);
 </script>
@@ -83,6 +115,7 @@
                 <Row widthPx="fit" gapEm={mobileQuery.current ? 1 : 1.33}>
                     {#each nav as n}
                         <a
+                            target="{n.pathname.startsWith("/") ? "_self" : "_blank"}"
                             href={n.pathname}
                             class="font-semibold{page.url.pathname ===
                             n.pathname
@@ -121,6 +154,9 @@
             </Row>
         {/if}
         <Row widthPx="fit">
+            {#if withSearchBar && onresult !== null}
+            <SearchBar {onsearch} {onresult} options={searchOptions} queryDataKey={searchQueryDataKey} queryObjMap={searchQueryObjMap} queryUrl={searchQueryUrl}/>
+            {/if}
             {#if authFeatures}
                 <Row widthPx="fit">
 

package/dist/components/containers/navigation/Header.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { Auth } from "../../../types.ts";
+import { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
 interface HeaderNavigation {
     label: string;
     pathname: string;
@@ -11,7 +11,16 @@ interface HeaderProps {
     label?: string;
     withThemeButton?: boolean;
     withIcons?: boolean;
-    user?: Auth.User | null;
+    withSearchBar?: boolean;
+    onsearch?: ((query: string) => Promise<void>) | null;
+    onresult?: ((result: SearchResult) => Promise<void>) | null;
+    searchOptions?: SearchResult[];
+    searchQueryUrl?: string;
+    searchQueryObjMap?: {
+        [key in QueryMapKeys]: string | null;
+    };
+    searchQueryDataKey?: string;
+    defaultNav?: boolean;
     authFeatures?: boolean;
     nav?: HeaderNavigation[];
 }