Skip to content

Instantly share code, notes, and snippets.

View AprilSylph's full-sized avatar

April Sylph AprilSylph

91 followers · 0 following
View GitHub Profile
@AprilSylph
AprilSylph / design-tokens.js
Created April 24, 2025 13:47
Tumblr Design System tokens (from https://assets.tumblr.com/pop/js/modern/8030-9a9f18c5.js.map)
module.exports = {
// colors
colorNavy: 'rgba(0, 25, 53, 1)',
colorBlue: 'rgba(0, 184, 255, 1)',
colorPurple: 'rgba(124, 92, 255, 1)',
colorPink: 'rgba(255, 97, 206, 1)',
colorRed: 'rgba(255, 73, 48, 1)',
colorOrange: 'rgba(255, 138, 0, 1)',
colorYellow: 'rgba(232, 215, 58, 1)',
colorGreen: 'rgba(1, 207, 53, 1)',
@AprilSylph
AprilSylph / PKMN Gen 5 Transfer Only List.md
Last active July 20, 2024 21:45
Pokémon Generation V List of Transfer-Only Pokémon

Gen 5 Transfer-Only Pokémon

Note

Grouped by family; the final number is the minimum number of transfers needed from a Generation IV game in order to complete the National Pokédex 100% legitimately in Generation V.

Note

Mythical Pokémon are not listed here, regardless of availability.

Note

The Pokémon Dream Radar is counted as a Generation V game; Radar-exclusive Pokémon are not counted below.

@AprilSylph
AprilSylph / exposeClassKeys.js
Last active January 31, 2024 02:34
expose source names on Tumblr
tumblr.getCssMap().then(cssMap => {
const keys = Object.keys(cssMap);
const elements = document.querySelectorAll('[class]');
for (const { classList } of elements) {
for (const className of classList) {
const mappedClassName = keys.find(key => cssMap[key].includes(className));
if (mappedClassName) classList.add(`style-${mappedClassName}--${className}`);
}
}
});
@AprilSylph
AprilSylph / mediaTest.html
Created September 20, 2022 22:16
A webpage to demonstrate that `@media` `min-width` and `max-width` are both inclusive
<!DOCTYPE html>
<html>
<head>
<style>
:root {
writing-mode: horizontal-tb;
}
body {
display: flex;
@AprilSylph
AprilSylph / getCoAuthorTrailer.js
Created March 7, 2022 15:45
Build a co-author commit trailer from just a GitHub username
/**
* @param {string} username - GitHub username
* @returns {string} Co-author commit trailer, using the user's noreply.github.com address
*/
const getCoAuthorTrailer = async username => {
const response = await fetch(`https://api.github.com/users/${username}`);
const { id, login, name } = await response.json();
return `Co-authored-by: ${name || login} <${id}+${login}@users.noreply.github.com>`;
};
@AprilSylph
AprilSylph / buildTumblrAdFilters.js
Last active November 9, 2021 22:09
Build EasyList Specific Hide filters from Tumblr's CSS map
window.tumblr.getCssMap().then(cssMap => ['adTimelineObject', 'instreamAd', 'mrecContainer', 'nativeIponWebAd', 'takeoverBanner']
.flatMap(sourceName => cssMap[sourceName])
.map(className => `tumblr.com##.${className}`)
.join('\n')
).then(console.log);
@AprilSylph
AprilSylph / fullWidthBlogFrame.js
Last active July 25, 2021 22:04
Force Tumblr on-blog controls to be mobile-style
const iframe = document.querySelector('iframe[src^="https://www.tumblr.com/dashboard/iframe"]');
const modifiedSrc = new URL(iframe.src);
const { hash } = modifiedSrc;
const decodedHash = decodeURIComponent(hash);
const parsedHash = JSON.parse(decodedHash.substring(1));
Object.assign(parsedHash, { isOpticaLike: true, useThemeColors: true });
const newHash = JSON.stringify(parsedHash);
const encodedHash = encodeURIComponent(newHash);
@AprilSylph
AprilSylph / fix_npf_photosets.css
Last active May 30, 2021 16:33
Fix NPF photosets on Tumblr themes
.post-content div.npf_row,
.post div.npf_row,
body div.npf_row {
align-items: stretch;
}
.post-content div.npf_row .npf_col,
.post div.npf_row .npf_col,
body div.npf_row .npf_col {
display: flex;
@AprilSylph
AprilSylph / 00-README.md
Last active October 7, 2021 19:42 — forked from nightpool/00-README.md
NPF-to-HTML renderer

npf.js is the main bulk of the code, and it exposes three functions:

renderContent

Render content returns an object {content, ask}. It returns the ask content separately so it can be handled spearately by the consuming client. content is an HTML element, ask is itself an object containing content (an HTML element) and the other properties of the ask layout type (specifically of interest is the attribution property).

mentions

media

@AprilSylph
AprilSylph / constructISOString.js
Last active May 26, 2021 11:01
Create ISO 8601 format date strings in Javascript
/**
* @param {number} unixTime - seconds elapsed since 1970-01-01T00:00:00.000Z
* @returns {string} - ISO 8601 format date, not including milliseconds
*/
export const constructISOString = function (unixTime) {
const date = new Date(unixTime * 1000);
const fourDigitYear = date.getFullYear().toString().padStart(4, '0');
const twoDigitMonth = (date.getMonth() + 1).toString().padStart(2, '0');
const twoDigitDate = date.getDate().toString().padStart(2, '0');