meta tags

This commit is contained in:
mehbark 2023-04-28 20:20:05 -04:00
parent d63ee7a42b
commit af2f9d135b
5 changed files with 69 additions and 4 deletions

View file

@ -3,6 +3,7 @@ import Msg from "components/Msg.tsx";
import { conv_style, msg_style, page_style } from "style";
import { Head } from "$fresh/runtime.ts";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import Meta from "components/Meta.tsx";
export default function Conv({
conv,
@ -20,6 +21,12 @@ export default function Conv({
<Head>
<title>{conv_.name}</title>
</Head>
<Meta
title={`${conv_.name}`}
description={conv_.description}
after_slash={conv}
color={conv_.presets?.page?.bg}
></Meta>
<div style={page_style(conv_)} className="convo-body">
<a href="/">
<h1

29
components/Meta.tsx Normal file
View file

@ -0,0 +1,29 @@
import { Head } from "$fresh/runtime.ts";
import { URL } from "utils";
export default function Meta({
title,
description,
after_slash,
color,
}: {
title: string;
description: string;
after_slash: string;
color?: string;
}) {
return (
<Head>
<meta content={title} property="og:title" />
<meta content={description} property="og:description" />
<meta content={`${URL}/${after_slash}`} property="og:url" />
<meta content={color} data-react-helmet="true" name="theme-color" />
</Head>
);
}
{
/* <meta content="Latula Homestuck" property="og:title" />
<meta content="also from Pyrope" property="og:description" />
<meta content="https://latula.pyrope.net/" property="og:url" />
<meta content="#008282" data-react-helmet="true" name="theme-color" /> */
}

View file

@ -2,10 +2,11 @@ import { useState } from "preact/hooks";
import { Database } from "types";
import { Head } from "$fresh/runtime.ts";
import { DEFAULT_STYLE } from "style";
import ConversationLink from "components/ConversationLink.tsx";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import { fetch_db } from "db";
import { URL } from "utils";
import ConversationLink from "components/ConversationLink.tsx";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import Meta from "components/Meta.tsx";
export default function Home({ db }: { db: Database }) {
const [data, setData] = useState(db);
@ -18,6 +19,12 @@ export default function Home({ db }: { db: Database }) {
<Head>
<title>Freshter Logs</title>
</Head>
<Meta
title="freshter logs"
description="append-only pester logs, built with fresh"
after_slash=""
color="#FFD80B"
></Meta>
<WithStyleSheet href="/index.css" />
<a href="/">
<h1 className="title" style={DEFAULT_STYLE}>

View file

@ -6,7 +6,8 @@ import WithStyleSheet from "components/WithStyleSheet.tsx";
import AddMsg from "components/AddMsg.tsx";
import PresetSelector from "components/PresetSelector.tsx";
import PresetCreator from "components/PresetCreator.tsx";
import { fetch_db } from "../common/db.ts";
import { fetch_db } from "db";
import Meta from "components/Meta.tsx";
const UPDATE_DB_INTERVAL_MS = 3000;
@ -46,6 +47,12 @@ export default function Interactive({
return (
<>
<WithStyleSheet href="/Interactive.css" />
<Meta
title={`Interactive version of: ${conv_.name}`}
description={conv_.description}
after_slash={`${conv}/i`}
color={conv_.presets?.page?.bg}
></Meta>
<Conv conv={conv} db={database}>
<AddMsg
preset={preset}

View file

@ -2,6 +2,8 @@ import { Handlers, PageProps } from "$fresh/server.ts";
import { Database, Option } from "types";
import Msg from "components/Msg.tsx";
import { get_db_obj } from "db";
import Meta from "components/Meta.tsx";
import { msg_style } from "style";
export const handler: Handlers<Option<Database>> = {
async GET(_, ctx) {
@ -22,6 +24,19 @@ export default function MessagePreview({
params.message_id &&
data.unwrap().messages[params.message_id]
) {
return <Msg message={params.message_id} db={data.unwrap()} />;
const db = data.unwrap();
const id = params.message_id;
const msg = db.messages[id];
return (
<>
<Meta
title={`freshter log message #${id}`}
description={msg.content}
after_slash={`m/${id}`}
color={`${msg_style(msg, db).color ?? "black"}`}
></Meta>
<Msg message={id} db={db} />
</>
);
}
}