fix: terminal page meta tags and title

Author: ukorvl

.github/copilot-instructions.md

@@ -37,3 +37,4 @@ The repository contains library code and example usage.
 - Write maintainable, self-documenting code
 - Follow security best practices
 - Ensure proper type coverage
+- Avoid default exports unless absolutely necessary

examples/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lightweight-charts-react-components-examples",
   "version": "0.0.1",
-  "description": "Examples for Lightweight Charts React Components",
+  "description": "Examples of Lightweight Charts React Components library usage in React.js application.",
   "homepage": "https://ukorvl.github.io/lightweight-charts-react-components",
   "private": true,
   "type": "module",
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.4.1",
     "vite-plugin-bundlesize": "^0.2.0",
+    "vite-plugin-capo": "^1.0.3",
     "vite-plugin-checker": "^0.9.3",
     "vite-plugin-circular-dependency": "^0.5.0",
     "vite-plugin-compression": "^0.5.1",

examples/src/common/ControlledMeta.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+
+type PropsWithName = {
+  name: string;
+  property?: never;
+};
+
+type PropsWithProperty = {
+  name?: never;
+  property: string;
+};
+
+type ControlledMetaProps = {
+  content: string;
+} & (PropsWithName | PropsWithProperty);
+
+const ControlledMeta = ({ name, property, content }: ControlledMetaProps) => {
+  const initialMeta = useRef<HTMLMetaElement | null>(null);
+  const selector = name
+    ? `meta[name="${name}"]`
+    : property
+      ? `meta[property="${property}"]`
+      : null;
+
+  useEffect(() => {
+    if (!selector) {
+      throw new Error("Either 'name' or 'property' must be provided for ControlledMeta.");
+    }
+
+    let meta = document.head.querySelector<HTMLMetaElement>(selector);
+
+    if (meta) {
+      initialMeta.current = meta.cloneNode(true) as HTMLMetaElement;
+    } else {
+      meta = document.createElement("meta");
+
+      if (name) meta.setAttribute("name", name);
+      if (property) meta.setAttribute("property", property);
+
+      document.head.appendChild(meta);
+    }
+
+    meta.setAttribute("content", content);
+
+    return () => {
+      const completelyRemoveMeta = () =>
+        meta && meta.parentNode === document.head && document.head.removeChild(meta);
+
+      if (initialMeta.current) {
+        const existingMeta = document.head.querySelector<HTMLMetaElement>(selector);
+
+        if (existingMeta) {
+          existingMeta.setAttribute("content", initialMeta.current.content);
+        } else {
+          completelyRemoveMeta();
+        }
+      } else {
+        completelyRemoveMeta();
+      }
+    };
+  }, [name, property]);
+
+  return null;
+};
+
+export { ControlledMeta };

examples/src/common/ControlledTitle.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+type ControlledTitleProps = {
+  title?: string;
+};
+
+const ControlledTitle = ({ title }: ControlledTitleProps) => {
+  const initialTitle = useRef(document.title);
+
+  useEffect(() => {
+    const initialPageTitle = initialTitle.current;
+
+    if (title) {
+      document.title = title;
+    } else {
+      document.title = initialPageTitle;
+    }
+
+    return () => {
+      if (initialPageTitle) {
+        document.title = initialPageTitle;
+      }
+    };
+  }, [title]);
+
+  return null;
+};
+
+export { ControlledTitle };

examples/src/pages/Terminal.tsx

@@ -1,4 +1,43 @@
 import { Stack } from "@mui/material";
+import { ControlledMeta } from "@/common/ControlledMeta";
+import { ControlledTitle } from "@/common/ControlledTitle";
+import { homepage } from "../../package.json";
+
+const { VITE_APP_DEFAULT_TITLE } = import.meta.env;
+
+const PageMeta = () => {
+  return (
+    <>
+      <ControlledTitle title={`${VITE_APP_DEFAULT_TITLE} - Terminal`} />
+      <ControlledMeta
+        name="description"
+        content="Trading terminal built with lightweight-charts-react-components for visualizing financial data in a React.js application."
+      />
+      <ControlledMeta
+        name="keywords"
+        content="terminal, lightweight-charts, react, examples, charts, visualization, react components, financial data"
+      />
+      <ControlledMeta
+        property="og:title"
+        content="Lightweight Charts React Components - Terminal"
+      />
+      <ControlledMeta
+        property="og:description"
+        content="Explore the terminal example built with lightweight-charts-react-components for visualizing financial data in a React.js application."
+      />
+      <ControlledMeta property="og:url" content={`${homepage}/terminal`} />
+      <ControlledMeta
+        name="twitter:title"
+        content="Lightweight Charts React Components - Terminal"
+      />
+      <ControlledMeta
+        name="twitter:description"
+        content="Explore the terminal example built with lightweight-charts-react-components for visualizing financial data in a React.js application."
+      />
+      <ControlledMeta name="twitter:url" content={`${homepage}/terminal`} />
+    </>
+  );
+};
 
 const Terminal = () => {
   return (
@@ -11,6 +50,7 @@ const Terminal = () => {
         marginBottom: 12,
       }}
     >
+      <PageMeta />
       Terminal
     </Stack>
   );

examples/vite.config.ts

@@ -2,6 +2,7 @@ import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { loadEnv } from "vite";
 import bundlesize from "vite-plugin-bundlesize";
+import { capo } from "vite-plugin-capo";
 import checker from "vite-plugin-checker";
 import circleDependency from "vite-plugin-circular-dependency";
 import viteCompression from "vite-plugin-compression";
@@ -77,43 +78,43 @@ export const htmlConfig: Options = {
       content: `${homepage}/og.jpg`,
     },
     {
-      name: "og:title",
+      property: "og:title",
       content: env.VITE_APP_DEFAULT_TITLE,
     },
     {
-      name: "og:description",
+      property: "og:description",
       content: description,
     },
     {
-      name: "og:url",
+      property: "og:url",
       content: homepage,
     },
     {
-      name: "og:image",
+      property: "og:image",
       content: `${homepage}/og.jpg`,
     },
     {
-      name: "og:type",
+      property: "og:type",
       content: "website",
     },
     {
-      name: "og:image:alt",
+      property: "og:image:alt",
       content: env.VITE_APP_DEFAULT_TITLE,
     },
     {
-      name: "og:locale",
+      property: "og:locale",
       content: "en_US",
     },
     {
-      name: "og:site_name",
+      property: "og:site_name",
       content: env.VITE_APP_DEFAULT_TITLE,
     },
     {
-      name: "og:image:width",
+      property: "og:image:width",
       content: "1200",
     },
     {
-      name: "og:image:height",
+      property: "og:image:height",
       content: "630",
     },
     {
@@ -242,6 +243,7 @@ const getUserConfig: UserConfigFn = ({ command }) => ({
           }),
         ]
       : []),
+    capo(),
   ],
   build: {
     emptyOutDir: true,