Externalised file loading in config.js

medialab · Jan 20, 2025 · c64f67b · c64f67b
1 parent 612c588
commit c64f67b
Show file tree

Hide file tree

Showing 12 changed files with 385 additions and 91 deletions.
diff --git a/.svelte-kit/generated/server/internal.js b/.svelte-kit/generated/server/internal.js
@@ -22,7 +22,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    " + head + "\n\n    <noscript>\n      <style>\n        /**\n          * Reinstate scrolling for non-JS clients\n          */\n        .simplebar-content-wrapper {\n          scrollbar-width: auto;\n          -ms-overflow-style: auto;\n        }\n\n        .simplebar-content-wrapper::-webkit-scrollbar,\n        .simplebar-hide-scrollbar::-webkit-scrollbar {\n          display: initial;\n          width: initial;\n          height: initial;\n        }\n      </style>\n    </noscript>\n  </head>\n  <body data-sveltekit-preload-data=\"hover\">\n    <div class=\"major_div\" style=\"display: contents\">" + body + "</div>\n  </body>\n</html>\n\n<style></style>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "cg81kj"
+	version_hash: "aebfub"
 };
 
 export async function get_hooks() {

diff --git a/.svelte-kit/tsconfig.json b/.svelte-kit/tsconfig.json
@@ -19,6 +19,12 @@
 			"$database/*": [
 				"../src/lib/database/*"
 			],
+			"$routes": [
+				"../src/routes"
+			],
+			"$routes/*": [
+				"../src/routes/*"
+			],
 			"$lib": [
 				"../src/lib"
 			],

diff --git a/src/lib/components/buttons/position_marker_button.svelte b/src/lib/components/buttons/position_marker_button.svelte
@@ -44,6 +44,7 @@
         display: inline-flex;
         position: absolute;
         gap: var(--spacing-S);
+        z-index: 6000;
     }
 
     @media only screen and (max-width: 768px) {

diff --git a/src/lib/components/buttons/reset_button.svelte b/src/lib/components/buttons/reset_button.svelte
@@ -18,6 +18,7 @@
         bottom: 0;
         border-right: 0px;
         border-bottom: 0px;
+        z-index: 6000;
     }
 
     :global(.reset_button:active) {

diff --git a/src/lib/components/buttons/time_button.svelte b/src/lib/components/buttons/time_button.svelte
@@ -18,6 +18,7 @@
         border-radius: 0px 0px 0px 5px;
         border-right: 0px;
         border-top: 0px;
+        z-index: 6000;
     }
 
     @media only screen and (max-width: 768px) {

diff --git a/src/lib/components/cards/capitols.svelte b/src/lib/components/cards/capitols.svelte
@@ -63,7 +63,7 @@ let isProjCover = data.isProjCover
                 {/if}
 
                 <!-- Programmatic creation of sections -->
-                {#each data.Content as section, index}
+                {#each data.Content ?? [] as section, index}
 
                 <!-- We assing a programmatic name for the each block sections -->
                 <div class="section_container" data-sveltekit-preload-data data-section={`Ex ${index+1}`}> 
@@ -221,6 +221,7 @@ let isProjCover = data.isProjCover
         width: max-content;
         word-wrap: nowrap;
         user-select: none;
+        pointer-events: none;
     }
 
     .card_scrollable_container {

diff --git a/src/lib/database/config.js b/src/lib/database/config.js
@@ -0,0 +1,73 @@
+// config.js
+// Importing assets from the media folder using Vite’s URL resolution
+import image_1 from "$media/photos/img1.jpg?enhanced";
+import image_2 from "$media/photos/img2.jpg?enhanced";
+import image_3 from "$media/photos/img3.jpg?enhanced";
+import image_4 from "$media/photos/img4.jpg?enhanced";
+import image_5 from "$media/photos/img5.jpg?enhanced";
+import image_6 from "$media/photos/img6.jpg?enhanced";
+import image_7 from "$media/photos/img7.jpg?enhanced";
+import image_8 from "$media/photos/img8.jpg?enhanced";
+import image_9 from "$media/photos/img9.jpg?enhanced";
+import image_10 from "$media/photos/img10.jpg?enhanced";
+import image_11 from "$media/photos/img11.jpg?enhanced";
+import image_12 from "$media/photos/img12.jpg?enhanced";
+import image_13 from "$media/photos/img13.jpg?enhanced";
+import image_14 from "$media/photos/img14.jpg?enhanced";
+import image_15 from "$media/photos/img15.jpg?enhanced";
+import image_16 from "$media/photos/img16.jpg?enhanced";
+import image_17 from "$media/photos/img17.jpg?enhanced";
+import image_18 from "$media/photos/img18.jpg?enhanced";
+import image_19 from "$media/photos/img19.jpg?enhanced";
+import image_20 from "$media/photos/img20.jpg?enhanced";
+import image_21 from "$media/photos/img21.jpg?enhanced";
+
+import cover_1 from "$media/capitols_cover/qualifying.jpg?enhanced";
+
+import circle_logo from "$media/CIRCLE.svg";
+import enhanced_logoImage from "$media/enhanced_logoImage.png?enhanced";
+import condensed_logo from "$media/logo_condensed.svg";
+import logoImage from "$media/logo_complete.svg";
+
+// Grouping the assets into objects for easy access
+export const photos = {
+  image_1,
+  image_2,
+  image_3,
+  image_4,
+  image_5,
+  image_6,
+  image_7,
+  image_8,
+  image_9,
+  image_10,
+  image_11,
+  image_12,
+  image_13,
+  image_14,
+  image_15,
+  image_16,
+  image_17,
+  image_18,
+  image_19,
+  image_20,
+  image_21,
+};
+
+export const capitolsCover = {
+  cover_1,
+};
+
+export const general = {
+  circle_logo,
+  enhanced_logoImage,
+  condensed_logo,
+  logoImage,
+};
+
+// Optionally, export everything as a default object if you prefer:
+export default {
+  photos,
+  capitolsCover,
+  general,
+};