wip

src/lib/components/Base/Base.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import InternationalizationProvider from './../Internationalization/InternationalizationProvider.svelte';
 	import DarkProvider from './../Dark/DarkProvider.svelte';
     import '../../index.js';
 </script>
 
 <DarkProvider />
+<InternationalizationProvider />
 
 <div id="base">
     <slot />

src/lib/components/Button/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let as: 'button' | 'a' = 'button';
-    export let size : 'small' | 'medium' | 'large' = 'medium';
+    export let size : 'x-small' | 'small' | 'medium' | 'large' = 'medium';
     export let color : 
         'accent' | 
         'soft' | 
@@ -119,6 +119,16 @@
     }
 
     /* Sizes */
+    .button.x-small {
+        height: 20px;
+        padding: 0 8px;
+        font-size: 12px;
+        --local-hover-shadow-size: 1px;
+        &:active {
+            --local-hover-shadow-size: 2px;
+        }
+    }
+
     .button.small {
         height: 26px;
         padding: 0 12px;

src/lib/components/IconButton/IconButton.svelte

@@ -34,6 +34,7 @@
         align-items: center;
         justify-content: center;
         transition: .2s box-shadow;
+        font-size: 1em;
         
         --local-hover-shadow-size: 2.5px;
         --local-hover-shadow-color: var(--accent-light);

src/lib/components/Internationalization/InternationalizationProvider.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    onMount(() => {
+
+    })
+</script>
+

src/lib/components/Internationalization/LanguageToggle.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import IconButton from './../IconButton/IconButton.svelte';
+    import Box from '$lib/components/Box/Box.svelte';
+    import { IconCaretUp } from '@hyvor/icons';
+    import { page } from '$app/stores';
+
+    const i18n = $page.data.i18n
+</script>
+
+
+{#if i18n}
+    <div class="language-toggle">
+        <span class="current">
+            <span class="flag">🇫🇷</span>
+            <span class="name">Français (France)</span>
+            <span class="icon"><IconCaretUp size={14} /></span>
+        </span>
+    </div>
+{/if}
+
+<style>
+    .current {
+        padding: 4px 15px;
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: var(--box-shadow);
+        border-radius: var(--box-radius);
+        background-color: var(--box-background);
+        transition: .2s box-shadow;
+    }
+    .current:hover {
+        box-shadow: var(--box-shadow-dark);
+    }
+    .flag {
+        margin-right: 6px;
+        font-size: 20px;
+    }
+    .icon {
+        margin-left: 8px;
+        display: inline-flex;
+        align-items: center;
+    }
+</style>

src/lib/components/Internationalization/T.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    console.log('T', $page.data)
+</script>
+
+{ $page.data.lang.home.title }

src/lib/components/Internationalization/i18n.ts

@@ -0,0 +1,44 @@
+type LoaderType = () => Promise<any>;
+
+interface Language {
+    code: string,
+    name: string,
+    loader: LoaderType,
+    default: boolean
+}
+
+export class i18n {
+
+    private current : string;
+    private languages : Language[] = [];
+
+    constructor(current: string) {
+        this.current = current;
+    }
+
+    register(code: string, name: string, loader: LoaderType, isDefault = false) {
+        this.languages.push({
+            code,
+            name,
+            loader,
+            default: isDefault
+        });
+    }
+
+    found(code: string) : boolean {
+        return !!this.languageByCode(code)
+    }
+
+    languageByCode(code: string) : Language | undefined {
+        return this.languages.find(l => l.code === code)
+    }
+
+    getCurrent() {
+        return this.languageByCode(this.current);
+    }
+
+    async load(code: string) {
+        return (await this.languageByCode(code)?.loader()).default;
+    }
+
+}

src/lib/components/Link/Link.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let href: string;
-    export let color : 'link' | 'accent' = 'link';
+    export let color : 'link' | 'accent' | 'text' = 'link';
     export let underline : boolean = true;
 </script>
 
@@ -48,6 +48,9 @@
     a.color-accent {
         --local-color: var(--accent);
     }
+    a.color-text {
+        --local-color: var(--text);
+    }
     a.underline {
         text-decoration: underline;
         text-decoration-color: var(--local-color);

src/lib/components/Tooltip/Tooltip.svelte

@@ -48,6 +48,14 @@
         show = false;
     }
 
+    $: {
+        if (text) {
+            tick().then(() => {
+                positionTooltip();
+            })
+        }
+    }
+
     onMount(() => {
         positionTooltip();
         document.addEventListener('scroll', positionTooltip);

src/lib/marketing/Docs/Docs.svelte

@@ -18,7 +18,7 @@
         margin: auto;
         width: 1150px;
         max-width: 100%;
-        padding-bottom: 100px;
+        padding-bottom: 40px;
         /* min-height: calc(100vh - var(--header-height)); */
     }
 

src/lib/marketing/Footer/Footer.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+    import Container from '$lib/marketing/Container/Container.svelte';
+    import { IconCopy, IconDiscord, IconEnvelope, IconGithub, IconLinkedin, IconTwitterX, IconYoutube } from '@hyvor/icons';
+    import Link from "../../components/Link/Link.svelte";
+    import IconButton from "../../components/IconButton/IconButton.svelte";
+    import Tooltip from "../../components/Tooltip/Tooltip.svelte";
+	import LanguageToggle from '$lib/components/Internationalization/LanguageToggle.svelte';
+
+    const year = new Date().getFullYear();
+
+    export let email : string | null = null;
+    export let social = {} as Record<string, string | null>;
+
+    social = {
+        ...{
+            x: null,
+            discord: 'https://discord.com/invite/2WRJxQB',
+            github: 'https://github.com/hyvor',
+            youtube: 'https://www.youtube.com/@HYVOR',
+            linkedin: 'https://www.linkedin.com/company/30240435' 
+        },
+        ...social
+    }
+
+    export let emailCopied = false;
+
+    function handleCopy() {
+        navigator.clipboard.writeText(email!);
+        emailCopied = true;
+        setTimeout(() => {
+            emailCopied = false;
+        }, 1000);
+    }
+
+</script>
+
+<footer>
+
+    <Container>
+
+        <div class="footer-top">
+
+            <div class="footer-top-left">
+
+                {#if email}
+                    <div class="email-wrap">
+                        <Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
+                            <IconEnvelope slot="start" />
+                            { email }
+                        </Link>
+                        <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
+                            <IconButton size="small" color="invisible" on:click={handleCopy}>
+                                <IconCopy size={12} />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+                {/if}
+
+                <div class="social-media">
+                    {#if social.github}
+                        <a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
+                    {/if}
+                    {#if social.x}
+                        <a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+                    {/if}
+                    {#if social.discord}
+                        <a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
+                    {/if}
+                    {#if social.youtube}
+                        <a href={social.discord} target="_blank" rel="nofollow"><IconYoutube /></a>
+                    {/if}
+                    {#if social.linkedin}
+                        <a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+                    {/if}
+                </div>
+
+            </div>
+
+            <div class="footer-top-right">
+
+
+                <span class="language-toggle-wrap">
+                    <LanguageToggle />
+                </span>
+
+            </div>
+
+        </div>
+
+        <div class="footer-center">
+            <slot name="center" />
+        </div>
+
+        <div class="footer-bottom">
+            <div class="footer-bottom-left">
+                HYVOR © {year}
+            </div> 
+            <div class="footer-bottom-right">
+                From France 🇫🇷
+            </div>
+        </div>
+
+    </Container>
+
+</footer>
+
+<style>
+
+    footer {
+        border-top: 1px solid var(--border)
+    }
+
+    .footer-top {
+        padding-top: 60px;
+        display: flex;
+        align-items: flex-start;
+    }
+    .footer-center {
+        padding-top: 50px;
+    }
+    .footer-top-left {
+        flex: 1;
+    }
+    .footer-top-right {
+        display: flex;
+    }
+    .email-wrap {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-bottom: 15px;
+    }
+    .social-media a {
+        display: inline-block;
+        padding: 3px;
+        margin-right: 8px;
+        color: var(--text-light);
+    }
+    .social-media a:first-child {
+        padding-left: 0;
+    }
+    .social-media a:hover {
+        color: var(--accent);
+    }
+
+    .footer-bottom {
+        padding-top: 50px;
+        padding-bottom: 30px;
+        display: flex;
+    }
+    .footer-bottom-left {
+        flex: 1;
+    }
+
+
+	.language-toggle-wrap {
+		margin-left: 8px;
+		font-size: 18px;
+	}
+
+</style>

src/lib/marketing/Footer/FooterLinkList.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    export let title : string;
+</script>
+
+<div class="link-list">
+    <div class="title">{title}</div>
+    <div class="links">
+        <slot />
+    </div>
+</div>
+
+<style>
+
+    .link-list {
+        flex: 1;
+    }
+
+    .title {
+        font-weight: 600;
+        text-transform: uppercase;
+        margin-bottom: 10px;
+    }
+
+    .links {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .links :global(a) {
+        margin-top: 12px;
+    }
+    .links :global(a:hover) {
+        text-decoration: underline;
+    }
+
+</style>