slices.network
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
add new frontend client using graphql and relay, get graphql schema at feature parity with the xrpc endpoints
1import { useEffect } from "react";
2
3interface PageMetaOptions {
4 title?: string;
5 description?: string;
6 ogImage?: string;
7}
8
9export function usePageMeta({
10 title = "Slices",
11 description = "AT Protocol data management platform",
12 ogImage,
13}: PageMetaOptions = {}) {
14 useEffect(() => {
15 const fullTitle = title === "Slices" ? title : `${title} — Slices`;
16 document.title = fullTitle;
17
18 // Update meta description
19 let descMeta = document.querySelector('meta[name="description"]');
20 if (!descMeta) {
21 descMeta = document.createElement("meta");
22 descMeta.setAttribute("name", "description");
23 document.head.appendChild(descMeta);
24 }
25 descMeta.setAttribute("content", description);
26
27 // Update Open Graph tags
28 const updateMetaTag = (property: string, content: string) => {
29 let meta = document.querySelector(`meta[property="${property}"]`);
30 if (!meta) {
31 meta = document.createElement("meta");
32 meta.setAttribute("property", property);
33 document.head.appendChild(meta);
34 }
35 meta.setAttribute("content", content);
36 };
37
38 updateMetaTag("og:type", "website");
39 updateMetaTag("og:title", fullTitle);
40 updateMetaTag("og:description", description);
41
42 if (ogImage) {
43 updateMetaTag("og:image", ogImage);
44 }
45
46 updateMetaTag("twitter:card", "summary_large_image");
47 updateMetaTag("twitter:title", fullTitle);
48 updateMetaTag("twitter:description", description);
49
50 if (ogImage) {
51 updateMetaTag("twitter:image", ogImage);
52 }
53 }, [title, description, ogImage]);
54}