Skip to content

add og:url to attendees open graph image #1546

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

Merged
merged 3 commits into from
Aug 28, 2023
Merged

add og:url to attendees open graph image #1546

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
869f708
Update [hash].tsx
YassinEldeeb Aug 28, 2023
bf155d2
fix
YassinEldeeb Aug 28, 2023
e116809
fix
YassinEldeeb Aug 28, 2023
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
118 changes: 68 additions & 50 deletions src/pages/conf/attendee/[hash].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,55 @@ import LayoutConf from "../../../components/Conf/Layout"
import HeaderConf from "../../../components/Conf/Header"
// import ButtonConf from "../../components/Conf/Button"
import clsx from "clsx"
import { PageProps, HeadProps } from "gatsby"
import { PageProps } from "gatsby"
import SeoConf from "../../../components/Conf/Seo"

export default ({ location, params }: PageProps) => {
const search = getSeachParams(params.hash)
// const text = "Nice! I got my @GraphQLConf ticket! Get yours too!"
return (
<LayoutConf>
<HeaderConf />
<div className="bg-white h-screen">
<div className="prose lg:prose-lg mx-auto py-10 max-sm:px-4">
<h1>Your ticket for GraphQLConf</h1>
<section className="px-0 my-8">
<div className="flex gap-4 flex-row flex-wrap">
{/*<ButtonConf*/}
{/* href={`https://twitter.com/intent/tweet?url=${href}&text=${text}`}*/}
{/*>*/}
{/* Share on X / Twitter*/}
{/*</ButtonConf>*/}
<button
className={clsx(
"cursor-pointer transition ease-in-out no-underline inline-flex text-center w-[fit-content] border-0 py-2 px-6 focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap",
"bg-[--rhodamine] text-white font-medium"
)}
onClick={async () => {
try {
await navigator.clipboard.writeText(location.href)
console.log("Content copied to clipboard")
} catch (err) {
console.error("Failed to copy:", err)
}
}}
>
Share URL
</button>
</div>
</section>
<>
<Head params={params} location={location} />
<LayoutConf>
<HeaderConf />
<div className="bg-white h-screen">
<div className="prose lg:prose-lg mx-auto py-10 max-sm:px-4">
<h1>Your ticket for GraphQLConf</h1>
<section className="px-0 my-8">
<div className="flex gap-4 flex-row flex-wrap">
{/*<ButtonConf*/}
{/* href={`https://twitter.com/intent/tweet?url=${href}&text=${text}`}*/}
{/*>*/}
{/* Share on X / Twitter*/}
{/*</ButtonConf>*/}
<button
className={clsx(
"cursor-pointer transition ease-in-out no-underline inline-flex text-center w-[fit-content] border-0 py-2 px-6 focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap",
"bg-[--rhodamine] text-white font-medium"
)}
onClick={async () => {
try {
await navigator.clipboard.writeText(location.href)
console.log("Content copied to clipboard")
} catch (err) {
console.error("Failed to copy:", err)
}
}}
>
Share URL
</button>
</div>
</section>
</div>
{search && (
<img
src={`https://og-image.the-guild.dev/conf${search}`}
className="block mx-auto"
/>
)}
</div>
{search && (
<img
src={`https://og-image.the-guild.dev/conf${search}`}
className="block mx-auto"
/>
)}
</div>
</LayoutConf>
</LayoutConf>
</>
)
}

Expand Down Expand Up @@ -80,17 +83,32 @@ function getSeachParams(base64: string): string {
return "?" + searchParams.toString()
}

export function Head({ params }: HeadProps & { hash: string }) {
export function Head({
params,
location,
}: {
location: {
pathname: string
}
params: Record<string, string>
}) {
return (
<SeoConf
title="My ticket"
ogImage={{
url: `https://og-image.the-guild.dev/conf${getSeachParams(
params.hash
)}`,
width: 1200,
height: 600,
}}
/>
<>
<SeoConf
title="My ticket"
ogImage={{
url: `https://og-image.the-guild.dev/conf${getSeachParams(
params.hash
)}`,
width: 1200,
height: 600,
}}
/>

<meta
property="og:url"
content={`https://graphql.org${location.pathname}`}
/>
</>
)
}