Skip to content

Commit af5d669

Browse files
katommkatomm
authored
fix: replace useBaseUrl hook calls inside callbacks/conditionals with useBaseUrlUtils (#601)
1 parent 47bb6e8 commit af5d669

7 files changed

Lines changed: 27 additions & 19 deletions

File tree

‎src/components/CompaniesShowcase/index.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useRef } from "react";
22
import { useLocation, useHistory } from "@docusaurus/router";
3-
import useBaseUrl from "@docusaurus/useBaseUrl";
3+
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
44
import ThemedImage from "@theme/ThemedImage";
55
import Link from "@docusaurus/Link";
66
import {translate} from '@docusaurus/Translate';
@@ -12,6 +12,7 @@ function getCompanyId(company) {
1212
}
1313

1414
function SpotlightPanel({ company, onClose }) {
15+
const { withBaseUrl } = useBaseUrlUtils();
1516
if (!company) return null;
1617

1718
return (
@@ -27,8 +28,8 @@ function SpotlightPanel({ company, onClose }) {
2728
className={styles.spotlightLogo}
2829
alt={company.companyName}
2930
sources={{
30-
light: useBaseUrl(`/img/logos/${company.imageName}.svg`),
31-
dark: useBaseUrl(`/img/logos/${company.imageName}-dark.svg`),
31+
light: withBaseUrl(`/img/logos/${company.imageName}.svg`),
32+
dark: withBaseUrl(`/img/logos/${company.imageName}-dark.svg`),
3233
}}
3334
/>
3435
<h3 className={styles.spotlightName}>{company.companyName}</h3>
@@ -53,6 +54,7 @@ function SpotlightPanel({ company, onClose }) {
5354
}
5455

5556
function LogoCell({ company, isActive, onClick }) {
57+
const { withBaseUrl } = useBaseUrlUtils();
5658
return (
5759
<div
5860
className={`${styles.logoCell} ${isActive ? styles.logoCellActive : ""}`}
@@ -71,8 +73,8 @@ function LogoCell({ company, isActive, onClick }) {
7173
className={styles.logoImage}
7274
alt={company.companyName}
7375
sources={{
74-
light: useBaseUrl(`/img/logos/${company.imageName}.svg`),
75-
dark: useBaseUrl(`/img/logos/${company.imageName}-dark.svg`),
76+
light: withBaseUrl(`/img/logos/${company.imageName}.svg`),
77+
dark: withBaseUrl(`/img/logos/${company.imageName}-dark.svg`),
7678
}}
7779
/>
7880
{company.showCompanyName && company.companyName && (

‎src/components/LatestNewsSection/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from "react";
22
import Link from "@docusaurus/Link";
3-
import useBaseUrl from "@docusaurus/useBaseUrl";
3+
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
44
import {translate} from "@docusaurus/Translate";
55
import recentNews from "@site/src/data/recentNews.json";
66
import styles from "./styles.module.css";
77

88
export default function LatestNewsSection({ count = 3 }) {
9+
const { withBaseUrl } = useBaseUrlUtils();
910
const posts = recentNews.slice(0, count);
1011

1112
function formatDate(dateStr) {
@@ -31,7 +32,7 @@ export default function LatestNewsSection({ count = 3 }) {
3132
{post.authors[0] && (
3233
<>
3334
<img
34-
src={useBaseUrl(post.authors[0].imageUrl)}
35+
src={withBaseUrl(post.authors[0].imageUrl)}
3536
alt={post.authors[0].name}
3637
className={styles.authorAvatar}
3738
loading="lazy"

‎src/components/Layout/DottedImageWithText/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import clsx from "clsx";
33
import styles from "./styles.module.css";
44
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
55
import Link from "@docusaurus/Link";
6-
import useBaseUrl from "@docusaurus/useBaseUrl";
6+
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
77
import { parseMarkdownLikeText } from "@site/src/utils/textUtils";
88

99
// This component:
1010
// shows a dotted image and some text to the right, title is optional
1111

1212
export default function DottedImageWithText({ imageName, title, text, headingDot }) {
13+
const { withBaseUrl } = useBaseUrlUtils();
1314
// Construct the image URL using the imageName prop (if there is one), we may want to handle image load errors in the future
14-
const imageUrl = imageName ? useBaseUrl(`/img/dotted-icons/${imageName}.svg`) : null;
15+
const imageUrl = imageName ? withBaseUrl(`/img/dotted-icons/${imageName}.svg`) : null;
1516

1617
// Function to render text content
1718
const renderTextContent = (content) => {

‎src/components/ResearchSection/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import clsx from "clsx";
2-
import useBaseUrl from "@docusaurus/useBaseUrl";
2+
import useBaseUrl, { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
33
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
44
import Link from "@docusaurus/Link";
55
import {translate} from '@docusaurus/Translate';
@@ -20,6 +20,7 @@ function Category({
2020
papers,
2121
specifications,
2222
}) {
23+
const { withBaseUrl } = useBaseUrlUtils();
2324
// Construct the image URL using the imageName prop, we may want to handle image load errors in the future
2425
const imageUrl = useBaseUrl(`/img/eras/${imageName}.avif`);
2526

@@ -47,7 +48,7 @@ function Category({
4748
<ul>
4849
{papers.map((paper, index) => (
4950
<li key={index}>
50-
<Link to={useBaseUrl(paper.url)}>{paper.title}</Link>
51+
<Link to={withBaseUrl(paper.url)}>{paper.title}</Link>
5152
</li>
5253
))}
5354
</ul>
@@ -60,7 +61,7 @@ function Category({
6061
<ul>
6162
{specifications.map((specification, index) => (
6263
<li key={index}>
63-
<Link to={useBaseUrl(specification.url)}>
64+
<Link to={withBaseUrl(specification.url)}>
6465
{specification.title}
6566
</Link>
6667
</li>

‎src/components/WalletLink/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import clsx from "clsx";
22
import React from "react";
33
import Link from "@docusaurus/Link";
44
import styles from "./styles.module.css";
5-
import useBaseUrl from "@docusaurus/useBaseUrl";
5+
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
66
import ThemedImage from "@theme/ThemedImage";
77
import { parseMarkdownLikeText } from "@site/src/utils/textUtils";
88

@@ -20,15 +20,16 @@ export default function WalletLink({
2020
label,
2121
link,
2222
}) {
23+
const { withBaseUrl } = useBaseUrlUtils();
2324
return (
2425
<div className={styles.logoContainer}>
2526
{imageName && (
2627
<div className={styles.imageWrap}>
2728
<ThemedImage
2829
alt={label}
2930
sources={{
30-
light: useBaseUrl(`/img/wallets/${imageName}.svg`),
31-
dark: useBaseUrl(`/img/wallets/${imageName}.svg`), // fixme: there are no dark images available yet
31+
light: withBaseUrl(`/img/wallets/${imageName}.svg`),
32+
dark: withBaseUrl(`/img/wallets/${imageName}.svg`), // fixme: there are no dark images available yet
3233
}}
3334
/>
3435
</div>

‎src/pages/governance.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import AppGrid from "@site/src/components/AppGrid";
1818
import BoundaryBox from "@site/src/components/Layout/BoundaryBox";
1919
import SpacerBox from "@site/src/components/Layout/SpacerBox";
2020
import OpenGraphInfo from "@site/src/components/Layout/OpenGraphInfo";
21-
import useBaseUrl from "@docusaurus/useBaseUrl";
21+
import { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
2222
import { FaUsers, FaServer, FaUniversity, FaShieldAlt, FaCompass } from "react-icons/fa";
2323
import {translate} from '@docusaurus/Translate';
2424
import styles from "./governance.module.css";
@@ -164,6 +164,7 @@ const milestones = [
164164
];
165165

166166
function ImpactTimeline() {
167+
const { withBaseUrl } = useBaseUrlUtils();
167168
return (
168169
<>
169170
<Divider text={translate({id: 'governance.divider.impact', message: 'What governance has achieved'})} id="impact" />
@@ -178,7 +179,7 @@ function ImpactTimeline() {
178179
<a href={m.blog} key={m.titleId} className={styles.milestoneCard}>
179180
<span className={styles.timelineDot} aria-hidden="true" />
180181
<div className={styles.milestoneBanner}>
181-
<img src={useBaseUrl(m.banner)} alt={translate({id: m.titleId, message: m.title})} />
182+
<img src={withBaseUrl(m.banner)} alt={translate({id: m.titleId, message: m.title})} />
182183
</div>
183184
<div className={styles.milestoneContent}>
184185
<span className={styles.milestoneDate}>{m.date}</span>

‎src/pages/insights/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import React, {useMemo, useState, useEffect} from 'react';
77
import Layout from '@theme/Layout';
88
import Link from '@docusaurus/Link';
9-
import useBaseUrl from '@docusaurus/useBaseUrl';
9+
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
1010
import {translate} from '@docusaurus/Translate';
1111
import SiteHero from '@site/src/components/Layout/SiteHero';
1212
import SpacerBox from "@site/src/components/Layout/SpacerBox";
@@ -66,7 +66,8 @@ function uniqueTags(items) {
6666
}
6767

6868
function InsightCard({item}) {
69-
const imageUrl = item.imagePath ? useBaseUrl(item.imagePath) : null;
69+
const { withBaseUrl } = useBaseUrlUtils();
70+
const imageUrl = item.imagePath ? withBaseUrl(item.imagePath) : null;
7071
return (
7172
<article className="insight-row insight-grid">
7273
<div className="insight-title-wrap">

0 commit comments

Comments
 (0)