Home

August 27, 2024

2024 LexMACS Website Revamp

As the school year starts soon, I wanted to finish my 2024 refresh of the LexMACS club website.

Before and After

Use the slider below to compare the new website (right) to the old design (left).

The goal of the redesign was to put the most important contact and schedule info at the top, instead of burying that info in the paragraphs below.

jQuery

The like buttons on the News page of the old website used jQuery and js-cookie, and these did not work well with Svelte (which has its own dollar sign syntax). However, I could not simply add a <script> element, as each page or component in Svelte can only have 1 instance-level <script> element. I found the solution in this article:

<script>
  import { browser } from "$app/env";
</script>

{#if browser}
  <script src="script.js"></script>
{/if}

This allows the external script to be added without Svelte complaining and after the target content has already loaded.