starting meta tags other than title

This commit is contained in:
Seth Trowbridge 2023-05-13 14:06:28 -04:00
parent 945800bb22
commit 260c156b8f
4 changed files with 77 additions and 14 deletions

View File

@ -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>

View File

@ -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"
}
}

View File

@ -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;
@ -32,16 +32,42 @@ export const Meta =
Provider({children}:{children:Children})
{
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;

View File

@ -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>