diff --git a/sites/shared/components/mdx/read-more.mjs b/sites/shared/components/mdx/read-more.mjs
index b527ff851c2..ff5eb690f5d 100644
--- a/sites/shared/components/mdx/read-more.mjs
+++ b/sites/shared/components/mdx/read-more.mjs
@@ -4,6 +4,7 @@ import { useContext } from 'react'
import { NavigationContext } from 'shared/context/navigation-context.mjs'
import { useNavigation } from 'site/hooks/use-navigation.mjs'
import { BulletIcon, RightIcon } from 'shared/components/icons.mjs'
+import { pageHasChildren } from 'shared/utils.mjs'
const getRoot = {
dev: (root, nav) => {
@@ -31,7 +32,7 @@ const RenderTree = ({ tree, recurse, depth = 1, level = 0, lead = [] }) => (
* Does this have children?
*/
const hasChildren =
- recurse && (!depth || level < depth) && Object.keys(tree[key]).join('').length > 5
+ recurse && (!depth || level < depth) && pageHasChildren(tree[key])
? tree[key].s.replaceAll('/', '')
: false
@@ -72,7 +73,7 @@ export const ReadMore = ({
ignoreControl,
}) => {
const { slug } = useContext(NavigationContext)
- const siteNav = useNavigation({ ignoreControl })
+ const { siteNav } = useNavigation({ ignoreControl })
// Deal with recurse not being a number
if (recurse && recurse !== true) {
diff --git a/sites/shared/components/prev-next.mjs b/sites/shared/components/prev-next.mjs
new file mode 100644
index 00000000000..2eeedd43c9e
--- /dev/null
+++ b/sites/shared/components/prev-next.mjs
@@ -0,0 +1,65 @@
+// Dependencies
+import get from 'lodash.get'
+// Hooks
+import { useNavigation } from 'site/hooks/use-navigation.mjs'
+// Components
+import Link from 'next/link'
+import { LeftIcon, RightIcon } from 'shared/components/icons.mjs'
+
+const linkClasses =
+ 'flex flex-row gap-2 items-center w-full bg-secondary py-4 px-2 ' +
+ 'rounded-lg border-secondary bg-opacity-10 border border-solid ' +
+ 'hover:bg-opacity-100 hover:text-secondary-content'
+
+const PrevPage = ({ t, s }) =>
+ s ? (
+
+
+ {t}
+
+ ) : (
+
+ )
+
+const NextPage = ({ t, s }) =>
+ s ? (
+
+ {t}
+
+
+ ) : (
+
+ )
+
+export const PrevNext = ({ slug }) => {
+ // Grab site navigation and slug lookup table from the useNavigatin hook
+ const { siteNav, slugLut } = useNavigation()
+
+ // Lookup the current slug in the LUT
+ const index = slugLut.indexOf(slug)
+
+ // Add 1 for the next page, unless it's the last page
+ const iNext = index === slugLut.length ? 0 : index + 1
+
+ // Subtract 1 for the previous page, unless it's the first page
+ const iPrev = index === 0 ? slugLut.length - 1 : index - 1
+
+ // Get the next page from the siteNav object
+ const next = get(siteNav, slugLut[iNext].split('/'))
+
+ // Get the previous page from the siteNav object
+ const prev = get(siteNav, slugLut[iPrev].split('/'))
+
+ // Return content
+ return (
+
+
+
+
+ )
+}
diff --git a/sites/shared/context/navigation-context.mjs b/sites/shared/context/navigation-context.mjs
index 0712e2b8018..701b8b60daf 100644
--- a/sites/shared/context/navigation-context.mjs
+++ b/sites/shared/context/navigation-context.mjs
@@ -66,7 +66,7 @@ export const NavigationContextProvider = ({ children }) => {
})
const [extraPages, setExtraPages] = useState([])
- const siteNav = useNavigation({ path: value.path, locale: value.locale }, extraPages)
+ const { siteNav } = useNavigation({ path: value.path, locale: value.locale }, extraPages)
const navState = buildNavState(value, siteNav)
const addPages = (extra) => {
diff --git a/sites/shared/hooks/use-navigation-helpers.mjs b/sites/shared/hooks/use-navigation-helpers.mjs
new file mode 100644
index 00000000000..143515f57d2
--- /dev/null
+++ b/sites/shared/hooks/use-navigation-helpers.mjs
@@ -0,0 +1,36 @@
+import { pageHasChildren } from 'shared/utils.mjs'
+import orderBy from 'lodash.orderby'
+
+/*
+ * A method to recursively add the ordered slugs to the LUT
+ */
+const flattenOrderedChildPages = (nav) => {
+ const slugs = []
+ for (const page of orderBy(nav, ['o', 't'], ['asc', 'asc'])) {
+ if (page.s) {
+ slugs.push(page.s)
+ if (pageHasChildren(page)) slugs.push(...flattenOrderedChildPages(page))
+ }
+ }
+
+ return slugs
+}
+
+/*
+ * This builds the slugLut (slug look up table) which makes it trivial to
+ * build the PrevNext component as it builds a flat list of all pages in
+ * the order they are naturally presented to the reader. So if you have
+ * a page's slug, you merely need to look it up in the list and return the
+ * next entry (or previous)
+ */
+export const orderedSlugLut = (nav) => {
+ const slugs = []
+ for (const page of orderBy(nav, ['o', 't'], ['asc', 'asc'])) {
+ if (page.s) {
+ slugs.push(page.s)
+ if (pageHasChildren(page)) slugs.push(...flattenOrderedChildPages(page))
+ }
+ }
+
+ return slugs
+}
diff --git a/sites/shared/utils.mjs b/sites/shared/utils.mjs
index 80c06c596c7..4e501a9007e 100644
--- a/sites/shared/utils.mjs
+++ b/sites/shared/utils.mjs
@@ -304,3 +304,10 @@ export const hasRequiredMeasurements = (Design, measies = {}, DesignIsMeasuremen
return [missing.length === 0, missing]
}
+
+/*
+ * This expects a object from the nav tree and will filter out the know 1-char keys
+ * and then check if there are any left. If there are, those are child-pages.
+ */
+export const pageHasChildren = (page) =>
+ Object.keys(page).filter((key) => !['t', 's', 'o', 'b', 'h'].includes(key)).length > 0