Skip to content

Commit

Permalink
feat(adapter-*): update page snippets with meta image (#1526)
Browse files Browse the repository at this point in the history 
Co-authored-by: lihbr <lihbr@users.noreply.github.com>
  • Loading branch information
@lihbr
lihbr and lihbr authored Jan 7, 2025
1 parent b2ce2b8 commit 14beaf1
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 32 deletions.
68 changes: 60 additions & 8 deletions packages/adapter-next/src/hooks/documentation-read.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
appFileContent = stripIndent`
import { Metadata } from "next";
import { notFound } from "next/navigation";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
Expand Down Expand Up @@ -65,6 +66,11 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title) ? page.data.meta_title : undefined,
description: isFilled.keyText(page.data.meta_description) ? page.data.meta_description : undefined,
images: isFilled.image(page.data.meta_image) ? [asImageSrc(page.data.meta_image)] : undefined,
},
};
}
Expand All @@ -80,7 +86,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
pagesFileContent = stripIndent`
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import Head from "next/head";
import { isFilled, asLink } from "@prismicio/client";
import { isFilled, asLink, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { components } from "@/slices";
Expand All @@ -95,8 +101,15 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property="og:title" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name="description" content={page.data.meta_description} />
<>
<meta name="description" content={page.data.meta_description} />
<meta property="og:description" content={page.data.meta_description} />
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta property="og:image" content={asImageSrc(page.data.meta_image)} />
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand Down Expand Up @@ -135,6 +148,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
} else {
appFileContent = stripIndent`
import { Metadata } from "next";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
Expand All @@ -154,13 +168,18 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title) ? page.data.meta_title : undefined,
description: isFilled.keyText(page.data.meta_description) ? page.data.meta_description : undefined,
images: isFilled.image(page.data.meta_image) ? [asImageSrc(page.data.meta_image)] : undefined,
},
};
}
`;
pagesFileContent = stripIndent`
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import Head from "next/head";
import { isFilled } from "@prismicio/client";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { components } from "@/slices";
Expand All @@ -173,8 +192,15 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property="og:title" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name="description" content={page.data.meta_description} />
<>
<meta name="description" content={page.data.meta_description} />
<meta property="og:description" content={page.data.meta_description} />
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta property="og:image" content={asImageSrc(page.data.meta_image)} />
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand All @@ -200,6 +226,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
if (model.repeatable) {
appFileContent = stripIndent`
import { notFound } from "next/navigation";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
Expand All @@ -226,6 +253,11 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title) ? page.data.meta_title : undefined,
description: isFilled.keyText(page.data.meta_description) ? page.data.meta_description : undefined,
images: isFilled.image(page.data.meta_image) ? [asImageSrc(page.data.meta_image)] : undefined,
},
};
}
Expand All @@ -240,7 +272,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
`;
pagesFileContent = stripIndent`
import Head from "next/head";
import { isFilled, asLink } from "@prismicio/client";
import { isFilled, asLink, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { components } from "@/slices";
Expand All @@ -251,8 +283,15 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property="og:title" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name="description" content={page.data.meta_description} />
<>
<meta name="description" content={page.data.meta_description} />
<meta property="og:description" content={page.data.meta_description} />
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta property="og:image" content={asImageSrc(page.data.meta_image)} />
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand Down Expand Up @@ -290,6 +329,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
`;
} else {
appFileContent = stripIndent`
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
Expand All @@ -309,12 +349,17 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title) ? page.data.meta_title : undefined,
description: isFilled.keyText(page.data.meta_description) ? page.data.meta_description : undefined,
images: isFilled.image(page.data.meta_image) ? [asImageSrc(page.data.meta_image)] : undefined,
},
};
}
`;
pagesFileContent = stripIndent`
import Head from "next/head";
import { isFilled } from "@prismicio/client";
import { isFilled, asImageSrc } from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { components } from "@/slices";
Expand All @@ -325,8 +370,15 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property="og:title" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name="description" content={page.data.meta_description} />
<>
<meta name="description" content={page.data.meta_description} />
<meta property="og:description" content={page.data.meta_description} />
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta property="og:image" content={asImageSrc(page.data.meta_image)} />
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand Down
58 changes: 54 additions & 4 deletions packages/adapter-next/test/__snapshots__/plugin-documentation-read.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Paste in this code:
~~~js [app/[uid]/page.js]
import { notFound } from \\"next/navigation\\";
import { isFilled, asImageSrc } from \\"@prismicio/client\\";
import { SliceZone } from \\"@prismicio/react\\";
import { createClient } from \\"@/prismicio\\";
Expand All @@ -31,6 +32,17 @@ export async function generateMetadata({ params }) {
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title)
? page.data.meta_title
: undefined,
description: isFilled.keyText(page.data.meta_description)
? page.data.meta_description
: undefined,
images: isFilled.image(page.data.meta_image)
? [asImageSrc(page.data.meta_image)]
: undefined,
},
};
}
Expand Down Expand Up @@ -60,6 +72,7 @@ Paste in this code:
~~~tsx [app/[uid]/page.tsx]
import { Metadata } from \\"next\\";
import { notFound } from \\"next/navigation\\";
import { isFilled, asImageSrc } from \\"@prismicio/client\\";
import { SliceZone } from \\"@prismicio/react\\";
import { createClient } from \\"@/prismicio\\";
Expand Down Expand Up @@ -87,6 +100,17 @@ export async function generateMetadata({
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
title: isFilled.keyText(page.data.meta_title)
? page.data.meta_title
: undefined,
description: isFilled.keyText(page.data.meta_description)
? page.data.meta_description
: undefined,
images: isFilled.image(page.data.meta_image)
? [asImageSrc(page.data.meta_image)]
: undefined,
},
};
}
Expand All @@ -113,7 +137,7 @@ Add a new route by creating a \`pages/[uid].js\` file. (If the route should be n
~~~js [pages/[uid].js]
import Head from \\"next/head\\";
import { isFilled, asLink } from \\"@prismicio/client\\";
import { isFilled, asLink, asImageSrc } from \\"@prismicio/client\\";
import { SliceZone } from \\"@prismicio/react\\";
import { components } from \\"@/slices\\";
Expand All @@ -124,8 +148,21 @@ export default function Page({ page }) {
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property=\\"og:title\\" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name=\\"description\\" content={page.data.meta_description} />
<>
<meta name=\\"description\\" content={page.data.meta_description} />
<meta
property=\\"og:description\\"
content={page.data.meta_description}
/>
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta
property=\\"og:image\\"
content={asImageSrc(page.data.meta_image)}
/>
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand Down Expand Up @@ -173,7 +210,7 @@ Add a new route by creating a \`pages/[uid].tsx\` file. (If the route should be
~~~tsx [pages/[uid].tsx]
import { GetStaticPropsContext, InferGetStaticPropsType } from \\"next\\";
import Head from \\"next/head\\";
import { isFilled, asLink } from \\"@prismicio/client\\";
import { isFilled, asLink, asImageSrc } from \\"@prismicio/client\\";
import { SliceZone } from \\"@prismicio/react\\";
import { components } from \\"@/slices\\";
Expand All @@ -188,8 +225,21 @@ export default function Page({
<>
<Head>
<title>{page.data.meta_title}</title>
<meta property=\\"og:title\\" content={page.data.meta_title} />
{isFilled.keyText(page.data.meta_description) ? (
<meta name=\\"description\\" content={page.data.meta_description} />
<>
<meta name=\\"description\\" content={page.data.meta_description} />
<meta
property=\\"og:description\\"
content={page.data.meta_description}
/>
</>
) : null}
{isFilled.image(page.data.meta_image) ? (
<meta
property=\\"og:image\\"
content={asImageSrc(page.data.meta_image)}
/>
) : null}
</Head>
<SliceZone slices={page.data.slices} components={components} />
Expand Down
38 changes: 19 additions & 19 deletions packages/adapter-nuxt/src/hooks/documentation-read.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
})
);
useHead({
useSeoMeta({
title: page.value?.data.meta_title,
meta: [{
name: "description",
content: page.value?.data.meta_description,
}],
ogTitle: page.value?.data.meta_title,
description: page.value?.data.meta_description,
ogDescription: page.value?.data.meta_description,
ogImage: computed(() => prismic.asImageSrc(page.value?.data.meta_image)),
});
</script>
Expand All @@ -59,20 +59,20 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
} else {
fileContent = stripIndent`
<script ${scriptAttributes.join(" ")}>
import { components } from "~/slices";
const prismic = usePrismic();
const { data: page } = useAsyncData("[${model.id}]", () =>
prismic.client.getSingle("${model.id}")
);
useHead({
title: page.value?.data.meta_title,
meta: [{
name: "description",
content: page.value?.data.meta_description,
}],
});
import { components } from "~/slices";
const prismic = usePrismic();
const { data: page } = useAsyncData("[${model.id}]", () =>
prismic.client.getSingle("${model.id}")
);
useSeoMeta({
title: page.value?.data.meta_title,
ogTitle: page.value?.data.meta_title,
description: page.value?.data.meta_description,
ogDescription: page.value?.data.meta_description,
ogImage: computed(() => prismic.asImageSrc(page.value?.data.meta_image)),
});
</script>
<template>
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-nuxt/src/hooks/slice-create.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const createComponentFile = async ({
} else if (isTypeScriptProject) {
contents = stripIndent`
<script setup lang="ts">
import { type Content } from "@prismicio/client";
import type { Content } from "@prismicio/client";
// The array passed to \`getSliceComponentProps\` is purely optional.
// Consider it as a visual hint for you when templating your slice.
Expand Down
13 changes: 13 additions & 0 deletions packages/adapter-sveltekit/src/hooks/project-init.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,10 +329,23 @@ const createRootLayoutFile = async ({

const contents = source`
<script>
import { isFilled, asImageSrc } from '@prismicio/client';
import { PrismicPreview } from '@prismicio/svelte/kit';
import { page } from '$app/state';
import { repositoryName } from '$lib/prismicio';
</script>
<svelte:head>
<title>{page.data.page?.data.meta_title}</title>
<meta property="og:title" content={page.data.page?.data.meta_title} />
{#if isFilled.keyText(page.data.page?.data.meta_description)}
<meta name="description" content={page.data.page.data.meta_description} />
<meta property="og:description" content={page.data.page.data.meta_description} />
{/if}
{#if isFilled.image(page.data.page?.data.meta_image)}
<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
{/if}
</svelte:head>
<slot />
<PrismicPreview {repositoryName} />
`;
Expand Down
Loading

0 comments on commit 14beaf1

Please sign in to comment.