danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
fix(@dpc-sdp/ripple-tide-publication): :alien: enable breadcrumb override from mapping
author
Jason Smith
date
(Mar 7, 2023, 4:52 PM +1100)
commit
6631c481
6631c481b17cff96d48275fd4bf4bc80d182c362
parent
7f81f67f
7f81f67f640651f61e15babc9751c0d54061e1bc
+62
-33
+17
-6
packages/nuxt-ripple/components/TideBreadcrumbs.vue
+17
-6
packages/nuxt-ripple/components/TideBreadcrumbs.vue
···
10
10
import { RplBreadcrumbs } from '#components'
11
11
import { computed, toRaw, unref } from 'vue'
12
12
import { getBreadcrumbs } from '#imports'
13
+
14
+
interface IRplBreadcrumbsItem {
15
+
text: string
16
+
url: string
17
+
}
18
+
13
19
interface Props {
14
20
siteMenu: any
21
+
items?: IRplBreadcrumbsItem[]
15
22
currentPath: string
16
23
currentPageTitle: string
17
24
}
18
25
19
-
const props = withDefaults(defineProps<Props>(), {})
26
+
const props = withDefaults(defineProps<Props>(), {
27
+
items: () => []
28
+
})
20
29
21
30
const breadcrumbs = computed(() => {
22
-
return getBreadcrumbs(
23
-
unref(props.currentPath),
24
-
unref(props.currentPageTitle),
25
-
toRaw(props.siteMenu)
26
-
)
31
+
return props.items.length > 0
32
+
? props.items
33
+
: getBreadcrumbs(
34
+
unref(props.currentPath),
35
+
unref(props.currentPageTitle),
36
+
toRaw(props.siteMenu)
37
+
)
27
38
})
28
39
</script>
+30
-9
packages/ripple-tide-publication/components/global/TidePublication.vue
+30
-9
packages/ripple-tide-publication/components/global/TidePublication.vue
···
1
1
<template>
2
-
<TideBaseLayout :site="site" :pageTitle="page.title" :pageDescription="page.description" :pageLanguage="page.lang"
3
-
:updatedDate="page.changed || page.created">
2
+
<TideBaseLayout
3
+
:site="site"
4
+
:pageTitle="page.title"
5
+
:pageDescription="page.description"
6
+
:pageLanguage="page.lang"
7
+
:updatedDate="page.changed || page.created"
8
+
>
4
9
<template #aboveHeader>
5
10
<slot name="aboveHeader"></slot>
6
11
</template>
···
8
13
<slot name="primaryNav"></slot>
9
14
</template>
10
15
<template #breadcrumbs>
11
-
<slot name="breadcrumbs"></slot>
16
+
<slot name="breadcrumbs">
17
+
<TideBreadcrumbs :items="page.breadcrumbs" />
18
+
</slot>
12
19
</template>
13
20
<template #aboveBody="{ hasBreadcrumbs }">
14
-
<TidePublicationHeader :header="page.header" :hasBreadcrumbs="hasBreadcrumbs"></TidePublicationHeader>
21
+
<TidePublicationHeader
22
+
:header="page.header"
23
+
:hasBreadcrumbs="hasBreadcrumbs"
24
+
></TidePublicationHeader>
15
25
</template>
16
26
<template #body>
17
-
<TideLandingPageInPageNavigation v-if="page.showInPageNav" :headingLevel="page.inPageNavHeadingLevel"
18
-
:components="page.bodyComponents" class="rpl-u-margin-b-9" />
19
-
<TidePublicationBody :details="page.details" :components="page.bodyComponents"></TidePublicationBody>
20
-
<TidePublicationChapters :chapters="page.chapters"></TidePublicationChapters>
27
+
<TideLandingPageInPageNavigation
28
+
v-if="page.showInPageNav"
29
+
:headingLevel="page.inPageNavHeadingLevel"
30
+
:components="page.bodyComponents"
31
+
class="rpl-u-margin-b-9"
32
+
/>
33
+
<TidePublicationBody
34
+
:details="page.details"
35
+
:components="page.bodyComponents"
36
+
></TidePublicationBody>
37
+
<TidePublicationChapters
38
+
:chapters="page.chapters"
39
+
></TidePublicationChapters>
21
40
</template>
22
41
<template #sidebar>
23
-
<TidePublicationSidebar :publication="page.publication"></TidePublicationSidebar>
42
+
<TidePublicationSidebar
43
+
:publication="page.publication"
44
+
></TidePublicationSidebar>
24
45
<slot name="sidebar"></slot>
25
46
</template>
26
47
<template #footer>
+3
-1
packages/ripple-tide-publication/components/global/TidePublicationPage.vue
+3
-1
packages/ripple-tide-publication/components/global/TidePublicationPage.vue
···
13
13
<slot name="primaryNav"></slot>
14
14
</template>
15
15
<template #breadcrumbs>
16
-
<slot name="breadcrumbs"></slot>
16
+
<slot name="breadcrumbs">
17
+
<TideBreadcrumbs :items="page.breadcrumbs" />
18
+
</slot>
17
19
</template>
18
20
<template #aboveBody="{ hasBreadcrumbs }">
19
21
<TidePublicationHeader
+8
-12
packages/ripple-tide-publication/mapping/publication-page.ts
+8
-12
packages/ripple-tide-publication/mapping/publication-page.ts
···
26
26
title: 'title',
27
27
summary: 'field_landing_page_intro_text'
28
28
},
29
-
breadcrumbs: (src: string) => {
30
-
return {
31
-
items: [
32
-
{ label: 'Home', url: '/' },
33
-
{
34
-
label: getField(src, 'publication_navigation_root.meta.title'),
35
-
url: getField(src, 'publication_navigation_root.meta.url')
36
-
},
37
-
{ label: getField(src, 'title') }
38
-
]
39
-
}
40
-
},
29
+
breadcrumbs: (src: string) => [
30
+
{ text: 'Home', url: '/' },
31
+
{
32
+
text: getField(src, 'publication_navigation_root.meta.title'),
33
+
url: getField(src, 'publication_navigation_root.meta.url')
34
+
},
35
+
{ text: getField(src, 'title') }
36
+
],
41
37
bodyComponents: async (src, tidePageApi) => {
42
38
return await tidePageApi.getDynamicPageComponents(
43
39
src,
+4
-5
packages/ripple-tide-publication/mapping/publication.ts
+4
-5
packages/ripple-tide-publication/mapping/publication.ts
···
39
39
}
40
40
return 'h2'
41
41
},
42
-
breadcrumbs: (src: string) => {
43
-
return {
44
-
items: [{ label: 'Home', url: '/' }, { label: getField(src, 'title') }]
45
-
}
46
-
},
42
+
breadcrumbs: (src: string) => [
43
+
{ text: 'Home', url: '/' },
44
+
{ text: getField(src, 'title') }
45
+
],
47
46
details: {
48
47
author: (src: any) =>
49
48
src.field_publication_authors.map((x: any) => x.name).join(', '),