From 53d3c7b7c483dcd5d5c1c5167d01517058a44d42 Mon Sep 17 00:00:00 2001 From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com> Date: Fri, 6 Sep 2024 11:38:15 -0500 Subject: [PATCH] fix: use default explore links --- README.md | 14 ++++++++++++++ dev/devPage.jsx | 5 ++--- src/components/StartExploringPage.jsx | 20 +++++++++++++++----- src/lib/explorePageSuggestions.js | 5 +++++ 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 22c8c561..6979472a 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,20 @@ import 'ipld-explorer-components/dist/components/object-info/LinksTable.css' import 'ipld-explorer-components/dist/components/loader/Loader.css' ``` +You can see an example of how to use these components in the [devPage.jsx](./dev/devPage.jsx) file. + +### Customizing the links displayed in the StartExploringPage + +To customize the links displayed in the start exploring page, you can pass a `links` property to the `StartExploringPage` component. This property should be an array of objects with the following properties: + +``` +{ + name: 'Name of your example link', + cid: 'bafyfoo...', + type: 'dag-pb' // or dag-json, etc... +} +``` + ### Adding another codec **NOTE:** PRs adding an old IPLDFormat codec would need the old `blockcodec-to-ipld-format` tool, which has many out-of-date deps. We will only accept PRs for adding BlockCodec interface codecs. diff --git a/dev/devPage.jsx b/dev/devPage.jsx index 31ecc489..58cdb70c 100644 --- a/dev/devPage.jsx +++ b/dev/devPage.jsx @@ -13,15 +13,14 @@ import '../src/components/loader/Loader.css' import '../src/components/object-info/LinksTable.css' import i18n from '../src/i18n' import { exploreBundle, ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm } from '../src/index' -import { explorePageLinks } from '../src/lib/explorePageSuggestions' globalThis.Buffer = Buffer const routesBundle = createRouteBundle( { '/explore*': ExplorePage, - '/': () => , - '': () => + '/': StartExploringPage, + '': StartExploringPage }, { routeInfoSelector: 'selectHash' diff --git a/src/components/StartExploringPage.jsx b/src/components/StartExploringPage.jsx index 6a8cd95b..686cd47f 100644 --- a/src/components/StartExploringPage.jsx +++ b/src/components/StartExploringPage.jsx @@ -2,6 +2,7 @@ import React from 'react' import { Helmet } from 'react-helmet' import { withTranslation } from 'react-i18next' import ReactJoyride from 'react-joyride' +import { explorePageLinks } from '../lib/explorePageSuggestions' import { projectsTour } from '../lib/tours' import AboutIpld from './about/AboutIpld' import IpldExploreForm from './explore/IpldExploreForm' @@ -19,7 +20,17 @@ const ExploreSuggestion = ({ cid, name, type }) => ( ) -const StartExploringPage = ({ t, embed, runTour = false, joyrideCallback, links = [] }) => ( +/** + * + * @param {object} props + * @param {Function} props.t + * @param {Function} props.embed + * @param {boolean} [props.runTour] + * @param {Function} props.joyrideCallback + * @param {typeof explorePageLinks} [props.links] + * @returns + */ +const StartExploringPage = ({ t, embed, runTour = false, joyrideCallback, links }) => (
{t('StartExploringPage.title')} @@ -32,13 +43,12 @@ const StartExploringPage = ({ t, embed, runTour = false, joyrideCallback, links
{embed ? : null}
    - {(links.length > 0) - ? links.map((suggestion) => ( + {(links ?? explorePageLinks).map((suggestion) => (
  • - )) - :

    {t('StartExploringPage.noDataAvailable')}

    } + )) + }
diff --git a/src/lib/explorePageSuggestions.js b/src/lib/explorePageSuggestions.js index 0e05cf6b..8997d4b5 100644 --- a/src/lib/explorePageSuggestions.js +++ b/src/lib/explorePageSuggestions.js @@ -1,3 +1,8 @@ +/** + * Default Explore page suggestions + * + * @type {Array<{name: string, cid: string, type: string}>} + */ const explorePageLinks = [ { name: 'Project Apollo Archives',