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

refactor: Swap the OG image to one including the Preact name #1130

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

refactor: Swap the OG image to one including the Preact name #1130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d2ca1d
refactor: Swap out og:image for a larger one w/ 'Preact' label
rschristian May 7, 2024
51cbfc8
chore: Add og:type & twitter:site meta tags
rschristian May 7, 2024
55d7013
refactor: Use variable DEPLOY_URL for Netlify PR previews
rschristian May 7, 2024
624c93b
chore: Remove now unused app-icon
rschristian May 7, 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
10 changes: 6 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#673AB8">
<link rel="alternate" type="application/rss+xml" href="https://preactjs.com/feed.xml">
<link rel="alternate" type="application/atom+xml" href="https://preactjs.com/feed.atom">
<meta property="og:image" content="https://preactjs.com/app-icon.png">
<meta name="twitter:card" content="summary">
<link rel="alternate" type="application/rss+xml" href="%NETLIFY_DEPLOY_URL%/feed.xml">
<link rel="alternate" type="application/atom+xml" href="%NETLIFY_DEPLOY_URL%/feed.atom">
<meta property="og:type" content="website">
Copy link
Member Author

@rschristian rschristian May 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Per the spec, we're meant to always have a og:type meta tag.

website seems the most fitting, but there seems to be a healthy mix of both website and article on similar frameworks' docs sites. Not 100% sure which is best, though article seems like it carries additional meaning on some sites, so I went with website

<meta property="og:image" content="%NETLIFY_DEPLOY_URL%/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@preactjs">
Copy link
Member Author

@rschristian rschristian May 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Supposedly this gives some sort of attribution and lets users jump right to the account (Docs)? Not quite sure how that's meant to work, or if it's currently broken, but the user data does come through (going by network pane in devtools), so figure it can't hurt.

We can also add <meta name="twitter:creator" content="@..."> tags for blog authors later, if we wanted (assuming that does something and/or gets fixed too).

<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
</head>
<body class="banner">
Expand Down
2 changes: 1 addition & 1 deletion plugins/netlify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import path from 'node:path';
import { pathToFileURL } from 'node:url'
import { pathToFileURL } from 'node:url';
import { Readable } from 'stream';

/**
Expand Down
18 changes: 9 additions & 9 deletions plugins/rss-feed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,31 @@ import config from '../src/config.json';
/**
* @returns {import('vite').Plugin}
*/
export function rssFeedPlugin() {
export function rssFeedPlugin(deployURL) {
return {
name: 'rss-feed',
apply: 'build',
generateBundle() {
const feed = new Feed({
title: 'Preact Blog',
description: 'Preact news and articles',
id: 'https://preactjs.com',
link: 'https://preactjs.com',
id: deployURL,
link: deployURL,
language: 'en',
image: 'https://preactjs.com/assets/branding/symbol.png',
favicon: 'https://preactjs.com/favicon.ico',
image: `${deployURL}/assets/branding/symbol.png`,
favicon: `${deployURL}/favicon.ico`,
copyright: 'All rights reserved 2022, the Preact team',
feedLinks: {
json: 'https://preactjs.com/json',
atom: 'https://preactjs.com/atom'
json: `${deployURL}/json`,
atom: `${deployURL}/atom`
}
});

config.blog.forEach(post => {
feed.addItem({
title: post.name.en,
id: `https://preactjs.com${post.path}`,
link: `https://preactjs.com${post.path}`,
id: `${deployURL}${post.path}`,
link: `${deployURL}${post.path}`,
description: post.excerpt.en,
date: new Date(post.date)
});
Expand Down
Binary file removed src/assets/app-icon.png
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/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.
2 changes: 1 addition & 1 deletion src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export async function prerender() {

const elements = new Set([
{ type: 'meta', props: { name: 'description', content: globalThis.description } },
{ type: 'meta', props: { property: 'og:url', content: `https://preactjs.com${location.pathname}` } },
{ type: 'meta', props: { property: 'og:url', content: `${import.meta.env.NETLIFY_DEPLOY_URL}${location.pathname}` } },
{ type: 'meta', props: { property: 'og:title', content: globalThis.title } },
{ type: 'meta', props: { property: 'og:description', content: globalThis.description } },
location.pathname.includes('/v8/') && { type: 'meta', props: { name: 'robots', content: 'noindex' } },
Expand Down
10 changes: 9 additions & 1 deletion vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ import { spaFallbackMiddlewarePlugin } from './plugins/spa-fallback-middleware.j
import { htmlRoutingMiddlewarePlugin } from './plugins/html-routing-middleware.js';
import { rssFeedPlugin } from './plugins/rss-feed.js';

const NETLIFY_DEPLOY_URL = process.env.CONTEXT === 'deploy-preview'
? process.env.DEPLOY_PRIME_URL
: 'https://preactjs.com';

Comment on lines +13 to +16
Copy link
Member Author

Choose a reason for hiding this comment

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

Makes it slightly easier to test some of this stuff out in deploy previews as you'd otherwise need to edit & then revert before merging.

This is the Netlify recommendation for doing this sort of thing -- CONTEXT is going to be deploy-preview or production (can spot this by opening up the deploy logs, prod & preview) and DEPLOY_PRIME_URL will be our preview URL (Docs)

export default defineConfig({
publicDir: 'src/assets',
optimizeDeps: {
Expand All @@ -19,7 +23,11 @@ export default defineConfig({
target: ['chrome88', 'edge88', 'es2020', 'firefox78', 'safari14'],
outDir: 'build'
},
define: {
'import.meta.env.NETLIFY_DEPLOY_URL': JSON.stringify(NETLIFY_DEPLOY_URL)
},
plugins: [
// @ts-ignore
replace({
'process.env.BRANCH': JSON.stringify(process.env.BRANCH),
preventAssignment: true
Expand Down Expand Up @@ -53,6 +61,6 @@ export default defineConfig({
netlifyPlugin(),
spaFallbackMiddlewarePlugin(),
htmlRoutingMiddlewarePlugin(),
rssFeedPlugin()
rssFeedPlugin(NETLIFY_DEPLOY_URL)
]
});