khairul169/code-share
1
0
Fork 0
mirror of https://github.com/khairul169/code-share.git synced 2025-04-29 17:19:37 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update metadata

Browse Source
This commit is contained in:
Khairul Hidayat 2024-03-03 18:55:51 +07:00
parent 3c532200b9
commit 6919e7126b
6 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/consts.ts
View File

@ -1,2 +1,4 @@
export const BASE_URL = export const BASE_URL =
typeof window !== "undefined" ? location.protocol + "//" + location.host : ""; typeof window !== "undefined"
? location.protocol + "//" + location.host
: process.env.BASE_URL || "";

4
pages/project/@slug/+data.ts
View File

@ -1,6 +1,7 @@
import { PageContext } from "vike/types"; import { PageContext } from "vike/types";
import { render } from "vike/abort"; import { render } from "vike/abort";
import trpcServer from "~/server/api/trpc/trpc"; import trpcServer from "~/server/api/trpc/trpc";
import { BASE_URL } from "~/lib/consts";
export const data = async (ctx: PageContext) => { export const data = async (ctx: PageContext) => {
const trpc = await trpcServer(ctx); const trpc = await trpcServer(ctx);
@ -20,6 +21,9 @@ export const data = async (ctx: PageContext) => {
return { return {
title: project.title, title: project.title,
description: `Check ${project.title} on CodeShare!`, description: `Check ${project.title} on CodeShare!`,
ogImage: project.thumbnail
? BASE_URL + "/api/thumbnail" + project.thumbnail
: undefined,
project, project,
files, files,
initialFiles, initialFiles,

5
renderer/+onRenderClient.tsx
View File

@ -1,5 +1,5 @@
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { getPageMetadata } from "./utils"; import { getPageTitle } from "./utils";
import type { OnRenderClientAsync } from "vike/types"; import type { OnRenderClientAsync } from "vike/types";
import Layout from "./app"; import Layout from "./app";
@ -33,6 +33,5 @@ export const onRenderClient: OnRenderClientAsync = async (
root.render(page); root.render(page);
} }
const meta = getPageMetadata(pageContext); document.title = getPageTitle(pageContext);
document.title = meta.title;
}; };

5
renderer/+onRenderHtml.tsx
View File

@ -21,7 +21,7 @@ export const onRenderHtml: OnRenderHtmlAsync = async (
); );
// See https://vike.dev/head // See https://vike.dev/head
const meta = getPageMetadata(pageContext); const metadata = getPageMetadata(pageContext);
const documentHtml = escapeInject`<!DOCTYPE html> const documentHtml = escapeInject`<!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en" class="dark">
@ -29,8 +29,7 @@ export const onRenderHtml: OnRenderHtmlAsync = async (
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="${meta.description}" /> ${dangerouslySkipEscape(metadata)}
<title>${meta.title}</title>
</head> </head>
<body> <body>
<div id="react-root">${dangerouslySkipEscape(page)}</div> <div id="react-root">${dangerouslySkipEscape(page)}</div>

1
renderer/types.ts
View File

@ -8,6 +8,7 @@ declare global {
data?: { data?: {
title?: string; title?: string;
description?: string; description?: string;
ogImage?: string;
}; };
config: { config: {
title?: string; title?: string;

31
renderer/utils.ts
View File

@ -1,13 +1,40 @@
import type { PageContext } from "vike/types"; import type { PageContext } from "vike/types";
import { BASE_URL } from "~/lib/consts";
export function getPageMetadata(pageContext: PageContext) { export function getPageTitle(pageContext: PageContext) {
let title = pageContext.data?.title || pageContext.config.title; let title = pageContext.data?.title || pageContext.config.title;
title = title ? `${title} - CodeShare` : "Welcome to CodeShare"; title = title ? `${title} - CodeShare` : "Welcome to CodeShare";
return title;
}
export function getPageMetadata(pageContext: PageContext) {
const canonicalUrl = BASE_URL + pageContext.req.url;
const title = getPageTitle(pageContext);
const description = const description =
pageContext.data?.description || pageContext.data?.description ||
pageContext.config.description || pageContext.config.description ||
"Share your frontend result with everyone"; "Share your frontend result with everyone";
const ogImage = pageContext.data?.ogImage;
return { title, description }; return `
<meta name="description" content="${description}" />
<title>${title}</title>
<link rel="canonical" href="${canonicalUrl}" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="${canonicalUrl}" />
<meta property="og:title" content="${title}" />
<meta property="og:description" content="${description}" />
${ogImage ? `<meta property="og:image" content="${ogImage}" />` : ""}
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="${canonicalUrl}" />
<meta property="twitter:title" content="${title}" />
<meta property="twitter:description" content="${description}" />
${ogImage ? `<meta property="twitter:image" content="${ogImage}" />` : ""}
`.trim();
} }