create-velocity-astro 1.0.1 → 1.0.4

package/templates/base/src/pages/blog/index.astro

@@ -0,0 +1,58 @@
+---
+import PageLayout from '@/layouts/PageLayout.astro';
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('blog', ({ data }) => !data.draft);
+const sortedPosts = posts.sort(
+  (a, b) => new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
+);
+---
+
+<PageLayout
+  title="Blog"
+  description="Read our latest articles and updates."
+>
+  <section class="py-16 md:py-24">
+    <div class="container mx-auto px-4">
+      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-8">Blog</h1>
+
+      {sortedPosts.length === 0 ? (
+        <div class="text-center py-12">
+          <p class="text-muted-foreground">No posts yet. Create your first post in</p>
+          <code class="bg-muted px-2 py-1 rounded text-sm mt-2 inline-block">
+            src/content/blog/
+          </code>
+        </div>
+      ) : (
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {sortedPosts.map((post) => (
+            <article class="group">
+              <a href={`/blog/${post.id}`} class="block">
+                {post.data.image && (
+                  <img
+                    src={post.data.image}
+                    alt={post.data.title}
+                    class="aspect-video w-full rounded-lg object-cover mb-4"
+                  />
+                )}
+                <h2 class="text-xl font-semibold group-hover:text-primary transition-colors">
+                  {post.data.title}
+                </h2>
+                <p class="mt-2 text-muted-foreground line-clamp-2">
+                  {post.data.description}
+                </p>
+                <time class="mt-2 text-sm text-muted-foreground block">
+                  {new Date(post.data.publishDate).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </time>
+              </a>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  </section>
+</PageLayout>

package/templates/base/src/pages/index.astro

@@ -0,0 +1,36 @@
+---
+import PageLayout from '@/layouts/PageLayout.astro';
+---
+
+<PageLayout
+  title="Welcome"
+  description="Welcome to your new Velocity site. Start building something amazing."
+>
+  <section class="py-24 md:py-32">
+    <div class="container mx-auto px-4 text-center">
+      <h1 class="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+        Welcome to <span class="text-primary">Velocity</span>
+      </h1>
+      <p class="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
+        Your new Astro site is ready. Edit this page at
+        <code class="bg-muted px-2 py-1 rounded text-sm">src/pages/index.astro</code>
+      </p>
+      <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
+        <a
+          href="/blog"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
+        >
+          View Blog
+        </a>
+        <a
+          href="https://docs.astro.build"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+        >
+          Astro Docs
+        </a>
+      </div>
+    </div>
+  </section>
+</PageLayout>

package/templates/i18n/src/components/blog/RelatedPosts.astro

@@ -0,0 +1,73 @@
+---
+import BlogCard from './BlogCard.astro';
+import { getCollection } from 'astro:content';
+import { defaultLocale, type Locale } from '@/i18n/config';
+import { useTranslations } from '@/i18n/index';
+
+interface Props {
+  currentSlug: string;
+  tags: string[];
+  locale?: Locale;
+  maxPosts?: number;
+}
+
+const { currentSlug, tags, locale = defaultLocale, maxPosts = 3 } = Astro.props;
+const t = useTranslations(locale);
+
+// Get all published posts in the same locale
+const allPosts = await getCollection('blog', ({ data }) => {
+  return data.locale === locale && (import.meta.env.PROD ? data.draft !== true : true);
+});
+
+// Filter to find posts with matching tags
+const relatedPosts = allPosts
+  .filter((post) => {
+    // Exclude current post
+    if (post.id === currentSlug || post.id.endsWith(`/${currentSlug}`)) return false;
+
+    // Must have at least one matching tag
+    if (!tags.length) return false;
+    return post.data.tags.some((tag) => tags.includes(tag));
+  })
+  // Sort by number of matching tags, then by date
+  .sort((a, b) => {
+    const aMatches = a.data.tags.filter((tag) => tags.includes(tag)).length;
+    const bMatches = b.data.tags.filter((tag) => tags.includes(tag)).length;
+
+    if (bMatches !== aMatches) return bMatches - aMatches;
+    return b.data.publishedAt.valueOf() - a.data.publishedAt.valueOf();
+  })
+  .slice(0, maxPosts);
+
+// Generate URLs for each post (locale-aware)
+const getPostUrl = (postId: string) => {
+  const slug = postId.replace(`${locale}/`, '');
+  // Default locale doesn't have prefix
+  if (locale === defaultLocale) {
+    return `/blog/${slug}`;
+  }
+  return `/${locale}/blog/${slug}`;
+};
+---
+
+{relatedPosts.length > 0 && (
+  <section class="border-t border-border pt-12 mt-12">
+    <h2 class="font-display text-2xl font-bold text-foreground mb-8">
+      {t('blog.relatedPosts')}
+    </h2>
+
+    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {relatedPosts.map((post) => (
+        <BlogCard
+          title={post.data.title}
+          description={post.data.description}
+          href={getPostUrl(post.id)}
+          publishedAt={post.data.publishedAt}
+          tags={post.data.tags}
+          author={post.data.author}
+          image={post.data.image}
+        />
+      ))}
+    </div>
+  </section>
+)}

package/templates/i18n/src/content/blog/en/welcome-to-velocity.mdx

@@ -0,0 +1,40 @@
+---
+title: "Welcome to Velocity"
+description: "Get started with Velocity, the modern Astro boilerplate with everything you need to build fast, beautiful websites."
+publishedAt: 2026-01-28
+author: "Southwell Media"
+tags: ["astro", "tutorial", "getting-started"]
+featured: true
+locale: en
+---
+
+# Welcome to Velocity
+
+Velocity is a production-ready starter template built on **Astro 6** and **Tailwind CSS v4**. It's designed to help you build fast, beautiful, and accessible websites with minimal setup time.
+
+## Features
+
+- 🚀 **Astro 6** - The latest version with all stable features
+- 🎨 **Tailwind CSS v4** - CSS-first design token system
+- 🌍 **Internationalization** - Built-in i18n with 3 languages
+- 🔍 **SEO Optimized** - Complete meta tags, OG images, and structured data
+- 🌙 **Dark Mode** - Automatic theme detection and toggle
+- ♿ **Accessible** - WCAG 2.2 AA compliant components
+
+## Getting Started
+
+1. Clone the repository
+2. Install dependencies with `pnpm install`
+3. Start the dev server with `pnpm dev`
+
+That's it! You're ready to start building.
+
+## Customization
+
+Velocity is designed to be easily customizable. Start by editing:
+
+- `src/config/site.config.ts` - Site metadata
+- `src/styles/tokens/colors.css` - Brand colors
+- `src/i18n/translations/` - Translations
+
+Happy building! 🎉

package/templates/i18n/src/content/blog/es/bienvenido-a-velocity.mdx

@@ -0,0 +1,40 @@
+---
+title: "Bienvenido a Velocity"
+description: "Comienza con Velocity, el boilerplate moderno de Astro con todo lo que necesitas para construir sitios web rápidos y hermosos."
+publishedAt: 2026-01-28
+author: "Southwell Media"
+tags: ["astro", "tutorial", "inicio"]
+featured: true
+locale: es
+---
+
+# Bienvenido a Velocity
+
+Velocity es una plantilla lista para producción construida con **Astro 6** y **Tailwind CSS v4**. Está diseñada para ayudarte a construir sitios web rápidos, hermosos y accesibles con un tiempo de configuración mínimo.
+
+## Características
+
+- 🚀 **Astro 6** - La última versión con todas las características estables
+- 🎨 **Tailwind CSS v4** - Sistema de tokens de diseño CSS-first
+- 🌍 **Internacionalización** - i18n integrado con 3 idiomas
+- 🔍 **Optimizado para SEO** - Meta tags completos, imágenes OG y datos estructurados
+- 🌙 **Modo Oscuro** - Detección automática de tema y toggle
+- ♿ **Accesible** - Componentes conformes a WCAG 2.2 AA
+
+## Comenzando
+
+1. Clona el repositorio
+2. Instala las dependencias con `pnpm install`
+3. Inicia el servidor de desarrollo con `pnpm dev`
+
+¡Eso es todo! Estás listo para comenzar a construir.
+
+## Personalización
+
+Velocity está diseñado para ser fácilmente personalizable. Comienza editando:
+
+- `src/config/site.config.ts` - Metadatos del sitio
+- `src/styles/tokens/colors.css` - Colores de marca
+- `src/i18n/translations/` - Traducciones
+
+¡Feliz construcción! 🎉

package/templates/i18n/src/content/blog/fr/bienvenue-sur-velocity.mdx

@@ -0,0 +1,40 @@
+---
+title: "Bienvenue sur Velocity"
+description: "Commencez avec Velocity, le boilerplate Astro moderne avec tout ce dont vous avez besoin pour créer des sites web rapides et magnifiques."
+publishedAt: 2026-01-28
+author: "Southwell Media"
+tags: ["astro", "tutoriel", "démarrage"]
+featured: true
+locale: fr
+---
+
+# Bienvenue sur Velocity
+
+Velocity est un template prêt pour la production construit avec **Astro 6** et **Tailwind CSS v4**. Il est conçu pour vous aider à créer des sites web rapides, beaux et accessibles avec un temps de configuration minimal.
+
+## Fonctionnalités
+
+- 🚀 **Astro 6** - La dernière version avec toutes les fonctionnalités stables
+- 🎨 **Tailwind CSS v4** - Système de tokens de design CSS-first
+- 🌍 **Internationalisation** - i18n intégré avec 3 langues
+- 🔍 **Optimisé pour le SEO** - Meta tags complets, images OG et données structurées
+- 🌙 **Mode Sombre** - Détection automatique du thème et basculement
+- ♿ **Accessible** - Composants conformes à WCAG 2.2 AA
+
+## Premiers pas
+
+1. Clonez le dépôt
+2. Installez les dépendances avec `pnpm install`
+3. Démarrez le serveur de développement avec `pnpm dev`
+
+C'est tout ! Vous êtes prêt à commencer à construire.
+
+## Personnalisation
+
+Velocity est conçu pour être facilement personnalisable. Commencez par éditer :
+
+- `src/config/site.config.ts` - Métadonnées du site
+- `src/styles/tokens/colors.css` - Couleurs de marque
+- `src/i18n/translations/` - Traductions
+
+Bonne construction ! 🎉

package/templates/i18n/src/i18n/translations/en.ts

@@ -48,6 +48,21 @@ export const en = {
     success: 'Message sent successfully!',
     error: 'Failed to send message. Please try again.',
   },
+
+  // Blog
+  blog: {
+    title: 'Blog',
+    description: 'Latest articles and updates',
+    allPosts: 'All posts',
+    featured: 'Featured',
+    noPosts: 'No posts found',
+    relatedPosts: 'Related Posts',
+    backToBlog: 'Back to Blog',
+    subscribe: 'Subscribe',
+    subscribeDescription: 'Get the latest articles and updates delivered to your inbox.',
+    emailPlaceholder: 'Enter your email',
+    subscribeButton: 'Subscribe',
+  },
 } as const;
 
 export type TranslationKeys = typeof en;

package/templates/i18n/src/i18n/translations/es.ts

@@ -50,4 +50,19 @@ export const es: TranslationKeys = {
     success: '¡Mensaje enviado con éxito!',
     error: 'Error al enviar el mensaje. Por favor, inténtalo de nuevo.',
   },
+
+  // Blog
+  blog: {
+    title: 'Blog',
+    description: 'Últimos artículos y actualizaciones',
+    allPosts: 'Todos los artículos',
+    featured: 'Destacados',
+    noPosts: 'No se encontraron artículos',
+    relatedPosts: 'Artículos relacionados',
+    backToBlog: 'Volver al Blog',
+    subscribe: 'Suscríbete',
+    subscribeDescription: 'Recibe los últimos artículos y actualizaciones en tu correo.',
+    emailPlaceholder: 'Introduce tu correo',
+    subscribeButton: 'Suscribirse',
+  },
 } as const;

package/templates/i18n/src/i18n/translations/fr.ts

@@ -50,4 +50,19 @@ export const fr: TranslationKeys = {
     success: 'Message envoyé avec succès !',
     error: "Échec de l'envoi du message. Veuillez réessayer.",
   },
+
+  // Blog
+  blog: {
+    title: 'Blog',
+    description: 'Derniers articles et mises à jour',
+    allPosts: 'Tous les articles',
+    featured: 'À la une',
+    noPosts: 'Aucun article trouvé',
+    relatedPosts: 'Articles connexes',
+    backToBlog: 'Retour au Blog',
+    subscribe: "S'abonner",
+    subscribeDescription: 'Recevez les derniers articles et mises à jour dans votre boîte mail.',
+    emailPlaceholder: 'Entrez votre e-mail',
+    subscribeButton: "S'abonner",
+  },
 } as const;

package/templates/i18n/src/layouts/BlogLayout.astro

@@ -0,0 +1,133 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import Navbar from '@/components/landing/Navbar.astro';
+import LandingFooter from '@/components/landing/LandingFooter.astro';
+import Breadcrumbs from '@/components/seo/Breadcrumbs.astro';
+import ArticleHero from '@/components/blog/ArticleHero.astro';
+import ShareButtons from '@/components/blog/ShareButtons.astro';
+import RelatedPosts from '@/components/blog/RelatedPosts.astro';
+import { defaultLocale, type Locale } from '@/i18n/config';
+import { useTranslations } from '@/i18n/index';
+
+interface Props {
+  title: string;
+  description: string;
+  publishedAt: Date;
+  updatedAt?: Date;
+  author?: string;
+  image?: string;
+  imageAlt?: string;
+  tags?: string[];
+  slug?: string;
+  locale?: Locale;
+}
+
+const {
+  title,
+  description,
+  publishedAt,
+  updatedAt,
+  author = 'Team',
+  image,
+  imageAlt,
+  tags = [],
+  slug = '',
+  locale = defaultLocale,
+} = Astro.props;
+
+const t = useTranslations(locale);
+const ogImage = image || `/og${Astro.url.pathname}.png`;
+
+// Build breadcrumbs with locale-aware URLs
+const blogUrl = locale === defaultLocale ? '/blog' : `/${locale}/blog`;
+const homeUrl = locale === defaultLocale ? '/' : `/${locale}`;
+
+const breadcrumbs = [
+  { label: t('nav.home'), href: homeUrl },
+  { label: t('nav.blog'), href: blogUrl },
+  { label: title },
+];
+
+// Get full URL for sharing
+const fullUrl = new URL(Astro.url.pathname, Astro.site).toString();
+---
+
+<BaseLayout
+  title={title}
+  description={description}
+  image={ogImage}
+  imageAlt={imageAlt || title}
+  lang={locale}
+  article={{
+    publishedTime: publishedAt,
+    modifiedTime: updatedAt,
+    authors: [author],
+    tags,
+  }}
+>
+  <Navbar slot="header" />
+
+  <!-- Article Hero -->
+  <ArticleHero
+    title={title}
+    description={description}
+    publishedAt={publishedAt}
+    updatedAt={updatedAt}
+    author={author}
+    tags={tags}
+    image={image}
+    imageAlt={imageAlt}
+  />
+
+  <article class={`py-12 ${image ? 'pt-24' : ''}`}>
+    <div class="mx-auto max-w-4xl px-6">
+      <!-- Breadcrumbs -->
+      <Breadcrumbs items={breadcrumbs} class="mb-8" />
+
+      <!-- Article Content -->
+      <div class="prose prose-lg max-w-none prose-headings:font-display prose-headings:font-bold prose-a:text-brand-600 hover:prose-a:text-brand-500 prose-code:text-brand-600 prose-code:bg-brand-50 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-background-secondary prose-pre:border prose-pre:border-border dark:prose-invert dark:prose-a:text-brand-400 dark:hover:prose-a:text-brand-300 dark:prose-code:text-brand-400 dark:prose-code:bg-brand-900/30">
+        <slot />
+      </div>
+
+      <!-- Article Footer -->
+      <footer class="mt-12 pt-8 border-t border-border">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
+          <!-- Back link -->
+          <a
+            href={blogUrl}
+            class="inline-flex items-center gap-2 text-sm font-medium text-brand-600 hover:text-brand-500 dark:text-brand-400 dark:hover:text-brand-300 transition-colors"
+          >
+            <svg
+              class="h-4 w-4"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            {t('blog.backToBlog')}
+          </a>
+
+          <!-- Share buttons -->
+          <ShareButtons title={title} url={fullUrl} />
+        </div>
+      </footer>
+    </div>
+  </article>
+
+  <!-- Related Posts -->
+  {tags.length > 0 && (
+    <div class="mx-auto max-w-6xl px-6 pb-16">
+      <RelatedPosts
+        currentSlug={slug}
+        tags={tags}
+        locale={locale}
+        maxPosts={3}
+      />
+    </div>
+  )}
+
+  <LandingFooter slot="footer" />
+</BaseLayout>

package/templates/i18n/src/pages/[lang]/blog/[...slug].astro

@@ -0,0 +1,55 @@
+---
+import BlogLayout from '@/layouts/BlogLayout.astro';
+import { getCollection, render } from 'astro:content';
+import { locales, defaultLocale, isValidLocale, type Locale } from '@/i18n/config';
+
+export async function getStaticPaths() {
+  const paths: { params: { lang: string; slug: string }; props: { post: any } }[] = [];
+
+  // Get all posts for non-default locales
+  for (const locale of locales) {
+    if (locale === defaultLocale) continue; // Skip default locale (handled by /blog/[...slug].astro)
+
+    const posts = await getCollection('blog', ({ data }) => {
+      return data.locale === locale && (import.meta.env.PROD ? data.draft !== true : true);
+    });
+
+    for (const post of posts) {
+      paths.push({
+        params: {
+          lang: locale,
+          slug: post.id.replace(`${locale}/`, ''),
+        },
+        props: { post },
+      });
+    }
+  }
+
+  return paths;
+}
+
+const { lang } = Astro.params;
+const { post } = Astro.props;
+
+if (!lang || !isValidLocale(lang)) {
+  return Astro.redirect('/blog');
+}
+
+const locale = lang as Locale;
+const { Content } = await render(post);
+---
+
+<BlogLayout
+  title={post.data.title}
+  description={post.data.description}
+  publishedAt={post.data.publishedAt}
+  updatedAt={post.data.updatedAt}
+  author={post.data.author}
+  image={post.data.image}
+  imageAlt={post.data.imageAlt}
+  tags={post.data.tags}
+  slug={post.id}
+  locale={locale}
+>
+  <Content />
+</BlogLayout>