2022: Super Window

💡Idea#

For the next version of my domain, I wanted a site where I could easily add and edit content, a low-barrier way for me to provide updates on my work. After digging around, I came across Super and realized it was exactly what I needed.

👩🏾‍💻 Development#

Overview#

The site is hosted on Super, pulling content from a notion site. The day/night-mode theme switcher, and the “live” window on the homepage use Svelte. This was my first time developing with Svelte, and I found it perfect for injecting a small javascript component onto the page. My custom theme styles and javascript are deployed and hosted on Vercel (Super supports custom code).

Live Window#

For this iteration of the Live Window, I switched to using the Open Weather API, in order to get the users location I’m basing it off of their ip address, which I fetch using IP Registry.

export async function fetchWeather($store) {
  // Partial version of this function, I've removed my caching logic
  await fetchLocation($store);

  const { lat, lng } = $store.location;
  const url = `https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${lat}&lon=${lng}&appid=${OPEN_WEATHER_KEY}`;
  const { data } = await axios.get(url);
  $store.weather.current = {
    ...data.weather[0],
    temp: data.main.temp,
  };
  $store.weather.sunrise = data.sys.sunrise * 1000; // convert to milliseconds
  $store.weather.sunset = data.sys.sunset * 1000; // ^^
  $store.weather.lastFetched = Date.now();
  store.set($store);
  isDataFetched.set(true);
}

Deprecated Theme Switcher (Day/Night Mode)#

For the first time, I’ve added a day/night mode switcher to my site. Finally in the future! It’s not finalized yet (I still don’t account for user preferences) but otherwise it’s fully functional.

You can checkout the code and fork this theme switcher on codpen! https://codepen.io/thalida/pen/XWEVVaj

This theme switcher is a fork of https://codepen.io/sandeshsapkota/pen/xxVmMpe.

🎨 Design#

Inspiration#

tsh by Thalida Noel

thalida 2020 v2 by Thalida Noel

thalida 2020 by Thalida Noel

Paper Sketches#