Skip to content

feat: seo for website #511

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
Aslemammad merged 6 commits into from
May 17, 2026
Merged

feat: seo for website #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ca62c0
feat: seo for website
AmirSa12 May 14, 2026
f5229f6
add cf pages url env var
AmirSa12 May 15, 2026
25f689c
update
AmirSa12 May 15, 2026
769dac0
update
AmirSa12 May 15, 2026
b595693
fix lint
AmirSa12 May 15, 2026
f58c49f
update
AmirSa12 May 15, 2026
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
8 changes: 7 additions & 1 deletion packages/app/app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ useHead({

useSeoMeta({
title: "pkg.pr.new",
description: "Search repositories to list their continuous releases.",
description: "Continuous preview releases for your libraries.",
ogTitle: "pkg.pr.new",
ogDescription: "Continuous preview releases for your libraries.",
ogType: "website",
twitterCard: "summary_large_image",
});

defineOgImageComponent("Brand");
</script>

<template>
Expand Down
122 changes: 122 additions & 0 deletions packages/app/app/components/OgImage/Brand.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<script setup lang="ts">
withDefaults(
defineProps<{
title?: string;
tagline?: string;
}>(),
{
title: "pkg.pr.new",
tagline: "Instant preview releases. Without publishing to npm.",
},
);
</script>

<template>
<div
style="
width: 100%;
height: 100%;
display: flex;
position: relative;
background: #050714;
color: #ffffff;
font-family: &quot;Inter&quot;, sans-serif;
overflow: hidden;
"
>
<!-- top accent bar -->
<div
style="
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
display: flex;
background: linear-gradient(
90deg,
#f38020 0%,
#38bdf8 55%,
#0ea5e9 100%
);
"
/>

<div
style="
display: flex;
flex-direction: column;
justify-content: center;
padding: 72px 80px;
flex: 1;
z-index: 1;
"
>
<div
style="
display: flex;
align-items: center;
font-size: 24px;
letter-spacing: 0.06em;
color: #7dd3fc;
"
>
<img
src="/favicon.svg"
width="48"
height="48"
alt=""
style="margin-right: 18px"
/>
<span style="display: flex">pkg.pr.new</span>
<span style="display: flex; color: #475569; margin: 0 14px">/</span>
<span style="display: flex; color: #94a3b8; letter-spacing: 0.08em"
>Continuous releases</span
>
</div>

<div
style="
display: flex;
font-size: 132px;
font-weight: 800;
color: #38bdf8;
letter-spacing: -0.045em;
line-height: 1;
margin-top: 28px;
"
>
{{ title }}
</div>

<div
style="
display: flex;
font-size: 38px;
color: #cbd5e1;
margin-top: 28px;
line-height: 1.25;
"
>
{{ tagline }}
</div>
</div>

<div
style="
position: absolute;
bottom: 28px;
left: 80px;
right: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 22px;
color: #64748b;
z-index: 1;
"
>
<span style="display: flex">github.com/stackblitz-labs/pkg.pr.new</span>
</div>
</div>
</template>
135 changes: 135 additions & 0 deletions packages/app/app/components/OgImage/Repo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<script setup lang="ts">
defineProps<{
owner: string;
repo: string;
releaseCount?: number;
}>();

function formatCount(n?: number): string {
if (n == null) return "0";
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}k`;
return String(n);
}
</script>

<template>
<div
style="
width: 100%;
height: 100%;
display: flex;
position: relative;
background: #050714;
color: #ffffff;
font-family: &quot;Inter&quot;, sans-serif;
overflow: hidden;
"
>
<div
style="
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
display: flex;
"
/>

<div
style="
position: absolute;
top: 56px;
left: 64px;
right: 64px;
bottom: 56px;
display: flex;
flex-direction: column;
align-items: flex-start;
"
>
<div
style="
display: flex;
align-items: center;
font-size: 24px;
color: #7dd3fc;
letter-spacing: 0.06em;
"
>
<img
src="/favicon.svg"
width="40"
height="40"
alt=""
style="margin-right: 14px"
/>
<span style="display: flex">pkg.pr.new</span>
<span style="display: flex; color: #475569; margin: 0 14px">/</span>
<span style="display: flex; color: #94a3b8; letter-spacing: 0.08em"
>Continuous releases</span
>
</div>

<div
style="
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
"
>
<div
style="
display: flex;
align-items: center;
font-size: 54px;
font-weight: 700;
color: #e2e8f0;
"
>
<img
:src="`https://github.com/${owner}.png?size=128`"
width="88"
height="88"
alt=""
style="display: flex; border-radius: 14px; margin-right: 16px"
/>
{{ owner }}
<span style="display: flex; color: #64748b">/</span>
{{ repo }}
</div>

<div
style="
display: flex;
align-items: center;
color: #94a3b8;
font-size: 24px;
margin-top: 18px;
"
>
github.com/{{ owner }}/{{ repo }}
</div>

<div
style="
display: flex;
align-items: center;
color: #7dd3fc;
font-size: 30px;
font-weight: 600;
margin-top: 28px;
"
>
<span style="display: flex"
>{{ formatCount(releaseCount) }} releases</span
>
</div>
</div>
</div>
</div>
</template>
9 changes: 8 additions & 1 deletion packages/app/app/pages/~/[owner]/[repo].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,15 @@ useSeoMeta({
description: `See all ${repository.name} recent continuous releases.`,
ogTitle: `${repository.owner.login}/${repository.name} Continuous Releases`,
ogDescription: `See all ${repository.name} recent continuous releases.`,
ogType: "website",
twitterCard: "summary_large_image",
});

defineOgImageComponent("Repo", {
owner: repository.owner.login,
repo: repository.name,
releaseCount: repository.releaseCount,
});
// TODO: OG Image
</script>

<template>
Expand Down
24 changes: 23 additions & 1 deletion packages/app/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,30 @@ export default defineNuxtConfig({
future: { compatibilityVersion: 4 },

// https://nuxt.com/modules
modules: ["@nuxt/eslint", "@nuxt/ui", "@vueuse/nuxt", "nitro-cloudflare-dev"],
modules: [
"@nuxt/eslint",
"@nuxt/ui",
"@vueuse/nuxt",
"nitro-cloudflare-dev",
"nuxt-og-image",
],

css: ["~/assets/css/main.css"],

site: {
url: "https://pkg.pr.new",
name: "pkg.pr.new",
},

ogImage: {
defaults: {
component: "Brand",
width: 1200,
height: 630,
cacheMaxAgeSeconds: 60 * 60 * 24 * 7,
},
},

// https://eslint.nuxt.com
eslint: {
config: {
Expand Down Expand Up @@ -38,6 +58,8 @@ export default defineNuxtConfig({
"query-registry",
"@simulacrum",
"@jsdevtools",
"consola",
"nuxt-site-config",
],
},
},
Expand Down
2 changes: 2 additions & 0 deletions packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@vueuse/nuxt": "^12.2.0",
"marked": "^15.0.4",
"nuxt": "^3.15.0",
"nuxt-og-image": "^4.2.0",
"nuxt-shiki": "0.3.0",
"octokit": "^4.0.2",
"query-registry": "^3.0.1",
Expand All @@ -47,6 +48,7 @@
"@types/string-similarity": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@vue/compiler-sfc": "3.5.13",
"cross-env": "^7.0.3",
"dotenv": "^16.4.5",
"esbuild": "^0.20.2",
Expand Down
Loading
Loading