jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:46:39 -04:00
Code Issues Activity

clean up type declarations

Browse Source
This commit is contained in:
Jake Jarvis
2021-06-13 08:24:27 -04:00
parent e692d07031
commit f35bd7aac2
15 changed files with 161 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/_entry.ts
View File

@ -1,6 +0,0 @@
require("./counter");
require("./projects");
require("./vendor/twemoji");
// see TS1208.
export {};

3
assets/js/index.js Normal file
View File

@ -0,0 +1,3 @@
require("./src/counter");
require("./src/projects");
require("./vendor/twemoji");

2
assets/js/counter.ts → assets/js/src/counter.js
View File

@ -9,7 +9,7 @@ if (wrapper) {
// deduce a consistent identifier for this page, no matter the URL
const canonical = document.createElement("a");
canonical.href = (document.querySelector("link[rel='canonical']") as HTMLAnchorElement).href;
canonical.href = document.querySelector("link[rel='canonical']").href;
// strip beginning and ending forward slash
const slug = canonical.pathname.slice(1, -1);

81
assets/js/src/dark-mode.js Normal file
View File

@ -0,0 +1,81 @@
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
// improve variable mangling when minifying
var win = window;
var doc = win.document;
var body = doc.body;
var classes = body.classList;
var storage = localStorage;
// check for preset `dark_mode_pref` preference in local storage
var pref_key = "dark_mode_pref";
var pref = storage.getItem(pref_key);
// change CSS via these <body> classes:
var dark = "dark";
var light = "light";
// which class is <body> set to initially?
// eslint-disable-next-line
var default_theme = "{{ .Site.Params.Theme.defaultTheme }}";
// use an element with class `dark-mode-toggle` to trigger swap when clicked
var toggle = doc.querySelector(".dark-mode-toggle");
// keep track of current state no matter how we got there
var active = default_theme === dark;
// receives a class name and switches <body> to it
var activateTheme = function (theme) {
classes.remove(dark, light);
classes.add(theme);
active = theme === dark;
};
// if user already explicitly toggled in the past, restore their preference
if (pref === dark) activateTheme(dark);
if (pref === light) activateTheme(light);
// user has never clicked the button, so go by their OS preference until/if they do so
if (!pref) {
// returns media query selector syntax
var prefers = function (theme) {
return "(prefers-color-scheme: " + theme + ")";
};
// check for OS dark/light mode preference and switch accordingly
// default to `default_theme` set above if unsupported
if (win.matchMedia(prefers(dark)).matches) activateTheme(dark);
else if (win.matchMedia(prefers(light)).matches) activateTheme(light);
else activateTheme(default_theme);
// real-time switching if supported by OS/browser
win.matchMedia(prefers(dark)).addListener(function (e) {
if (e.matches) activateTheme(dark);
});
win.matchMedia(prefers(light)).addListener(function (e) {
if (e.matches) activateTheme(light);
});
}
// don't freak out if page happens not to have a toggle
if (toggle) {
// toggle re-appears now that we know user has JS enabled
toggle.style.display = "block";
// handle toggle click
toggle.addEventListener(
"click",
function () {
// switch to the opposite theme & save preference in local storage
if (active) {
activateTheme(light);
storage.setItem(pref_key, light);
} else {
activateTheme(dark);
storage.setItem(pref_key, dark);
}
},
true
);
}

18
assets/js/projects.ts → assets/js/src/projects.js
View File

@ -7,23 +7,7 @@ if (wrapper) {
fetch("/api/projects/?top")
.then((response) => response.json())
.then((data) => {
type Repository = {
name: string;
url: string;
description: string;
primaryLanguage?: {
color: string;
name: string;
};
stargazerCount: number;
stargazerCount_pretty?: string;
forkCount: number;
forkCount_pretty?: string;
pushedAt: string;
pushedAt_relative?: string;
};
data.forEach((repo: Repository) => {
data.forEach((repo) => {
let html = `
<a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
<p class="repo-description">${repo.description}</p>`;

83
assets/js/vendor/dark-mode.js vendored
View File

@ -1,83 +0,0 @@
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
(function () {
// improve variable mangling when minifying
var win = window;
var doc = win.document;
var body = doc.body;
var classes = body.classList;
var storage = localStorage;
// check for preset `dark_mode_pref` preference in local storage
var pref_key = "dark_mode_pref";
var pref = storage.getItem(pref_key);
// change CSS via these <body> classes:
var dark = "dark";
var light = "light";
// which class is <body> set to initially?
// eslint-disable-next-line
var default_theme = "{{ .Site.Params.Theme.defaultTheme }}";
// use an element with class `dark-mode-toggle` to trigger swap when clicked
var toggle = doc.querySelector(".dark-mode-toggle");
// keep track of current state no matter how we got there
var active = default_theme === dark;
// receives a class name and switches <body> to it
var activateTheme = function (theme) {
classes.remove(dark, light);
classes.add(theme);
active = theme === dark;
};
// if user already explicitly toggled in the past, restore their preference
if (pref === dark) activateTheme(dark);
if (pref === light) activateTheme(light);
// user has never clicked the button, so go by their OS preference until/if they do so
if (!pref) {
// returns media query selector syntax
var prefers = function (theme) {
return "(prefers-color-scheme: " + theme + ")";
};
// check for OS dark/light mode preference and switch accordingly
// default to `default_theme` set above if unsupported
if (win.matchMedia(prefers(dark)).matches) activateTheme(dark);
else if (win.matchMedia(prefers(light)).matches) activateTheme(light);
else activateTheme(default_theme);
// real-time switching if supported by OS/browser
win.matchMedia(prefers(dark)).addListener(function (e) {
if (e.matches) activateTheme(dark);
});
win.matchMedia(prefers(light)).addListener(function (e) {
if (e.matches) activateTheme(light);
});
}
// don't freak out if page happens not to have a toggle
if (toggle) {
// toggle re-appears now that we know user has JS enabled
toggle.style.display = "block";
// handle toggle click
toggle.addEventListener(
"click",
function () {
// switch to the opposite theme & save preference in local storage
if (active) {
activateTheme(light);
storage.setItem(pref_key, light);
} else {
activateTheme(dark);
storage.setItem(pref_key, dark);
}
},
true
);
}
})();