meta tags
This commit is contained in:
parent
d63ee7a42b
commit
af2f9d135b
5 changed files with 69 additions and 4 deletions
|
@ -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
29
components/Meta.tsx
Normal 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" /> */
|
||||
}
|
|
@ -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}>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue