Skip to content

Commit 4072b7d

Browse files
glasgowm148glasgowm148
committed
optimisations
js optimisations, next-gen images, moved and linked fonts, fixed bugs, alignment issues
1 parent b85c520 commit 4072b7d

Some content is hidden

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

46 files changed

+14855
-34025
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"next/core-web-vitals",
55
"eslint:recommended",
66
"plugin:prettier/recommended",
7-
"prettier"
7+
"prettier",
8+
"plugin:storybook/recommended"
89
],
910
"parserOptions": {
1011
"project": "./tsconfig.json",

‎.storybook/main.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
module.exports = {
22
typescript: { reactDocgen: false },
3-
"stories": [
3+
stories: [
44
"../stories/**/*.stories.mdx",
55
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
66
],
7-
"addons": [
7+
addons: [
88
"@storybook/addon-links",
9-
"@storybook/addon-essentials",
10-
'@storybook/addon-postcss',
11-
'@storybook/addon-viewport',
12-
'storybook-tailwind-dark-mode',
13-
'storybook-react-intl',
14-
'storybook-addon-sass-postcss',
15-
'storybook-addon-next-router'
9+
"@storybook/addon-docs",
10+
"@storybook/addon-controls",
11+
"@storybook/addon-actions",
12+
"@storybook/addon-styling-webpack",
13+
"@storybook/addon-themes",
14+
"storybook-tailwind-dark-mode", // check compatibility
15+
"storybook-react-intl", // check compatibility
16+
"storybook-addon-next-router"
1617
],
17-
"framework": "@storybook/react",
18-
"core": {
19-
"builder": "webpack5"
18+
framework: {
19+
name: "@storybook/react",
20+
options: {}
21+
},
22+
core: {
23+
builder: "webpack5"
2024
}
21-
}
25+
};

‎components/Button.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import Link from 'next/link';
2-
import { getIconComponentByName } from '../utils/icons-map';
2+
import ArrowRightBlack from './icons/ArrowRightBlack';
3+
import ArrowRightWhite from './icons/ArrowRightWhite';
4+
import ArrowRightOrange from './icons/ArrowRightOrange';
35
import React from 'react';
46
import { useTheme } from 'next-themes';
57

@@ -15,6 +17,7 @@ type Props = {
1517
customClass?: string;
1618
animation?: boolean;
1719
ariaLabel?: string; // Add ariaLabel to Props
20+
prefetch?: boolean; // control Next.js Link prefetch behavior
1821
};
1922

2023
export default function Button({
@@ -29,6 +32,7 @@ export default function Button({
2932
customClass = '',
3033
animation,
3134
ariaLabel, // Destructure ariaLabel
35+
prefetch = false,
3236
}: Props) {
3337
const { resolvedTheme } = useTheme();
3438
let textClasses = '';
@@ -76,15 +80,24 @@ export default function Button({
7680
effectiveIconColor = 'white';
7781
}
7882

79-
const iconName = 'ArrowRight' + effectiveIconColor.charAt(0).toUpperCase() + effectiveIconColor.slice(1);
83+
let ArrowIcon: any = ArrowRightBlack;
84+
if (effectiveIconColor.toLowerCase() === 'white') {
85+
ArrowIcon = ArrowRightWhite;
86+
} else if (effectiveIconColor.toLowerCase() === 'orange') {
87+
ArrowIcon = ArrowRightOrange;
88+
} else {
89+
ArrowIcon = ArrowRightBlack;
90+
}
8091

8192
const content = (
8293
<>
8394
<span>{text}</span>
8495
{icon === 'none' ? (
8596
``
8697
) : (
87-
<span className="w-4 h-4 ml-2">{getIconComponentByName(iconName)}</span>
98+
<span className="w-4 h-4 ml-2">
99+
<ArrowIcon />
100+
</span>
88101
)}
89102
</>
90103
);
@@ -96,6 +109,7 @@ export default function Button({
96109
className={className}
97110
target={target}
98111
aria-label={ariaLabel || (typeof text === 'string' ? text : undefined)}
112+
prefetch={prefetch}
99113
>
100114
{content}
101115
</Link>

‎components/Footer.tsx‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,17 @@ import Link from 'next/link';
22
import { useRouter } from 'next/router';
33
import { useEffect, useState } from 'react';
44
import { FormattedMessage } from 'react-intl';
5-
import { getIconComponentByName } from '../utils/icons-map';
6-
import { LogoWithText } from './icons';
5+
import LogoWithText from './icons/LogoWithText';
6+
import Sigmaverse from './icons/Sigmaverse';
7+
import ErgoWiki from './icons/ErgoWiki';
8+
import Github from './icons/Github';
9+
import X from './icons/X';
10+
import Youtube from './icons/Youtube';
11+
import Telegram from './icons/Telegram';
12+
import Discord from './icons/Discord';
13+
import Reddit from './icons/Reddit';
14+
import Discourse from './icons/Discourse';
15+
import Coingecko from './icons/Coingecko';
716

817
export default function Footer() {
918
const [postsData, setPostsData] = useState([]);
@@ -64,12 +73,12 @@ export default function Footer() {
6473
rel="noreferrer"
6574
aria-label="Sigmaverse website"
6675
>
67-
{getIconComponentByName('Sigmaverse')}
76+
<Sigmaverse />
6877
</a>
6978
</div>
7079
<div className="box">
71-
<Link href="/ecosystem/#Wiki" aria-label="Ergo Wiki">
72-
{getIconComponentByName('ErgoWiki')}
80+
<Link href="/ecosystem/#Wiki" aria-label="Ergo Wiki" prefetch={false}>
81+
<ErgoWiki />
7382
</Link>
7483
</div>
7584
<div className="box">
@@ -79,7 +88,7 @@ export default function Footer() {
7988
rel="noreferrer"
8089
aria-label="Ergo Platform GitHub"
8190
>
82-
{getIconComponentByName('Github')}
91+
<Github />
8392
</a>
8493
</div>
8594
<div className="box">
@@ -89,7 +98,7 @@ export default function Footer() {
8998
rel="noreferrer"
9099
aria-label="Ergo Platform X (formerly Twitter)"
91100
>
92-
{getIconComponentByName('X')}
101+
<X />
93102
</a>
94103
</div>
95104
<div className="box">
@@ -99,7 +108,7 @@ export default function Footer() {
99108
rel="noreferrer"
100109
aria-label="Ergo Platform YouTube"
101110
>
102-
{getIconComponentByName('Youtube')}
111+
<Youtube />
103112
</a>
104113
</div>
105114
<div className="box">
@@ -109,7 +118,7 @@ export default function Footer() {
109118
rel="noreferrer"
110119
aria-label="Ergo Platform Telegram"
111120
>
112-
{getIconComponentByName('Telegram')}
121+
<Telegram />
113122
</a>
114123
</div>
115124
<div className="box">
@@ -119,7 +128,7 @@ export default function Footer() {
119128
rel="noreferrer"
120129
aria-label="Ergo Platform Discord"
121130
>
122-
{getIconComponentByName('Discord')}
131+
<Discord />
123132
</a>
124133
</div>
125134
<div className="box">
@@ -129,7 +138,7 @@ export default function Footer() {
129138
rel="noreferrer"
130139
aria-label="Ergo Platform Reddit"
131140
>
132-
{getIconComponentByName('Reddit')}
141+
<Reddit />
133142
</a>
134143
</div>
135144
<div className="box">
@@ -139,7 +148,7 @@ export default function Footer() {
139148
rel="noreferrer"
140149
aria-label="Ergo Forum"
141150
>
142-
{getIconComponentByName('Discourse')}
151+
<Discourse />
143152
</a>
144153
</div>
145154
<div className="box">
@@ -149,7 +158,7 @@ export default function Footer() {
149158
rel="noreferrer"
150159
aria-label="Ergo on CoinGecko"
151160
>
152-
{getIconComponentByName('Coingecko')}
161+
<Coingecko />
153162
</a>
154163
</div>
155164
</div>
@@ -248,14 +257,14 @@ export default function Footer() {
248257
</ul>
249258
</div>
250259
<div>
251-
<Link href="/discover">
260+
<Link href="/discover" prefetch={false}>
252261
<h3 className="font-button text-black dark:text-white my-4 cursor-pointer">
253262
<FormattedMessage defaultMessage="DISCOVER" id="footer.discover.title" />
254263
</h3>
255264
</Link>
256265
<ul className="hidden md:block">
257266
<li className="mb-4">
258-
<Link href="/discover/#DiscoverERG">
267+
<Link href="/discover/#DiscoverERG" prefetch={false}>
259268
<span className="text-black dark:text-gray-300 cursor-pointer">
260269
<FormattedMessage
261270
defaultMessage="Discover ERG"
@@ -265,28 +274,28 @@ export default function Footer() {
265274
</Link>
266275
</li>
267276
<li className="mb-4">
268-
<Link href="/discover/#GrantsAndBounties">
277+
<Link href="/discover/#GrantsAndBounties" prefetch={false}>
269278
<span className="text-black dark:text-gray-300 cursor-pointer">
270279
<FormattedMessage defaultMessage="Grants & Bounties" id="footer.discover.2" />
271280
</span>
272281
</Link>
273282
</li>
274283
<li className="mb-4">
275-
<Link href="/discover/#FAQ">
284+
<Link href="/discover/#FAQ" prefetch={false}>
276285
<span className="text-black dark:text-gray-300 cursor-pointer">
277286
<FormattedMessage defaultMessage="FAQ" id="footer.discover.3" />
278287
</span>
279288
</Link>
280289
</li>
281290
<li className="mb-4">
282-
<Link href="/discover/#Explore">
291+
<Link href="/discover/#Explore" prefetch={false}>
283292
<span className="text-black dark:text-gray-300 cursor-pointer">
284293
<FormattedMessage defaultMessage="Explore" id="footer.discover.4" />
285294
</span>
286295
</Link>
287296
</li>
288297
<li className="mb-4">
289-
<Link href="/discover/#Documents">
298+
<Link href="/discover/#Documents" prefetch={false}>
290299
<span className="text-black dark:text-gray-300 cursor-pointer">
291300
<FormattedMessage defaultMessage="Documents" id="footer.discover.5" />
292301
</span>
@@ -295,7 +304,7 @@ export default function Footer() {
295304
</ul>
296305
</div>
297306
<div>
298-
<Link href="/ecosystem">
307+
<Link href="/ecosystem" prefetch={false}>
299308
<h3 className="font-button text-black dark:text-white my-4 cursor-pointer">
300309
<FormattedMessage defaultMessage="ECOSYSTEM" id="footer.ecosystem.title" />
301310
</h3>
@@ -342,7 +351,7 @@ export default function Footer() {
342351
</ul>
343352
</div>
344353
<div>
345-
<Link href="/blog">
354+
<Link href="/blog" prefetch={false}>
346355
<h3 className="font-button text-black dark:text-white my-4 cursor-pointer">
347356
<FormattedMessage defaultMessage="BLOG" id="footer.blog.title" />
348357
</h3>
@@ -365,7 +374,7 @@ export default function Footer() {
365374
)}
366375
</div>
367376
<div>
368-
<Link href="/news">
377+
<Link href="/news" prefetch={false}>
369378
<h3 className="font-button text-black dark:text-white my-4 cursor-pointer">
370379
<FormattedMessage defaultMessage="NEWS" id="footer.news.title" />
371380
</h3>

‎components/LanguageSwitcher.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Fragment, useState } from 'react';
22
import { Listbox, Transition } from '@headlessui/react';
3-
import { getIconComponentByName } from '../utils/icons-map';
3+
import LanguageSelector from './icons/LanguageSelector';
4+
import LanguageSelectorWhite from './icons/LanguageSelectorWhite';
45
import { useRouter } from 'next/router';
56
import Link from 'next/link';
67

@@ -17,9 +18,7 @@ export default function LanguageSwitcher({ color = 'default' }) {
1718
>
1819
<span className="block truncate font-button-bold underline uppercase">{locale}</span>
1920
<span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
20-
{color == 'default'
21-
? getIconComponentByName('LanguageSelector')
22-
: getIconComponentByName('LanguageSelectorWhite')}
21+
{color == 'default' ? <LanguageSelector /> : <LanguageSelectorWhite />}
2322
</span>
2423
</Listbox.Button>
2524
<Transition

‎components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function Layout({ children, title, desc, footer = true }: Props)
2525
}
2626
/>
2727
</Head>
28-
<header className="w-full fixed top-0 left-0 right-0 z-50 h-[6em] md:h-[9em] bg-white/80 dark:bg-brand-black/60 backdrop-blur-md border-b border-gray-200/50 dark:border-white/10 supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-black/50">
28+
<header className="w-full fixed top-0 left-0 right-0 z-[9999] h-[6em] md:h-[9em] bg-white/80 dark:bg-brand-black/60 backdrop-blur-md border-b border-gray-200/50 dark:border-white/10 supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-black/50">
2929
<Navigation />
3030
</header>
3131
<div className="h-[6em] md:h-[9em]" aria-hidden="true" />

0 commit comments

Comments
 (0)