Skip to content
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

Jump to bottom

fix: add og tags to site #77

Merged
merged 2 commits into from
Aug 15, 2024
Merged

fix: add og tags to site #77

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a66c426
fix: add og tags to site
huijing Aug 14, 2024
f97a644
update og images and bump dependencies
huijing Aug 15, 2024
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
Binary file added public/img/blog/2024-08-13/og-image.png
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sabine requested the receiver move down toward the ZAR node.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/og-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/content/blog/2024-08-13-interledger-universe.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
layout: ../../layouts/BlogLayout.astro
title: "The Interledger Universe"
description: "Or: “What the heck are all those products and protocols?”"
ogImageUrl: /developers/img/blog/2024-08-13/og-image.png
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New frontmatter field that gets used in the BlogLayout template.

date: 2024-08-13
slug: interledger-universe
author: Sabine Schaller
Expand Down
11 changes: 10 additions & 1 deletion src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ interface Props {
title: string;
description?: string;
gradient?: string;
ogType?: string;
ogImageUrl?: string;
canonicalURL?: string;
}

const { title, description } = Astro.props;
const { title, description, ogType, ogImageUrl, canonicalURL = new URL(Astro.url.pathname, Astro.site).href, } = Astro.props;
---

<!doctype html>
Expand All @@ -21,6 +24,12 @@ const { title, description } = Astro.props;
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title ? `${title} | Interledger Foundation` : 'Interledger Foundation'}</title>

<meta property="og:title" content={title ? `${title} | Interledger Foundation` : 'Interledger Foundation'} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exposing ogType to the next layer down because I want individual blog posts to have type of article. Similar concept for the og-image.

<meta property="og:type" content={ogType ? ogType : 'website'} />
<meta property="og:image" content={ogImageUrl ? ogImageUrl : new URL('/img/og-image.png', Astro.site).href} />
<meta property="og:url" content={canonicalURL} />

<link rel="icon" type="image/svg+xml" href="/developers/favicon.svg" />
<script defer src="https://ilf-site-analytics.netlify.app/script.js" data-website-id="50d81dd1-bd02-4f82-8a55-34a09ccbbbd9" data-domains="interledger.org"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/BlogLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const longDate = dateObj.toDateString().substring(4);
const rawHTMLString = `This article was originally published at <a href=${frontmatter.external_url}>${frontmatter.external_url}</a>.`
---

<BaseLayout title={frontmatter.title}>
<BaseLayout title={frontmatter.title} ogType="article" ogImageUrl={frontmatter.ogImageUrl ? new URL(frontmatter.ogImageUrl, Astro.site).href : new URL('/img/og-image.png', Astro.site).href}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passing props all the way like turtles (bad reference, oh well)

<main>
<article itemscope itemtype="http://schema.org/Article" class="content-wrapper">
<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
Expand Down
Loading