Skip to content

Commit cbd80e0

Browse files
AtelyPhamAtelyPham
authored
perf: optimize page speed (#119)
* chore: setup eslint, remove unused files * ci: migrate to nextra 3, remove unused deps * chore: remove unused files * feat: remove unsed scripts, build sitemap * chore: improve the accessibility of the site
1 parent 605ceed commit cbd80e0

File tree

115 files changed

+4133
-7219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+4133
-7219
lines changed

‎.eslintrc.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
11
{
2-
"extends": "next/core-web-vitals"
2+
"extends": [
3+
"eslint:recommended",
4+
"next/core-web-vitals",
5+
"plugin:@typescript-eslint/recommended",
6+
"plugin:import/recommended"
7+
],
8+
"parser": "@typescript-eslint/parser",
9+
"plugins": ["@typescript-eslint"],
10+
"rules": {
11+
"no-unused-vars": "off",
12+
"@typescript-eslint/no-unused-vars": "error",
13+
"import/no-unresolved": [
14+
2,
15+
{
16+
"ignore": ["nextra/components", "nextra/icons"]
17+
}
18+
]
19+
}
320
}

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ out
1818
.dccache
1919
*.code-workspace
2020
.direnv
21-
._*
21+
._*
22+
tsconfig.tsbuildinfo

‎_error.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎components/Avatar.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎components/CallToActionCard.tsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
1-
import React from "react";
1+
import { cloneElement } from "react";
22

3-
const CallToActionCard = ({ icon, title, description, link }) => {
3+
type CallToActionCardProps = {
4+
icon: React.ReactElement;
5+
title: React.ReactNode;
6+
description: string;
7+
link: string;
8+
};
9+
10+
const CallToActionCard = ({
11+
icon,
12+
title,
13+
description,
14+
link,
15+
}: CallToActionCardProps) => {
416
return (
517
<a
618
href={link}
7-
className="max-w-sm min-h-44 p-2 flex items-start hover:bg-gray-100 dark:hover:bg-gray-700"
19+
className="flex items-start max-w-sm p-2 rounded-lg min-h-44 hover:bg-gray-100 dark:hover:bg-gray-700"
820
>
921
<div className="flex items-start">
1022
<div className="mr-4">
11-
{React.cloneElement(icon, { className: "size-7 mt-1.5" })}
23+
{cloneElement(icon, { className: "size-7 mt-1.5" })}
1224
</div>
1325
<div>
1426
<div className="flex items-center mb-2">
15-
<h5 className="md:text-lg lg:text-lg text-decoration-line: underline underline-offset-4 font-bold tracking-tight text-linkBlue dark:text-white">
27+
<h3 className="font-bold tracking-tight underline md:text-lg lg:text-lg text-decoration-line: underline-offset-4 text-linkBlue dark:text-white">
1628
{title}
17-
</h5>
29+
</h3>
1830
</div>
19-
<p className="text-md font-normal text-gray-900 dark:text-gray-400">
31+
<p className="font-normal text-gray-900 text-md dark:text-gray-400">
2032
{description}
2133
</p>
2234
</div>

‎components/Callout.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React, { ReactElement, ReactNode } from "react";
2+
23
import {
3-
LightBulbIcon,
4-
ExclamationIcon,
5-
ExclamationCircleIcon,
6-
InformationCircleIcon,
7-
} from "@heroicons/react/solid";
4+
HiOutlineLightBulb as LightBulbIcon,
5+
HiOutlineExclamationCircle as ExclamationIcon,
6+
HiOutlineExclamationTriangle as ExclamationTriangleIcon,
7+
} from "react-icons/hi2";
88

99
const THEMES = {
1010
info: {
1111
classes:
1212
"bg-blue-100 text-blue-800 dark:text-blue-300 dark:bg-blue-200 dark:bg-opacity-10",
13-
icon: <InformationCircleIcon className="w-5 h-5 mt-1" />,
13+
icon: <ExclamationIcon className="w-5 h-5 mt-1" />,
1414
},
1515
idea: {
1616
classes:
@@ -20,7 +20,7 @@ const THEMES = {
2020
error: {
2121
classes:
2222
"bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30",
23-
icon: <ExclamationCircleIcon className="w-5 h-5 mt-1" />,
23+
icon: <ExclamationTriangleIcon className="w-5 h-5 mt-1" />,
2424
},
2525
default: {
2626
classes:

‎components/CommonActions.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import React from "react";
1+
import { cn } from "@/lib/utils";
22
import Link from "next/link";
3-
import { BookOpenIcon, ServerIcon } from "@heroicons/react/outline";
3+
import React from "react";
44
import { FaGithub } from "react-icons/fa";
5-
import { cn } from "@/lib/utils";
5+
import {
6+
HiOutlineBookOpen as BookOpenIcon,
7+
HiOutlineServerStack as ServerIcon,
8+
} from "react-icons/hi2";
69

710
const features = [
811
{
@@ -56,16 +59,24 @@ const features = [
5659
// },
5760
];
5861

59-
const Card = ({ Icon, title, description: _description, href, action }) => (
62+
type CardProps = {
63+
Icon: React.ElementType;
64+
title: string;
65+
description: string;
66+
href: string;
67+
action: string;
68+
};
69+
70+
const Card = ({ Icon, title, href, action }: CardProps) => (
6071
<div
6172
className={cn(
6273
"border grid grid-rows-[auto_1fr_auto]",
63-
"transition-shadow duration-[0.3s] ease-[ease-in-out]",
74+
"transition-shadow duration-300 ease-in-out",
6475
"shadow-[0_4px_8px_0_rgb(0_0_0_/_8%),0_6px_20px_0_rgb(0_0_0_/_1%)]",
6576
"overflow-hidden mt-0 mb-1 mx-0 rounded-lg border-solid",
6677
"border-[#c0c0c0] dark:border-[#4b5563]",
67-
"bg-[#f5f5f5] dark:bg-white",
68-
"dark:text-black",
78+
"bg-[#f5f5f5] dark:bg-gray-950",
79+
"dark:text-white",
6980
"w-full [@media(min-width:480px)]:flex-[1_1_235px] [@media(min-width:480px)]:max-w-[calc(_50%_-_1rem_)]",
7081
)}
7182
>

‎components/DiscordButton.tsx

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,32 @@ import React from "react";
22

33
const DiscordButton: React.FC = () => {
44
return (
5-
<a href="https://discord.com/invite/cv8EfJu3Tn">
5+
<a
6+
href="https://discord.com/invite/cv8EfJu3Tn"
7+
className="flex items-center px-6 py-2 text-sm font-medium text-gray-800 bg-white border border-gray-300 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
8+
aria-label="Join Discord"
9+
>
610
<div className="flex items-center justify-center">
7-
<button className="flex items-center bg-white border border-gray-300 rounded-lg shadow-md px-6 py-2 text-sm font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
8-
<svg
9-
className="h-6 w-6 mr-0 md:mr-2"
10-
xmlns="http://www.w3.org/2000/svg"
11-
width="800px"
12-
height="800px"
13-
viewBox="0 -28.5 256 256"
14-
version="1.1"
15-
preserveAspectRatio="xMidYMid"
16-
>
17-
<g>
18-
<path
19-
d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
20-
fill="#5865F2"
21-
fillRule="nonzero"
22-
/>
23-
</g>
24-
</svg>
25-
<span className="hidden md:inline text-xs lg:text-xl">
26-
Join Discord
27-
</span>
28-
</button>
11+
<svg
12+
className="w-6 h-6 mr-0 md:mr-2"
13+
xmlns="http://www.w3.org/2000/svg"
14+
width="800px"
15+
height="800px"
16+
viewBox="0 -28.5 256 256"
17+
version="1.1"
18+
preserveAspectRatio="xMidYMid"
19+
>
20+
<g>
21+
<path
22+
d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
23+
fill="#5865F2"
24+
fillRule="nonzero"
25+
/>
26+
</g>
27+
</svg>
28+
<span className="hidden text-xs md:inline lg:text-xl">
29+
Join Discord
30+
</span>
2931
</div>
3032
</a>
3133
);

‎components/EvmToSubstrateConverter.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import React, { useState } from "react";
2-
import { blake2AsU8a, encodeAddress } from "@polkadot/util-crypto";
31
import { hexToU8a, stringToU8a, u8aConcat } from "@polkadot/util";
2+
import { blake2AsU8a, encodeAddress } from "@polkadot/util-crypto";
3+
import Link from "next/link";
4+
import { Callout } from "nextra/components";
5+
import { useState } from "react";
6+
import { BlockCopyButton } from "./ui/block-copy-button";
7+
import { Button } from "./ui/button";
48
import {
59
Card,
610
CardContent,
@@ -9,14 +13,10 @@ import {
913
CardHeader,
1014
CardTitle,
1115
} from "./ui/card";
12-
import { Button } from "./ui/button";
13-
import { BlockCopyButton } from "./ui/block-copy-button";
14-
import Link from "next/link";
15-
import { Callout } from "nextra/components";
1616

1717
const TANGLE_PREFIX = 5845;
1818

19-
const evmToTangle = (evmAddress) => {
19+
const evmToTangle = (evmAddress: string) => {
2020
const addr = hexToU8a(evmAddress);
2121
const data = stringToU8a("evm:");
2222
const res = blake2AsU8a(u8aConcat(data, addr));

‎components/ExpandableImage.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useState, useEffect, useCallback, useRef } from "react";
2-
import { FiZoomIn, FiZoomOut, FiRefreshCw, FiX } from "react-icons/fi";
1+
import Image from "next/image";
2+
import React, { useCallback, useEffect, useRef, useState } from "react";
3+
import { FiRefreshCw, FiZoomIn, FiZoomOut } from "react-icons/fi";
34

45
interface ExpandableImageProps {
56
src: string;
@@ -16,7 +17,6 @@ const ExpandableImage: React.FC<ExpandableImageProps> = ({
1617
const [scale, setScale] = useState(1);
1718
const [position, setPosition] = useState({ x: 0, y: 0 });
1819
const containerRef = useRef<HTMLDivElement>(null);
19-
const imageRef = useRef<HTMLImageElement>(null);
2020

2121
const imageSrc =
2222
src.startsWith("http") || src.startsWith("/") ? src : `/${src}`;
@@ -84,19 +84,19 @@ const ExpandableImage: React.FC<ExpandableImageProps> = ({
8484

8585
return (
8686
<>
87-
<div className="cursor-pointer hover:opacity-80 transition-opacity my-4">
88-
<img
87+
<div className="my-4 transition-opacity cursor-pointer hover:opacity-80">
88+
<Image
8989
src={imageSrc}
9090
alt={alt}
9191
width={800}
9292
height={600}
9393
onClick={handleImageClick}
94-
className="mx-auto max-w-full h-auto"
94+
className="h-auto max-w-full mx-auto"
9595
/>
9696
</div>
9797
{isExpanded && (
9898
<div
99-
className="fixed inset-0 bg-black bg-opacity-80 flex justify-center items-center z-50"
99+
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80"
100100
onClick={handleCloseModal}
101101
>
102102
<div
@@ -108,11 +108,11 @@ const ExpandableImage: React.FC<ExpandableImageProps> = ({
108108
}}
109109
onClick={(e) => e.stopPropagation()}
110110
>
111-
<img
112-
ref={imageRef}
111+
<Image
113112
src={imageSrc}
114113
alt={alt}
115-
className="w-full h-full object-contain transition-transform duration-200 ease-out"
114+
fill
115+
className="object-contain w-full h-full transition-transform duration-200 ease-out"
116116
style={{
117117
transform: `scale(${scale})`,
118118
cursor: allowZoom && scale > 1 ? "move" : "default",
@@ -121,24 +121,24 @@ const ExpandableImage: React.FC<ExpandableImageProps> = ({
121121
}}
122122
/>
123123
{allowZoom && (
124-
<div className="absolute bottom-4 right-4 flex space-x-2">
124+
<div className="absolute flex space-x-2 bottom-4 right-4">
125125
<button
126126
onClick={handleZoomIn}
127-
className="bg-white bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition-colors"
127+
className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
128128
aria-label="Zoom in"
129129
>
130130
<FiZoomIn size={24} />
131131
</button>
132132
<button
133133
onClick={handleZoomOut}
134-
className="bg-white bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition-colors"
134+
className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
135135
aria-label="Zoom out"
136136
>
137137
<FiZoomOut size={24} />
138138
</button>
139139
<button
140140
onClick={resetZoom}
141-
className="bg-white bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition-colors"
141+
className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
142142
aria-label="Reset zoom"
143143
>
144144
<FiRefreshCw size={24} />

‎components/Feature.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from "classnames";
1+
import classNames from "clsx";
22
import Link from "next/link";
33
import type { Feature } from "./LegacyFeatures";
44
import { cn } from "@/lib/utils";

‎components/Footer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ const Footer = () => {
66
<footer className="w-full pt-2">
77
<DiscordBanner />
88
<div className="w-full p-4 border-t border-gray-700 shadow bg-tangleLogoTextColor md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
9-
<span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
9+
<span className="text-sm !text-gray-300 sm:text-center">
1010
© 2024{" "}
1111
<a href="https://flowbite.com/" className="hover:underline">
1212
Tangle Foundation
1313
</a>
1414
. All Rights Reserved.
1515
</span>
16-
<ul className="flex flex-wrap items-center gap-5 mt-3 text-sm font-medium text-gray-400 dark:text-gray-400 sm:mt-0">
16+
<ul className="flex flex-wrap items-center gap-5 mt-3 text-sm font-medium !text-gray-300 sm:mt-0">
1717
<li>
1818
<a href="mailto:hello@tangle.tools" className="hover:underline">
1919
Contact

0 commit comments

Comments
 (0)