vitreum headtags (temporary change)

client/homebrew/pages/editPage/editPage.jsx

@@ -26,7 +26,7 @@ import RecentNavItems from './client/homebrew/navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                          from 'vitreum/headtags';
+import { Meta }   from './vitreum/headtags.js';
 import { md5 }                           from 'hash-wasm';
 import { gzipSync, strToU8 }             from 'fflate';
 import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';

client/homebrew/pages/homePage/homePage.jsx

@@ -27,7 +27,7 @@ const { both: RecentNavItem } = RecentNavItems;
 
 
 // Page specific imports
-import { Meta }   from 'vitreum/headtags';
+import { Meta }   from './vitreum/headtags.js';
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';

client/homebrew/pages/newPage/newPage.jsx

@@ -26,7 +26,7 @@ import RecentNavItems from './client/homebrew/navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                  from 'vitreum/headtags';
+import { Meta }   from './vitreum/headtags.js';
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,6 +1,6 @@
 import './sharePage.less';
 import React, { useState, useEffect, useCallback } from 'react';
-import { Meta }                          from 'vitreum/headtags';
+import { Meta }   from './vitreum/headtags.js';
 
 import Nav from './client/homebrew/navbar/nav.jsx';
 import Navbar from './client/homebrew/navbar/navbar.jsx';

vitreum/headtags.js

@@ -0,0 +1,82 @@
+import React, { useEffect } from "react";
+import injectTag from "./injectTag.js";
+
+const obj2props = (obj) =>
+	Object.entries(obj)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(" ");
+const toStr = (chld) => (Array.isArray(chld) ? chld.join("") : chld);
+const onServer = typeof window === "undefined";
+
+let NamedTags = {};
+let UnnamedTags = [];
+
+export const HeadComponents = {
+	Title({ children }) {
+		if (onServer) NamedTags.title = `<title>${toStr(children)}</title>`;
+		useEffect(() => {
+			document.title = toStr(children);
+		}, [children]);
+		return null;
+	},
+	Favicon({ type = "image/png", href = "", rel = "icon", id = "favicon" }) {
+		if (onServer) NamedTags.favicon = `<link rel='shortcut icon' type="${type}" id="${id}" href="${href}" />`;
+		useEffect(() => {
+			document.getElementById(id).href = href;
+		}, [id, href]);
+		return null;
+	},
+	Description({ children }) {
+		if (onServer) NamedTags.description = `<meta name='description' content='${toStr(children)}' />`;
+		return null;
+	},
+	Noscript({ children }) {
+		if (onServer) UnnamedTags.push(`<noscript>${toStr(children)}</noscript>`);
+		return null;
+	},
+	Script({ children = [], ...props }) {
+		if (onServer) {
+			UnnamedTags.push(
+				children.length
+					? `<script ${obj2props(props)}>${toStr(children)}</script>`
+					: `<script ${obj2props(props)} />`,
+			);
+		}
+		return null;
+	},
+	Meta(props) {
+		let tag = `<meta ${obj2props(props)} />`;
+		props.property || props.name ? (NamedTags[props.property || props.name] = tag) : UnnamedTags.push(tag);
+		useEffect(() => {
+			document
+				.getElementsByTagName("head")[0]
+				.insertAdjacentHTML("beforeend", Object.values(NamedTags).join("\n"));
+		}, [NamedTags]);
+		return null;
+	},
+	Style({ children, type = "text/css" }) {
+		if (onServer) UnnamedTags.push(`<style type="${type}">${toStr(children)}</style>`);
+		return null;
+	},
+};
+
+export const Inject = ({ tag, children, ...props }) => {
+	useEffect(() => {
+		injectTag(tag, props, children);
+	}, []);
+	return null;
+};
+
+export const generate = () => Object.values(NamedTags).concat(UnnamedTags).join("\n");
+
+export const flush = () => {
+	NamedTags = {};
+	UnnamedTags = [];
+};
+
+export default {
+	Inject,
+	...HeadComponents,
+	generate,
+	flush,
+};

vitreum/injectTag.js

@@ -0,0 +1,8 @@
+const injectTag = (tag, props, children) => {
+  const injectNode = document.createElement(tag);
+  Object.entries(props).forEach(([key, val]) => injectNode[key] = val);
+  if (children) injectNode.appendChild(document.createTextNode(children));
+  document.getElementsByTagName('head')[0].appendChild(injectNode);
+};
+
+export default injectTag;