Convert all the punycodes

Surprising that this is still not built into browsers
This commit is contained in:
Lim Chee Aun 2024-04-02 09:03:13 +08:00
parent f2f203c9d8
commit aa664e15f6
8 changed files with 36 additions and 21 deletions

9
package-lock.json generated
View file

@ -30,6 +30,7 @@
"p-retry": "~6.2.0",
"p-throttle": "~6.1.0",
"preact": "~10.20.1",
"punycode": "~2.3.1",
"react-hotkeys-hook": "~4.5.0",
"react-intersection-observer": "~9.8.1",
"react-quick-pinch-zoom": "~5.1.0",
@ -7154,11 +7155,9 @@
"integrity": "sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw=="
},
"node_modules/punycode": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
"dev": true,
"license": "MIT",
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
"engines": {
"node": ">=6"
}

View file

@ -32,6 +32,7 @@
"p-retry": "~6.2.0",
"p-throttle": "~6.1.0",
"preact": "~10.20.1",
"punycode": "~2.3.1",
"react-hotkeys-hook": "~4.5.0",
"react-intersection-observer": "~9.8.1",
"react-quick-pinch-zoom": "~5.1.0",

View file

@ -9,6 +9,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { api } from '../utils/api';
import enhanceContent from '../utils/enhance-content';
@ -228,7 +229,7 @@ function AccountInfo({
const accountInstance = useMemo(() => {
if (!url) return null;
const domain = new URL(url).hostname;
const domain = punycode.toUnicode(new URL(url).hostname);
return domain;
}, [url]);
@ -1598,7 +1599,7 @@ function niceAccountURL(url) {
const path = pathname.replace(/\/$/, '').replace(/^\//, '');
return (
<>
<span class="more-insignificant">{host}/</span>
<span class="more-insignificant">{punycode.toUnicode(host)}/</span>
<wbr />
<span>{path}</span>
</>

View file

@ -20,6 +20,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { useHotkeys } from 'react-hotkeys-hook';
import { useLongPress } from 'use-long-press';
import { useSnapshot } from 'valtio';
@ -2231,9 +2232,9 @@ function Card({ card, selfReferential, instance }) {
);
if (hasText && (image || (type === 'photo' && blurhash))) {
const domain = new URL(url).hostname
.replace(/^www\./, '')
.replace(/\/$/, '');
const domain = punycode.toUnicode(
new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
);
let blurhashImage;
const rgbAverageColor =
image && blurhash ? getBlurHashAverageColor(blurhash) : null;
@ -2349,7 +2350,9 @@ function Card({ card, selfReferential, instance }) {
// );
}
if (hasText && !image) {
const domain = new URL(url).hostname.replace(/^www\./, '');
const domain = punycode.toUnicode(
new URL(url).hostname.replace(/^www\./, ''),
);
return (
<a
href={cardStatusURL || url}
@ -2881,7 +2884,7 @@ function nicePostURL(url) {
const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
return (
<>
{host}
{punycode.toUnicode(host)}
{username ? (
<>
/{username}

View file

@ -6,6 +6,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { useParams, useSearchParams } from 'react-router-dom';
import { useSnapshot } from 'valtio';
@ -516,7 +517,13 @@ function AccountStatuses() {
>
<Icon icon="transfer" />{' '}
<small class="menu-double-lines">
Switch to account's instance (<b>{accountInstance}</b>)
Switch to account's instance{' '}
{accountInstance ? (
<>
{' '}
(<b>{punycode.toUnicode(accountInstance)}</b>)
</>
) : null}
</small>
</MenuItem>
{!sameCurrentInstance && (

View file

@ -13,6 +13,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { useHotkeys } from 'react-hotkeys-hook';
import { useSearchParams } from 'react-router-dom';
import { uid } from 'uid/single';
@ -1099,9 +1100,11 @@ function Catchup() {
height,
publishedAt,
} = card;
const domain = new URL(url).hostname
.replace(/^www\./, '')
.replace(/\/$/, '');
const domain = punycode.toUnicode(
new URL(url).hostname
.replace(/^www\./, '')
.replace(/\/$/, ''),
);
let accentColor;
if (blurhash) {
const averageColor = getBlurHashAverageColor(blurhash);

View file

@ -12,10 +12,10 @@ import {
useRef,
useState,
} from 'preact/hooks';
import punycode from 'punycode';
import { useHotkeys } from 'react-hotkeys-hook';
import { InView } from 'react-intersection-observer';
import { matchPath, useSearchParams } from 'react-router-dom';
import { useDebouncedCallback } from 'use-debounce';
import { useSnapshot } from 'valtio';
import Avatar from '../components/avatar';
@ -1208,7 +1208,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
{postInstance ? (
<>
{' '}
(<b>{postInstance}</b>)
(<b>{punycode.toUnicode(postInstance)}</b>)
</>
) : (
''

View file

@ -3,6 +3,7 @@ import '../components/links-bar.css';
import { MenuItem } from '@szhsin/react-menu';
import { getBlurHashAverageColor } from 'fast-blurhash';
import { useMemo, useRef, useState } from 'preact/hooks';
import punycode from 'punycode';
import { useNavigate, useParams } from 'react-router-dom';
import { useSnapshot } from 'valtio';
@ -161,9 +162,9 @@ function Trending({ columnMode, ...props }) {
url,
width,
} = link;
const domain = new URL(url).hostname
.replace(/^www\./, '')
.replace(/\/$/, '');
const domain = punycode.toUnicode(
new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
);
let accentColor;
if (blurhash) {
const averageColor = getBlurHashAverageColor(blurhash);