task: Add developer resources in the footer (#39)

Co-authored-by: Anand Gorantala <anand.gorantala@bloomreach.com>
bloomreach · Sep 26, 2024 · f1b7fae · f1b7fae
1 parent f93be1a
commit f1b7fae
Show file tree

Hide file tree

Showing 15 changed files with 729 additions and 301 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,12 @@ This repository holds code samples that demonstrate how to implement the various
 - Do not make a code sample that is too complex or has too many dependencies. Keep in mind long term maintenance of a code sample, as the underlying APIs and the libraries are updated over time.
 - If a code sample stops working, it should be removed.
 
+## Related resources
+
+- [Bloomreach SDK](https://documentation.bloomreach.com/discovery/docs/discovery-sdks)
+- [Limitless Commerce UI Kit](https://bloomreach.github.io/limitless-ui-react)
+- [Sample Catalogs](https://github.com/bloomreach/sample-catalogs)
+
 ## Contributing
 
 Contributions are welcome. Please read the guidelines above and open a pull request and one of our team members will help get it reviewed and merged
diff --git a/examples/autosuggest/src/Footer.tsx b/examples/autosuggest/src/Footer.tsx
@@ -4,10 +4,10 @@ import BrDiscoveryLogo from "./assets/br-experience-discovery-full.svg";
 export const Footer = () => {
  return (
  <div className="footer mt-4 border-t p-4">
- <div className="max-w-5xl mx-auto flex flex-row gap-4">
- <div className="flex flex-col gap-4 w-80">
+ <div className="max-w-5xl mx-auto flex flex-col gap-4 md:flex-row md:gap-2">
+ <div className="flex flex-col gap-4 md:w-64">
  <div className="text-lg font-semibold">
- <img src={BrDiscoveryLogo} className="w-32" />{" "}
+ <img src={BrDiscoveryLogo} className="w-32"/>{" "}
  </div>
  <p className="text-sm">
  E-commerce search and merchandising focussed on maximizing revenue
@@ -20,7 +20,7 @@ export const Footer = () => {
  Get in touch
  </a>
  </div>
- <div className="w-64">
+ <div className="md:w-64">
  <div className="text-md font-semibold mb-2">About</div>
  <p className="text-sm">
  This code sample shows the autosuggest feature that guides site visitors by providing
@@ -35,44 +35,85 @@ export const Footer = () => {
  See the source on Github <ExternalLinkIcon size={12}/>
  </a>
  </div>
- <div className="my-2 text-sm">
- <a
- target="_blank"
- className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
- href="https://github.com/bloomreach/web-code-samples"
- >
- See other code samples <ExternalLinkIcon size={12}/>
- </a>
- </div>
  </div>
  <div className="grow">
  <div className="text-md font-semibold mb-2">Related documentation</div>
- <ul className="list-none text-sm">
- <li className="mb-2">
+ <ul className="list-none text-sm flex flex-col gap-2">
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+ href="https://documentation.bloomreach.com/discovery/docs/autosuggest"
+ >
+ Autosuggest
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+ href="https://documentation.bloomreach.com/discovery/reference/autosuggest-api"
+ >
+ Autosuggest API reference
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div className="grow">
+ <div className="text-md font-semibold mb-2">
+ Developer resources
+ </div>
+ <ul className="list-none text-sm flex flex-col gap-2">
+ <li>
  <a
  target="_blank"
- className="text-slate-500 hover:underline"
- href="https://documentation.bloomreach.com/discovery/docs/bloomreach-discovery-sdk-1"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://documentation.bloomreach.com/discovery/docs/discovery-sdks"
+ rel="noreferrer"
  >
  Bloomreach SDK
+ {' '}
+ <ExternalLinkIcon size={12}/>
  </a>
  </li>
- <li className="mb-2">
+ <li>
  <a
  target="_blank"
- className="text-slate-500 hover:underline"
- href="https://documentation.bloomreach.com/discovery/docs/autosuggest"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://bloomreach.github.io/limitless-ui-react"
+ rel="noreferrer"
  >
- Autosuggest
+ Limitless commerce UI kit
+ {' '}
+ <ExternalLinkIcon size={12}/>
  </a>
  </li>
- <li className="mb-2">
+ <li>
  <a
  target="_blank"
- className="text-slate-500 hover:underline"
- href="https://documentation.bloomreach.com/discovery/reference/autosuggest-api"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://documentation.bloomreach.com/discovery/docs/discovery-web-code-samples"
+ rel="noreferrer"
  >
- Autosuggest API reference
+ Web code samples
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://github.com/bloomreach/sample-catalogs"
+ rel="noreferrer"
+ >
+ Sample catalogs
+ {' '}
+ <ExternalLinkIcon size={12}/>
  </a>
  </li>
  </ul>

diff --git a/examples/categories/src/Footer.jsx b/examples/categories/src/Footer.jsx
@@ -4,10 +4,10 @@ import BrDiscoveryLogo from "./assets/br-experience-discovery-full.svg";
 export const Footer = () => {
  return (
  <div className="footer mt-4 border-t p-4">
- <div className="max-w-5xl mx-auto flex flex-row gap-4">
- <div className="flex flex-col gap-4 w-80">
+ <div className="max-w-5xl mx-auto flex flex-col gap-4 md:flex-row md:gap-2">
+ <div className="flex flex-col gap-4 md:w-64">
  <div className="text-lg font-semibold">
- <img src={BrDiscoveryLogo} className="w-32" />
+ <img src={BrDiscoveryLogo} className="w-32"/>
  </div>
  <p className="text-sm">
  E-commerce search and merchandising focussed on maximizing revenue
@@ -20,7 +20,7 @@ export const Footer = () => {
  Get in touch
  </a>
  </div>
- <div className="w-64">
+ <div className="md:w-64">
  <div className="text-md font-semibold mb-2">About</div>
  <p className="text-sm">
  This code sample shows the category hierarchy and how to browse
@@ -35,35 +35,74 @@ export const Footer = () => {
  See the source on Github <ExternalLinkIcon size={12}/>
  </a>
  </div>
- <div className="my-2 text-sm">
- <a
- target="_blank"
- className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
- href="https://github.com/bloomreach/web-code-samples"
- >
- See other code samples <ExternalLinkIcon size={12}/>
- </a>
- </div>
  </div>
  <div className="grow">
  <div className="text-md font-semibold mb-2">Related documentation</div>
- <ul className="list-none text-sm">
- <li className="mb-2">
+ <ul className="list-none text-sm flex flex-col gap-2">
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 flex flex-row gap-2 items-center hover:underline"
+ href="https://documentation.bloomreach.com/discovery/reference/search-category-trees"
+ >
+ Search category trees
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div className="grow">
+ <div className="text-md font-semibold mb-2">
+ Developer resources
+ </div>
+ <ul className="list-none text-sm flex flex-col gap-2">
+ <li>
  <a
  target="_blank"
- className="text-slate-500 hover:underline"
- href="https://documentation.bloomreach.com/discovery/docs/bloomreach-discovery-sdk-1"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://documentation.bloomreach.com/discovery/docs/discovery-sdks"
+ rel="noreferrer"
  >
  Bloomreach SDK
+ {' '}
+ <ExternalLinkIcon size={12}/>
  </a>
  </li>
- <li className="mb-2">
+ <li>
  <a
  target="_blank"
- className="text-slate-500 hover:underline"
- href="https://documentation.bloomreach.com/discovery/reference/search-category-trees"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://bloomreach.github.io/limitless-ui-react"
+ rel="noreferrer"
  >
- Search category trees
+ Limitless commerce UI kit
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://documentation.bloomreach.com/discovery/docs/discovery-web-code-samples"
+ rel="noreferrer"
+ >
+ Web code samples
+ {' '}
+ <ExternalLinkIcon size={12}/>
+ </a>
+ </li>
+ <li>
+ <a
+ target="_blank"
+ className="text-slate-500 hover:underline flex flex-row gap-2 items-center"
+ href="https://github.com/bloomreach/sample-catalogs"
+ rel="noreferrer"
+ >
+ Sample catalogs
+ {' '}
+ <ExternalLinkIcon size={12}/>
  </a>
  </li>
  </ul>