thomaswangarchive

/*
ar-SA Arabic (Saudi Arabia)
bn-BD Bangla (Bangladesh)
bn-IN Bangla (India)
cs-CZ Czech (Czech Republic)
da-DK Danish (Denmark)
de-AT Austrian German
de-CH "Swiss" German
de-DE Standard German (as spoken in Germany)
el-GR Modern Greek

thomaswangarchive

// tools/convertNextJsExportIntoBrowserExtension.ts

import { resolve } from 'path'
import { rename, rm, readdir, writeFile, readFile } from 'fs/promises'

const nextJsOutDirectory = 'out'
const extensionDirectory = 'extension'

const manifestAddon = {
  manifest_version: 3,

thomaswangarchive

// https://rsms.me/inter/dynmetrics

const DynamicText = ({ className, children, fontSize = 15, tag = "span" }) => {
  const pxToRem = (px) => {
    return Number(px * 0.0625)
  }

  const dynamicLeading = (z) => {
    const l = 1.4
    return Number(pxToRem(Math.round(z * l)))

thomaswangarchive

.button {
  appearance: none;
  border: none;
  font-size: 13px;
  line-height: 1;
  height: 25px;
  border-radius: 99999px;
  padding-left: 10px;
  padding-right: 10px;
}

thomaswangarchive

/*
- Combining Josh's "Modern CSS Reset" with Taiwind's Preflight:
  - https://www.joshwcomeau.com/css/custom-css-reset/
  - https://tailwindcss.com/docs/preflight
*/

* {
  margin: 0;
}

thomaswangarchive

/* 
- From: https://courses.joshwcomeau.com/css-for-js/09-little-big-details/06-mobile-ux
*/

.pushable {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.click-target-helper::after {

thomaswangarchive

Command:

curl https://git.io/ -i -F "url=https://github.com/YOUR_GITHUB_URL" -F "code=YOUR_CUSTOM_NAME"

URLs that can be created is from:

• https://github.com/*
• https://*.github.com
• https://*.github.com/*
• https://*.github.io

thomaswangarchive

import React from "react";
import styled from "styled-components";

const Stack = styled.div`
  --space: ${props => props.space || "1.5rem"};
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  * {