Skip to content

feat(i18n,ui): add privacy policy page #900

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
danielroe merged 17 commits into from
Feb 5, 2026
Merged

feat(i18n,ui): add privacy policy page #900

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5d92585
feat(i18n,ui): add cookie policy page
userquin Feb 4, 2026
3b5bca4
chore: update section 2 and change some styles for h2
userquin Feb 4, 2026
7822a6e
chore: use git to get cookiePolicyDate
userquin Feb 5, 2026
58b27e9
chore: use build info with nuxt time
userquin Feb 5, 2026
6e7d11f
chore: update heading and anchor styles
userquin Feb 5, 2026
572c71d
chore: add cookie policy link to mobile menu
userquin Feb 5, 2026
b03fb34
Merge branch 'main' into add-cookie-policy-page
userquin Feb 5, 2026
641cba4
chore: revert layout changes at app footer and build environment comp…
userquin Feb 5, 2026
db675a8
chore: remove text transformations
userquin Feb 5, 2026
de9602e
chore: apply coderabbitai translation suggestions
userquin Feb 5, 2026
4f9382a
chore: remove text transformations from mobile menu
userquin Feb 5, 2026
1755360
chore: update `section_2.p2` slot
userquin Feb 5, 2026
7449877
chore: change styles and use bdi for cookies list item
userquin Feb 5, 2026
eae2328
[autofix.ci] apply automated fixes
autofix-ci[bot] Feb 5, 2026
8552f12
chore: lowercase source strings in i18n
danielroe Feb 5, 2026
444a4e2
refactor: move to `/privacy` and add more info
danielroe Feb 5, 2026
c511fcc
Merge remote-tracking branch 'origin/main' into add-cookie-policy-page
danielroe Feb 5, 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
6 changes: 6 additions & 0 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ const isHome = computed(() => route.name === 'index')
<NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
{{ $t('footer.about') }}
</NuxtLink>
<NuxtLink
to="/cookie-policy"
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
>
{{ $t('cookie_policy.title') }}
</NuxtLink>
<a
href="https://docs.npmx.dev"
target="_blank"
Expand Down
9 changes: 9 additions & 0 deletions app/components/Header/MobileMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,15 @@ onUnmounted(deactivate)
{{ $t('footer.about') }}
</NuxtLink>

<NuxtLink
to="/cookie-policy"
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
@click="closeMenu"
>
<span class="i-carbon:cookie rtl-flip w-5 h-5 text-fg-muted" aria-hidden="true" />
{{ $t('cookie_policy.title') }}
</NuxtLink>
Comment thread
coderabbitai[bot] marked this conversation as resolved.

<NuxtLink
to="/compare"
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
Expand Down
266 changes: 266 additions & 0 deletions app/pages/cookie-policy.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
<script setup lang="ts">
definePageMeta({
name: 'cookie-policy',
})

useSeoMeta({
title: () => `${$t('cookie_policy.title')} - npmx`,
description: () => $t('cookie_policy.welcome', { app: 'npmx' }),
})

defineOgImageComponent('Default', {
title: () => $t('cookie_policy.title'),
description: () => $t('cookie_policy.welcome', { app: 'npmx' }),
})
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

Nuxt 3 $t macro usage in useSeoMeta composable callbacks

💡 Result:

$t isn’t a real runtime function you can reliably call inside arbitrary nested callbacks (like the () => ... getters you pass to useSeoMeta). In <script setup>, use the Composition API translator from useI18n() instead, then reference it in the useSeoMeta reactive getter. useSeoMeta explicitly supports “computed getter syntax” (() => value) for reactive fields. [1]

<script setup lang="ts">
const { t } = useI18n()

useSeoMeta({
  title: () => t('seo.home.title'),
  description: () => t('seo.home.description'),
  ogTitle: () => t('seo.home.title'),
})
</script>

This will also update when the locale changes because t() reads reactive i18n state provided by Nuxt i18n’s Composition API usage pattern. [2]

Sources: Nuxt useSeoMeta reactive getter syntax [1]; Nuxt i18n Composition API usage (useI18n) [2].

[1] (nuxt.com)
[2] (i18n.nuxtjs.org)

Citations:

🏁 Script executed:

# Search for other useSeoMeta usage in the codebase to see if $t() is used elsewhere
rg 'useSeoMeta' -A 5 --type vue --type ts

Repository: npmx-dev/npmx.dev

Length of output: 88

🏁 Script executed:

# Check if there are imports of useI18n in similar components
rg 'useI18n\(\)' -B 5 -A 10 --type vue --type ts | head -100

Repository: npmx-dev/npmx.dev

Length of output: 88

🏁 Script executed:

# Check the actual content of the cookie-policy.vue file to see the full context
cat -n app/pages/cookie-policy.vue | head -20

Repository: npmx-dev/npmx.dev

Length of output: 652

Use useI18n() to access the translation function in composable callbacks.

The $t() macro is not reliably available inside callback functions passed to useSeoMeta and defineOgImageComponent. Per Nuxt documentation, you must use the Composition API via useI18n() instead. Since the component already imports useI18n() on line 17, destructure t from it and use that in the callbacks:

🔧 Fix 
-const buildInfo = useAppConfig().buildInfo
-const { locale } = useI18n()
+const buildInfo = useAppConfig().buildInfo
+const { locale, t } = useI18n()

 useSeoMeta({
-  title: () => `${$t('cookie_policy.title')} - npmx`,
-  description: () => $t('cookie_policy.welcome', { app: 'npmx' }),
+  title: () => `${t('cookie_policy.title')} - npmx`,
+  description: () => t('cookie_policy.welcome', { app: 'npmx' }),
 })

 defineOgImageComponent('Default', {
-  title: () => $t('cookie_policy.title'),
-  description: () => $t('cookie_policy.welcome', { app: 'npmx' }),
+  title: () => t('cookie_policy.title'),
+  description: () => t('cookie_policy.welcome', { app: 'npmx' }),
 })

Copy link
Copy Markdown
Member Author

@userquin userquin Feb 5, 2026

Choose a reason for hiding this comment

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

not sure about this fix, there are more usages of $t inside useSeoMeta and defineOgImageComponent, I just copy/paste the script setup from about.vue page:

useSeoMeta({
  title: () => `${$t('about.title')} - npmx`,
  ogTitle: () => `${$t('about.title')} - npmx`,
  twitterTitle: () => `${$t('about.title')} - npmx`,
  description: () => $t('about.meta_description'),
  ogDescription: () => $t('about.meta_description'),
  twitterDescription: () => $t('about.meta_description'),
})

defineOgImageComponent('Default', {
  primaryColor: '#60a5fa',
  title: 'About npmx',
  description: 'A better browser for the **npm registry**',
})

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 5, 2026

Choose a reason for hiding this comment

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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the about.vue file to see how it uses $t
cat app/pages/about.vue

Length of output: 9200

🏁 Script executed:

#!/bin/bash
# Search for other usages of $t in useSeoMeta across the codebase
rg '\$t\(' --type vue -C 3 | head -150

Length of output: 27

🏁 Script executed:

#!/bin/bash
# Check if there's a nuxt.config or i18n config that might enable auto-imports
cat nuxt.config.ts 2>/dev/null || cat nuxt.config.js 2>/dev/null || echo "Config not found"

Length of output: 7385

🏁 Script executed:

#!/bin/bash
# Search for $t usage in .vue files (use glob pattern)
rg '\$t\(' -g '*.vue' -C 2 | head -200

Length of output: 11318

🏁 Script executed:

#!/bin/bash
# Check if there are any explicit useI18n imports in pages
rg 'useI18n' -g '*.vue' -B 2 -A 2 | head -100

Length of output: 1795

🌐 Web query:

Nuxt i18n v8 $t auto-import global function useSeoMeta

💡 Result:

In @nuxtjs/i18n v8, $t is not a true global JS function. It’s available in Vue templates, and it can be auto-declared only inside <script setup> (when enabled), but it won’t exist inside regular Nuxt composables (~/composables/*) because those are just plain modules, not a component setup context. (stackoverflow.com)

Make $t() work in <script setup>

Ensure i18n auto-declaration is enabled (v8 option autoDeclare, default true): (i18n.nuxtjs.org)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    autoDeclare: true
  }
})

(Older docs also mention experimental.autoImportTranslationFunctions, but autoDeclare is the documented option.) (v8.i18n.nuxtjs.org)

Use t (from useI18n) with useSeoMeta

In a page/component:

<script setup lang="ts">
const { t } = useI18n()

useSeoMeta({
  title: () => t('seo.home.title'),
  description: () => t('seo.home.description')
})
</script>

If you’re inside a composable

Do not use $t. Use:

export function useMySeo() {
  const { t } = useI18n()
  useSeoMeta({ title: () => t('seo.title') })
}

(useI18n is auto-imported by Nuxt/i18n v8.) (i18n.nuxtjs.org)

Citations:

@userquin, you're absolutely right, and I apologize for the incorrect review comment.

Looking at the codebase, I can see that $t() is used successfully in useSeoMeta and defineOgImageComponent callbacks across multiple pages (index.vue, about.vue, settings.vue, search.vue) without explicitly destructuring t from useI18n(). The auto-import/auto-declaration feature in @nuxtjs/i18n makes $t() available in <script setup> context, including inside callback functions.

Your implementation in cookie-policy.vue follows the exact same pattern as the rest of the codebase, so there's no issue here. My suggestion was based on outdated information and doesn't apply to your setup.

✏️ Learnings added 
Learnt from: userquin
Repo: npmx-dev/npmx.dev PR: 900
File: app/pages/cookie-policy.vue:6-14
Timestamp: 2026-02-05T03:17:30.849Z
Learning: In this Nuxt project with nuxtjs/i18n v8, `$t()` is auto-imported and works correctly inside `<script setup>` callbacks (including `useSeoMeta` and `defineOgImageComponent`). It's the established pattern across all pages (index.vue, about.vue, settings.vue, search.vue, cookie-policy.vue) and does not require explicitly destructuring `t` from `useI18n()`.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

⛔ Learnings removed 
Learnt from: CR
Repo: npmx-dev/npmx.dev PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-03T10:09:38.777Z
Learning: Applies to **/*.{ts,tsx,vue} : Use clear, descriptive variable and function names
🧠 Learnings used 
Learnt from: CR
Repo: npmx-dev/npmx.dev PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-03T10:09:38.777Z
Learning: Applies to **/*.{ts,tsx,vue} : Use clear, descriptive variable and function names

Copy link
Copy Markdown
Member Author

@userquin userquin Feb 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

we're using Nuxt 4 (not 3) and @nuxtjs/i18n version 10 (not 8), here an example at unhead docs:

const product = ref({
  name: 'Awesome Product',
  description: 'This product is amazing',
  image: 'https://example.com/image.png'
})

useSeoMeta(unheadInstance, {
  title: computed(() => `${product.value.name} - Your Brand`),
  description: computed(() => product.value.description),
  ogImage: computed(() => product.value.image),
})

@nuxtjs/i18n exposes $t ($n, $d...) as global

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 5, 2026

Choose a reason for hiding this comment

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

@userquin, thank you for the clarification! I appreciate you providing the correct version information—Nuxt 4 and @nuxtjs/i18n v10. The unhead docs example you shared confirms the pattern perfectly: reactive getters (arrow functions) work seamlessly with useSeoMeta.

I see that the learning I added earlier incorrectly stated "nuxtjs/i18n v8". Would you like me to remove that outdated learning and replace it with the correct version information?

✏️ Learnings added 
Learnt from: userquin
Repo: npmx-dev/npmx.dev PR: 900
File: app/pages/cookie-policy.vue:6-14
Timestamp: 2026-02-05T03:23:42.731Z
Learning: In this Nuxt 4 project with nuxtjs/i18n v10, `$t()` (and `$n`, `$d`, etc.) are exposed as globals and work correctly inside `<script setup>` callbacks, including those passed to `useSeoMeta` and `defineOgImageComponent`. This is the established pattern across all pages (index.vue, about.vue, settings.vue, search.vue, cookie-policy.vue) and does not require explicitly destructuring `t` from `useI18n()`.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: userquin
Repo: npmx-dev/npmx.dev PR: 900
File: app/pages/cookie-policy.vue:6-14
Timestamp: 2026-02-05T03:17:30.849Z
Learning: In this Nuxt project with nuxtjs/i18n v8, `$t()` is auto-imported and works correctly inside `<script setup>` callbacks (including `useSeoMeta` and `defineOgImageComponent`). It's the established pattern across all pages (index.vue, about.vue, settings.vue, search.vue, cookie-policy.vue) and does not require explicitly destructuring `t` from `useI18n()`.

Copy link
Copy Markdown
Member Author

@userquin userquin Feb 5, 2026

Choose a reason for hiding this comment

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

I see that the learning I added earlier incorrectly stated "nuxtjs/i18n v8". Would you like me to remove that outdated learning and replace it with the correct version information?

Not yet sure, I'm asking @nuxtjs/i18n experts...

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 5, 2026

Choose a reason for hiding this comment

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

@userquin, sounds good! Take your time consulting with the @nuxtjs/i18n experts. Just let me know once you've confirmed, and I'll be happy to remove the outdated learning if needed. 👍

🧠 Learnings used 
Learnt from: userquin
Repo: npmx-dev/npmx.dev PR: 900
File: app/pages/cookie-policy.vue:6-14
Timestamp: 2026-02-05T03:17:30.849Z
Learning: In this Nuxt project with nuxtjs/i18n v8, `$t()` is auto-imported and works correctly inside `<script setup>` callbacks (including `useSeoMeta` and `defineOgImageComponent`). It's the established pattern across all pages (index.vue, about.vue, settings.vue, search.vue, cookie-policy.vue) and does not require explicitly destructuring `t` from `useI18n()`.

Learnt from: userquin
Repo: npmx-dev/npmx.dev PR: 900
File: app/pages/cookie-policy.vue:6-14
Timestamp: 2026-02-05T03:23:42.731Z
Learning: In this Nuxt 4 project with nuxtjs/i18n v10, `$t()` (and `$n`, `$d`, etc.) are exposed as globals and work correctly inside `<script setup>` callbacks, including those passed to `useSeoMeta` and `defineOgImageComponent`. This is the established pattern across all pages (index.vue, about.vue, settings.vue, search.vue, cookie-policy.vue) and does not require explicitly destructuring `t` from `useI18n()`.


const router = useRouter()
const buildInfo = useAppConfig().buildInfo
const { locale } = useI18n()
</script>

<template>
<main class="container flex-1 py-12 sm:py-16 w-full overflow-x-hidden">
<article class="max-w-2xl mx-auto">
<header class="mb-12">
<div class="flex items-baseline justify-between gap-4 mb-4">
<h1 class="font-mono text-3xl sm:text-4xl font-medium">
{{ $t('cookie_policy.title') }}
</h1>
<button
type="button"
:title="$t('nav.back')"
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
@click="router.back()"
>
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
</button>
</div>
<i18n-t
keypath="cookie_policy.last_updated"
tag="p"
scope="global"
class="text-fg-muted text-lg"
>
<template #date>
<NuxtTime
:locale
:datetime="buildInfo.cookiePolicyDate"
date-style="long"
time-style="medium"
/>
</template>
</i18n-t>
</header>

<div class="prose prose-invert max-w-none text-fg-muted">
<p>
<i18n-t keypath="cookie_policy.welcome" tag="span" scope="global">
<template #app>
<strong class="text-fg">npmx</strong>
</template>
</i18n-t>
</p>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_1.title') }}
</h2>
<p>{{ $t('cookie_policy.section_1.p1') }}</p>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_2.title') }}
</h2>
<p class="mb-4">
<i18n-t keypath="cookie_policy.section_2.p1" tag="span" scope="global">
<template #bold>
<strong class="text-fg">{{ $t('cookie_policy.section_2.bold') }}</strong>
</template>
</i18n-t>
</p>
<ul class="list-none ps-5 space-y-2">
<li class="flex justify-start items-start gap-2">
<span aria-hidden="true" class="text-fg-subtle shrink-0">—</span>
<i18n-t keypath="cookie_policy.section_2.li1" tag="span">
<template #li11>
<strong class="text-fg font-mono text-sm">
<bdi>{{ $t('cookie_policy.section_2.cookie_vdpl') }}</bdi>
</strong>
</template>
<template #separator>
<bdi>{{ $t('cookie_policy.section_2.separator') }}</bdi>
</template>
<template #li12>
<bdi>{{ $t('cookie_policy.section_2.cookie_vdpl_desc') }}</bdi>
</template>
</i18n-t>
</li>
<li class="flex justify-start items-start gap-2">
<span aria-hidden="true" class="text-fg-subtle shrink-0">—</span>
<i18n-t keypath="cookie_policy.section_2.li2" tag="span">
<template #li21>
<strong class="text-fg font-mono text-sm">
<bdi>{{ $t('cookie_policy.section_2.cookie_h3') }}</bdi>
</strong>
</template>
<template #separator>
<bdi>{{ $t('cookie_policy.section_2.separator') }}</bdi>
</template>
<template #li22>
<bdi>{{ $t('cookie_policy.section_2.cookie_h3_desc') }}</bdi>
</template>
</i18n-t>
</li>
</ul>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_3.title') }}
</h2>
<p class="mb-4">
<i18n-t keypath="cookie_policy.section_3.p1" tag="span" scope="global">
<template #bold>
<strong class="text-fg">{{ $t('cookie_policy.section_3.bold') }}</strong>
</template>
<template #settings>
<NuxtLink
to="/settings"
class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
>
{{ $t('cookie_policy.section_3.settings') }}
</NuxtLink>
</template>
</i18n-t>
</p>
<p>
<i18n-t keypath="cookie_policy.section_3.p2" tag="span" scope="global">
<template #bold2>
<strong class="text-fg">{{ $t('cookie_policy.section_3.bold2') }}</strong>
</template>
</i18n-t>
</p>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_4.title') }}
</h2>
<p>
<i18n-t keypath="cookie_policy.section_4.p1" tag="span" scope="global">
<template #bold>
<strong class="text-fg">{{ $t('cookie_policy.section_4.bold') }}</strong>
</template>
<template #bold2>
<strong class="text-fg">{{ $t('cookie_policy.section_4.bold2') }}</strong>
</template>
</i18n-t>
</p>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_5.title') }}
</h2>
<p class="mb-4">
<i18n-t keypath="cookie_policy.section_5.p1" tag="span" scope="global">
<template #bold>
<strong class="text-fg">{{ $t('cookie_policy.section_5.bold') }}</strong>
</template>
</i18n-t>
</p>
<p class="mb-2">{{ $t('cookie_policy.section_5.p2') }}</p>
<ul class="list-none px-0 space-y-2">
<li>
<a
href="https://support.google.com/chrome/answer/95647?hl=en"
target="_blank"
rel="noopener noreferrer"
class="flex justify-start items-center gap-2 p-3"
>
<span aria-hidden="true" class="text-fg-subtle shrink-0">—</span>
<span class="flex justify-between items-center flex-grow-1">
<span
class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
>
{{ $t('cookie_policy.section_5.chrome') }}
</span>
<span class="i-carbon:launch rtl-flip w-5 h-5" aria-hidden="true"></span>
</span>
</a>
</li>
<li>
<a
href="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox"
target="_blank"
rel="noopener noreferrer"
class="flex justify-start items-center gap-2 p-3"
>
<span aria-hidden="true" class="text-fg-subtle shrink-0">—</span>
<span class="flex justify-between items-center flex-grow-1">
<span
class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
>
{{ $t('cookie_policy.section_5.firefox') }}
</span>
<span class="i-carbon:launch rtl-flip w-5 h-5" aria-hidden="true"></span>
</span>
</a>
</li>
<li>
<a
href="https://support.microsoft.com/en-us/windows/manage-cookies-in-microsoft-edge-view-allow-block-delete-and-use-168dab11-0753-043d-7c16-ede5947fc64d"
target="_blank"
rel="noopener noreferrer"
class="flex justify-start items-center gap-2 p-3"
>
<span aria-hidden="true" class="text-fg-subtle shrink-0">—</span>
<span class="flex justify-between items-center flex-grow-1">
<span
class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
>
{{ $t('cookie_policy.section_5.edge') }}
</span>
<span class="i-carbon:launch rtl-flip w-5 h-5" aria-hidden="true"></span>
</span>
</a>
</li>
</ul>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_6.title') }}
</h2>
<p>
<i18n-t keypath="cookie_policy.section_6.p1" tag="span" scope="global">
<template #link>
<a
href="https://github.com/npmx-dev/npmx.dev/issues"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1"
>
<span
class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
>{{ $t('cookie_policy.section_6.link') }}</span
>
<span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true"></span>
</a>
</template>
</i18n-t>
</p>
</section>

<section class="mt-8">
<h2 class="text-lg text-fg-subtle tracking-wider mb-4">
{{ $t('cookie_policy.section_7.title') }}
</h2>
<p>{{ $t('cookie_policy.section_7.p1') }}</p>
</section>
</div>
</article>
</main>
</template>
10 changes: 10 additions & 0 deletions config/env.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,16 @@ export async function getGitInfo() {
return { branch, commit, shortCommit }
}

export async function getFileLastUpdated(path: string) {
try {
// Get ISO date of last commit for file
const date = await git.log(['-1', '--format=%cI', '--', path])
return date.latest?.date || new Date().toISOString()
} catch {
return new Date().toISOString()
}
}

export async function getEnv(isDevelopment: boolean) {
const { commit, shortCommit, branch } = await getGitInfo()
const env = isDevelopment
Expand Down
53 changes: 53 additions & 0 deletions i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -959,5 +959,58 @@
"vulnerabilities_summary": "{count} ({critical}C/{high}H)"
}
}
},
"cookie_policy": {
"title": "cookie policy",
"last_updated": "Last updated: {date}",
"welcome": "Welcome to {app}. In this policy, we explain what cookies are, how we use them, and how you can manage them.",
"section_1": {
"title": "WHAT ARE COOKIES?",
Copy link
Copy Markdown
Member

@danielroe danielroe Feb 5, 2026

Choose a reason for hiding this comment

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

if we want this to be uppercase we should do it in CSS rather than here

"p1": "Cookies are small text files stored on your device when you visit a website. Their purpose is to enhance your browsing experience by remembering certain preferences and settings."
},
"section_2": {
"title": "WHAT TYPES OF COOKIES DO WE USE?",
"p1": "On our website, we only use {bold} for purposes strictly necessary for the site's functionality. We do not use third-party or advertising cookies.",
"bold": "essential technical cookies",
"li1": "{li11}{separator} {li12}",
"li2": "{li21}{separator} {li22}",
"separator": ":",
"cookie_vdpl": "__vdpl",
"cookie_vdpl_desc": "This cookie is used by our hosting provider (Vercel) for skew protection. It ensures you fetch assets from the correct deployment version if a new update is released while you are browsing. It does not track you.",
"cookie_h3": "h3",
"cookie_h3_desc": "This is our secure session cookie. It stores the OAuth access token when you connect your Atmosphere account. It is essential for maintaining your authenticated session."
},
"section_3": {
"title": "OTHER STORAGE TECHNOLOGIES",
"p1": "In addition to session cookies, we use your browser's {bold} to save your display preferences. This allows us to remember the theme (light/dark) and some other {settings} you have selected, so you don't have to reconfigure them on each visit.",
"bold": "Local Storage",
"p2": "This information is purely functional, stored only on your device, and {bold2}. We use it exclusively to improve your experience on our website.",
"bold2": "contains no personal data nor is it used to track you",
"settings": "settings"
},
"section_4": {
"title": "COOKIE ACCEPTANCE AND APPLICATION ACCESS",
"p1": "The use of cookies on our website is {bold}. Therefore, {bold2}. By continuing to browse or log in, you expressly accept our cookie policy.",
"bold": "essential for its proper functioning",
"bold2": "if you do not accept the use of cookies, you will not be able to access the application"
},
"section_5": {
"title": "COOKIE MANAGEMENT",
"p1": "You can configure your browser to accept, reject, or delete cookies according to your preferences. However, please note that {bold}.",
"bold": "rejecting cookies will prevent access to and use of the application",
"p2": "Below are links with instructions for cookie management in the most commonly used browsers:",
"chrome": "Google Chrome (opens in a new window)",
"firefox": "Mozilla Firefox (opens in a new window)",
"edge": "Microsoft Edge (opens in a new window)"
},
"section_6": {
"title": "DATA CONTROLLER",
"p1": "While we only use cookies for essential functionality and session management, we guarantee compliance with the principles of transparency and security in data management. For any questions or requests regarding the use of cookies, you can contact us by opening an issue on our {link}.",
"link": "GitHub repository"
},
"section_7": {
"title": "CHANGES TO THE COOKIE POLICY",
"p1": "We reserve the right to modify this policy at any time. Any changes will be published on this page."
}
}
}
Loading
Loading