Skip to content

Commit a4fd55e

Browse files
fatonramadanifatonramadani
authored
Fix OG tags (windmill-labs#538)
1 parent 16cdf77 commit a4fd55e

File tree

3 files changed

+163
-141
lines changed

3 files changed

+163
-141
lines changed

‎src/theme/BlogLayout/index.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,34 @@ import Layout from '@theme/Layout';
44
import BlogSidebar from '@theme/BlogSidebar';
55
import { twMerge } from 'tailwind-merge';
66
import { useLocation } from '@docusaurus/router';
7+
import Head from '@docusaurus/Head';
78

89
export default function BlogLayout(props) {
910
const { sidebar, toc, children, ...layoutProps } = props;
1011
const hasSidebar = sidebar && sidebar.items.length > 0;
1112
const isBlogPostPageList = Boolean(toc);
1213
const location = useLocation();
1314

15+
const isChangelogHomepage = location?.pathname?.endsWith('/changelog');
1416
const isChangelog = location?.pathname?.includes('/changelog');
17+
const title = 'Changelog | Windmill';
18+
const description = 'See the latest changes to Windmill';
19+
const image = '../../img/changelog.png';
1520

1621
return (
1722
<Layout {...layoutProps}>
23+
{isChangelogHomepage && (
24+
<Head>
25+
<title>{title}</title>
26+
<meta name="title" content={title} />
27+
<meta property="og:title" content={title} />
28+
<meta property="og:description" content={description} />
29+
<meta property="og:image" content={image} />
30+
<meta property="site_name" content="Windmill" />
31+
<meta property="og:type" content="changelog" />
32+
</Head>
33+
)}
34+
1835
{!isBlogPostPageList && (
1936
<div className={twMerge('w-full mx-auto', isChangelog ? 'max-w-6xl' : 'max-w-7xl ')}>
2037
<div className="">
@@ -67,7 +84,6 @@ export default function BlogLayout(props) {
6784
<div className="row">
6885
<BlogSidebar sidebar={sidebar} />
6986
{toc && <div className="col col--2"></div>}
70-
7187
<main
7288
className={clsx(
7389
'col',

‎src/theme/BlogPostItem/Container/index.js

Lines changed: 146 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default function BlogPostItemContainer({ children, className }) {
1313
const { frontMatter, assets, isBlogPostPage, metadata } = useBlogPost();
1414
const { withBaseUrl } = useBaseUrlUtils();
1515
const location = useLocation();
16+
1617
const image = assets.image ?? frontMatter.image;
1718
const video = assets.video ?? frontMatter.video;
1819

@@ -26,154 +27,161 @@ export default function BlogPostItemContainer({ children, className }) {
2627
const pageTitle = isFeaturePage ? metadata.title : defaultTitle;
2728
const pageDescription = isFeaturePage ? metadata.description : defaultDescription;
2829

30+
const isChangelogDetail = location.pathname.includes(metadata.permalink);
31+
2932
if (isChangelog) {
3033
return (
31-
<div className="w-full">
32-
<Head>
33-
<title>{metadata.title}</title>
34-
<title>{pageTitle}</title>
35-
<meta name="title" content={metadata.title} />
36-
<meta property="og:title" content={metadata.title} />
37-
<meta property="og:description" content={pageDescription} />
38-
<meta property="og:image" content={image} />
39-
<meta property="site_name" content="Windmill" />
40-
<meta property="og:type" content="changelog" />
41-
</Head>
42-
43-
<div className="flex flex-row gap-2 items-center mb-4">
44-
<h3 className="text-xl font-semibold">
34+
<>
35+
{isChangelogDetail && (
36+
<>
37+
<Head>
38+
<title>{metadata.title}</title>
39+
<title>{pageTitle}</title>
40+
<meta name="title" content={metadata.title} />
41+
<meta property="og:title" content={metadata.title} />
42+
<meta property="og:description" content={pageDescription} />
43+
<meta property="og:image" content={image ?? '../../img/changelog.png'} />
44+
<meta property="site_name" content="Windmill" />
45+
<meta property="og:type" content="changelog" />
46+
</Head>
47+
</>
48+
)}
49+
<div className="w-full">
50+
<div className="flex flex-row gap-2 items-center mb-4">
51+
<h3 className="text-xl font-semibold">
52+
<a
53+
href={`/changelog/${frontMatter.slug}`}
54+
className="text-gray-900 dark:text-white hover:text-blue-600"
55+
>
56+
{metadata.title}
57+
</a>
58+
</h3>
59+
{metadata?.tags.map((tag, index) => (
60+
<span
61+
key={tag + index}
62+
className={
63+
'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium ' +
64+
(tag.label === 'App Editor'
65+
? 'bg-orange-100 text-orange-800'
66+
: tag.label === 'Flow Editor'
67+
? 'bg-emerald-100 text-emerald-800'
68+
: tag.label === 'Enterprise & Cloud'
69+
? 'bg-gray-50 text-blue-900'
70+
: 'bg-blue-100 text-blue-800')
71+
}
72+
>
73+
{tag.label === 'Enterprise & Cloud' ? (
74+
<a href="/pricing" className="text-blue-900 hover:text-blue-700">
75+
{tag.label}
76+
</a>
77+
) : (
78+
tag.label
79+
)}
80+
</span>
81+
))}
4582
<a
46-
href={`/changelog/${frontMatter.slug}`}
47-
className="text-gray-900 dark:text-white hover:text-blue-600"
83+
href={`https://github.com/windmill-labs/windmill/releases/tag/${frontMatter.version}`}
84+
target="_blank"
4885
>
49-
{metadata.title}
86+
<span
87+
className={twMerge(
88+
'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium',
89+
'bg-gray-100 hover:bg-gray-200 text-gray-800'
90+
)}
91+
>
92+
{frontMatter.version}
93+
</span>
5094
</a>
51-
</h3>
52-
{metadata?.tags.map((tag, index) => (
53-
<span
54-
key={tag + index}
55-
className={
56-
'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium ' +
57-
(tag.label === 'App Editor'
58-
? 'bg-orange-100 text-orange-800'
59-
: tag.label === 'Flow Editor'
60-
? 'bg-emerald-100 text-emerald-800'
61-
: tag.label === 'Enterprise & Cloud'
62-
? 'bg-gray-50 text-blue-900'
63-
: 'bg-blue-100 text-blue-800')
64-
}
65-
>
66-
{tag.label === 'Enterprise & Cloud' ? (
67-
<a href="/pricing" className="text-blue-900 hover:text-blue-700">
68-
{tag.label}
95+
</div>
96+
97+
<div className="mb-6">
98+
<div className="flex items-center">
99+
<p className="text-base dark:text-gray-300 text-gray-600 mr-3">
100+
{new Date(metadata.date).toLocaleDateString()} |{' '}
101+
</p>
102+
{frontMatter.docs && (
103+
<a
104+
href={frontMatter.docs}
105+
className="hover:bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 dark:hover:bg-slate-800 px-2.5 py-1 rounded-xl text-xs text-gray-600 dark:text-gray-200 inline-flex items-center"
106+
>
107+
<FileText
108+
className="mr-2"
109+
aria-hidden="true"
110+
style={{ width: '14px', height: '14px' }}
111+
/>
112+
<span className="align-middle">Docs</span>
69113
</a>
70-
) : (
71-
tag.label
72114
)}
73-
</span>
74-
))}
75-
<a
76-
href={`https://github.com/windmill-labs/windmill/releases/tag/${frontMatter.version}`}
77-
target="_blank"
78-
>
79-
<span
80-
className={twMerge(
81-
'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium',
82-
'bg-gray-100 hover:bg-gray-200 text-gray-800'
83-
)}
84-
>
85-
{frontMatter.version}
86-
</span>
87-
</a>
88-
</div>
89-
90-
<div className="mb-6">
91-
<div className="flex items-center">
92-
<p className="text-base dark:text-gray-300 text-gray-600 mr-3">
93-
{new Date(metadata.date).toLocaleDateString()} |{' '}
94-
</p>
95-
{frontMatter.docs && (
96-
<a
97-
href={frontMatter.docs}
98-
className="hover:bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 dark:hover:bg-slate-800 px-2.5 py-1 rounded-xl text-xs text-gray-600 dark:text-gray-200 inline-flex items-center"
99-
>
100-
<FileText
101-
className="mr-2"
102-
aria-hidden="true"
103-
style={{ width: '14px', height: '14px' }}
104-
/>
105-
<span className="align-middle">Docs</span>
106-
</a>
107-
)}
115+
</div>
108116
</div>
109-
</div>
110117

111-
{image ? (
112-
<img
113-
className="rounded-lg shadow-lg border h-96 w-full object-cover my-8"
114-
src={image}
115-
alt=""
116-
/>
117-
) : video ? (
118-
<video
119-
src={video}
120-
className="rounded-lg shadow-lg border h-96 w-full object-cover my-8"
121-
autoPlay
122-
muted
123-
loop
124-
disableRemotePlayback
125-
/>
126-
) : (
127-
''
128-
)}
129-
<p className="text-base dark:text-gray-200 text-gray-600">{metadata.description}</p>
118+
{image ? (
119+
<img
120+
className="rounded-lg shadow-lg border h-96 w-full object-cover my-8"
121+
src={image}
122+
alt=""
123+
/>
124+
) : video ? (
125+
<video
126+
src={video}
127+
className="rounded-lg shadow-lg border h-96 w-full object-cover my-8"
128+
autoPlay
129+
muted
130+
loop
131+
disableRemotePlayback
132+
/>
133+
) : (
134+
''
135+
)}
136+
<p className="text-base dark:text-gray-200 text-gray-600">{metadata.description}</p>
130137

131-
{frontMatter?.improvements?.length > 0 && (
132-
<div className="mt-6">
133-
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
134-
<Sparkles className="inline-block w-6 h-6 mr-2" />
135-
Improvements
136-
</h4>
137-
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
138-
{frontMatter?.improvements.map((improvement, idx) => (
139-
<li key={idx + 'improvements'} className="list-disc">
140-
{improvement}
141-
</li>
142-
))}
143-
</ul>
144-
</div>
145-
)}
146-
{frontMatter?.features?.length > 0 && (
147-
<div className="mt-6">
148-
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
149-
<Blocks className="inline-block w-6 h-6 mr-2" />
150-
New Features
151-
</h4>
152-
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
153-
{frontMatter?.features.map((newFeature, idx) => (
154-
<li key={idx + 'features'} className="list-disc">
155-
{newFeature}
156-
</li>
157-
))}
158-
</ul>
159-
</div>
160-
)}
161-
{frontMatter?.deprecations?.length > 0 && (
162-
<div className="mt-6">
163-
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
164-
<Archive className="inline-block w-6 h-6 mr-2" />
165-
Deprecations
166-
</h4>
167-
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
168-
{frontMatter?.deprecations.map((deprecation, idx) => (
169-
<li key={idx + 'deprecations'} className="list-disc">
170-
{deprecation}
171-
</li>
172-
))}
173-
</ul>
174-
</div>
175-
)}
176-
</div>
138+
{frontMatter?.improvements?.length > 0 && (
139+
<div className="mt-6">
140+
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
141+
<Sparkles className="inline-block w-6 h-6 mr-2" />
142+
Improvements
143+
</h4>
144+
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
145+
{frontMatter?.improvements.map((improvement, idx) => (
146+
<li key={idx + 'improvements'} className="list-disc">
147+
{improvement}
148+
</li>
149+
))}
150+
</ul>
151+
</div>
152+
)}
153+
{frontMatter?.features?.length > 0 && (
154+
<div className="mt-6">
155+
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
156+
<Blocks className="inline-block w-6 h-6 mr-2" />
157+
New Features
158+
</h4>
159+
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
160+
{frontMatter?.features.map((newFeature, idx) => (
161+
<li key={idx + 'features'} className="list-disc">
162+
{newFeature}
163+
</li>
164+
))}
165+
</ul>
166+
</div>
167+
)}
168+
{frontMatter?.deprecations?.length > 0 && (
169+
<div className="mt-6">
170+
<h4 className="text-lg font-medium text-gray-900 dark:text-white flex flex-row gap-1 items-center">
171+
<Archive className="inline-block w-6 h-6 mr-2" />
172+
Deprecations
173+
</h4>
174+
<ul className="mt-4 text-base dark:text-gray-200 text-gray-600 pl-8 flex flex-col gap-2">
175+
{frontMatter?.deprecations.map((deprecation, idx) => (
176+
<li key={idx + 'deprecations'} className="list-disc">
177+
{deprecation}
178+
</li>
179+
))}
180+
</ul>
181+
</div>
182+
)}
183+
</div>
184+
</>
177185
);
178186
}
179187
return (
@@ -204,11 +212,9 @@ export default function BlogPostItemContainer({ children, className }) {
204212

205213
<span>{Math.ceil(metadata.readingTime)} min read</span>
206214
</div>
207-
208215
<h2 className="text-lg leading-6 font-semibold mt-4 mb-2 text-gray-900 dark:text-white">
209216
{metadata.title}
210217
</h2>
211-
212218
<p className="text-gray-600 text-sm h-max dark:text-gray-400">
213219
{metadata.description ?? frontMatter.description}
214220
</p>

‎static/img/changelog.png

252 KB
Loading

0 commit comments

Comments
 (0)