I should have saved this long ago. Lots of changes. Learning a lot as well!

2024-02-16 20:12:19 -05:00
parent cb9bd1648c
commit 9958724aaa
681 changed files with 831 additions and 24 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -5,6 +5,12 @@
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width" />

+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <script>
@@ -13,7 +19,7 @@

        %sveltekit.head%
    </head>
-    <body data-sveltekit-preload-data="hover" data-theme="modern">
+    <body data-sveltekit-preload-data="hover" data-theme="wintry">
        <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
    </body>
 </html>
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -5,12 +5,48 @@

 html,
 body {
-	@apply h-full overflow-hidden;
+    @apply h-full overflow-hidden;
+
+    /* font-family: 'Liberation Sans', sans-serif; */
+    /* font-family: 'Noto Sans', sans-serif; */
 }

+/* default theme */
+/* @font-face {
+    font-family: 'Liberation Sans', sans-serif;
+    font-family: 'Noto Sans', sans-serif;
+    src: url('/fonts/liberation/LiberationSans-Regular.ttf');
+    src: url('/fonts/noto/NotoSans-Regular.ttf');
+    font-display: swap;
+} */
+
 /* modern theme */
@font-face {
-	font-family: 'Quicksand';
-	src: url('/fonts/Quicksand.ttf');
-	font-display: swap;
+    font-family: 'Quicksand';
+    src: url('/fonts/Quicksand.ttf');
+    font-display: swap;
+}
+
+:root [data-theme='modern'] {
+	/* --theme-rounded-base: 20px;
+	--theme-rounded-container: 4px; */
+
+    --theme-font-family-base: 'Liberation Sans', sans-serif;
+    --theme-font-family-heading: 'Liberation Sans', sans-serif;
+}
+
+.card-footer {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.5);
+    margin-top: 1em;
+    padding-top: 1em;
+
+    opacity: .5;
+}
+
+.ae_modal_scrollfix {
+    /* Allow modal content to scroll if it's too long */
+    overflow-y: auto;
+    max-height: 96vh;
+    /* max-height: 99%; */
+
 }
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -34,6 +34,7 @@ export let ae_app_local_data_struct: key_val = {
    'theme': 'light',
    'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
    'site_domain': null, // https://example.com, https://dev.example.com, etc.
+    'administrator_access': true,
    'ds': {},
    'hub': {
        'ds': {},
@@ -41,6 +42,7 @@ export let ae_app_local_data_struct: key_val = {
    'mod': {    // module
        'events': {},
        'sponsorships': {
+            show_edit__sponsorship_obj: false,
            show_list__sponsorship_obj_li: true,
            show_view__sponsorship_obj: false,
        },
@@ -93,6 +95,26 @@ export let ae_api = writable(ae_api_data_struct);
 export let slct_trigger: any = writable(null);
 console.log(`Aether Config - Selected Trigger:`, slct_trigger);

-let slct_obj_template: key_val = { 'sponsorship_id': null, 'sponsorship_obj': {}, 'post_id': null, 'post_obj': {}, 'post_obj_li': [], 'post_comment_id': null, 'post_comment_obj': {}, 'post_comment_obj_li': [] };
+let slct_obj_template: key_val = {
+    'account_id': null,
+    'account_obj': {},
+    'event_id': null,
+    'event_obj': {},
+    'event_exhibit_id': null,
+    'event_exhibit_obj': {},
+    'event_presentation_id': null,
+    'event_presentation_obj': {},
+    'event_presenter_id': null,
+    'event_presenter_obj': {},
+    'event_session_id': null,
+    'event_session_obj': {},
+    'sponsorship_id': null,
+    'sponsorship_obj': {},
+    'post_id': null,
+    'post_obj': {},
+    'post_obj_li': [],
+    'post_comment_id': null,
+    'post_comment_obj': {},
+    'post_comment_obj_li': [] };
 console.log(`Aether Config - Selected Objects:`, slct_obj_template);
 export let slct = writable(slct_obj_template);
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,18 +5,28 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
 // Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
 initializeStores();
 import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
-// import type {
-//     DrawerSettings, DrawerComponent, DrawerStore,
-//     // ModalSettings, ModalComponent, ModalStore
-//     } from '@skeletonlabs/skeleton';
+import type {
+    // DrawerSettings, DrawerComponent, DrawerStore,
+    ModalSettings, ModalComponent, ModalStore
+    } from '@skeletonlabs/skeleton';
 const drawerStore = getDrawerStore();

+import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
+
+const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
+	// modalComponentTwo: { ref: ModalComponentTwo },
+	// ...
+};
+

 // Highlight JS
 import hljs from 'highlight.js/lib/core';
 import 'highlight.js/styles/github-dark.css';
 import type { Writable } from 'svelte/store';
 import { get } from 'svelte/store';
+import { page } from "$app/stores";
 import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
 import xml from 'highlight.js/lib/languages/xml'; // for HTML
 import css from 'highlight.js/lib/languages/css';
@@ -111,7 +121,7 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
 </script>


-<Modal />
+<Modal components={modalRegistry} />


 <Drawer>
@@ -122,10 +132,10 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
    {:else if $drawerStore.id === 'sponsorships__edit'}
 		(show 'sponsorships__edit__sponsorship_obj' contents)
        <section class="sponsorships_editing">
-            {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
+            <!-- {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
                <p>Edit!</p>
                <Edit_sponsorship_obj />
-            {/if}
+            {/if} -->
        </section>
 	{:else}
 		(fallback contents)
@@ -151,10 +161,12 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {

                <a
                    class="btn btn-sm variant-ghost-surface"
+                    class:active={$page.url.pathname==='/sponsorships'}
                    href="/sponsorships">Sponsorships</a>

                <a
                    class="btn btn-sm variant-ghost-surface"
+                    class:active={$page.url.pathname==='/event_speakers'}
                    href="/event_speakers">Speakers</a>
            </svelte:fragment>
        </AppBar>
@@ -191,6 +203,9 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
            </svelte:fragment>
        </AppBar> -->
    </svelte:fragment>
+
+
+
    <!-- Page Route Content -->
    <slot />

--- a/src/routes/sponsorships/+layout.svelte
+++ b/src/routes/sponsorships/+layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+export let data;
+</script>
+
+<h1>Sponsorships Layout?</h1>
+
+<!-- <div class="submenu">
+	{#each data.sections as section}
+		<a href="/settings/{section.slug}">{section.title}</a>
+	{/each}
+</div> -->
+
+<slot></slot>
--- a/src/routes/sponsorships/+layout.ts
+++ b/src/routes/sponsorships/+layout.ts
@@ -0,0 +1,18 @@
+/** @type {import('./$types').LayoutLoad} */
+export function load({ params, url }) { // route
+    console.log(`page data - params:`, params);
+    // console.log(`page data - route:`, route);
+    console.log(`page data - url:`, url);
+
+    let data_struct = {
+        params: params,
+        sections: [
+			{ slug: 'new', title: 'New Sponsorship' },
+			{ slug: 'manage', title: 'Manage' },
+            { slug: 'test', title: 'Test' },
+		],
+        url: url,
+
+    };
+    return data_struct;
+}
--- a/src/routes/sponsorships/+page.svelte
+++ b/src/routes/sponsorships/+page.svelte
@@ -5,21 +5,37 @@ import { onMount } from 'svelte';
 import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
 import type {
    DrawerSettings,
-    // ModalSettings, ModalComponent, ModalStore
+    ModalSettings
+    , ModalComponent, ModalStore
    } from '@skeletonlabs/skeleton';
 const modalStore = getModalStore();

 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';

-import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
+// import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
+import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
 import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
 import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';

+
+import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
+
+const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
+
+const modal_view__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentViewSponsorshipObj,
+};
+
+
 type key_val = {
    [key: string]: any;
 };

+export let data;
+console.log(`page data:`, data);
+
 let ae_account_obj_get_promise;
 let ae_sponsorship_obj_li_get_promise;

@@ -155,7 +171,83 @@ async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
    return ae_sponsorship_obj_li_get_promise;
 }

+$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+    console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+    console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);

+    $slct_trigger = null;
+
+    handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
+}
+
+let ae_sponsorship_obj_get_promise;
+async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
+    console.log('*** handle_load_sponsorship_id_obj() ***');
+
+    let params = {};
+
+	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'sponsorship',
+        obj_id: sponsorship_id,
+        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
+        params: params,
+        log_lvl: 2
+        })
+    .then(function (sponsorship_obj_get_result) {
+        if (sponsorship_obj_get_result) {
+            $slct.sponsorship_obj = sponsorship_obj_get_result;
+            console.log(`sponsorship object:`, $slct.sponsorship_obj);
+        }
+
+        // Auto show the selected sponsorship ID
+        // Is this pushState needed here?
+        // Set the URL param "sponsorship_id" to the current sponsorship ID.
+        // const url = new URL(location);
+        // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'sponsorship_id': $slct.sponsorship_id};
+        // window.parent.postMessage(message, "*");
+
+        // modalStore.trigger(modal_view__sponsorship_obj);
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_sponsorship_obj_get_promise;
+}
+
+const modal_edit__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: 'modalComponentEditSponsorshipObj',
+    title: 'Edit Sponsorship',
+};
+
+// const modal_view__sponsorship_obj: ModalSettings = {
+// 	type: 'component',
+// 	component: 'modal_component_view__sponsorship_obj',
+// };
+
+// $: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+//     console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+//     console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
+
+//     $slct_trigger = null;
+// }
+
+$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
+    console.log('Show Modal Edit');
+    modalStore.trigger(modal_edit__sponsorship_obj);
+} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
+    console.log('Show Modal View');
+    // modalStore.trigger(modalComponentViewSponsorshipObj);
+    modalStore.trigger(modal_view__sponsorship_obj);
+}

 // const modal: ModalSettings = {
 // 	type: 'alert',
@@ -232,19 +324,19 @@ const drawer_settings_y: DrawerSettings = {
        {/if}
        </section>

-        <section class="sponsorships_editing">
+        <!-- <section class="sponsorships_editing">
        {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
            <p>Edit!</p>
            <Edit_sponsorship_obj />
        {/if}
-        </section>
+        </section> -->

-        <section class="sponsorships_viewing">
+        <!-- <section class="sponsorships_viewing">
        {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_view__sponsorship_obj}
            <p>Viewing!</p>
            <View_sponsorship_obj />
        {/if}
-        </section>
+        </section> -->

 	</div>
 </div>
--- a/src/routes/sponsorships/10_edit__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_edit__sponsorship_obj.svelte
@@ -29,7 +29,7 @@ if ($slct.sponsorship_id) {
    // console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
    // console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)

-    $slct_trigger = 'load__sponsorship_obj';
+    // $slct_trigger = 'load__sponsorship_obj';
    disable_submit_btn = false;
 } else {
    $slct.sponsorship_id = null;
--- a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+import type { SvelteComponent } from 'svelte';
+
+// Stores
+import { getModalStore, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
+
+// Props
+/** Exposes parent props to this component. */
+export let parent: SvelteComponent;
+
+const modalStore = getModalStore();
+
+
+// import { ae_util } from '$lib/ae_utils';
+// import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+
+
+// Form Data
+const formData = {
+    name: 'Jane Doe',
+    tel: '214-555-1234',
+    email: 'jdoe@email.com'
+};
+
+// const form_data = $slct.sponsorship_obj;
+
+// We've created a custom submit function to pass the response and close the modal.
+function onFormSubmit(): void {
+    if ($modalStore[0].response) $modalStore[0].response(formData);
+    modalStore.close();
+}
+
+// Base Classes
+const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
+// const cBase = 'bg-surface-100-800-token w-screen h-screen';
+// const cBase = 'card h-screen';
+// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
+
+const cHeader = 'text-2xl font-bold';
+const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
+
+let tabSet: number = 0;
+</script>
+
+<!-- @component This is the Sponsorships modal edit form. -->
+
+{#if $modalStore[0]}
+<div class="modal-example-form {cBase}">
+    <header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
+    <article>{$modalStore[0].body ?? '(body missing)'}</article>
+
+    <form class="modal-form {cForm}">
+    <TabGroup
+        justify="justify-center"
+        active="variant-ghost-primary"
+        hover="hover:variant-soft-primary"
+        flex="flex-1 lg:flex-none"
+        rounded=""
+        border=""
+        class="bg-surface-100-800-token w-full"
+        >
+        <Tab bind:group={tabSet} name="tab1" value={0}>
+            <svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
+            <span>Start</span>
+        </Tab>
+        <Tab bind:group={tabSet} name="tab2" value={1}>
+            <svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
+            Gala Guests
+        </Tab>
+        <Tab bind:group={tabSet} name="tab3" value={2}>
+            <svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
+            More
+        </Tab>
+
+    <!-- Tab Panels --->
+	<svelte:fragment slot="panel">
+    {#if tabSet === 0}
+    <section class="ae_section sponsorship__contacts border border-gray-500/20 p-4">
+        <fieldset class="sponsorship__poc_person flex flex-wrap gap-4">
+            <legend class="legend">Point of Contact</legend>
+
+            <label for="poc_full_name">Full name
+                <div class="input-group grid-cols-[auto_1fr_auto]">
+                <div class="input-group-shim">
+                {#if !$ae_loc.trusted_access}
+                    <span class="fas fa-lock" title="Field is locked"></span>
+                {:else}
+                    <span class="fas fa-unlock" title="Field is unlocked"></span>
+                {/if}
+                </div>
+                <input
+                    type="text"
+                    class="input"
+                    id="poc_full_name" name="poc_full_name"
+                    placeholder="Full name"
+                    value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.full_name ? $slct.sponsorship_obj.poc_json.full_name : '')}
+                    autocomplete="name"
+                    readonly={!$ae_loc.trusted_access}
+                    required
+                    >
+                </div>
+            </label>
+            <label for="poc_email">Email
+                <div class="input-group grid-cols-[auto_1fr_auto]">
+                <div class="input-group-shim">
+                {#if !$ae_loc.trusted_access}
+                    <span class="fas fa-lock" title="Field is locked"></span>
+                {:else}
+                    <span class="fas fa-unlock" title="Field is unlocked"></span>
+                {/if}
+                </div>
+                <input
+                    type="email"
+                    class="input"
+                    id="poc_email"
+                    name="poc_email"
+                    placeholder="Email"
+                    value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.email ? $slct.sponsorship_obj.poc_json.email : '')}
+                    autocomplete="email"
+                    readonly={!$ae_loc.trusted_access}
+                    required
+                    >
+                </div>
+            </label>
+
+            <label for="poc_phone_mobile">Mobile phone
+                <input
+                    type="tel"
+                    class="input"
+                    id="poc_phone_mobile"
+                    name="poc_phone_mobile"
+                    placeholder="Mobile phone"
+                    value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.phone_mobile ? $slct.sponsorship_obj.poc_json.phone_mobile : '')}
+                    autocomplete="tel"
+                    >
+            </label>
+        </fieldset>
+    </section>
+
+    <section class="ae_section sponsorship__general_information">
+        <label for="name" class="label">Name of Sponsorship
+            <input type="text" id="name" name="name" required max="200" value={$slct.sponsorship_obj.name ?? ''} placeholder="Name of Sponsorship" autocomplete="off" class="input" />
+            </label>
+
+            <label class="label ae_label sponsorship__description">Short description
+            <textarea name="description" id="description" class="textarea ae_value sponsorship__description tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.sponsorship_obj.description} placeholder="A short description or overview of this sponsorship."></textarea>
+        </label>
+
+        <label class="label">Level of sponsorship?
+            <!-- <input name="level_num" value={$slct.sponsorship_obj.level_num} /> -->
+            <select name="level_num" class="select">
+                <option value=1 selected={($slct.sponsorship_obj.level_num == 1 ? 'selected' : '')}>The Lowest Level Sponsorship ($5,000)</option>
+                <option value=2 selected={($slct.sponsorship_obj.level_num == 2 ? 'selected' : '')}>Mid-level Sponsor ($7,500)</option>
+                <option value=3 selected={($slct.sponsorship_obj.level_num == 3 ? 'selected' : '')}>High Level Sponsor ($15,000)</option>
+            </select>
+
+            <ul>
+                <li><strong>Lowest Level</strong> - Thank you?</li>
+                <li><strong>Mid-level</strong> - Please join the gala along with 5 guests.</li>
+                <li><strong>High Level</strong> -  Please join the gala along with 10 guests. You will also be able to upload a promo video that will play at the end of the gala.</li>
+            </ul>
+        </label>
+    </section>
+
+    {:else if tabSet === 1}
+    <section>
+
+    {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
+
+    {#each $slct.sponsorship_obj.guest_li_json as guest, index}
+    <fieldset class="border border-gray-500/20 p-4">
+        <legend class="legend">Guest {index} - {guest.given_name} {guest.family_name}</legend>
+        <div class="flex flex-wrap gap-4">
+        <label for="guest_{index}_given_name" class="label max-w-64">Given name
+            <input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="Full name" value={guest.given_name ?? ''} autocomplete="name">
+        </label>
+        <label for="guest_{index}_family_name" class="label max-w-64">Family name
+            <input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Full name" value={guest.family_name ?? ''} autocomplete="name">
+        </label>
+        <label for="guest_{index}_email" class="label max-w-64">Email
+            <input type="email" class="input" id="guest_{index}_email" name="guest_{index}_email" placeholder="Email" value={guest.email ?? ''} autocomplete="email">
+        </label>
+        </div>
+        <div class="flex flex-wrap gap-4">
+        <label for="guest_{index}_phone_mobile" class="label max-w-64">Mobile phone
+            <input type="tel" class="input" id="guest_{index}_phone_mobile" name="guest_{index}_phone_mobile" placeholder="Mobile phone" value={guest.phone_mobile ?? ''} autocomplete="tel">
+        </label>
+        <label for="guest_{index}_phone_office" class="label max-w-64">Office phone
+            <input type="tel" class="input" id="guest_{index}_phone_office" name="guest_{index}_phone_office" placeholder="Office phone" value={guest.phone_office ?? ''} autocomplete="tel">
+        </label>
+        <label for="guest_{index}_city" class="label max-w-64">City
+            <input type="text" class="input" id="guest_{index}_city" name="guest_{index}_city" placeholder="City" value={guest.city ?? ''} autocomplete="city">
+        </label>
+    </div>
+    </fieldset>
+    {/each}
+
+    {:else}
+        <div class="ae_warning">No guest list found!</div>
+    {/if}
+
+    </section>
+
+    {:else if tabSet === 2}
+
+    <section>
+        <label for="amount">Amount
+            <div class="input-group grid-cols-[auto_1fr_auto]">
+            <div class="input-group-shim">
+                <span>$</span>
+            </div>
+            <input
+                type="number"
+                class="input"
+                id="amount"
+                name="amount"
+                placeholder="Amount"
+                value={$slct.sponsorship_obj.amount ?? ''}
+                autocomplete="off"
+                readonly={$ae_loc.trusted_access}
+                required
+                >
+            </div>
+        </label>
+    </section>
+
+    {/if}
+
+    </svelte:fragment>
+    </TabGroup>
+
+    </form>
+    <!-- prettier-ignore -->
+    <footer class="modal-footer {parent.regionFooter}">
+        <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
+        <button class="btn {parent.buttonPositive}" on:click={onFormSubmit}>Submit Form</button>
+    </footer>
+</div>
+{/if}
+
+<style>
+</style>
--- a/src/routes/sponsorships/10_list__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_list__sponsorship_obj.svelte
@@ -17,7 +17,7 @@ onMount(() => {

 <section class="svelte_component ae_section ae_list list__sponsorship_obj sponsorship_obj_li {container_class_li.join(' ')}">
 {#if $slct.sponsorship_obj_li}
-<table class="ae_table">
+<table class="table table-compact table-hover">
    <thead>
        <tr>
            <th>Options</th>
@@ -41,6 +41,7 @@ onMount(() => {
        >

        <td class="ae_options sponsorship_obj__options">
+            <div class="btn-group variant-filled">
            <button
                on:click={() => {
                    $slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
@@ -54,7 +55,7 @@ onMount(() => {
                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = true;
                    $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
                }}
-                class="ae_btn btn_primary"
+                class="variant-soft-primary"
                title={`Open to see details: ${ae_sponsorship_obj.name}`}
                >
                <span class="fas fa-envelope-open"></span>
@@ -67,19 +68,20 @@ onMount(() => {
                    on:click={() => {
                        $slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
                        $slct.sponsorship_obj = ae_sponsorship_obj;
-                        $slct_trigger = 'load__sponsorship_obj';
+                        // $slct_trigger = 'load__sponsorship_obj';

                        // $ae_loc.mod.sponsorships.show_main__options = true;
                        // $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
                        $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                        $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
                    }}
-                    class="ae_btn btn_secondary"
+                    class="variant-soft-warning"
                    title={`Edit meeting: ${ae_sponsorship_obj.name}`}
                    >
                    <span class="fas fa-edit"></span> Edit
                </button>
            {/if}
+            </div>
        </td>

        <td class="ae_value sponsorships__name">{ae_sponsorship_obj.name}</td>
@@ -129,6 +131,12 @@ onMount(() => {
    </tr>
 {/each}
    </tbody>
+    <tfoot>
+        <tr>
+            <th colspan="7" class="">Total Count:</th>
+            <td>{$slct.sponsorship_obj_li.length}</td>
+        </tr>
+    </tfoot>
 </table>
 {:else}
    <div>No sponsorships avalible to show at this time</div>
--- a/src/routes/sponsorships/10_view__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_view__sponsorship_obj.svelte
@@ -143,6 +143,8 @@ onMount(() => {

                    // $ae_loc.mod.sponsorships.show_main__options = true;
                    // $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
+                    $slct_trigger = 'load__sponsorship_obj';
+
                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                    $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
                }}
--- a/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+import type { SvelteComponent } from 'svelte';
+
+// Stores
+import { getModalStore } from '@skeletonlabs/skeleton';
+
+// Props
+/** Exposes parent props to this component. */
+export let parent: SvelteComponent;
+
+import { createEventDispatcher, onMount } from 'svelte';
+import { fade } from 'svelte/transition';
+import dayjs from 'dayjs';
+
+import { ae_util } from '$lib/ae_utils';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+export let container_class_li = [];
+
+const dispatch = createEventDispatcher();
+
+if ($slct.sponsorship_id) {
+    console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
+    console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)
+
+    $slct_trigger = 'load__sponsorship_obj';
+}
+
+onMount(() => {
+    console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
+});
+
+
+// dayjs.extend(window.dayjs_plugin_utc)
+// dayjs.extend(window.dayjs_plugin_timezone);
+// console.log(`UTC offset: ${dayjs().utcOffset()}`);
+// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
+// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
+// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
+// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
+// console.log(test_time.format('YYYY-MM-DD HH:mm'));
+// let adjusted_to_local_tz = test_time.tz('America/New_York');
+// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
+
+// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
+// console.log(adjusted_to_local_tz_v2);
+
+// Base Classes
+const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4';
+const cHeader = 'card-header text-2xl font-bold';
+// const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
+</script>
+
+<!-- @component This is the Sponsorships modal view form. -->
+
+<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {container_class_li.join(' ')} {cBase}">
+
+<header class={cHeader}>{@html $slct.sponsorship_obj.name}</header>
+
+<div class="sponsorship__content">
+    <div
+        class="sponsorship_description description"
+        >
+        <div class="ae_label sponsorship__description">Description:</div>
+        <pre class="ae_value sponsorship__description">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
+    </div>
+
+    <div
+        class:ae_d_none={!$slct.sponsorship_obj.level_num}
+        class="sponsorship_level"
+        >
+        <span class="ae_label">Level of Sponsorship:</span>
+        <span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
+    </div>
+
+    <div>
+        <span class="ae_label">Paid:</span>
+        $
+        <span class="ae_value">
+            {$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
+        </span>
+    </div>
+
+
+
+    <div class="ae_list sponsorship__guests">
+        <h2>Guest List</h2>
+
+        {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
+        <ul>
+            {#each $slct.sponsorship_obj.guest_li_json as guest, index}
+            <li class="sponsorship__guest"
+                class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
+                >
+                <span class="ae_label">
+                    <span class="fas fa-user"></span> Contact:
+                </span>
+                {$slct.sponsorship_obj.guest_li_json[index].full_name}
+                {#if $slct.sponsorship_obj.guest_li_json[index].email}
+                    | <a href="mailto:{$slct.sponsorship_obj.guest_li_json[index].email}?Subject={$slct.sponsorship_obj.full_name}">{$slct.sponsorship_obj.guest_li_json[index].email}</a>
+                {/if}
+                {#if $slct.sponsorship_obj.guest_li_json[index].phone_mobile}
+                    <span class="ae_label">| Mobile:</span>
+                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}">{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}</a>
+                    {/if}
+                {#if $slct.sponsorship_obj.guest_li_json[index].phone_home}
+                    <span class="ae_label">| Home:</span>
+                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_home}">{$slct.sponsorship_obj.guest_li_json[index].phone_home}</a>
+                {/if}
+                {#if $slct.sponsorship_obj.guest_li_json[index].phone_office}
+                    <span class="ae_label">| Office:</span>
+                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_office}">{$slct.sponsorship_obj.guest_li_json[index].phone_office}</a>
+                {/if}
+                {#if $slct.sponsorship_obj.guest_li_json[index].other_text}| {$slct.sponsorship_obj.guest_li_json[index].other_text}{/if}
+            </li>
+            {/each}
+        </ul>
+        {:else}
+            <div class="ae_warning">No guest list found!</div>
+        {/if}
+
+    </div>
+
+
+    <section class="card-footer ae_section ae_meta sponsorship__meta">
+        <div class="ae_group">
+            <span
+                class="sponsorship__id"
+                class:ae_d_none={!$ae_loc.administrator_access}>
+                ID:
+                {$slct.sponsorship_obj.sponsorship_id_random}
+            </span>
+            <span
+                class="sponsorship__created_on"
+                >
+                Created on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.created_on, 'datetime_short')}
+            </span>
+            <span
+                class="sponsorship__updated_on"
+                class:ae_d_none={!$slct.sponsorship_obj.updated_on}
+                >
+                Updated on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.updated_on, 'datetime_short')}
+            </span>
+        </div>
+    </section>
+
+
+</div>
+
+<footer class="modal-footer {parent.regionFooter}">
+    {#if $ae_loc.trusted_access || $slct.sponsorship_obj.external_person_id === $ae_loc.novi_uuid || $slct.sponsorship_obj.contact_1_email === $ae_loc.novi_email}
+        <div class="ae_options">
+            <button
+                on:click={() => {
+                    // $slct.sponsorship_id = $slct.sponsorship_obj.sponsorship_id_random;
+                    // $slct.sponsorship_obj = $slct.sponsorship_obj;
+
+                    // const url = new URL(location);
+                    // url.searchParams.set('sponsorship_id', $slct.sponsorship_obj.sponsorship_id_random);
+                    // history.pushState({}, '', url);
+
+                    // $ae_loc.mod.sponsorships.show_main__options = true;
+                    // $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
+                    // $slct_trigger = 'load__sponsorship_obj';
+
+                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
+                    $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+                }}
+                class="btn variant-filled"
+                title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
+                >
+                <span class="fas fa-edit"></span> Edit
+            </button>
+        </div>
+    {/if}
+    <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
+</footer>
+
+</section>
+
+
+<style>
+.ae_label {
+    font-size: smaller;
+}
+.ae_value {
+    font-weight: bold;
+}
+
+.sponsorship__user_timezone {
+    font-size: smaller;
+    font-style: italic;
+}
+
+.sponsorship_obj .ae_meta {
+    flex-direction: column;
+    /* justify-content: space-between; */
+}
+
+.sponsorship_obj .ae_meta .ae_group {
+    flex-direction: row;
+}
+
+.sponsorship_obj .ae_meta .ae_options {
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+/* a {
+    color: #82B6E1;
+} */
+</style>
--- a/src/routes/sponsorships/[slug]/+page.svelte
+++ b/src/routes/sponsorships/[slug]/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+export let data;
+console.log(`page data:`, data);
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+
+// To retrieve the store, getModalStore must be invoked at the top level of your component!
+import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
+import type {
+    DrawerSettings,
+    ModalSettings
+    , ModalComponent, ModalStore
+    } from '@skeletonlabs/skeleton';
+const modalStore = getModalStore();
+
+import Edit_modal_sponsorship_obj from '../10_edit_modal__sponsorship_obj.svelte';
+
+const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
+
+const modal_edit__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentEditSponsorshipObj,
+    title: 'Edit Your Sponsorship',
+};
+
+// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+
+$slct.sponsorship_id = data.url.searchParams.get('ae_id');
+console.log(data.url.searchParams.get('ae_id'));
+console.log(`Selected Sponsorship ID:`, $slct.sponsorship_id);
+$slct_trigger = 'load__sponsorship_obj';
+
+
+$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+    console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+    console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
+
+    $slct_trigger = null;
+
+    handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
+
+    modalStore.trigger(modal_edit__sponsorship_obj);
+}
+
+let ae_sponsorship_obj_get_promise;
+
+async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
+    console.log('*** handle_load_sponsorship_id_obj() ***');
+
+    let params = {};
+
+	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'sponsorship',
+        obj_id: sponsorship_id,
+        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
+        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
+        params: params,
+        log_lvl: 2
+        })
+    .then(function (sponsorship_obj_get_result) {
+        if (sponsorship_obj_get_result) {
+            $slct.sponsorship_obj = sponsorship_obj_get_result;
+            console.log(`sponsorship object:`, $slct.sponsorship_obj);
+        }
+
+        // Auto show the selected sponsorship ID
+        // Is this pushState needed here?
+        // Set the URL param "sponsorship_id" to the current sponsorship ID.
+        // const url = new URL(location);
+        // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
+        // history.pushState({}, '', url);
+
+        // Is this postMessage needed here?
+        // let message = {'sponsorship_id': $slct.sponsorship_id};
+        // window.parent.postMessage(message, "*");
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+
+    return ae_sponsorship_obj_get_promise;
+}
+
+
+
+</script>
+
+
+<section
+    class="container h-full mx-auto"
+    >
+
+<header>
+    <h1 class="h1">Information Goes Here</h1>
+</header>
+
+<section>More information goes here.</section>
+
+<section class="btn btn-group">
+    <button
+        class="btn variant-ghost-primary"
+        on:click={() => {
+            // $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+
+            modalStore.trigger(modal_edit__sponsorship_obj);
+        }}
+        >
+        <span class="fas fa-edit mx-1"></span>
+        Start/Edit Sponsorship
+    </button>
+</section>
+
+</section>
--- a/src/routes/sponsorships/[slug]/hold
+++ b/src/routes/sponsorships/[slug]/hold
@@ -0,0 +1,4 @@
+// export function load({ params }) {
+// 	console.log(`page data - params:`, params);
+//     return params
+// }
--- a/static/fonts/gnu-free/FreeMono.otf
+++ b/static/fonts/gnu-free/FreeMono.otf
--- a/static/fonts/gnu-free/FreeMonoBold.otf
+++ b/static/fonts/gnu-free/FreeMonoBold.otf
--- a/static/fonts/gnu-free/FreeMonoBoldOblique.otf
+++ b/static/fonts/gnu-free/FreeMonoBoldOblique.otf
--- a/static/fonts/gnu-free/FreeMonoOblique.otf
+++ b/static/fonts/gnu-free/FreeMonoOblique.otf
--- a/static/fonts/gnu-free/FreeSans.otf
+++ b/static/fonts/gnu-free/FreeSans.otf
--- a/static/fonts/gnu-free/FreeSansBold.otf
+++ b/static/fonts/gnu-free/FreeSansBold.otf
--- a/static/fonts/gnu-free/FreeSansBoldOblique.otf
+++ b/static/fonts/gnu-free/FreeSansBoldOblique.otf
--- a/static/fonts/gnu-free/FreeSansOblique.otf
+++ b/static/fonts/gnu-free/FreeSansOblique.otf
--- a/static/fonts/gnu-free/FreeSerif.otf
+++ b/static/fonts/gnu-free/FreeSerif.otf
--- a/static/fonts/gnu-free/FreeSerifBold.otf
+++ b/static/fonts/gnu-free/FreeSerifBold.otf
--- a/static/fonts/gnu-free/FreeSerifBoldItalic.otf
+++ b/static/fonts/gnu-free/FreeSerifBoldItalic.otf
--- a/static/fonts/gnu-free/FreeSerifItalic.otf
+++ b/static/fonts/gnu-free/FreeSerifItalic.otf
--- a/static/fonts/gsfonts/C059-BdIta.otf
+++ b/static/fonts/gsfonts/C059-BdIta.otf
--- a/static/fonts/gsfonts/C059-Bold.otf
+++ b/static/fonts/gsfonts/C059-Bold.otf
--- a/static/fonts/gsfonts/C059-Italic.otf
+++ b/static/fonts/gsfonts/C059-Italic.otf
--- a/static/fonts/gsfonts/C059-Roman.otf
+++ b/static/fonts/gsfonts/C059-Roman.otf
--- a/static/fonts/gsfonts/D050000L.otf
+++ b/static/fonts/gsfonts/D050000L.otf
--- a/static/fonts/gsfonts/NimbusMonoPS-Bold.otf
+++ b/static/fonts/gsfonts/NimbusMonoPS-Bold.otf
--- a/static/fonts/gsfonts/NimbusMonoPS-BoldItalic.otf
+++ b/static/fonts/gsfonts/NimbusMonoPS-BoldItalic.otf
--- a/static/fonts/gsfonts/NimbusMonoPS-Italic.otf
+++ b/static/fonts/gsfonts/NimbusMonoPS-Italic.otf
--- a/static/fonts/gsfonts/NimbusMonoPS-Regular.otf
+++ b/static/fonts/gsfonts/NimbusMonoPS-Regular.otf
--- a/static/fonts/gsfonts/NimbusRoman-Bold.otf
+++ b/static/fonts/gsfonts/NimbusRoman-Bold.otf
--- a/static/fonts/gsfonts/NimbusRoman-BoldItalic.otf
+++ b/static/fonts/gsfonts/NimbusRoman-BoldItalic.otf
--- a/static/fonts/gsfonts/NimbusRoman-Italic.otf
+++ b/static/fonts/gsfonts/NimbusRoman-Italic.otf
--- a/static/fonts/gsfonts/NimbusRoman-Regular.otf
+++ b/static/fonts/gsfonts/NimbusRoman-Regular.otf
--- a/static/fonts/gsfonts/NimbusSans-Bold.otf
+++ b/static/fonts/gsfonts/NimbusSans-Bold.otf
--- a/static/fonts/gsfonts/NimbusSans-BoldItalic.otf
+++ b/static/fonts/gsfonts/NimbusSans-BoldItalic.otf
--- a/static/fonts/gsfonts/NimbusSans-Italic.otf
+++ b/static/fonts/gsfonts/NimbusSans-Italic.otf
--- a/static/fonts/gsfonts/NimbusSans-Regular.otf
+++ b/static/fonts/gsfonts/NimbusSans-Regular.otf
--- a/static/fonts/gsfonts/NimbusSansNarrow-Bold.otf
+++ b/static/fonts/gsfonts/NimbusSansNarrow-Bold.otf
--- a/static/fonts/gsfonts/NimbusSansNarrow-BoldOblique.otf
+++ b/static/fonts/gsfonts/NimbusSansNarrow-BoldOblique.otf
--- a/static/fonts/gsfonts/NimbusSansNarrow-Oblique.otf
+++ b/static/fonts/gsfonts/NimbusSansNarrow-Oblique.otf
--- a/static/fonts/gsfonts/NimbusSansNarrow-Regular.otf
+++ b/static/fonts/gsfonts/NimbusSansNarrow-Regular.otf
--- a/static/fonts/gsfonts/P052-Bold.otf
+++ b/static/fonts/gsfonts/P052-Bold.otf
--- a/static/fonts/gsfonts/P052-BoldItalic.otf
+++ b/static/fonts/gsfonts/P052-BoldItalic.otf
--- a/static/fonts/gsfonts/P052-Italic.otf
+++ b/static/fonts/gsfonts/P052-Italic.otf
--- a/static/fonts/gsfonts/P052-Roman.otf
+++ b/static/fonts/gsfonts/P052-Roman.otf
--- a/static/fonts/gsfonts/StandardSymbolsPS.otf
+++ b/static/fonts/gsfonts/StandardSymbolsPS.otf
--- a/static/fonts/gsfonts/URWBookman-Demi.otf
+++ b/static/fonts/gsfonts/URWBookman-Demi.otf
--- a/static/fonts/gsfonts/URWBookman-DemiItalic.otf
+++ b/static/fonts/gsfonts/URWBookman-DemiItalic.otf
--- a/static/fonts/gsfonts/URWBookman-Light.otf
+++ b/static/fonts/gsfonts/URWBookman-Light.otf
--- a/static/fonts/gsfonts/URWBookman-LightItalic.otf
+++ b/static/fonts/gsfonts/URWBookman-LightItalic.otf
--- a/static/fonts/gsfonts/URWGothic-Book.otf
+++ b/static/fonts/gsfonts/URWGothic-Book.otf
--- a/static/fonts/gsfonts/URWGothic-BookOblique.otf
+++ b/static/fonts/gsfonts/URWGothic-BookOblique.otf
--- a/static/fonts/gsfonts/URWGothic-Demi.otf
+++ b/static/fonts/gsfonts/URWGothic-Demi.otf
--- a/static/fonts/gsfonts/URWGothic-DemiOblique.otf
+++ b/static/fonts/gsfonts/URWGothic-DemiOblique.otf
--- a/static/fonts/gsfonts/Z003-MediumItalic.otf
+++ b/static/fonts/gsfonts/Z003-MediumItalic.otf
--- a/static/fonts/liberation/LiberationMono-Bold.ttf
+++ b/static/fonts/liberation/LiberationMono-Bold.ttf
--- a/static/fonts/liberation/LiberationMono-BoldItalic.ttf
+++ b/static/fonts/liberation/LiberationMono-BoldItalic.ttf
--- a/static/fonts/liberation/LiberationMono-Italic.ttf
+++ b/static/fonts/liberation/LiberationMono-Italic.ttf
--- a/static/fonts/liberation/LiberationMono-Regular.ttf
+++ b/static/fonts/liberation/LiberationMono-Regular.ttf
--- a/static/fonts/liberation/LiberationSans-Bold.ttf
+++ b/static/fonts/liberation/LiberationSans-Bold.ttf
--- a/static/fonts/liberation/LiberationSans-BoldItalic.ttf
+++ b/static/fonts/liberation/LiberationSans-BoldItalic.ttf
--- a/static/fonts/liberation/LiberationSans-Italic.ttf
+++ b/static/fonts/liberation/LiberationSans-Italic.ttf
--- a/static/fonts/liberation/LiberationSans-Regular.ttf
+++ b/static/fonts/liberation/LiberationSans-Regular.ttf
--- a/static/fonts/liberation/LiberationSerif-Bold.ttf
+++ b/static/fonts/liberation/LiberationSerif-Bold.ttf
--- a/static/fonts/liberation/LiberationSerif-BoldItalic.ttf
+++ b/static/fonts/liberation/LiberationSerif-BoldItalic.ttf
--- a/static/fonts/liberation/LiberationSerif-Italic.ttf
+++ b/static/fonts/liberation/LiberationSerif-Italic.ttf
--- a/static/fonts/liberation/LiberationSerif-Regular.ttf
+++ b/static/fonts/liberation/LiberationSerif-Regular.ttf
--- a/static/fonts/noto/NotoColorEmoji.ttf
+++ b/static/fonts/noto/NotoColorEmoji.ttf
--- a/static/fonts/noto/NotoFangsongKSSRotated-Regular.ttf
+++ b/static/fonts/noto/NotoFangsongKSSRotated-Regular.ttf
--- a/static/fonts/noto/NotoFangsongKSSVertical-Regular.ttf
+++ b/static/fonts/noto/NotoFangsongKSSVertical-Regular.ttf
--- a/static/fonts/noto/NotoKufiArabic-Black.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Black.ttf
--- a/static/fonts/noto/NotoKufiArabic-Bold.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Bold.ttf
--- a/static/fonts/noto/NotoKufiArabic-Light.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Light.ttf
--- a/static/fonts/noto/NotoKufiArabic-Medium.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Medium.ttf
--- a/static/fonts/noto/NotoKufiArabic-Regular.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Regular.ttf
--- a/static/fonts/noto/NotoKufiArabic-Thin.ttf
+++ b/static/fonts/noto/NotoKufiArabic-Thin.ttf
--- a/static/fonts/noto/NotoMusic-Regular.ttf
+++ b/static/fonts/noto/NotoMusic-Regular.ttf
--- a/static/fonts/noto/NotoNaskhArabic-Bold.ttf
+++ b/static/fonts/noto/NotoNaskhArabic-Bold.ttf
--- a/static/fonts/noto/NotoNaskhArabic-Medium.ttf
+++ b/static/fonts/noto/NotoNaskhArabic-Medium.ttf
--- a/static/fonts/noto/NotoNaskhArabic-Regular.ttf
+++ b/static/fonts/noto/NotoNaskhArabic-Regular.ttf
--- a/static/fonts/noto/NotoNaskhArabicUI-Bold.ttf
+++ b/static/fonts/noto/NotoNaskhArabicUI-Bold.ttf
--- a/static/fonts/noto/NotoNaskhArabicUI-Medium.ttf
+++ b/static/fonts/noto/NotoNaskhArabicUI-Medium.ttf
--- a/static/fonts/noto/NotoNaskhArabicUI-Regular.ttf
+++ b/static/fonts/noto/NotoNaskhArabicUI-Regular.ttf
--- a/static/fonts/noto/NotoNastaliqUrdu-Bold.ttf
+++ b/static/fonts/noto/NotoNastaliqUrdu-Bold.ttf
--- a/static/fonts/noto/NotoNastaliqUrdu-Regular.ttf
+++ b/static/fonts/noto/NotoNastaliqUrdu-Regular.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Black.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Black.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Bold.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Bold.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Light.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Light.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Medium.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Medium.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Regular.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Regular.ttf
--- a/static/fonts/noto/NotoRashiHebrew-Thin.ttf
+++ b/static/fonts/noto/NotoRashiHebrew-Thin.ttf
--- a/static/fonts/noto/NotoSans-Black.ttf
+++ b/static/fonts/noto/NotoSans-Black.ttf
--- a/static/fonts/noto/NotoSans-BlackItalic.ttf
+++ b/static/fonts/noto/NotoSans-BlackItalic.ttf
--- a/static/fonts/noto/NotoSans-Bold.ttf
+++ b/static/fonts/noto/NotoSans-Bold.ttf
--- a/Show More
+++ b/Show More