Super Window

Super Window

Super Window

image

A Notion-backed site

active:

Jan 2022 → Now

www:

 Resources

Styleguide
Components

💡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);
}

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.

image

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

Paper Sketches

image
image
image
image
image
image
image

thalida.com timeline

← Previous

Present & Future

You’ve reached the currently live version of thalida.com!

What’s next? I dunno yet.