create-boltdocs 0.2.3 → 0.2.4

package/dist/templates/base/docs/pages-external/index.tsx

@@ -11,7 +11,7 @@ export const pages = {
 }
 
 export const layout = ({ children }: { children: React.ReactNode }) => (
-  <div className="pb-10">
+  <div className="pb-10 px-10">
     <Navbar />
     {children}
     <Footer />

package/dist/templates/base/index.css

@@ -1,12 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
-
 @import "tailwindcss";
 
+/* Tailwind must be declared first so the theme can override its styles */
+@import "boltdocs/theme/reset.css";
 @import "boltdocs/theme/neutral.css";
 
 /* 
   @source directive tells Tailwind to scan Boltdocs client components 
   inside node_modules for class usage and generate the necessary CSS.
 */
-@source "./node_modules/boltdocs/src/client";
+@source "./node_modules/boltdocs/src/client";

package/dist/templates/i18n/docs/pages-external/home.tsx

@@ -1,30 +1,55 @@
-import { Card, Cards } from 'boltdocs/client'
+import { Card, Cards, useI18n } from 'boltdocs/client'
 import { Route, FileText, Settings, Sparkles } from 'lucide-react'
 
 const features = [
   {
-    title: 'File-route',
-    description: 'Generate routes from file structure.',
+    title: {
+      en: 'File-route',
+      es: 'Rutas de archivos',
+    },
+    description: {
+      en: 'Generate routes from file structure.',
+      es: 'Genera rutas a partir de la estructura de archivos.',
+    },
     Icon: Route,
   },
   {
-    title: 'Markdown',
-    description: 'Support Markdown for writing documentation.',
+    title: {
+      en: 'Markdown',
+      es: 'Markdown',
+    },
+    description: {
+      en: 'Support Markdown for writing documentation.',
+      es: 'Soporte de Markdown para escribir documentación.',
+    },
     Icon: FileText,
   },
   {
-    title: 'Customizable',
-    description: 'Customizable to your needs.',
+    title: {
+      en: 'Customizable',
+      es: 'Personalizable',
+    },
+    description: {
+      en: 'Customizable to your needs.',
+      es: 'Personalizable a tus necesidades.',
+    },
     Icon: Settings,
   },
   {
-    title: 'Secure by design',
-    description: 'Boltdocs is secure by design.',
+    title: {
+      en: 'Secure by design',
+      es: 'Seguro por diseño',
+    },
+    description: {
+      en: 'Boltdocs is secure by design.',
+      es: 'Boltdocs es seguro por diseño.',
+    },
     Icon: Sparkles,
   },
 ]
 
 export function HomePage() {
+  const { currentLocale } = useI18n()
   return (
     <div className="w-full h-[calc(100vh-120px)] flex items-center gap-10">
       <div className="flex flex-col justify-center py-10">
@@ -36,11 +61,15 @@ export function HomePage() {
       <Cards cols={4}>
         {features.map((feature) => (
           <Card
-            key={feature.title}
-            title={feature.title}
+            key={feature.title.en}
+            title={feature.title[currentLocale as keyof typeof feature.title]}
             icon={<feature.Icon />}
           >
-            {feature.description}
+            {
+              feature.description[
+                currentLocale as keyof typeof feature.description
+              ]
+            }
           </Card>
         ))}
       </Cards>

package/dist/templates/i18n/docs/pages-external/index.tsx

@@ -11,7 +11,7 @@ export const pages = {
 }
 
 export const layout = ({ children }: { children: React.ReactNode }) => (
-  <div className="pb-10">
+  <div className="pb-10 px-10">
     <Navbar />
     {children}
     <Footer />

package/dist/templates/i18n/index.css

@@ -1,12 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
-
 @import "tailwindcss";
 
+/* Tailwind must be declared first so the theme can override its styles */
+@import "boltdocs/theme/reset.css";
 @import "boltdocs/theme/neutral.css";
 
 /* 
   @source directive tells Tailwind to scan Boltdocs client components 
   inside node_modules for class usage and generate the necessary CSS.
 */
-@source "./node_modules/boltdocs/src/client";
+@source "./node_modules/boltdocs/src/client";

package/dist/templates/i18n/src/components/footer.tsx

@@ -7,5 +7,5 @@ const locale = {
 
 export function Footer() {
   const { currentLocale } = useI18n()
-  return <footer>{locale[currentLocale ?? 'en']}</footer>
+  return <footer>{locale[currentLocale as keyof typeof locale]}</footer>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-boltdocs",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Create a new boltdocs project",
   "type": "module",
   "author": "Jesus Alcala",

package/dist/templates/i18n/src/pages/home.tsx

@@ -1,49 +0,0 @@
-import { Card, Cards } from 'boltdocs/client'
-import { Route, FileText, Settings, Sparkles } from 'lucide-react'
-
-const features = [
-  {
-    title: 'File-route',
-    description: 'Generate routes from file structure.',
-    Icon: Route,
-  },
-  {
-    title: 'Markdown',
-    description: 'Support Markdown for writing documentation.',
-    Icon: FileText,
-  },
-  {
-    title: 'Customizable',
-    description: 'Customizable to your needs.',
-    Icon: Settings,
-  },
-  {
-    title: 'Secure by design',
-    description: 'Boltdocs is secure by design.',
-    Icon: Sparkles,
-  },
-]
-
-export function HomePage() {
-  return (
-    <div className="w-full h-[calc(100vh-120px)] flex items-center gap-10">
-      <div className="flex flex-col justify-center py-10">
-        <h1 className="text-5xl font-extrabold">
-          Power by <p className="text-purple-500 inline">Boltdocs</p>
-        </h1>
-        <p className="text-xl mt-4 text-muted">Docs generators for react.</p>
-      </div>
-      <Cards cols={4}>
-        {features.map((feature) => (
-          <Card
-            key={feature.title}
-            title={feature.title}
-            icon={<feature.Icon />}
-          >
-            {feature.description}
-          </Card>
-        ))}
-      </Cards>
-    </div>
-  )
-}