duckylib 0.1.2 → 0.1.3

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,98 @@
+<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")[];
+    }
+
+    let {age = 18, references = []}: AgeConfirmProps = $props();
+
+    const referenceMap = {
+        "substances": "Alcohol, Drugs, and Substance Abuse",
+        "sexual": "Sexual Content"
+    }
+
+    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")[];
+}
+declare const AgeConfirm: import("svelte").Component<AgeConfirmProps, {}, "">;
+type AgeConfirm = ReturnType<typeof AgeConfirm>;
+export default AgeConfirm;

package/dist/components/text/Text.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface TextProps {
+        children: Snippet;
+
+        inheritColor?: boolean;
+        sizePx?: number;
+
+        hoverEffect?: boolean;
+
+        classList?: ("red" | "green" | "yellow" | "strike" | "italic")[];
+        weight?: "lightest" | "lighter" | "light" | "normal" | "semibold" | "bold" | "bolder" | "boldest" | "black";
+        monospace?: boolean;
+        size?: 1 | 2 | 3 | 4 | 5 | 6;
+    }
+
+    let { children, inheritColor = false, sizePx = 24, classList = [], weight = "normal", monospace = false, size = 1 }: TextProps = $props();
+</script>
+
+
+<p class="{classList.join(" ")} font-{monospace ? "mono-" : ""}{weight}" style="color: {inheritColor ? "inherit" : "var(--text)"};user-select:none;">{@render children()}</p>
+
+
+<style>
+    @import url("../../styles/globals.css");
+</style>

package/dist/components/text/Text.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface TextProps {
+    children: Snippet;
+    inheritColor?: boolean;
+    sizePx?: number;
+    hoverEffect?: boolean;
+    classList?: ("red" | "green" | "yellow" | "strike" | "italic")[];
+    weight?: "lightest" | "lighter" | "light" | "normal" | "semibold" | "bold" | "bolder" | "boldest" | "black";
+    monospace?: boolean;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export {default as LoginButton} from "./components/buttons/LoginButton.svelte";
 export {default as ThemeButton} from "./components/buttons/ThemeButton.svelte";
+export {default as Button} from "./components/buttons/Button.svelte";
 export {default as UserToast} from "./components/buttons/UserToast.svelte";
 export {default as InfoCard} from "./components/containers/cards/InfoCard.svelte";
 export {default as LinkCard} from "./components/containers/cards/LinkCard.svelte";
@@ -11,6 +12,9 @@ export {default as Website} from "./components/containers/Website.svelte";
 export {default as Markdown} from "./components/text/Markdown.svelte";
 export {default as Typewriter} from "./components/text/Typewriter.svelte";
 export {default as Heading} from "./components/text/Heading.svelte"
+export {default as Text} from "./components/text/Text.svelte"
+export {default as AgeConfirm} from "./components/containers/AgeConfirm.svelte"
+
 
 export * from "./styles/globals.css"
 export * from "./styles/fonts.css"

package/dist/index.js

@@ -1,6 +1,7 @@
 import { browser } from "$app/environment";
 export { default as LoginButton } from "./components/buttons/LoginButton.svelte";
 export { default as ThemeButton } from "./components/buttons/ThemeButton.svelte";
+export { default as Button } from "./components/buttons/Button.svelte";
 export { default as UserToast } from "./components/buttons/UserToast.svelte";
 export { default as InfoCard } from "./components/containers/cards/InfoCard.svelte";
 export { default as LinkCard } from "./components/containers/cards/LinkCard.svelte";
@@ -12,6 +13,8 @@ export { default as Website } from "./components/containers/Website.svelte";
 export { default as Markdown } from "./components/text/Markdown.svelte";
 export { default as Typewriter } from "./components/text/Typewriter.svelte";
 export { default as Heading } from "./components/text/Heading.svelte";
+export { default as Text } from "./components/text/Text.svelte";
+export { default as AgeConfirm } from "./components/containers/AgeConfirm.svelte";
 export * from "./styles/globals.css";
 export * from "./styles/fonts.css";
 export * from "./styles/emojis.css";
@@ -31,3 +34,18 @@ export function getTheme() {
         return "dark";
     }
 }
+export function getAgeVerified() {
+    if (browser) {
+        if (window.localStorage.getItem("av") !== null) {
+            let it = window.localStorage.getItem("av");
+            return it === "true";
+        }
+        else {
+            window.localStorage.setItem("av", "false");
+            return false;
+        }
+    }
+    else {
+        return false;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "duckylib",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",