-
+
Component Route is: {routeGet.Path.toString()}
a link
diff --git a/lib/iso.tsx b/lib/iso.tsx
index 42b621b..e4cf49c 100644
--- a/lib/iso.tsx
+++ b/lib/iso.tsx
@@ -1,26 +1,26 @@
import TWPreTail from "https://esm.sh/v115/@twind/preset-tailwind@1.1.4/es2022/preset-tailwind.mjs";
import TWPreAuto from "https://esm.sh/v115/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
-import React from "react";
+import React, { JSX } from "react";
export const CSS = {
presets: [TWPreTail(), TWPreAuto()],
hash:false
};
-if(!window.innerWidth)
+if(!window.innerWidth && !Deno.mainModule.endsWith("server.tsx"))
{
import(import.meta.resolve("../../server.tsx")).then(()=>{console.log("...imported!");});
}
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;
export const Meta =
{
- Stack:[] as Array
,
+ Stack:[] as MetasStackItem[],
Meta: {
title:"",
description:"",
@@ -28,20 +28,82 @@ export const Meta =
image:"",
canonical:""
} as Meta,
+ ComputeFinal(inStack:MetasStackItem[], inStart=0)
+ {
+ const seed = {
+ title:"",
+ description:"",
+ keywords:"",
+ image:"",
+ canonical:""
+ };
+ if(inStack.length>0)
+ {
+ let final = {...seed, ...inStack[0]};
+ for(let i=inStart+1; i
+ {
+ const lookup = key as MetaKeys
+ const valPrev = final[lookup];
+ const valCurr = curr[lookup];
+ if(valPrev && valCurr && curr.concatListed)
+ {
+ final[lookup] = valPrev + curr.concatListed + valCurr;
+ }
+ else if(!valCurr && curr.dropUnlisted)
+ {
+ final[lookup] = "";
+ }
+ else
+ {
+ final[lookup] = valCurr||"";
+ }
+ });
+ }
+ return final;
+ }
+ else
+ {
+ return seed;
+ }
+ },
Context: React.createContext([[], ()=>{}] as [Get:MetasStackItem[], Set:React.StateUpdater]),
Provider({children}:{children:Children})
{
const binding = React.useState([] as MetasStackItem[]);
-
- React.useEffect(()=>{
- const stack = binding[0];
- const last = stack[stack.length-1];
- console.log("updating page title", stack);
- document.title = last?.title||"";
- })
+
+ type MetaDOM = {description:NodeListOf, title:NodeListOf, image:NodeListOf, url:NodeListOf};
+
+ 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(()=>
+ {
+ if(refElements.current)
+ {
+ const final = Meta.ComputeFinal(binding[0]);
+
+ refElements.current.url.forEach(e=>e.setAttribute("content", final.canonical||""));
+ document.title = final.title;
+ refElements.current.title.forEach(e=>e.setAttribute("content", final.title||""));
+ refElements.current.image.forEach(e=>e.setAttribute("content", final.image||""));
+ refElements.current.description.forEach(e=>e.setAttribute("content", final.description||""));
+ }
+ });
return {children};
},
- 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,7 +118,6 @@ export const Meta =
{
if(clone[i].depth <= depth)
{
-
break;
}
}
@@ -92,6 +153,11 @@ export const Meta =
});
}, Object.keys(props).map( (key) => props[key as MetaKeys] ));
+ if(!window.innerWidth && props.title)
+ {
+ Meta.Stack.push({id, depth, concatListed, dropUnlisted, ...props});
+ }
+
return null;
}
};
@@ -213,7 +279,7 @@ export const Switch =({children}:{children:Children})=>
for(let i=0; i;
- await Prepass(app)
+ await Prepass(app);
+ Iso.Meta.Stack = [];
let bake = SSR(app);
while(Iso.Fetch.ServerBlocking.length)
{
@@ -381,7 +382,8 @@ else if(App && TwindInst)
// at this point, anything that was requested that was not cached, has now been loaded and cached
// this next render will use cached resources. using a cached resource (if its "Seed" is true) adds it to the "touched" set.
app = ;
- await Prepass(app)
+ await Prepass(app);
+ Iso.Meta.Stack = [];
bake = SSR(app);
}
@@ -393,14 +395,22 @@ else if(App && TwindInst)
});
Iso.Fetch.ServerTouched = false;
+ Iso.Meta.Meta = Iso.Meta.ComputeFinal(Iso.Meta.Stack);
const results = Twind.extract(bake, TwindInst);
-
+
type = `text/html`;
body =
`
${Iso.Meta.Meta.title}
+
+
+
+
+
+
+