fix: use default explore links

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.

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 links={explorePageLinks}/>,
- '': () => <StartExploringPage links={explorePageLinks}/>
+ '/': StartExploringPage,
+ '': StartExploringPage
  },
  {
  routeInfoSelector: 'selectHash'

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 }) => (
  </a>
 )
 
-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 }) => (
  <div className='mw9 center explore-sug-2'>
  <Helmet>
  <title>{t('StartExploringPage.title')}</title>
@@ -32,13 +43,12 @@ const StartExploringPage = ({ t, embed, runTour = false, joyrideCallback, links
  </div>
  {embed ? <IpldExploreForm /> : null}
  <ul className='list pl0 ma0 mt4 mt0-l bt bn-l b--black-10'>
- {(links.length > 0)
- ? links.map((suggestion) => (
+ {(links ?? explorePageLinks).map((suggestion) => (
  <li key={suggestion.cid}>
  <ExploreSuggestion name={suggestion.name} cid={suggestion.cid} type={suggestion.type} />
  </li>
-  ))
-  : <p className='lh-copy f5 avenir charcoal-muted'>{t('StartExploringPage.noDataAvailable')}</p>}
+ ))
+ }
  </ul>
  </div>
  <div className='pt2-l'>

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',