Add structured author data to articles.

zemn-me · Nov 27, 2024 · dfa1ef3 · dfa1ef3
1 parent f5f9ae9
commit dfa1ef3
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 114 deletions.
diff --git a/package.json b/package.json
@@ -118,6 +118,7 @@
 		"@types/seedrandom": "3.0.8",
 		"@types/selenium-webdriver": "4.1.22",
 		"@types/serve-handler": "6.1.4",
+		"@types/trusted-types": "^2.0.7",
 		"base64-js": "1.5.1",
 		"csstype": "3.1.3",
 		"d3-array": "3.2.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/project/zemn.me/app/BUILD.bazel b/project/zemn.me/app/BUILD.bazel
@@ -12,6 +12,7 @@ ts_project(
         "//:node_modules/@types/d3-array",
         "//:node_modules/@types/d3-scale",
         "//:node_modules/@types/react",
+        "//:node_modules/@types/trusted-types",
         "//:node_modules/d3-array",
         "//:node_modules/d3-scale",
         "//:node_modules/immutable",

diff --git a/project/zemn.me/app/layout.tsx b/project/zemn.me/app/layout.tsx
@@ -6,6 +6,7 @@ import { Metadata } from 'next/types';
 import { ReactNode } from 'react';
 
 import { Providers } from '#root/project/zemn.me/app/providers.js';
+import { TrustedTypesPolicy } from '#root/project/zemn.me/app/useTrustedTypesPolicy.js';
 import { Bio } from '#root/project/zemn.me/bio/index.js';
 import Glade from '#root/project/zemn.me/components/Glade/glade.js';
 import { HeaderTagsAppRouter } from '#root/ts/next.js/index.js';
@@ -24,6 +25,8 @@ const lora = Lora({
 
 export function RootLayout({ children }: Props) {
 	return (
+		<>
+		<TrustedTypesPolicy/>
 		<Providers>
 			<html>
 				<head>
@@ -42,6 +45,7 @@ export function RootLayout({ children }: Props) {
 				</body>
 			</html>
 		</Providers>
+		</>
 	);
 }
 

diff --git a/project/zemn.me/app/useTrustedTypesPolicy.ts b/project/zemn.me/app/useTrustedTypesPolicy.ts
@@ -0,0 +1,20 @@
+"use client";
+import { useEffect } from "react";
+
+
+function useTrustedTypesPolicy() {
+	useEffect(() => {
+		if (!window.trustedTypes) return;
+
+		window.trustedTypes.createPolicy("default", {
+			createHTML: v => v,
+		});
+
+		return;
+	})
+}
+
+export function TrustedTypesPolicy() {
+	useTrustedTypesPolicy();
+	return null;
+}
diff --git a/project/zemn.me/components/Article/BUILD.bazel b/project/zemn.me/components/Article/BUILD.bazel
@@ -10,7 +10,9 @@ ts_project(
         "//:node_modules/@types/node",
         "//:node_modules/@types/react",
         "//:node_modules/@types/react-dom",
+        "//:node_modules/@types/trusted-types",
         "//:node_modules/next",
+        "//project/zemn.me/bio",
         "//project/zemn.me/components",
         "//project/zemn.me/components/Link",
         "//ts/react/lang",

diff --git a/project/zemn.me/components/Article/article.tsx b/project/zemn.me/components/Article/article.tsx
@@ -1,6 +1,8 @@
 "use client";
 import { useState } from 'react';
+import type { Article, WithContext } from 'schema-dts';
 
+import { schema } from '#root/project/zemn.me/bio/schema.js';
 import style from '#root/project/zemn.me/components/Article/style.module.css';
 import { tocSegment } from '#root/project/zemn.me/components/Article/toc_context.js'
 import { ArticleProps } from '#root/project/zemn.me/components/Article/types/article_types.js';
@@ -18,6 +20,23 @@ export function Article(props: ArticleProps) {
 			<tocSegment.Provider value={toc}>
 			{props.children}
 			</tocSegment.Provider>
+			<script
+				dangerouslySetInnerHTML={{ __html:
+					// below is needed because window can be
+					// undefined in next prerender.
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+						(globalThis?.window?.trustedTypes?.defaultPolicy?.createHTML ?? (v => v))(
+						JSON.stringify({
+						'@context': 'https://schema.org',
+						'@type': 'Article',
+						'author': [
+							schema
+						],
+						headline: props.title,
+						datePublished: props.date? nativeDateFromUnknownSimpleDate.parse(props.date).toISOString(): undefined
+				} satisfies WithContext<Article>)) }}
+				type="application/ld+json"
+			/>
 		</article>
 	</div>
 }

diff --git a/ts/next.js/index.tsx b/ts/next.js/index.tsx
@@ -17,7 +17,8 @@ type directives =
 	| 'default-src'
 	| 'media-src'
 	| 'font-src'
-	| 'require-trusted-types-for';
+	| 'require-trusted-types-for'
+	| 'trusted-types';
 
 export type CspPolicy = Partial<Record<directives, sourceList>>;
 
@@ -48,7 +49,10 @@ export const DefaultContentSecurityPolicy: CspPolicy = {
 	]),
 	...(process.env.NODE_ENV == 'development'
 		? {}
-		: { 'require-trusted-types-for': new Set(["'script'"]) }),
+		: {
+			'require-trusted-types-for': new Set(["'script'"]),
+			'trusted-types': [ 'default' ]
+		}),
 	'script-src': new Set([
 		"'self'",
 		"'unsafe-inline'", // https://github.com/vercel/next.js/discussions/54907#discussioncomment-8178117