feat: ⚡ UI/UX Updates and new blog post

package.json

@@ -9,7 +9,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write .",
+    "all": "npm run lint && npm run format && npm run check"
   },
   "devDependencies": {
     "@iconify/icons-logos": "^1.2.20",

postcss.config.cjs

@@ -4,6 +4,7 @@ module.exports = {
     require("cssnano")({
       preset: "default"
     }),
+    require("tailwindcss/nesting"),
     require("tailwindcss")
   ]
 };

src/hooks.client.ts

@@ -1,9 +1,11 @@
 import * as SentrySvelte from "@sentry/svelte";
+import { env } from "$env/dynamic/public";
+
 import type { HandleClientError } from "@sveltejs/kit";
 
 SentrySvelte.init({
-  dsn: import.meta.env.VITE_SENTRY_DSN,
-  environment: import.meta.env.VITE_ENVIRONMENT,
+  dsn: env.PUBLIC_SENTRY_DSN,
+  environment: env.PUBLIC_ENVIRONMENT,
   release: "2.5.15"
 });
 

src/hooks.server.ts

@@ -1,6 +1,7 @@
 import { createTRPCHandle } from "trpc-sveltekit";
 import { createContext } from "$lib/trpc/context";
 import { router } from "$lib/trpc/router";
+import { env } from "$env/dynamic/public";
 
 import { sequence } from "@sveltejs/kit/hooks";
 import * as SentryNode from "@sentry/node";
@@ -10,8 +11,8 @@ import crypto from "crypto";
 import type { Handle, HandleServerError } from "@sveltejs/kit";
 
 SentryNode.init({
-  dsn: import.meta.env.VITE_SENTRY_DSN,
-  environment: import.meta.env.VITE_ENVIRONMENT,
+  dsn: env.PUBLIC_SENTRY_DSN,
+  environment: env.PUBLIC_ENVIRONMENT,
   release: "2.5.15"
 });
 

src/lib/components/atoms/Button.svelte

@@ -18,7 +18,7 @@
   type={href ? undefined : type}
   {href}
   class={twMerge(
-    "group no-animation btn relative rounded-md border-none bg-secondary/20 normal-case text-secondary outline-none !ring-0 backdrop-blur-sm transition-[background-color] duration-150 after:hidden after:opacity-0 active:bg-neutral lg:hover:bg-neutral lg:hover:text-primary lg:focus-visible:bg-neutral lg:focus-visible:text-primary lg:focus-visible:outline-none lg:hover:dark:text-secondary lg:focus-visible:dark:text-secondary [&.load]:after:absolute [&.load]:after:bottom-0 [&.load]:after:left-0 [&.load]:after:right-0 [&.load]:after:top-[35%] [&.load]:after:mx-auto [&.load]:after:block [&.load]:after:h-4 [&.load]:after:w-4 [&.load]:after:animate-spin [&.load]:after:rounded-full [&.load]:after:border-4 [&.load]:after:border-transparent [&.load]:after:border-t-secondary [&.load]:after:opacity-100 [&.load]:after:transition-[visibility_opacity] [&.load]:after:duration-200 [&.load]:after:content-['']",
+    "group btn no-animation relative rounded-md border-none bg-secondary/20 normal-case text-secondary outline-none !ring-0 backdrop-blur-sm transition-[background-color] duration-150 after:hidden after:opacity-0 active:bg-neutral lg:hover:bg-neutral lg:hover:text-primary lg:focus-visible:bg-neutral lg:focus-visible:text-primary lg:focus-visible:outline-none lg:hover:dark:text-secondary lg:focus-visible:dark:text-secondary [&.load]:after:absolute [&.load]:after:bottom-0 [&.load]:after:left-0 [&.load]:after:right-0 [&.load]:after:top-[35%] [&.load]:after:mx-auto [&.load]:after:block [&.load]:after:h-4 [&.load]:after:w-4 [&.load]:after:animate-spin [&.load]:after:rounded-full [&.load]:after:border-4 [&.load]:after:border-transparent [&.load]:after:border-t-secondary [&.load]:after:opacity-100 [&.load]:after:transition-[visibility_opacity] [&.load]:after:duration-200 [&.load]:after:content-['']",
     classes
   )}
   {rel}

src/lib/components/molecules/BlogPost.svelte

@@ -16,7 +16,7 @@
 <div
   class="mb-4 flex h-min w-full cursor-pointer items-center justify-between rounded-md border border-secondary/20 bg-secondary/5 py-8 shadow-md ring-neutral backdrop-blur-sm transition first:mt-0 last:mb-0 focus-visible:outline-none focus-visible:ring-2 dark:bg-secondary/10 lg:py-0 lg:hover:-translate-y-0.5 lg:focus-visible:-translate-y-0.5"
   tabindex="0"
-  in:fade={{ delay: 150 * i, duration: 500, easing: quintOut }}
+  in:fade={{ delay: 100 * i, duration: 500, easing: quintOut }}
   on:click
   on:keydown
 >

src/lib/components/molecules/Paginator.svelte

@@ -7,87 +7,80 @@
 </script>
 
 <Animate>
-  <div id="paginator" transition:fade|local={{ duration: 500, easing: quintOut }}>
+  <div
+    id="paginator"
+    class="[&>.pagination-nav]:bg-secondary/5 dark:[&>.pagination-nav]:bg-secondary/10"
+    transition:fade|local={{ duration: 500, easing: quintOut }}
+  >
+    <!-- Background Colors are set here due to the dark selector in raw css not working. -->
     <PaginationNav {...$$props} on:setPage />
   </div>
 </Animate>
 
 <style lang="postcss">
   #paginator :global(.pagination-nav) {
+    @apply border-secondary/20;
+    @apply backdrop-blur-sm;
+    @apply justify-center;
+    @apply items-center;
+    @apply rounded-md;
+    @apply flex-wrap;
+    @apply max-w-fit;
     @apply shadow-md;
+    @apply border;
+    @apply flex;
     @apply mb-4;
 
-    background: rgba(var(--secondary-rgb), 0.1);
-    backdrop-filter: blur(4px);
-    justify-content: center;
-    max-width: fit-content;
-    align-items: center;
-    border-radius: 5px;
-    flex-wrap: wrap;
-    display: flex;
+    @screen lg {
+      @apply m-0;
+    }
   }
 
   #paginator :global(.option) {
-    transition: all 200ms ease-out;
-    color: var(--secondary);
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-    display: flex;
-    padding: 10px;
-  }
-
-  #paginator :global(.option svg path) {
-    fill: var(--secondary);
+    @apply justify-center;
+    @apply text-secondary;
+    @apply transition-all;
+    @apply items-center;
+    @apply select-none;
+    @apply p-[10px];
+    @apply flex;
   }
 
   #paginator :global(.option:first-child) {
-    border-radius: 3px 0 0 3px;
+    @apply rounded-tl-md;
+    @apply rounded-bl-md;
   }
 
   #paginator :global(.option:last-child) {
-    border-radius: 0 3px 3px 0;
+    @apply rounded-tr-md;
+    @apply rounded-br-md;
   }
 
   #paginator :global(.option.number),
   #paginator :global(.option.ellipsis) {
-    padding: 14px 15px;
-  }
-
-  #paginator :is([data-theme="dark"]) :global(.option:focus) {
-    background: transparent;
+    @apply p-3;
   }
 
-  #paginator :is([data-theme="dark"]) :global(.option:active) {
-    background: rgba(var(--secondary-rgb), 0.4);
+  #paginator :global(.option svg path) {
+    @apply fill-secondary;
   }
 
   #paginator :global(.option:focus) {
-    background: transparent;
+    @apply bg-transparent;
   }
 
   #paginator :global(.option:active) {
-    background: rgba(var(--primary-rgb), 0.4);
+    @apply bg-primary/40;
   }
 
   #paginator :global(.option.active) {
-    color: var(--neutral);
+    @apply text-neutral;
   }
 
-  /* LG Screen Width (Can't use tailwindcss screen() function...) */
-  @media (min-width: 992px) {
-    #paginator :global(.pagination-nav) {
-      margin: 0;
-    }
-
-    #paginator :is([data-theme="dark"]) :global(.option:hover) {
-      background: rgba(var(--secondary-rgb), 0.4);
-      cursor: pointer;
-    }
-
-    #paginator :global(.option:hover) {
-      background: rgba(var(--primary-rgb), 0.4);
-      cursor: pointer;
+  #paginator :global(.option:hover) {
+    @screen lg {
+      @apply bg-primary/40;
+      @apply cursor-pointer;
     }
   }
 </style>

src/lib/components/organisms/Navbar.svelte

@@ -44,7 +44,7 @@
       <a
         data-sveltekit-preload-data
         href="/"
-        class="btn-ghost no-animation btn flex items-center justify-center rounded-md text-xl normal-case outline-none transition-colors hover:bg-secondary/20 focus-visible:bg-secondary/20 focus-visible:outline-none hover:dark:text-secondary focus-visible:dark:text-secondary"
+        class="btn btn-ghost no-animation flex items-center justify-center rounded-md text-xl normal-case outline-none transition-colors hover:bg-secondary/20 focus-visible:bg-secondary/20 focus-visible:outline-none hover:dark:text-secondary focus-visible:dark:text-secondary"
       >
         <img
           class="mr-2.5 rounded-full shadow-lg"
@@ -109,7 +109,7 @@
         <a
           data-sveltekit-preload-data
           href="/"
-          class="btn-ghost no-animation btn flex items-center justify-center rounded-md text-xl normal-case outline-none transition-colors hover:bg-transparent active:bg-secondary/50 active:text-primary active:outline-none active:dark:text-secondary"
+          class="btn btn-ghost no-animation flex items-center justify-center rounded-md text-xl normal-case outline-none transition-colors hover:bg-transparent active:bg-secondary/50 active:text-primary active:outline-none active:dark:text-secondary"
         >
           <img
             class="mr-2.5 rounded-full shadow-lg"
@@ -125,7 +125,7 @@
         <ThemeToggle />
         <label
           id="mobileMenuToggle"
-          class="swap-rotate swap no-animation btn h-[48px] w-[48px] rounded-md border-none bg-secondary/20 text-secondary duration-150 hover:bg-secondary/20 active:bg-neutral active:text-primary active:dark:text-secondary"
+          class="swap-rotate btn swap no-animation h-[48px] w-[48px] rounded-md border-none bg-secondary/20 text-secondary duration-150 hover:bg-secondary/20 active:bg-neutral active:text-primary active:dark:text-secondary"
         >
           <input
             type="checkbox"

src/lib/server/index.ts

@@ -0,0 +1,22 @@
+import { env } from "$env/dynamic/private";
+
+export const sendEmail = async (name: string, email: string, subject: string, message: string) => {
+  const response = await fetch("https://api.emailjs.com/api/v1.0/email/send", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      service_id: env.SECRET_EMAILJS_SERVICE_ID,
+      template_id: env.SECRET_EMAILJS_TEMPLATE_ID,
+      user_id: env.SECRET_EMAILJS_PUBLIC_KEY,
+      template_params: {
+        name: name,
+        subject: subject,
+        message: message,
+        reply_email: email
+      },
+      accessToken: env.SECRET_EMAILJS_PRIVATE_KEY
+    })
+  });
+
+  return response;
+};

src/lib/trpc/routers/lastfm.ts

@@ -1,13 +1,13 @@
 import { recentTracks } from "$utils/zod/lastfm";
-import { env } from "$env/dynamic/private";
+import { env } from "$env/dynamic/public";
 import { t } from "../trpc";
 import { z } from "zod";
 
 export const fetchCurrentTrack = async () => {
   const query = new URLSearchParams({
     method: "user.getrecenttracks",
-    user: env.LAST_FM_USERNAME,
-    api_key: env.LAST_FM_API_KEY,
+    user: env.PUBLIC_FM_USERNAME,
+    api_key: env.PUBLIC_FM_API_KEY,
     format: "json",
     limit: "1",
     extended: "true"

src/lib/trpc/routers/posts.ts

@@ -1,9 +1,10 @@
 import { posts } from "$lib/utils/zod/posts";
+import { env } from "$env/dynamic/public";
 import { t } from "../trpc";
 import { z } from "zod";
 
 export const fetchPosts = async (slug: string | null) => {
-  const response = await fetch(`${import.meta.env.VITE_BASE_URL}/api/posts`)
+  const response = await fetch(`${env.PUBLIC_BASE_URL}/api/posts`)
     .then((r) => r.json())
     .then(posts.parse);
 

src/lib/utils/index.ts

@@ -56,27 +56,6 @@ export const Toast = (status: string, message: string) => {
   }
 };
 
-export const sendEmail = async (name: string, email: string, subject: string, message: string) => {
-  const response = await fetch("https://api.emailjs.com/api/v1.0/email/send", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      service_id: import.meta.env.VITE_EMAILJS_SERVICE_ID,
-      template_id: import.meta.env.VITE_EMAILJS_TEMPLATE_ID,
-      user_id: import.meta.env.VITE_EMAILJS_PUBLIC_KEY,
-      template_params: {
-        name: name,
-        subject: subject,
-        message: message,
-        reply_email: email
-      },
-      accessToken: import.meta.env.VITE_EMAILJS_PRIVATE_KEY
-    })
-  });
-
-  return response;
-};
-
 export const monthDiff = (date1: Date, date2: Date) => {
   let months;
 

src/posts/AUD181/+page.md

@@ -14,13 +14,13 @@ hidden: false
 
 ## Research Question 1
 
-**Use the Week 1 in-class activity as a basis for discussing the concept of a ‘song’ vs a ‘production’ or ‘arrangement’. Does one work without the other? Are they equally important in conveying the energy or message of a song?**
+> **Use the Week 1 in-class activity as a basis for discussing the concept of a ‘song’ vs a ‘production’ or ‘arrangement’. Does one work without the other? Are they equally important in conveying the energy or message of a song?**
 
 A song is an original piece of musical work done by either the songwriter or the composer. Compared to an arrangement which is not so much a remix but more of a rearrangement of the song hence the name an ‘arrangement’. This is where you take a pre-existing piece of work and rearrange it in a way that you like this is typically done by producers when a track or rough song is provided to them by an artist. In terms of “Does one work without the other?”, the answer is yes and no. You can just release a song but if it hasn’t gone through the work of a producer re-arranging the song it may not have the style or outcome that you’re after. When it comes to the importance of the energy or message of the song I think yes they are just equally as important, because without a song or “reference track” doing an arrangement would be very difficult and a lot of the vibes or message you're going for could be discarded. (Carlos, 2020)
 
 ## Research Question 2
 
-**Choose a DAW other than Pro Tools or Ableton and discuss some of the reasons that it may be used as an alternative. Who are some of the well-known creatives to use this DAW as their primary tool and why do they choose it?**
+> **Choose a DAW other than Pro Tools or Ableton and discuss some of the reasons that it may be used as an alternative. Who are some of the well-known creatives to use this DAW as their primary tool and why do they choose it?**
 
 Cubase! Many professional music producers use Cubase, such as; Hans Zimmer, Kirkpatrick, Ludwig Göransson, Cirkut, and Alan Silvestri. Why do they use it? For composers who want to incorporate numerous synthesizers and samples into their music, Cubase is a well-liked DAW that is mostly MIDI and plugin instrument based (also known as VSTi’s). It is also excellent at recording audio tracks. (Zamri, 2022)