example/app.tsx

@@ -1,12 +1,30 @@
 import React from "react";
 import * as Iso from "@eno/iso";
 
+/*
+const delay =(inMS:number)=>
+{
+    return new Promise((accept)=>
+    {
+        setTimeout(()=>
+        {
+            accept({default:()=>
+            {
+                return <h1>loooooool</h1>;
+            }});
+        }, inMS);
+    });
+}
+const LOL = React.lazy(()=>delay(3000));
+*/
+
 const Comp = React.lazy(()=>import("./deep/component.tsx"));
 
+
 export default ()=>
 {
     return <div class="p-4 font-sans">
-        <Iso.Meta.Metas title="Main Page!"/>
+        <Iso.Meta.Metas title="Main Page!" description="its great"/>
         <nav class="p-4">
             <a class="text-red-500" href="/">Home</a>
             <a href="/about">About</a>
@@ -22,7 +40,7 @@ export default ()=>
                 <Iso.Switch>
                     <Iso.Case value="about-us">
                         <>
-                            <Iso.Meta.Metas title="About US"/>
+                            <Iso.Meta.Metas title="About US" concatListed=" | "/>
                             About us!
                         </>
                     </Iso.Case>

example/deno.jsonc

@@ -4,9 +4,9 @@
     {
         "react": "https://esm.sh/stable/preact@10.13.2/compat",
         "@eno/app": "./app.tsx",
-        "@eno/iso": "http://localhost:4507/lib/iso.tsx/"
+        "@eno/iso": "http://localhost:4507/lib/iso.tsx"
     },
     "tasks": {
-        "dev": "deno run -A --unstable --reload=http://localhost:4507/ --no-lock app.tsx"
+        "dev": "deno run -A --unstable --reload=http://localhost:4507/ --no-lock app.tsx --dev"
     }
 }

lib/iso.tsx

@@ -13,7 +13,7 @@ if(!window.innerWidth && !Deno.mainModule.endsWith("server.tsx"))
 }
 
 type MetasInputs = { [Property in MetaKeys]?: string };
-type MetasModeArgs = {concatListed?:boolean; dropUnlisted?:boolean};
+type MetasModeArgs = {concatListed?:string; dropUnlisted?:boolean};
 type MetasStackItem = MetasModeArgs&MetasInputs&{id:string, depth:number}
 type Meta = {title:string, description:string, keywords:string, image:string, canonical:string }
 type MetaKeys = keyof Meta;
@@ -33,15 +33,41 @@ export const Meta =
     {
         const binding = React.useState([] as MetasStackItem[]);
 
+        type MetaDOM = {description:NodeListOf<Element>, title:NodeListOf<Element>, image:NodeListOf<Element>, url:NodeListOf<Element>};
+
+        const refElements = React.useRef(null as null | MetaDOM);
+
+        React.useEffect(()=>
+        {
+            refElements.current = {
+                description:document.querySelectorAll(`head > meta[name$='description']`),
+                title:document.querySelectorAll(`head > meta[name$='title']`),
+                image:document.querySelectorAll(`head > meta[name$='image']`),
+                url:document.querySelectorAll(`head > link[rel='canonical']`)
+            };
+        }, []);
+
         React.useEffect(()=>{
             const stack = binding[0];
+
             const last = stack[stack.length-1];
             console.log("updating page title", stack);
-            document.title = last?.title||"";
+            if(last && refElements.current)
+            {
+                refElements.current.url.forEach(e=>e.setAttribute("content", last.canonical||""));
+
+                document.title = last.title||"";
+                refElements.current.title.forEach(e=>e.setAttribute("content", last.title||""));
+
+                refElements.current.image.forEach(e=>e.setAttribute("content", last.image||""));
+
+                refElements.current.description.forEach(e=>e.setAttribute("content", last.description||""));
+            }
+        
         })
         return <Meta.Context.Provider value={binding}>{children}</Meta.Context.Provider>;
     },
-    Metas({concatListed=false, dropUnlisted=false, ...props}:MetasModeArgs&MetasInputs):null
+    Metas({concatListed=undefined, dropUnlisted=false, ...props}:MetasModeArgs&MetasInputs):null
     {
         const id = React.useId();
         const [, metasSet] = React.useContext(Meta.Context);
@@ -56,10 +82,27 @@ export const Meta =
                 {
                     if(clone[i].depth <= depth)
                     {
-                        
                         break;
                     }
                 }
+                const previous = clone[i];
+                if(previous)
+                {
+                    Object.keys(Meta.Meta).forEach(key=>
+                    {
+                        const lookup = key as MetaKeys
+                        const valPrev = previous[lookup];
+                        const valCurr = props[lookup];
+                        if(valPrev && valCurr && concatListed)
+                        {
+                            props[lookup] = valPrev + concatListed + valCurr;
+                        }
+                        if(!valCurr)
+                        {
+                            props[lookup] = dropUnlisted ? "" : valPrev;
+                        }
+                    });
+                }
                 clone.splice(i+1, 0, {id, depth, concatListed, dropUnlisted, ...props});
                 return clone;
             });
@@ -95,11 +138,6 @@ export const Meta =
         if(!window.innerWidth && props.title)
         {
             Meta.Meta.title = props.title;
-            console.log(`setting title`, Meta.Meta.title);
-        }
-        else
-        {
-            console.log("nope");
         }
 
         return null;

server.tsx

@@ -401,6 +401,13 @@ else if(App && TwindInst)
     <html lang="en">
         <head>
             <title>${Iso.Meta.Meta.title}</title>
+            <meta property="og:title" content="${Iso.Meta.Meta.title}">
+            <meta name="description" content="${Iso.Meta.Meta.description}">
+            <meta property="og:description" content="${Iso.Meta.Meta.description}">
+            <meta property="og:image" content="${Iso.Meta.Meta.image}">
+            <meta property="og:url" content="${Iso.Meta.Meta.canonical}">
+            <link rel="canonical" href="${Iso.Meta.Meta.canonical}" />
+
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <meta charset="utf-8"/>
             <style data-twind>${results.css}</style>