From 8b32acbdb762f79d08a6ff9d2af1e2174f10ced4 Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Tue, 3 Oct 2023 15:59:54 -0600 Subject: [PATCH 1/7] starts work on OG Image gen --- .../[slug]/[[tab]] => lib}/HostsAndGuests.svelte | 0 src/lib/PodcastHero.svelte | 2 -- src/routes/(blank)/+layout.svelte | 5 +++++ .../(blank)/og/[number=show_number]/+page.server.ts | 13 +++++++++++++ .../(blank)/og/[number=show_number]/+page.svelte | 8 ++++++++ src/routes/{ => (site)}/+error.svelte | 0 src/routes/{ => (site)}/+layout.server.ts | 0 src/routes/{ => (site)}/+layout.svelte | 2 +- src/routes/{ => (site)}/+page.server.ts | 0 src/routes/{ => (site)}/+page.svelte | 0 src/routes/{ => (site)}/Footer.svelte | 0 src/routes/{ => (site)}/Header.svelte | 0 src/routes/{ => (site)}/MobileNav.svelte | 0 src/routes/{ => (site)}/UserMenu.svelte | 0 .../[number=show_number]/+page.server.ts | 0 src/routes/{ => (site)}/about/+page.svelte | 0 src/routes/{ => (site)}/admin/+layout.server.ts | 0 src/routes/{ => (site)}/admin/+layout.svelte | 0 src/routes/{ => (site)}/admin/+page.svelte | 0 src/routes/{ => (site)}/admin/shows/+page.server.ts | 0 src/routes/{ => (site)}/admin/shows/+page.svelte | 0 .../admin/shows/[show_number]/+page.server.ts | 0 .../admin/shows/[show_number]/+page.svelte | 0 .../admin/shows/[show_number]/Dump.svelte | 0 .../{ => (site)}/admin/transcripts/+page.server.ts | 0 .../{ => (site)}/admin/transcripts/+page.svelte | 0 .../{ => (site)}/guest/[name_slug]/+page.server.ts | 0 .../{ => (site)}/guest/[name_slug]/+page.svelte | 0 src/routes/{ => (site)}/login/+page.svelte | 0 src/routes/{ => (site)}/rss/+server.ts | 0 src/routes/{ => (site)}/search/+page.svelte | 0 src/routes/{ => (site)}/sentry-example/+page.svelte | 0 src/routes/{ => (site)}/sentry-example/+server.js | 0 src/routes/{ => (site)}/shows/+page.server.ts | 0 src/routes/{ => (site)}/shows/+page.svelte | 0 .../[show_number]/[slug]/[[tab]]/+page.server.ts | 0 .../shows/[show_number]/[slug]/[[tab]]/+page.svelte | 2 +- src/routes/{ => (site)}/style.css | 12 ++++++------ src/routes/{ => (site)}/suggest/+page.svelte | 0 src/routes/{ => (site)}/system/+layout.svelte | 0 src/routes/{ => (site)}/system/colors/+page.svelte | 0 .../{ => (site)}/system/components/+page.svelte | 0 src/routes/{ => (site)}/system/layout/+page.svelte | 0 .../{ => (site)}/system/theme/+page.server.ts | 0 src/routes/{ => (site)}/system/theme/+page.svelte | 0 .../{ => (site)}/system/typography/+page.svelte | 0 46 files changed, 34 insertions(+), 10 deletions(-) rename src/{routes/shows/[show_number]/[slug]/[[tab]] => lib}/HostsAndGuests.svelte (100%) create mode 100644 src/routes/(blank)/+layout.svelte create mode 100644 src/routes/(blank)/og/[number=show_number]/+page.server.ts create mode 100644 src/routes/(blank)/og/[number=show_number]/+page.svelte rename src/routes/{ => (site)}/+error.svelte (100%) rename src/routes/{ => (site)}/+layout.server.ts (100%) rename src/routes/{ => (site)}/+layout.svelte (96%) rename src/routes/{ => (site)}/+page.server.ts (100%) rename src/routes/{ => (site)}/+page.svelte (100%) rename src/routes/{ => (site)}/Footer.svelte (100%) rename src/routes/{ => (site)}/Header.svelte (100%) rename src/routes/{ => (site)}/MobileNav.svelte (100%) rename src/routes/{ => (site)}/UserMenu.svelte (100%) rename src/routes/{ => (site)}/[number=show_number]/+page.server.ts (100%) rename src/routes/{ => (site)}/about/+page.svelte (100%) rename src/routes/{ => (site)}/admin/+layout.server.ts (100%) rename src/routes/{ => (site)}/admin/+layout.svelte (100%) rename src/routes/{ => (site)}/admin/+page.svelte (100%) rename src/routes/{ => (site)}/admin/shows/+page.server.ts (100%) rename src/routes/{ => (site)}/admin/shows/+page.svelte (100%) rename src/routes/{ => (site)}/admin/shows/[show_number]/+page.server.ts (100%) rename src/routes/{ => (site)}/admin/shows/[show_number]/+page.svelte (100%) rename src/routes/{ => (site)}/admin/shows/[show_number]/Dump.svelte (100%) rename src/routes/{ => (site)}/admin/transcripts/+page.server.ts (100%) rename src/routes/{ => (site)}/admin/transcripts/+page.svelte (100%) rename src/routes/{ => (site)}/guest/[name_slug]/+page.server.ts (100%) rename src/routes/{ => (site)}/guest/[name_slug]/+page.svelte (100%) rename src/routes/{ => (site)}/login/+page.svelte (100%) rename src/routes/{ => (site)}/rss/+server.ts (100%) rename src/routes/{ => (site)}/search/+page.svelte (100%) rename src/routes/{ => (site)}/sentry-example/+page.svelte (100%) rename src/routes/{ => (site)}/sentry-example/+server.js (100%) rename src/routes/{ => (site)}/shows/+page.server.ts (100%) rename src/routes/{ => (site)}/shows/+page.svelte (100%) rename src/routes/{ => (site)}/shows/[show_number]/[slug]/[[tab]]/+page.server.ts (100%) rename src/routes/{ => (site)}/shows/[show_number]/[slug]/[[tab]]/+page.svelte (98%) rename src/routes/{ => (site)}/style.css (87%) rename src/routes/{ => (site)}/suggest/+page.svelte (100%) rename src/routes/{ => (site)}/system/+layout.svelte (100%) rename src/routes/{ => (site)}/system/colors/+page.svelte (100%) rename src/routes/{ => (site)}/system/components/+page.svelte (100%) rename src/routes/{ => (site)}/system/layout/+page.svelte (100%) rename src/routes/{ => (site)}/system/theme/+page.server.ts (100%) rename src/routes/{ => (site)}/system/theme/+page.svelte (100%) rename src/routes/{ => (site)}/system/typography/+page.svelte (100%) diff --git a/src/routes/shows/[show_number]/[slug]/[[tab]]/HostsAndGuests.svelte b/src/lib/HostsAndGuests.svelte similarity index 100% rename from src/routes/shows/[show_number]/[slug]/[[tab]]/HostsAndGuests.svelte rename to src/lib/HostsAndGuests.svelte diff --git a/src/lib/PodcastHero.svelte b/src/lib/PodcastHero.svelte index b1effb4ae..6b3ffeb1e 100644 --- a/src/lib/PodcastHero.svelte +++ b/src/lib/PodcastHero.svelte @@ -1,8 +1,6 @@ diff --git a/src/routes/(blank)/+layout.svelte b/src/routes/(blank)/+layout.svelte new file mode 100644 index 000000000..d60d617e6 --- /dev/null +++ b/src/routes/(blank)/+layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/routes/(blank)/og/[number=show_number]/+page.server.ts b/src/routes/(blank)/og/[number=show_number]/+page.server.ts new file mode 100644 index 000000000..a77a6c31d --- /dev/null +++ b/src/routes/(blank)/og/[number=show_number]/+page.server.ts @@ -0,0 +1,13 @@ +import { SHOW_QUERY } from '$server/ai/queries.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async function ({ setHeaders, url, locals }) { + setHeaders({ + 'cache-control': 'max-age=240' + }); + + const query = SHOW_QUERY(); + return { + show: locals.prisma.show.findFirst(query) + }; +}; diff --git a/src/routes/(blank)/og/[number=show_number]/+page.svelte b/src/routes/(blank)/og/[number=show_number]/+page.svelte new file mode 100644 index 000000000..25f4deb81 --- /dev/null +++ b/src/routes/(blank)/og/[number=show_number]/+page.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/routes/+error.svelte b/src/routes/(site)/+error.svelte similarity index 100% rename from src/routes/+error.svelte rename to src/routes/(site)/+error.svelte diff --git a/src/routes/+layout.server.ts b/src/routes/(site)/+layout.server.ts similarity index 100% rename from src/routes/+layout.server.ts rename to src/routes/(site)/+layout.server.ts diff --git a/src/routes/+layout.svelte b/src/routes/(site)/+layout.svelte similarity index 96% rename from src/routes/+layout.svelte rename to src/routes/(site)/+layout.svelte index 7270f7eb3..ac774f601 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/(site)/+layout.svelte @@ -7,7 +7,6 @@ import Footer from './Footer.svelte'; import Header from './Header.svelte'; import Loading from '$lib/Loading.svelte'; - import ThemeMaker from '../params/ThemeMaker.svelte'; import { theme } from '$state/theme'; import { onMount } from 'svelte'; import { browser } from '$app/environment'; @@ -15,6 +14,7 @@ import Meta from '$lib/meta/Meta.svelte'; import AdminMenu from '$lib/AdminMenu.svelte'; import { debug_mode } from '$state/debug'; + import ThemeMaker from '../../params/ThemeMaker.svelte'; export let data; $: ({ user, user_theme, meta_description, meta_image, meta_title } = data); diff --git a/src/routes/+page.server.ts b/src/routes/(site)/+page.server.ts similarity index 100% rename from src/routes/+page.server.ts rename to src/routes/(site)/+page.server.ts diff --git a/src/routes/+page.svelte b/src/routes/(site)/+page.svelte similarity index 100% rename from src/routes/+page.svelte rename to src/routes/(site)/+page.svelte diff --git a/src/routes/Footer.svelte b/src/routes/(site)/Footer.svelte similarity index 100% rename from src/routes/Footer.svelte rename to src/routes/(site)/Footer.svelte diff --git a/src/routes/Header.svelte b/src/routes/(site)/Header.svelte similarity index 100% rename from src/routes/Header.svelte rename to src/routes/(site)/Header.svelte diff --git a/src/routes/MobileNav.svelte b/src/routes/(site)/MobileNav.svelte similarity index 100% rename from src/routes/MobileNav.svelte rename to src/routes/(site)/MobileNav.svelte diff --git a/src/routes/UserMenu.svelte b/src/routes/(site)/UserMenu.svelte similarity index 100% rename from src/routes/UserMenu.svelte rename to src/routes/(site)/UserMenu.svelte diff --git a/src/routes/[number=show_number]/+page.server.ts b/src/routes/(site)/[number=show_number]/+page.server.ts similarity index 100% rename from src/routes/[number=show_number]/+page.server.ts rename to src/routes/(site)/[number=show_number]/+page.server.ts diff --git a/src/routes/about/+page.svelte b/src/routes/(site)/about/+page.svelte similarity index 100% rename from src/routes/about/+page.svelte rename to src/routes/(site)/about/+page.svelte diff --git a/src/routes/admin/+layout.server.ts b/src/routes/(site)/admin/+layout.server.ts similarity index 100% rename from src/routes/admin/+layout.server.ts rename to src/routes/(site)/admin/+layout.server.ts diff --git a/src/routes/admin/+layout.svelte b/src/routes/(site)/admin/+layout.svelte similarity index 100% rename from src/routes/admin/+layout.svelte rename to src/routes/(site)/admin/+layout.svelte diff --git a/src/routes/admin/+page.svelte b/src/routes/(site)/admin/+page.svelte similarity index 100% rename from src/routes/admin/+page.svelte rename to src/routes/(site)/admin/+page.svelte diff --git a/src/routes/admin/shows/+page.server.ts b/src/routes/(site)/admin/shows/+page.server.ts similarity index 100% rename from src/routes/admin/shows/+page.server.ts rename to src/routes/(site)/admin/shows/+page.server.ts diff --git a/src/routes/admin/shows/+page.svelte b/src/routes/(site)/admin/shows/+page.svelte similarity index 100% rename from src/routes/admin/shows/+page.svelte rename to src/routes/(site)/admin/shows/+page.svelte diff --git a/src/routes/admin/shows/[show_number]/+page.server.ts b/src/routes/(site)/admin/shows/[show_number]/+page.server.ts similarity index 100% rename from src/routes/admin/shows/[show_number]/+page.server.ts rename to src/routes/(site)/admin/shows/[show_number]/+page.server.ts diff --git a/src/routes/admin/shows/[show_number]/+page.svelte b/src/routes/(site)/admin/shows/[show_number]/+page.svelte similarity index 100% rename from src/routes/admin/shows/[show_number]/+page.svelte rename to src/routes/(site)/admin/shows/[show_number]/+page.svelte diff --git a/src/routes/admin/shows/[show_number]/Dump.svelte b/src/routes/(site)/admin/shows/[show_number]/Dump.svelte similarity index 100% rename from src/routes/admin/shows/[show_number]/Dump.svelte rename to src/routes/(site)/admin/shows/[show_number]/Dump.svelte diff --git a/src/routes/admin/transcripts/+page.server.ts b/src/routes/(site)/admin/transcripts/+page.server.ts similarity index 100% rename from src/routes/admin/transcripts/+page.server.ts rename to src/routes/(site)/admin/transcripts/+page.server.ts diff --git a/src/routes/admin/transcripts/+page.svelte b/src/routes/(site)/admin/transcripts/+page.svelte similarity index 100% rename from src/routes/admin/transcripts/+page.svelte rename to src/routes/(site)/admin/transcripts/+page.svelte diff --git a/src/routes/guest/[name_slug]/+page.server.ts b/src/routes/(site)/guest/[name_slug]/+page.server.ts similarity index 100% rename from src/routes/guest/[name_slug]/+page.server.ts rename to src/routes/(site)/guest/[name_slug]/+page.server.ts diff --git a/src/routes/guest/[name_slug]/+page.svelte b/src/routes/(site)/guest/[name_slug]/+page.svelte similarity index 100% rename from src/routes/guest/[name_slug]/+page.svelte rename to src/routes/(site)/guest/[name_slug]/+page.svelte diff --git a/src/routes/login/+page.svelte b/src/routes/(site)/login/+page.svelte similarity index 100% rename from src/routes/login/+page.svelte rename to src/routes/(site)/login/+page.svelte diff --git a/src/routes/rss/+server.ts b/src/routes/(site)/rss/+server.ts similarity index 100% rename from src/routes/rss/+server.ts rename to src/routes/(site)/rss/+server.ts diff --git a/src/routes/search/+page.svelte b/src/routes/(site)/search/+page.svelte similarity index 100% rename from src/routes/search/+page.svelte rename to src/routes/(site)/search/+page.svelte diff --git a/src/routes/sentry-example/+page.svelte b/src/routes/(site)/sentry-example/+page.svelte similarity index 100% rename from src/routes/sentry-example/+page.svelte rename to src/routes/(site)/sentry-example/+page.svelte diff --git a/src/routes/sentry-example/+server.js b/src/routes/(site)/sentry-example/+server.js similarity index 100% rename from src/routes/sentry-example/+server.js rename to src/routes/(site)/sentry-example/+server.js diff --git a/src/routes/shows/+page.server.ts b/src/routes/(site)/shows/+page.server.ts similarity index 100% rename from src/routes/shows/+page.server.ts rename to src/routes/(site)/shows/+page.server.ts diff --git a/src/routes/shows/+page.svelte b/src/routes/(site)/shows/+page.svelte similarity index 100% rename from src/routes/shows/+page.svelte rename to src/routes/(site)/shows/+page.svelte diff --git a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.server.ts b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts similarity index 100% rename from src/routes/shows/[show_number]/[slug]/[[tab]]/+page.server.ts rename to src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts diff --git a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte similarity index 98% rename from src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte rename to src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte index ab3ca954a..71c1d1a97 100644 --- a/src/routes/shows/[show_number]/[slug]/[[tab]]/+page.svelte +++ b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte @@ -2,7 +2,7 @@ import { format } from 'date-fns'; import { player } from '$state/player'; import { page } from '$app/stores'; - import HostsAndGuests from './HostsAndGuests.svelte'; + import HostsAndGuests from '../../../../../../lib/HostsAndGuests.svelte'; import Icon from '$lib/Icon.svelte'; import NewsletterForm from '$lib/NewsletterForm.svelte'; import Transcript from '$lib/transcript/Transcript.svelte'; diff --git a/src/routes/style.css b/src/routes/(site)/style.css similarity index 87% rename from src/routes/style.css rename to src/routes/(site)/style.css index db2adc2d2..7f564fb63 100644 --- a/src/routes/style.css +++ b/src/routes/(site)/style.css @@ -18,12 +18,12 @@ @layer reset base utilities layout theme; /* Import all css themes */ -@import '../styles/base.css'; -@import '../styles/variables.css'; -@import '../styles/utilities.css'; -@import '../styles/layout.css'; -@import '../styles/forms.css'; -@import '../styles/buttons.css'; +@import '../../styles/base.css'; +@import '../../styles/variables.css'; +@import '../../styles/utilities.css'; +@import '../../styles/layout.css'; +@import '../../styles/forms.css'; +@import '../../styles/buttons.css'; /* FYI you have to use import-glob for all of these or else it gets mad */ diff --git a/src/routes/suggest/+page.svelte b/src/routes/(site)/suggest/+page.svelte similarity index 100% rename from src/routes/suggest/+page.svelte rename to src/routes/(site)/suggest/+page.svelte diff --git a/src/routes/system/+layout.svelte b/src/routes/(site)/system/+layout.svelte similarity index 100% rename from src/routes/system/+layout.svelte rename to src/routes/(site)/system/+layout.svelte diff --git a/src/routes/system/colors/+page.svelte b/src/routes/(site)/system/colors/+page.svelte similarity index 100% rename from src/routes/system/colors/+page.svelte rename to src/routes/(site)/system/colors/+page.svelte diff --git a/src/routes/system/components/+page.svelte b/src/routes/(site)/system/components/+page.svelte similarity index 100% rename from src/routes/system/components/+page.svelte rename to src/routes/(site)/system/components/+page.svelte diff --git a/src/routes/system/layout/+page.svelte b/src/routes/(site)/system/layout/+page.svelte similarity index 100% rename from src/routes/system/layout/+page.svelte rename to src/routes/(site)/system/layout/+page.svelte diff --git a/src/routes/system/theme/+page.server.ts b/src/routes/(site)/system/theme/+page.server.ts similarity index 100% rename from src/routes/system/theme/+page.server.ts rename to src/routes/(site)/system/theme/+page.server.ts diff --git a/src/routes/system/theme/+page.svelte b/src/routes/(site)/system/theme/+page.svelte similarity index 100% rename from src/routes/system/theme/+page.svelte rename to src/routes/(site)/system/theme/+page.svelte diff --git a/src/routes/system/typography/+page.svelte b/src/routes/(site)/system/typography/+page.svelte similarity index 100% rename from src/routes/system/typography/+page.svelte rename to src/routes/(site)/system/typography/+page.svelte From f9ec76268b7be60f1687d3db7567b04e7849417a Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Wed, 4 Oct 2023 08:56:16 -0600 Subject: [PATCH 2/7] Adds always dark zone and inverse zone to system theme --- src/routes/(site)/system/theme/+page.svelte | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/routes/(site)/system/theme/+page.svelte b/src/routes/(site)/system/theme/+page.svelte index 7b44cb0ed..04863fd15 100644 --- a/src/routes/(site)/system/theme/+page.svelte +++ b/src/routes/(site)/system/theme/+page.svelte @@ -18,6 +18,20 @@ variables.

+
+

Inverse Zone

+

+ By default zones don't have any padding, but they do enable easy setting of local --bg and --fg + variables. +

+
+
+

Always Dark Zone

+

+ By default zones don't have any padding, but they do enable easy setting of local --bg and --fg + variables. +

+
Date: Wed, 4 Oct 2023 10:34:05 -0600 Subject: [PATCH 3/7] adds og image routes with adapted design --- src/lib/FacePile.svelte | 15 ++- src/lib/ShowOg.svelte | 120 ++++++++++++++++++ .../og/[number=show_number]/+page.server.ts | 9 +- .../og/[number=show_number]/+page.svelte | 13 +- 4 files changed, 146 insertions(+), 11 deletions(-) create mode 100644 src/lib/ShowOg.svelte diff --git a/src/lib/FacePile.svelte b/src/lib/FacePile.svelte index 7094bed36..52f08775e 100644 --- a/src/lib/FacePile.svelte +++ b/src/lib/FacePile.svelte @@ -3,10 +3,11 @@ name: string; github: string; }; + export let size = '50px'; export let faces: FaceForThePile[] = []; -
+
{#each faces as face} {face.name} {/each} @@ -14,23 +15,23 @@ diff --git a/src/routes/(blank)/og/[number=show_number]/+page.server.ts b/src/routes/(blank)/og/[number=show_number]/+page.server.ts index a77a6c31d..4717a8b13 100644 --- a/src/routes/(blank)/og/[number=show_number]/+page.server.ts +++ b/src/routes/(blank)/og/[number=show_number]/+page.server.ts @@ -1,13 +1,18 @@ import { SHOW_QUERY } from '$server/ai/queries.js'; import type { PageServerLoad } from './$types'; -export const load: PageServerLoad = async function ({ setHeaders, url, locals }) { +export const load: PageServerLoad = async function ({ setHeaders, params, locals }) { setHeaders({ 'cache-control': 'max-age=240' }); const query = SHOW_QUERY(); return { - show: locals.prisma.show.findFirst(query) + show: locals.prisma.show.findFirst({ + ...query, + where: { + number: parseInt(params.number) + } + }) }; }; diff --git a/src/routes/(blank)/og/[number=show_number]/+page.svelte b/src/routes/(blank)/og/[number=show_number]/+page.svelte index 25f4deb81..1fb7301a4 100644 --- a/src/routes/(blank)/og/[number=show_number]/+page.svelte +++ b/src/routes/(blank)/og/[number=show_number]/+page.svelte @@ -1,8 +1,17 @@ - +
+ +
+ + From cc48669778c734122fc937b16805258c49ccefab Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Wed, 4 Oct 2023 10:34:18 -0600 Subject: [PATCH 4/7] removes some unneeded imports --- src/lib/ShowOg.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/lib/ShowOg.svelte b/src/lib/ShowOg.svelte index daf903390..bcc2e2925 100644 --- a/src/lib/ShowOg.svelte +++ b/src/lib/ShowOg.svelte @@ -1,8 +1,6 @@ - {meta_title} + {title} - - + + - - + + - - - + + + diff --git a/src/routes/(blank)/og.png/+server.ts b/src/routes/(blank)/og.png/+server.ts new file mode 100644 index 000000000..21514aabc --- /dev/null +++ b/src/routes/(blank)/og.png/+server.ts @@ -0,0 +1,57 @@ +import { dev } from '$app/environment'; +import { PUBLIC_URL } from '$env/static/public'; +import chrome from '@sparticuz/chromium'; +import puppeteer from 'puppeteer-core'; +import wait from 'waait'; + +const cached = new Map(); + +const exePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'; + +async function getOptions() { + if (dev) { + return { + product: 'chrome', + args: [], + executablePath: exePath, + headless: true + }; + } + return { + product: 'chrome', + args: chrome.args, + executablePath: await chrome.executablePath, + headless: chrome.headless + }; +} + +async function getScreenshot(url) { + console.log('url', url); + // first check if this value has been cached + const cachedImage = cached.get(url); + if (cachedImage) { + return cachedImage; + } + const options = await getOptions(); + const browser = await puppeteer.launch(options); + const page = await browser.newPage(); + await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1.5 }); + await page.goto(url); + await wait(1000); + const buffer = await page.screenshot({ type: 'png' }); + return buffer; +} + +export async function GET({ locals, params, url }) { + console.log('request', url); + const qs = new URLSearchParams(url.search); + const show = qs.get('show'); + const photoBuffer = await getScreenshot(`${url.origin}/og/${show}`); + return new Response(photoBuffer, { status: 200 }); + + // return { + // statusCode: 200, + // body: photoBuffer, + // isBase64Encoded: true + // }; +} diff --git a/src/routes/(site)/+layout.server.ts b/src/routes/(site)/+layout.server.ts index ccf819bd0..06ab49db0 100644 --- a/src/routes/(site)/+layout.server.ts +++ b/src/routes/(site)/+layout.server.ts @@ -1,9 +1,13 @@ +import social_banner from '$assets/syntax-banner.png'; + export const load = async ({ locals }) => { return { user: locals.user, user_theme: locals.theme, - meta_description: '', - meta_image: '', - meta_title: '' + meta: { + title: `Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences.`, + image: social_banner, + description: `Syntax - A Tasty Treats Podcast for Web Developers.` + } }; }; diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte index ac774f601..8b3ccf4cd 100644 --- a/src/routes/(site)/+layout.svelte +++ b/src/routes/(site)/+layout.svelte @@ -16,7 +16,7 @@ import { debug_mode } from '$state/debug'; import ThemeMaker from '../../params/ThemeMaker.svelte'; export let data; - $: ({ user, user_theme, meta_description, meta_image, meta_title } = data); + $: ({ user, user_theme, meta } = data); $theme = user_theme; @@ -32,7 +32,7 @@ }); - +
From 1f224b6e3b09690ae485028f55ca8ece6e295e3a Mon Sep 17 00:00:00 2001 From: Scott Tolinski Date: Wed, 4 Oct 2023 15:14:32 -0600 Subject: [PATCH 6/7] completes meta system with custom og images --- src/hooks.server.ts | 9 +--- src/lib/ShowOg.svelte | 44 +++++++++++++++---- src/lib/meta/Meta.svelte | 25 ++++------- src/routes/(blank)/og.png/+server.ts | 6 +-- .../og/[number=show_number]/+page.svelte | 5 ++- src/routes/(site)/+layout.server.ts | 4 +- src/routes/(site)/+layout.svelte | 5 +-- .../[slug]/[[tab]]/+page.server.ts | 10 ++++- .../[show_number]/[slug]/[[tab]]/+page.svelte | 5 ++- 9 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/hooks.server.ts b/src/hooks.server.ts index 2bdce1d1b..ed02ca33d 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -56,15 +56,8 @@ export const prisma: Handle = async function ({ event, resolve }) { return response; }; -export const meta: Handle = async function ({ event, resolve }) { - const response = await resolve(event); - return response; -}; - // * END HOOKS // Wraps requests in this sequence of hooks -export const handle: Handle = sequence( - sequence(Sentry.sentryHandle(), prisma, auth, form_data, meta) -); +export const handle: Handle = sequence(sequence(Sentry.sentryHandle(), prisma, auth, form_data)); export const handleError = Sentry.handleErrorWithSentry(); diff --git a/src/lib/ShowOg.svelte b/src/lib/ShowOg.svelte index b813eefc0..22bdebf38 100644 --- a/src/lib/ShowOg.svelte +++ b/src/lib/ShowOg.svelte @@ -1,5 +1,4 @@ - {title} + {$page.data.meta.title} - - + + - - + + - - - + + + diff --git a/src/routes/(blank)/og.png/+server.ts b/src/routes/(blank)/og.png/+server.ts index 21514aabc..b2e74d51c 100644 --- a/src/routes/(blank)/og.png/+server.ts +++ b/src/routes/(blank)/og.png/+server.ts @@ -1,5 +1,4 @@ import { dev } from '$app/environment'; -import { PUBLIC_URL } from '$env/static/public'; import chrome from '@sparticuz/chromium'; import puppeteer from 'puppeteer-core'; import wait from 'waait'; @@ -20,13 +19,12 @@ async function getOptions() { return { product: 'chrome', args: chrome.args, - executablePath: await chrome.executablePath, + executablePath: chrome.executablePath, headless: chrome.headless }; } async function getScreenshot(url) { - console.log('url', url); // first check if this value has been cached const cachedImage = cached.get(url); if (cachedImage) { @@ -35,7 +33,7 @@ async function getScreenshot(url) { const options = await getOptions(); const browser = await puppeteer.launch(options); const page = await browser.newPage(); - await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1.5 }); + await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1 }); await page.goto(url); await wait(1000); const buffer = await page.screenshot({ type: 'png' }); diff --git a/src/routes/(blank)/og/[number=show_number]/+page.svelte b/src/routes/(blank)/og/[number=show_number]/+page.svelte index 1fb7301a4..91cc83514 100644 --- a/src/routes/(blank)/og/[number=show_number]/+page.svelte +++ b/src/routes/(blank)/og/[number=show_number]/+page.svelte @@ -11,7 +11,8 @@ diff --git a/src/routes/(site)/+layout.server.ts b/src/routes/(site)/+layout.server.ts index 06ab49db0..51ddd0ffe 100644 --- a/src/routes/(site)/+layout.server.ts +++ b/src/routes/(site)/+layout.server.ts @@ -5,9 +5,9 @@ export const load = async ({ locals }) => { user: locals.user, user_theme: locals.theme, meta: { - title: `Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences.`, + description: `Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences.`, image: social_banner, - description: `Syntax - A Tasty Treats Podcast for Web Developers.` + title: `Syntax - A Tasty Treats Podcast for Web Developers.` } }; }; diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte index 8b3ccf4cd..45aaeacb0 100644 --- a/src/routes/(site)/+layout.svelte +++ b/src/routes/(site)/+layout.svelte @@ -8,7 +8,6 @@ import Header from './Header.svelte'; import Loading from '$lib/Loading.svelte'; import { theme } from '$state/theme'; - import { onMount } from 'svelte'; import { browser } from '$app/environment'; import SearchBox from '$lib/search/SearchBox.svelte'; import Meta from '$lib/meta/Meta.svelte'; @@ -16,7 +15,7 @@ import { debug_mode } from '$state/debug'; import ThemeMaker from '../../params/ThemeMaker.svelte'; export let data; - $: ({ user, user_theme, meta } = data); + $: ({ user, user_theme } = data); $theme = user_theme; @@ -32,7 +31,7 @@ }); - +
diff --git a/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts index b97b5e5d4..134d19745 100644 --- a/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts +++ b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.server.ts @@ -10,7 +10,7 @@ import { transcript_with_utterances } from '$server/ai/queries.js'; import type { Prisma, Show } from '@prisma/client'; import type { PageServerLoad } from './$types'; -export const load: PageServerLoad = async function ({ setHeaders, params, locals }) { +export const load: PageServerLoad = async function ({ setHeaders, params, locals, url }) { const { show_number } = params; const query = { where: { number: parseInt(show_number) }, @@ -75,6 +75,12 @@ export const load: PageServerLoad = async function ({ setHeaders, params, locals show: { ...show_raw, show_notes: with_h3_body - } as ShowTemp & Show + } as ShowTemp & Show, + meta: { + title: show_raw?.title, + image: `http://${url.host}/og.png?show=${show_number}`, + description: + show_raw?.aiShowNote?.description ?? show_raw?.show_notes?.match(/(.*?)(?=## )/s)?.[0] + } }; }; diff --git a/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte index 71c1d1a97..16b322f7d 100644 --- a/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte +++ b/src/routes/(site)/shows/[show_number]/[slug]/[[tab]]/+page.svelte @@ -9,8 +9,9 @@ import ListenLinks from '$lib/ListenLinks.svelte'; import { json } from 'stream/consumers'; import Tabs from '$lib/Tabs.svelte'; + import Meta from '$lib/meta/Meta.svelte'; export let data; - $: ({ show } = data); + $: ({ show, meta } = data); async function handleClick(e: Event) { const { target } = e; @@ -22,6 +23,8 @@ } + +
Date: Wed, 4 Oct 2023 15:24:58 -0600 Subject: [PATCH 7/7] fixes issue where theme wasn't getting defaulted to system --- src/hooks.server.ts | 2 +- src/routes/(site)/+layout.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks.server.ts b/src/hooks.server.ts index ed02ca33d..cfa04f612 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -29,7 +29,7 @@ export const prisma_client = new PrismaClient(); export const auth: Handle = async function ({ event, resolve }) { const access_token = event.cookies.get('access_token'); - event.locals.theme = decodeURIComponent(event.cookies.get('theme')) || 'system'; + event.locals.theme = decodeURIComponent(event.cookies.get('theme') || 'system'); // Get current user from session via access token if (access_token) { const user = await find_user_by_access_token(access_token); diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte index 45aaeacb0..a2c5a9a18 100644 --- a/src/routes/(site)/+layout.svelte +++ b/src/routes/(site)/+layout.svelte @@ -31,7 +31,7 @@ }); - +