Merge pull request #708 from LemmyNet/main

[pull] master from LemmyNet:main

Author: pull[bot]

package.json

@@ -67,6 +67,7 @@
     "history": "^5.3.0",
     "html-to-text": "^10.0.0",
     "i18next": "^23.14.0",
+    "idna-uts46-hx": "^6.1.7",
     "inferno": "^9.1.0",
     "inferno-create-element": "^9.1.0",
     "inferno-helmet": "^5.2.1",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ import { GetSiteResponse } from "lemmy-js-client";
 import { docsUrl, joinLemmyUrl, repoUrl } from "@utils/config";
 import { I18NextService } from "../../services";
 import { VERSION } from "../../version";
+import { hostname } from "@utils/helpers";
 
 interface FooterProps {
   site?: GetSiteResponse;
@@ -54,7 +55,7 @@ export class Footer extends Component<FooterProps, never> {
             </li>
             <li className="nav-item">
               <a className="nav-link" href={joinLemmyUrl}>
-                {new URL(joinLemmyUrl).hostname}
+                {hostname(joinLemmyUrl)}
               </a>
             </li>
           </ul>

src/shared/components/app/footer.tsx

@@ -3,6 +3,7 @@ import { Post } from "lemmy-js-client";
 import sanitize from "sanitize-html";
 import { relTags } from "@utils/config";
 import { Icon } from "../common/icon";
+import { hostname } from "@utils/helpers";
 
 interface MetadataCardProps {
   post: Post;
@@ -31,7 +32,7 @@ export class MetadataCard extends Component<MetadataCardProps> {
                         href={post.url}
                         rel={relTags}
                       >
-                        {new URL(post.url).hostname}
+                        {hostname(post.url)}
                         <Icon icon="external-link" classes="ms-1" />
                       </a>
                     </span>

src/shared/components/post/metadata-card.tsx

@@ -2,6 +2,7 @@ import { RouteComponentProps } from "inferno-router";
 import { RequestState } from "@services/HttpService";
 import { PostView } from "lemmy-js-client";
 import { Action } from "history";
+import { toUnicode } from "idna-uts46-hx";
 
 // Intended to allow reloading all the data of the current page by clicking the
 // navigation link of the current page.
@@ -133,7 +134,9 @@ export function groupBy<T>(
 
 export function hostname(url: string): string {
   const cUrl = new URL(url);
-  return cUrl.port ? `${cUrl.hostname}:${cUrl.port}` : `${cUrl.hostname}`;
+  // Necessary to convert international hostnames to their unicode
+  const hostname: string = toUnicode(cUrl.hostname);
+  return cUrl.port ? `${hostname}:${cUrl.port}` : `${hostname}`;
 }
 
 export function hsl(num: number) {