feat: breadcrumb for documentation (#7207)

* feat: breadcrumbs for docs (#7045) (#7160) * feat: Added BreadCrumbs in Docs Page (#7045) * feat:reverted some autochanged files by VScode (#7045) * feat:code review Changes (#7045) * fix:code review (#7045) * Update components/BreadCrumb.js * Update pages/docs/how-to-guides/editing.mdx * Update pages/docs/advanced/single-user-mode.mdx * Update pages/docs/map.mdx * Update pages/docs/faqs.mdx * Update pages/docs/contributing/automated-tests.mdx * Update pages/docs/contributing/reviewers.mdx * Update pages/docs/environments/linkfree-cli.mdx * Update pages/docs/how-to-guides/milestones.mdx * Update pages/docs/contributing/storybook.mdx --------- Co-authored-by: Eddie Jaoude <[email protected]> Co-authored-by: Sara Jaoude <[email protected]> * fix: reformatted files * fix: consistent coding style --------- Co-authored-by: Nitheesh Daram <[email protected]> Co-authored-by: Sara Jaoude <[email protected]>
EddieHubCommunity · May 27, 2023 · 9d9b781 · 9d9b781
1 parent 30d47ae
commit 9d9b781
Show file tree

Hide file tree

Showing 33 changed files with 251 additions and 54 deletions.
diff --git a/components/BreadCrumb.js b/components/BreadCrumb.js
@@ -0,0 +1,55 @@
+import { FiChevronRight } from "react-icons/fi";
+import { AiOutlineHome } from "react-icons/ai";
+
+import Link from "@components/Link";
+
+export default function BreadCrumb({ section, name }) {
+  return (
+    <nav className="flex p-3" aria-label="Breadcrumb">
+      <ol role="list" className="flex items-center space-x-4">
+        <li>
+          <div>
+            <Link
+              href="/docs"
+              className="text-primary hover:text-primary-medium-low"
+            >
+              <AiOutlineHome
+                className="h-5 w-5 flex-shrink-0"
+                aria-hidden="true"
+              />
+              <span className="sr-only">Docs</span>
+            </Link>
+          </div>
+        </li>
+        <li key={section}>
+          <div className="flex items-center">
+            <FiChevronRight
+              className="h-5 w-5 flex-shrink-0 text-primary"
+              aria-hidden="true"
+            />
+            <Link
+              href={`/docs/#${section}`}
+              className="ml-4 text-sm font-medium text-primary hover:text-primary-medium-low"
+            >
+              {section}
+            </Link>
+          </div>
+        </li>
+        <li key={name}>
+          <div className="flex items-center">
+            <FiChevronRight
+              className="h-5 w-5 flex-shrink-0 text-primary"
+              aria-hidden="true"
+            />
+            <Link
+              href="#"
+              className="ml-4 text-sm font-medium text-primary hover:text-primary-medium-low"
+            >
+              {name}
+            </Link>
+          </div>
+        </li>
+      </ol>
+    </nav>
+  );
+}
diff --git a/components/layouts/DocsLayout.js b/components/layouts/DocsLayout.js
@@ -4,8 +4,9 @@ import Head from "next/head";
 import Page from "@components/Page";
 import Link from "@components/Link";
 import { ComponentStyle } from "@components/mdx/ComponentStyle";
+import BreadCrumb from "@components/BreadCrumb";
 
-export default function DocsLayout({ children, title }) {
+export default function DocsLayout({ children, title, section, name }) {
   return (
     <>
       <Head>
@@ -17,6 +18,7 @@ export default function DocsLayout({ children, title }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Page>
+        <BreadCrumb section={section} name={name}></BreadCrumb>
         <h1 className="mb-4 font-bold text-2xl md:text-4xl">Documentation</h1>
         <p>
           Here you should find everything you need from getting started with

diff --git a/pages/docs/advanced/single-user-mode.mdx b/pages/docs/advanced/single-user-mode.mdx
@@ -19,7 +19,11 @@ This allows you to host LinkFree yourself for your single Profile, but this will
 3. Host the app on your favourite platform
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Full Example documentation">
+  <DocsLayout
+    title="LinkFree Full Example documentation"
+    section="Extra"
+    name="Single User Mode"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/community-resources.mdx b/pages/docs/community-resources.mdx
@@ -27,12 +27,18 @@ YouTube (or blog)
 | [Jaynarayan vaishnav](https://github.com/jaynarayan-vaishnav) | Pair programmed on Discord | 2022/10/31        | [#2079](https://github.com/EddieHubCommunity/LinkFree/pull/2080)                                                                                                        |
 | [Bilal Khan](https://github.com/ibilalkayy)                   | YouTube                    | 2023/01/18        | [Submitting My First PR with Dean - LinkFree Account Creation for Beginners](https://www.youtube.com/watch?v=I8wNateK3hM)                                               |
 | [Bilal Khan](https://github.com/ibilalkayy)                   | Blog                       | 2023/01/21        | [How to create a LinkFree account? [Part 1]](https://ibilalkayy.hashnode.dev/how-to-create-a-linkfree-account-part-1)                                                   |
-| [Ananya Nayak](https://github.com/Ananya2001-an)              | Blog                       | 2023/02/05        | [Ananya in Open Source Wonderland](https://ananyacodes.hashnode.dev/ananya-in-open-source-wonderland)
+| [Ananya Nayak](https://github.com/Ananya2001-an)              | Blog                       | 2023/02/05        | [Ananya in Open Source Wonderland](https://ananyacodes.hashnode.dev/ananya-in-open-source-wonderland)                                                                   |
 | [Rohit](https://github.com/TRohit20)                          | Blog                       | 2023/03/01        | [Beyond Code: How Anyone Can Contribute to Open-Source Projects](https://rohitlogs.com/beyond-code-how-anyone-can-contribute-to-open-source-projects)                   |
 | [Madhu Saini](https://github.com/MadhuSaini22)                | Blog                       | 2023/03/12        | [Beyond Code: A Beginner's Guide to Open Source](https://madhusaini22.hashnode.dev/a-beginners-guide-to-open-source)                                                    |
-| [Amanda Martin](https://github.com/amandamartin-dev)          | Livestream                 | 2023/03/16        | [Combining the roles of Developer Advocate and Open Source Ambassador](https://stack-stream.com/v/combining-the-roles-of-developer-advocate-and-open-source-ambassador) | 
-| [Ananya Nayak](https://github.com/Ananya2001-an)              | Blog                       | 2023/03/28        | [How to understand a big codebase???](https://ananyacodes.hashnode.dev/how-to-understand-a-big-codebase)
+| [Amanda Martin](https://github.com/amandamartin-dev)          | Livestream                 | 2023/03/16        | [Combining the roles of Developer Advocate and Open Source Ambassador](https://stack-stream.com/v/combining-the-roles-of-developer-advocate-and-open-source-ambassador) |
+| [Ananya Nayak](https://github.com/Ananya2001-an)              | Blog                       | 2023/03/28        | [How to understand a big codebase???](https://ananyacodes.hashnode.dev/how-to-understand-a-big-codebase)                                                                |
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Contributors Changelog">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree Contributors Changelog"
+    section="Getting started"
+    name="Community Resources"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/contributing/automated-tests.mdx b/pages/docs/contributing/automated-tests.mdx
@@ -33,7 +33,11 @@ To open last HTML report run:
 ```
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Automated Tests Documentation">
+  <DocsLayout
+    title="LinkFree Automated Tests Documentation"
+    section="Contributing"
+    name="Automated Tests"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/contributing/commits.mdx b/pages/docs/contributing/commits.mdx
@@ -50,7 +50,11 @@ test: profile tag redirect (#1234)
 Learn more about <Link href="https://www.conventionalcommits.org"> Conventional Commits</Link>
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Conventional Commits Documentation">
+  <DocsLayout
+    title="LinkFree Conventional Commits Documentation"
+    section="Contributing"
+    name="Commit Style"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/contributing/hacktoberfest.mdx b/pages/docs/contributing/hacktoberfest.mdx
@@ -15,7 +15,11 @@ Pull requests which add or edit your information in a `data/` file WILL NOT be c
 Pull requests which improve the codebase, documentation, or other aspects of the project and are in line with the core values of the event WILL count. The project contains the Hacktoberfest topic, so the PRs will automatically BE counted towards Hacktoberfest. However, Profile update PRs will have the label `invalid` and therefore won't be counted towards this event.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Hacktoberfest Documentation">
+  <DocsLayout
+    title="LinkFree Hacktoberfest Documentation"
+    section="Contributing"
+    name="Hacktoberfest"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/contributing/labels.mdx b/pages/docs/contributing/labels.mdx
@@ -39,7 +39,11 @@ The maintainers do not want anyone working on this issue yet. For example it mig
 You can request to be assigned this issue, then you can start working on it. Please do not tag a specific person to assign, as all maintainers will be notified of the repo activity.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Hacktoberfest Documentation">
+  <DocsLayout
+    title="LinkFree Hacktoberfest Documentation"
+    section="Contributing"
+    name="Labels"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/contributing/reviewers.mdx b/pages/docs/contributing/reviewers.mdx
@@ -99,5 +99,11 @@ The exception is if the changes have made modifications to the `package.json` fi
 If the author needs help undoing their changes to the lock file, I have created a video on how they can achieve this https://www.youtube.com/watch?v=jHkIXYVpMTo
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Maintainers Documentation">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree Maintainers Documentation"
+    section="Contributing"
+    name="Reviewers"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/contributing/storybook.mdx b/pages/docs/contributing/storybook.mdx
@@ -22,5 +22,11 @@ _note: not all components have been added, this is a great way to contribute to
 1. Run `npm run storybook` to see the added components and visit `http://localhost:6006` to interact with them in the browser
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree StoryBook Documentation">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree StoryBook Documentation"
+    section="Contributing"
+    name="Storybook"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/docs-style-guide.mdx b/pages/docs/docs-style-guide.mdx
@@ -71,5 +71,11 @@ For example:
    - **Use this:** There are **4** ways you can run the project
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Style Guide">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree Style Guide"
+    section="Contributing"
+    name="Docs Style Guide"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/environments/environment-variables.mdx b/pages/docs/environments/environment-variables.mdx
@@ -3,7 +3,7 @@ import Link from "@components/Link";
 
 ## Environment variables
 
-Environment variables are needed in the `.env` file to allow the application to run correctly. `.env.example` file has an example template you can use to get started. However, you will need to follow these steps to get your GitHub OAuth environment variables. Please note that if you are working in Gitpod and wish to access authenticated pages, you will need to complete these steps each time with the URL Gitpod generates for your dev environment as localhost will not work. To avoid this, you may choose to work in Docker which only requires this setup once. 
+Environment variables are needed in the `.env` file to allow the application to run correctly. `.env.example` file has an example template you can use to get started. However, you will need to follow these steps to get your GitHub OAuth environment variables. Please note that if you are working in Gitpod and wish to access authenticated pages, you will need to complete these steps each time with the URL Gitpod generates for your dev environment as localhost will not work. To avoid this, you may choose to work in Docker which only requires this setup once.
 
 | variable                         | example                            | required | description                                         |
 | :------------------------------- | :--------------------------------- | :------- | :-------------------------------------------------- |
@@ -21,19 +21,23 @@ Environment variables are needed in the `.env` file to allow the application to
 2. Then `Developer settings` down the bottom left
 3. Click `New OAuth app` and fill in the form details
 
-| Form field                 | value                                            |
-| :------------------------- | :----------------------------------------------- |
-| Application name           | `LinkFree local`                                 |
-| Homepage URL               | `https://linkfree.io`                            |
-| Application description    | `LinkFree allows you to connect with your audience using a single link.`|
-| Authorization callback URL | `http://localhost:3000/api/auth/callback/github` |
+| Form field                 | value                                                                    |
+| :------------------------- | :----------------------------------------------------------------------- |
+| Application name           | `LinkFree local`                                                         |
+| Homepage URL               | `https://linkfree.io`                                                    |
+| Application description    | `LinkFree allows you to connect with your audience using a single link.` |
+| Authorization callback URL | `http://localhost:3000/api/auth/callback/github`                         |
 
 Then use the generated **Client ID** and **Client Secret** in the `.env`.
 
 Full details on GitHub docs https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Local Development Documentation">
+  <DocsLayout
+    title="LinkFree Local Development Documentation"
+    section="Getting started"
+    name="Environment variables"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/environments/github-ui.mdx b/pages/docs/environments/github-ui.mdx
@@ -9,7 +9,11 @@ Please refer to the following guides that use the GitHub UI to create and edit P
 - <Link href="/docs/how-to-guides/editing">Editing</Link>
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Development in GitHub UI Documentation">
+  <DocsLayout
+    title="LinkFree Development in GitHub UI Documentation"
+    section="Getting started"
+    name="GitHub UI"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/environments/gitpod.mdx b/pages/docs/environments/gitpod.mdx
@@ -6,7 +6,7 @@ Gitpod is an open-source application that provides a prebuilt development enviro
 
 ### How to use Gitpod
 
-You can use Gitpod in the cloud. Please note, that Gitpod requires additional configuration to work on the authenticated pages in LinkFree.  See instructions for [how to set up your OAuth app](/docs/environments/environment-variables) for more information.
+You can use Gitpod in the cloud. Please note, that Gitpod requires additional configuration to work on the authenticated pages in LinkFree. See instructions for [how to set up your OAuth app](/docs/environments/environment-variables) for more information.
 
 There are 2 ways you can open a repository with Gitpod:
 
@@ -17,7 +17,7 @@ There are 2 ways you can open a repository with Gitpod:
 
 Once you have opened a repository, you can develop as you usually do! In the next example, we will update our profile from LinkFree.
 
-**_NOTES:_** 
+**_NOTES:_**
 
 1. Be sure that you have a fork of LinkFree in your Github Profile. If you don't have it, check out the [Quickstart Guide](https://linkfree.io/docs/quickstart).
 
@@ -69,7 +69,11 @@ If you encounter permission issues, follow the next steps:
 [![Open LinkFree on Gitpod](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/EddieHubCommunity/LinkFree)
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Gitpod Development Documentation">
+  <DocsLayout
+    title="LinkFree Gitpod Development Documentation"
+    section="Getting started"
+    name="Gitpod"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/environments/linkfree-cli.mdx b/pages/docs/environments/linkfree-cli.mdx
@@ -42,5 +42,11 @@ npm run cli
 If you find any kind of bug you can use the 5th option `🐛 Report a bug` in the main prompt to report the bug. You can also create an issue in the [LinkFree CLI](https://github.com/Pradumnasaraf/LinkFree-CLI/issues/new?assignees=&labels=bug&template=bug.yaml) repository.
 
 export default ({ children }) => (
-  <DocsLayout title="Creating profile via LinkFree CLI">{children}</DocsLayout>
+  <DocsLayout
+    title="Creating profile via LinkFree CLI"
+    section="Getting started"
+    name="LinkFree CLI"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/environments/local-development.mdx b/pages/docs/environments/local-development.mdx
@@ -70,7 +70,11 @@ docker compose down
 If you are getting an error, try to rebuild the images with `docker compose up --build`. If that doesn't work, stop the containers with `docker compose down` and remove the stopped linkfree container with `docker rm linkfree`. Then, remove the images with `docker rmi linkfree-app`. Lastly, rebuild the images with `docker compose up --build`.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Local Development Documentation">
+  <DocsLayout
+    title="LinkFree Local Development Documentation"
+    section="Getting started"
+    name="Local Development"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/environments/local-with-atlas.mdx b/pages/docs/environments/local-with-atlas.mdx
@@ -50,7 +50,11 @@ Remember to replace password in the connection string with the password you set
 That's it! You have successfully set up a MongoDB Atlas database and it's now ready for use in your LinkFree local development environment.
 
 export default ({ children }) => (
-  <DocsLayout title="MongoDB Atlas for Local Development">
+  <DocsLayout
+    title="MongoDB Atlas for Local Development"
+    section="Getting started"
+    name="MongoDB Atlas for Local Development"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/faqs.mdx b/pages/docs/faqs.mdx
@@ -24,5 +24,7 @@ Once your Pull Request is merged it is deployed automatically. The deployment ca
 If your Profile is not visible after merging, please contact the maintainers in <Link href="http://discord.eddiehub.org">EddieHub Discord</Link> or in the <Link href="http://github.com/EddieHubCommunity/LinkFree/discussions">GitHub Discussions in the LinkFree</Link> repo.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree FAQ documentation">{children}</DocsLayout>
+  <DocsLayout title="LinkFree FAQ documentation" section="Extra" name="FAQ">
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/full-profile-example.mdx b/pages/docs/full-profile-example.mdx
@@ -152,7 +152,11 @@ _Note: the data fields `links`, `milestones`, `testimonials`, `tags`, `socials`
 Click on the relevant section to learn more about <Link href="/docs/how-to-guides/events">Events</Link> and <Link href="/docs/how-to-guides/testimonials">Testimonials</Link>.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Full Example documentation">
+  <DocsLayout
+    title="LinkFree Full Example documentation"
+    section="Extra"
+    name="Full Profile Example"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/how-to-guides/bio.mdx b/pages/docs/how-to-guides/bio.mdx
@@ -31,5 +31,11 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
 _Clicks on these social shortcuts that match any of your links will also increment their respective counters_
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Bio Documentation">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree Bio Documentation"
+    section="Customising your Profile"
+    name="Bio"
+  >
+    {children}
+  </DocsLayout>
 );
diff --git a/pages/docs/how-to-guides/editing.mdx b/pages/docs/how-to-guides/editing.mdx
@@ -103,7 +103,11 @@ To make further changes to an open Pull Request, follow these steps:
 GitHub will automatically append these changes to your open Pull Request.
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Editing Profile Documentation">
+  <DocsLayout
+    title="LinkFree Editing Profile Documentation"
+    section="Customising your Profile"
+    name="Editing"
+  >
     {children}
   </DocsLayout>
 );
diff --git a/pages/docs/how-to-guides/events.mdx b/pages/docs/how-to-guides/events.mdx
@@ -77,7 +77,11 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
 If you want to know how to properly add start, end, and CFP Close times, feel free to check [Unix Time stamp](https://www.unixtimestamp.com/).
 
 export default ({ children }) => (
-  <DocsLayout title="LinkFree Events Documentation">{children}</DocsLayout>
+  <DocsLayout
+    title="LinkFree Events Documentation"
+    section="Customising your Profile"
+    name="Events"
+  >
+    {children}
+  </DocsLayout>
 );
-
-;