docs: rename folder from playground

playground/astro.config.mjs → docs/astro.config.mjs

@@ -29,6 +29,7 @@ export default defineConfig({
       },
       components: {
         Footer: '/src/components/Footer.astro',
+        Head: '/src/components/Head.astro',
       },
       social: {
         twitter: 'https://twitter.com/adrianub',
@@ -136,6 +137,25 @@ export default defineConfig({
           slug: 'notes',
         },
       ],
+      plugins: [
+        {
+          name: 'vitesse-plugin-i18n',
+          hooks: {
+            setup: ({ injectTranslations }) => {
+              injectTranslations({
+                en: {
+                  'sponsor.thanks': 'If you enjoy my work and find them useful, consider sponsor me to help Open Source sustainable. Thank you!',
+                  'sponsor.to-suport': 'Sponsor to support',
+                },
+                es: {
+                  'sponsor.thanks': 'Si disfrutas de mi trabajo y te resulta útil, considera patrocinarme para ayudar a que el Open Source sea sostenible. ¡Gracias!',
+                  'sponsor.to-suport': 'Patrocinar para apoyar a',
+                },
+              })
+            },
+          },
+        },
+      ],
     }),
   ],
 })

playground/package.json → docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "playground",
+  "name": "docs",
   "type": "module",
   "version": "0.0.1",
   "private": true,
@@ -15,7 +15,9 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^3.1.7",
     "astro": "^4.15.12",
+    "astro-og-canvas": "^0.5.3",
     "astro-vitesse": "workspace:*",
+    "canvaskit-wasm": "^0.39.1",
     "typescript": "^5.6.2",
     "unocss": "^0.63.3"
   },

docs/src/components/Card.astro

@@ -0,0 +1,9 @@
+<div
+  class="group block of-hidden border:(~ base rounded-lg) hover:(scale-101 shadow-xl z-10) transition-all duration-500 bg-base relative"
+>
+  <div class="prose prose-sm p4 m0 pb3">
+    <div class="prose m-auto slide-enter-content">
+      <slot />
+    </div>
+  </div>
+</div>

docs/src/components/Head.astro

@@ -0,0 +1,16 @@
+---
+import type { Props } from 'astro-vitesse/props'
+import Default from 'astro-vitesse/components/Head.astro'
+
+// Get the URL of the generated image for the current page using its
+// ID and replace the file extension with `.png`.
+// const ogImageUrl = new URL(`/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`, Astro.site)
+const ogImageUrl = new URL(`/og/${Astro.props.slug ? Astro.props.slug : 'index' + '.png'}`, Astro.site)
+---
+
+<!-- Render the default <Head/> component. -->
+<Default {...Astro.props}><slot /></Default>
+
+<!-- Render the <meta/> tags for the Open Graph images. -->
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />

docs/src/components/LinkWithIcon.astro

@@ -0,0 +1,19 @@
+---
+import { getImage } from 'astro:assets'
+
+export type Props = {
+  href: string
+  iconUrl: string
+}
+const { href, iconUrl } = Astro.props
+
+const icon = await getImage({
+  src: iconUrl,
+  inferSize: true,
+})
+---
+
+<a href={href} class="markdown-magic-link markdown-magic-link-link" target="_blank" rel="noopener">
+  <span class="markdown-magic-link-image" style={`background-image: url("${icon.src}");`}> </span>
+  <slot />
+</a>

playground/src/components/SponsorButton.astro → docs/src/components/SponsorButton.astro

@@ -1,13 +1,13 @@
-<p>If you enjoy my work and find them useful, consider sponsor me to help Open Source sustainable. Thank you!</p>
+<p>{Astro.locals.t('sponsor.thanks')}</p>
 
 <p class="flex gap-2 flex-wrap">
   <a href="https://github.com/sponsors/adrian-ub" target="_blank" class="group inline-block btn-rose">
     <span i-ph-heart-duotone group-hover="i-ph-heart-fill text-rose" transition-all duration-200 ease-out></span>
-    Sponsor to support Adrián
+    {Astro.locals.t('sponsor.to-suport')} Adrián
   </a>
   <a href="https://github.com/sponsors/antfu" target="_blank" class="group btn-yellow inline-block">
     <span i-ph-lightning-duotone group-hover="i-ph-lightning-fill text-yellow" transition-all duration-200 ease-out>
     </span>
-    Sponsor to support Anthony
+    {Astro.locals.t('sponsor.to-suport')} Anthony
   </a>
 </p>

docs/src/content/pages/es/index.mdx

@@ -0,0 +1,53 @@
+---
+title: Astro Vitesse
+display: 'Dale un toque elegante a tus páginas con Astro Vitesse'
+description: 'Dale un toque elegante a tus páginas con Astro Vitesse'
+---
+
+import Card from '@/components/Card.astro'
+import SponsorButton from '@/components/SponsorButton.astro'
+import LinkWithIcon from '@/components/LinkWithIcon.astro'
+
+Todo lo que necesitas para crear un sitio web espectacular. Rápido, asequible y fácil de usar.
+
+Está inspirado en  <LinkWithIcon href="https://antfu.me" iconUrl="https://antfu.me/favicon.svg">antfu.me</LinkWithIcon> <br />
+Desarrollado con <LinkWithIcon href="https://astro.build" iconUrl="https://github.com/withastro.png">Astro</LinkWithIcon> <br />
+Basado en <LinkWithIcon href="https://starlight.astro.build" iconUrl="https://starlight.astro.build/favicon.svg">Starlight</LinkWithIcon>
+
+<div class="class flex flex-col space-y-4">
+
+<Card>
+
+Incluye: navegación del sitio, internacionalización, SEO, tipografía fácil de leer, resaltado de código, modo oscuro y mucho más.
+
+</Card>
+
+<Card>
+
+Lleva tu lenguaje de marcado favorito. Astro Vitesse te ofrece validación de frontmatter integrada con seguridad de tipos en TypeScript.
+
+</Card>
+
+<Card>
+
+Astro Vitesse se ofrece como una solución completa, independiente de cualquier framework. Puedes extenderlo con Angular, React, Vue, Svelte, Solid y otros.
+
+</Card>
+
+</div>
+
+<div flex-auto />
+
+---
+
+Encuentrame en
+
+<p flex="~ gap-2 wrap" class="mt--2!">
+  <a href="https://github.com/adrian-ub" target="_blank"><span op75 class="i-simple-icons-github" /> GitHub</a>
+  <a href="https://elk.zone/mastodon.social/@adrianub" target="_blank"><span op75 class="i-simple-icons-mastodon" /> Mastodon</a>
+  <a href="https://www.twitter.com/AdrianUB" target="_blank"><span op75 class="i-ri-twitter-x-fill" /> Twitter</a>
+</p>
+
+---
+
+<SponsorButton />

docs/src/content/pages/index.mdx

@@ -0,0 +1,53 @@
+---
+title: Astro Vitesse
+display: 'Give your pages an elegant touch with Astro Vitesse'
+description: 'Give your pages an elegant touch with Astro Vitesse'
+---
+
+import Card from '@/components/Card.astro'
+import SponsorButton from '@/components/SponsorButton.astro'
+import LinkWithIcon from '@/components/LinkWithIcon.astro'
+
+Everything you need to create a stunning website. Fast, affordable and easy to use.
+
+It's inspired by  <LinkWithIcon href="https://antfu.me" iconUrl="https://antfu.me/favicon.svg">antfu.me</LinkWithIcon> <br />
+Developed with <LinkWithIcon href="https://astro.build" iconUrl="https://github.com/withastro.png">Astro</LinkWithIcon> <br />
+Based on <LinkWithIcon href="https://starlight.astro.build" iconUrl="https://starlight.astro.build/favicon.svg">Starlight</LinkWithIcon>
+
+<div class="class flex flex-col space-y-4">
+
+<Card>
+
+Includes: Site navigation, internationalization, SEO, easy-to-read typography, code highlighting, dark mode and more.
+
+</Card>
+
+<Card>
+
+Bring your favorite markup language. Astro Vitesse gives you built-in frontmatter validation with TypeScript type-safety.
+
+</Card>
+
+<Card>
+
+Astro Vitesse ships as a framework-agnostic, complete solution. Extend with React, Vue, Svelte, Solid, and more.
+
+</Card>
+
+</div>
+
+<div class="flex-auto"></div>
+
+---
+
+Find me on
+
+<p flex="~ gap-2 wrap" class="mt--2!">
+  <a href="https://github.com/adrian-ub" target="_blank"><span op75 class="i-simple-icons-github" /> GitHub</a>
+  <a href="https://elk.zone/mastodon.social/@adrianub" target="_blank"><span op75 class="i-ri-mastodon-fill" /> Mastodon</a>
+  <a href="https://www.twitter.com/AdrianUB" target="_blank"><span op75 class="i-ri-twitter-x-fill" /> Twitter</a>
+</p>
+
+---
+
+<SponsorButton />

docs/src/pages/og/[...slug].ts

@@ -0,0 +1,29 @@
+import { OGImageRoute } from 'astro-og-canvas'
+
+import { paths } from 'node_modules/astro-vitesse/src/utils/routing'
+
+const pages = Object.fromEntries(paths.map(({ params: { slug }, props: {
+  entry,
+} }) => {
+  return [!slug ? 'index' : slug, entry?.data]
+}))
+
+export const { getStaticPaths, GET } = OGImageRoute({
+  // Pass down the documentation pages.
+  pages,
+  // Define the name of the parameter used in the endpoint path, here `slug`
+  // as the file is named `[...slug].ts`.
+  param: 'slug',
+  // Define a function called for each page to customize the generated image.
+  getImageOptions: (_path, page: (typeof pages)[number]) => {
+    return {
+      // Use the page title and description as the image title and description.
+      title: page.title,
+      description: page.description,
+      // Customize various colors and add a border.
+      bgGradient: [[24, 24, 27]],
+      border: { color: [63, 63, 70], width: 20 },
+      padding: 120,
+    }
+  },
+})

docs/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package.json

@@ -42,8 +42,8 @@
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "prepare": "simple-git-hooks && pnpm astro sync",
-    "playground": "nr -C playground dev",
-    "playground:build": "nr -C playground build"
+    "docs": "nr -C docs dev",
+    "docs:build": "nr -C docs build"
   },
   "peerDependencies": {
     "@iconify/json": "^2.2.256",