Skip to content

Expand contact page trust content and enrich JSON-LD identity #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RobbieTheWagner wants to merge 1 commit into
base: main
Choose a base branch
from
+153 −4
Open

Expand contact page trust content and enrich JSON-LD identity #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,16 @@ const { imageUrl, title } = Astro.props;
const canonicalURL =
Astro.props.canonicalURL ?? new URL(Astro.url.pathname, Astro.site);
const description = Astro.props.description ?? starpodConfig.description;

// The show's profiles elsewhere, so agents can connect this site to the same
// entity on other platforms (JSON-LD sameAs).
const sameAs = [
starpodConfig.platforms.apple,
starpodConfig.platforms.spotify,
starpodConfig.platforms.youtube,
starpodConfig.platforms.overcast,
starpodConfig.platforms.pocketCasts
].filter((url): url is string => Boolean(url));
---

<!doctype html>
Expand Down Expand Up @@ -108,15 +118,22 @@ const description = Astro.props.description ?? starpodConfig.description;
description: show.description,
url: canonicalURL.toString(),
webFeed: starpodConfig.rssFeed,
sameAs,
author: {
'@type': 'Organization',
name: show.title,
url: canonicalURL.origin
description: starpodConfig.description,
url: canonicalURL.origin,
logo: show.image,
sameAs
},
publisher: {
'@type': 'Organization',
name: show.title,
url: canonicalURL.origin
description: starpodConfig.description,
url: canonicalURL.origin,
logo: show.image,
sameAs
},
image: show.image
}}
Expand Down
99 changes: 97 additions & 2 deletions src/pages/contact.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
---
import Layout from '../layouts/Layout.astro';
import ContactForm from '../components/ContactForm';
import { getShowInfo } from '../lib/rss';
import starpodConfig from 'starpod.config';

const show = await getShowInfo();

const platformLinks = [
{ name: 'Apple Podcasts', url: starpodConfig.platforms.apple },
{ name: 'Spotify', url: starpodConfig.platforms.spotify },
{ name: 'YouTube', url: starpodConfig.platforms.youtube },
{ name: 'Overcast', url: starpodConfig.platforms.overcast },
{ name: 'Pocket Casts', url: starpodConfig.platforms.pocketCasts }
].filter((platform) => platform.url);
---

<Layout title="Contact">
Expand All @@ -12,10 +24,93 @@ import ContactForm from '../components/ContactForm';
</h1>

<p class="mb-8">
Have a question for us or a topic you would like us to cover on the show?
Reach out here and we'll be in touch soon!
Have a question for us, feedback on an episode, or a topic you would like
us to cover on {show.title}? Maybe a guest you want to hear from, or just
something you want to say? Fill out the form below and your message goes
straight to the hosts — we read every one and we'll be in touch soon!
</p>

<ContactForm client:load />

<div class="mt-12 pb-16">
<h2
class="text-light-text-heading mb-4 text-xl font-bold dark:text-white"
>
Reach the hosts directly
</h2>

<ul class="mb-8 flex flex-col gap-2">
{
starpodConfig.hosts.map((host) => (
<li>
<span class="font-bold">{host.name}</span>
{host.twitter && (
<>
{' — '}
<a
class="underline hover:no-underline"
href={host.twitter}
rel="noopener noreferrer"
>
Twitter
</a>
</>
)}
{host.github && (
<>
{' · '}
<a
class="underline hover:no-underline"
href={host.github}
rel="noopener noreferrer"
>
GitHub
</a>
</>
)}
{host.website && (
<>
{' · '}
<a
class="underline hover:no-underline"
href={host.website}
rel="noopener noreferrer"
>
Website
</a>
</>
)}
</li>
))
}
</ul>

{
platformLinks.length > 0 && (
<>
<h2 class="text-light-text-heading mb-4 text-xl font-bold dark:text-white">
Follow the show
</h2>
<p class="mb-4">
The best way to support {show.title} is to subscribe, leave a
review, and share episodes with your friends. You can find us on:
</p>
<ul class="flex flex-wrap gap-x-6 gap-y-2">
{platformLinks.map((platform) => (
<li>
<a
class="underline hover:no-underline"
href={platform.url}
rel="noopener noreferrer"
>
{platform.name}
</a>
</li>
))}
</ul>
</>
)
}
</div>
</div>
</Layout>
37 changes: 37 additions & 0 deletions tests/e2e/trust-identity.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { expect, test } from '@playwright/test';

test.describe('JSON-LD identity', () => {
test('homepage JSON-LD carries full Organization identity', async ({
page
}) => {
await page.goto('/');

const jsonLd = await page
.locator('script[type="application/ld+json"]')
.first()
.textContent();
const schema = JSON.parse(jsonLd!);

expect(schema['@type']).toBe('PodcastSeries');
expect(schema.publisher['@type']).toBe('Organization');
expect(schema.publisher.url).toBeTruthy();
expect(schema.publisher.logo).toBeTruthy();
expect(schema.publisher.sameAs.length).toBeGreaterThan(0);
});
});

test.describe('contact trust page', () => {
test('has substantive contact content beyond the form', async ({ page }) => {
await page.goto('/contact');

await expect(
page.getByRole('heading', { name: 'Get in touch' })
).toBeVisible();
await expect(
page.getByRole('heading', { name: 'Reach the hosts directly' })
).toBeVisible();
await expect(
page.getByRole('heading', { name: 'Follow the show' })
).toBeVisible();
});
});
Loading