clean up type declarations

.eslintrc.json

@@ -10,7 +10,7 @@
   "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2018,
-    "sourceType": "script",
+    "sourceType": "module",
     "babelOptions": {
       "configFile": "./babel.config.json"
     }

api/hits.ts

@@ -1,4 +1,4 @@
-"use strict";
+/// <reference types="./types/hits" />
 
 import { VercelRequest, VercelResponse } from "@vercel/node";
 import { Client, query as q } from "faunadb";
@@ -7,23 +7,6 @@ import pluralize from "pluralize";
 import rssParser from "rss-parser";
 
 const baseUrl = "https://jarv.is/";
-type PageStats = {
-  title?: string;
-  url?: string;
-  date?: string;
-  slug: string;
-  hits: number;
-  pretty_hits: string;
-  pretty_unit: string;
-};
-type OverallStats = {
-  total: {
-    hits: number;
-    pretty_hits?: string;
-    pretty_unit?: string;
-  };
-  pages: PageStats[];
-};
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default async (req: VercelRequest, res: VercelResponse) => {
@@ -49,8 +32,6 @@ export default async (req: VercelRequest, res: VercelResponse) => {
 
       // let Vercel edge and browser cache results for 15 mins
       res.setHeader("Cache-Control", "public, max-age=900, s-maxage=900, stale-while-revalidate");
-      res.setHeader("Access-Control-Allow-Methods", "GET");
-      res.setHeader("Access-Control-Allow-Origin", "*");
     } else {
       // increment this page's hits
       result = await incrementPageHits(slug, client);

api/projects.ts

@@ -1,4 +1,4 @@
-"use strict";
+/// <reference types="./types/projects" />
 
 import { VercelRequest, VercelResponse } from "@vercel/node";
 import { escape } from "html-escaper";
@@ -9,21 +9,6 @@ import { gql } from "graphql-tag";
 
 const username = "jakejarvis";
 const endpoint = "https://api.github.com/graphql";
-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;
-};
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default async (req: VercelRequest, res: VercelResponse) => {

api/tracks.ts

@@ -1,4 +1,4 @@
-"use strict";
+/// <reference types="./types/tracks" />
 
 // Fetches my Spotify most-played tracks or currently playing track.
 // Heavily inspired by @leerob: https://leerob.io/snippets/spotify
@@ -17,31 +17,6 @@ const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-pla
 // https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks
 const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks?time_range=long_term&limit=10`;
 
-type TrackSchema = {
-  name: string;
-  artists: Array<{
-    name: string;
-  }>;
-  album: {
-    name: string;
-    images: Array<{
-      url: string;
-    }>;
-  };
-  imageUrl?: string;
-  external_urls: {
-    spotify: string;
-  };
-};
-type Track = {
-  isPlaying: boolean;
-  artist?: string;
-  title?: string;
-  album?: string;
-  imageUrl?: string;
-  songUrl?: string;
-};
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default async (req: VercelRequest, res: VercelResponse) => {
   try {
@@ -106,11 +81,6 @@ const getNowPlaying = async (): Promise<Track> => {
     },
   });
 
-  type Activity = {
-    is_playing: boolean;
-    item?: TrackSchema;
-  };
-
   if (response.status === 204 || response.status > 400) {
     return { isPlaying: false };
   }

api/types/hits.d.ts

@@ -0,0 +1,18 @@
+type PageStats = {
+  title?: string;
+  url?: string;
+  date?: string;
+  slug: string;
+  hits: number;
+  pretty_hits: string;
+  pretty_unit: string;
+};
+
+type OverallStats = {
+  total: {
+    hits: number;
+    pretty_hits?: string;
+    pretty_unit?: string;
+  };
+  pages: PageStats[];
+};

api/types/projects.d.ts

@@ -0,0 +1,15 @@
+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;
+};

api/types/tracks.d.ts

@@ -0,0 +1,30 @@
+type TrackSchema = {
+  name: string;
+  artists: Array<{
+    name: string;
+  }>;
+  album: {
+    name: string;
+    images: Array<{
+      url: string;
+    }>;
+  };
+  imageUrl?: string;
+  external_urls: {
+    spotify: string;
+  };
+};
+
+type Track = {
+  isPlaying: boolean;
+  artist?: string;
+  title?: string;
+  album?: string;
+  imageUrl?: string;
+  songUrl?: string;
+};
+
+type Activity = {
+  is_playing: boolean;
+  item?: TrackSchema;
+};

assets/js/_entry.ts

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

assets/js/index.js

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

assets/js/src/counter.js

@@ -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);

assets/js/src/dark-mode.js

@@ -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
+  );
+}

assets/js/src/projects.js

@@ -7,23 +7,7 @@ if (wrapper) {
   fetch("/api/projects/?top")
     .then((response) => response.json())
     .then((data) => {
-      type Repository = {
+      data.forEach((repo) => {
-        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) => {
         let html = `
 <a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
 <p class="repo-description">${repo.description}</p>`;

assets/js/vendor/dark-mode.js

@@ -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
-    );
-  }
-})();

layouts/partials/scripts/_bundle.html

@@ -1,4 +1,4 @@
-{{ $js := resources.Get "js/_entry.ts" | js.Build (dict "targetPath" "/js/app.js") | resources.Babel (dict "config" "babel.config.json" "noComments" true) }}
+{{ $js := resources.Get "js/index.js" | js.Build (dict "targetPath" "/js/app.js") | resources.Babel (dict "config" "babel.config.json" "noComments" true) }}
 
 {{- .Scratch.Set "bundlePermalink" $js.Permalink -}}
 

tsconfig.json

@@ -8,12 +8,16 @@
     ],
     "module": "commonjs",
     "moduleResolution": "node",
-    "strict": true,
+    "esModuleInterop": true,
-    "allowJs": true,
     "isolatedModules": true,
+    "strict": true,
     "noEmit": true,
     "noImplicitReturns": true,
-    "esModuleInterop": true
+    "allowJs": true,
+    "typeRoots": [
+      "./types",
+      "./node_modules/@types"
+    ]
   },
   "exclude": [
     "node_modules"