zuby 1.0.79 → 1.0.81

package/README.md

@@ -46,6 +46,15 @@ Zuby.js supports plugins to extend its functionality.
 You can find official plugins in the `@zubyjs` namespace on npm.
 See the complete [ZubyPlugin API](https://zuby.futrou.com/reference/zuby-plugin) to learn how to create your own plugins.
 
+Official plugins:
+### Official Plugins
+
+- [**@zubyjs/share**](./packages/share) - Share your local development server with others using Cloudflare tunnels
+- [**@zubyjs/sitemap**](./packages/sitemap) - Automatically generate sitemaps for your application
+- [**@zubyjs/tailwind**](./packages/tailwind) - Tailwind CSS integration and optimization
+- [**@zubyjs/purgecss**](./packages/purgecss) - CSS purging and optimization
+- [**@zubyjs/image**](./packages/image) - Image optimization and responsive image generation
+
 ## Acknowledgements
 
 Zuby.js is inspired by [Astro](https://astro.build/) and [Next.js](https://nextjs.org/)

package/commands/add.d.ts

@@ -0,0 +1 @@
+export default function add(options: Record<string, any>): Promise<void>;

package/commands/add.js

@@ -0,0 +1,112 @@
+import { createLogger } from '../logger/index.js';
+import { getZubyPackageConfig } from '../packageConfig.js';
+import chalk from 'chalk';
+import { getErrorMessage } from '../utils/errorUtils.js';
+/**
+ * Fetches available packages from NPM registry under @zubyjs scope
+ */
+async function fetchAvailablePackages() {
+    try {
+        const response = await fetch('https://registry.npmjs.org/-/v1/search?q=scope:zubyjs', {
+            signal: AbortSignal.timeout(5000),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch packages from NPM registry: ${response.statusText}`);
+        }
+        const data = (await response.json());
+        if (!data.objects) {
+            throw new Error('Invalid response format from NPM registry');
+        }
+        const packages = {};
+        data.objects.forEach((item) => {
+            const { name, version } = item.package;
+            packages[name] = version;
+        });
+        return packages;
+    }
+    catch (error) {
+        throw new Error(`Failed to fetch available packages: ${getErrorMessage(error)}`);
+    }
+}
+/**
+ * Gets the package manager command (npm, yarn, or pnpm)
+ */
+function getPackageManagerCommand() {
+    // Check which package manager is being used
+    const userAgent = process.env.npm_config_user_agent || '';
+    if (userAgent.includes('yarn')) {
+        return 'yarn add';
+    }
+    if (userAgent.includes('pnpm')) {
+        return 'pnpm add';
+    }
+    return 'npm install';
+}
+/**
+ * Installs a plugin package using the appropriate package manager
+ */
+async function installPlugin(packageName, version) {
+    const { execSync } = await import('child_process');
+    const packageManagerCmd = getPackageManagerCommand();
+    try {
+        const fullPackageName = `${packageName}@${version}`;
+        execSync(`${packageManagerCmd} ${fullPackageName}`, { stdio: 'inherit' });
+    }
+    catch (error) {
+        throw new Error(`Failed to install plugin ${packageName}: ${getErrorMessage(error)}`);
+    }
+}
+export default async function add(options) {
+    const logger = createLogger();
+    logger.clearScreen('info');
+    const zubyConfig = getZubyPackageConfig();
+    const zubyVersion = zubyConfig.version;
+    // Get plugin names from rest arguments
+    const pluginNames = options.args || [];
+    if (pluginNames.length === 0) {
+        logger.error('No plugin names provided. Usage: npx zuby add [plugin-name] [another-plugin]');
+        process.exit(1);
+    }
+    logger.info(`Fetching available @zubyjs packages...`);
+    try {
+        const availablePackages = await fetchAvailablePackages();
+        const pluginsToInstall = [];
+        // Validate each plugin
+        for (const pluginName of pluginNames) {
+            const fullPackageName = pluginName.startsWith('@zubyjs/') ? pluginName : `@zubyjs/${pluginName}`;
+            if (!(fullPackageName in availablePackages)) {
+                logger.error(`Plugin ${chalk.bold(fullPackageName)} not found in @zubyjs scope`);
+                logger.info(`Available plugins: ${Object.keys(availablePackages).join(', ')}`);
+                process.exit(1);
+            }
+            const pluginVersion = availablePackages[fullPackageName];
+            // Check if plugin version matches Zuby version
+            if (pluginVersion !== zubyVersion) {
+                logger.warn(`Plugin ${chalk.bold(fullPackageName)} has version ${chalk.bold(pluginVersion)}, but you have Zuby version ${chalk.bold(zubyVersion)}`);
+                logger.info('Using the exact version match for compatibility');
+            }
+            pluginsToInstall.push({
+                name: fullPackageName,
+                version: zubyVersion,
+            });
+        }
+        logger.info(`\nInstalling ${pluginsToInstall.length} plugin(s) with Zuby version ${chalk.bold(zubyVersion)}...\r\n`);
+        // Install all plugins
+        for (const plugin of pluginsToInstall) {
+            try {
+                await installPlugin(plugin.name, plugin.version);
+                logger.info(`${chalk.greenBright('✓')} Successfully installed ${chalk.bold(plugin.name)}`);
+            }
+            catch (error) {
+                logger.error(getErrorMessage(error));
+                process.exit(1);
+            }
+        }
+        logger.info(`\r\n${chalk.greenBright.bold('All plugins installed successfully! 🎉')}\r\n`);
+        logger.info('Update your zuby.config.ts or zuby.config.js to use the installed plugins.');
+    }
+    catch (error) {
+        logger.error(getErrorMessage(error));
+        process.exit(1);
+    }
+}

package/commands/build.d.ts

@@ -1,3 +1,3 @@
-import { BuildCommandOptions, ZubyInternalConfig } from '../types.js';
+import { type BuildCommandOptions, type ZubyInternalConfig } from '../types.js';
 export default function build(options: BuildCommandOptions): Promise<void>;
 export declare function getEntryFile(zubyInternalConfig: ZubyInternalConfig): Promise<string>;

package/commands/build.js

@@ -5,7 +5,7 @@ import { getTitle } from '../utils/brandingUtils.js';
 import { build as viteBuild } from 'vite';
 import { dirname, join, resolve } from 'path';
 import { normalizePath } from '../utils/pathUtils.js';
-import { existsSync, rmSync, writeFileSync, copyFileSync, readFileSync, } from 'fs';
+import { existsSync, rmSync, writeFileSync, copyFileSync, readFileSync } from 'fs';
 import { TEMPLATES } from '../templates/types.js';
 import { glob } from 'glob';
 import { fileURLToPath } from 'url';
@@ -19,7 +19,7 @@ export default async function build(options) {
     const zubyInternalConfig = await getZubyInternalConfig(options.configFile);
     const { vite: viteConfig, customLogger: logger, outDir, cacheDir, plugins } = zubyInternalConfig;
     let buildStep = 1;
-    const buildSteps = 2 + plugins.filter(plugin => plugin?.buildStep).length;
+    const buildSteps = 2 + plugins.filter((plugin) => plugin?.buildStep).length;
     const nextBuildStep = (description) => {
         logger?.info(`${chalk.bgYellow.bold.whiteBright(` Step ${buildStep++}/${buildSteps} `)} ${chalk.gray(description)}`);
     };
@@ -110,10 +110,26 @@ export default async function build(options) {
     const clientChunksManifestPath = resolve(outDir, CLIENT_CHUNKS_MANIFEST);
     const serverChunksManifestPath = resolve(outDir, SERVER_CHUNKS_MANIFEST);
     const clientChunksManifest = existsSync(clientChunksManifestPath)
-        ? JSON.parse(readFileSync(clientChunksManifestPath, 'utf-8'))
+        ? (() => {
+            try {
+                return JSON.parse(readFileSync(clientChunksManifestPath, 'utf-8'));
+            }
+            catch (error) {
+                logger?.warn(`Failed to parse client chunks manifest: ${error instanceof Error ? error.message : String(error)}`);
+                return {};
+            }
+        })()
         : {};
     const serverChunksManifest = existsSync(serverChunksManifestPath)
-        ? JSON.parse(readFileSync(serverChunksManifestPath, 'utf-8'))
+        ? (() => {
+            try {
+                return JSON.parse(readFileSync(serverChunksManifestPath, 'utf-8'));
+            }
+            catch (error) {
+                logger?.warn(`Failed to parse server chunks manifest: ${error instanceof Error ? error.message : String(error)}`);
+                return {};
+            }
+        })()
         : {};
     // Run build done hook
     // to execute plugins that are part of the build process
@@ -122,7 +138,7 @@ export default async function build(options) {
         translationFiles,
         clientChunksManifest,
         serverChunksManifest,
-    }, zubyPlugin => {
+    }, (zubyPlugin) => {
         // Hide plugins that are not part of the build process
         // from the CLI output to avoid confusion
         if (!zubyPlugin.buildStep)

package/commands/dev.d.ts

@@ -1,2 +1,2 @@
-import { ServerCommandOptions } from '../types.js';
+import { type ServerCommandOptions } from '../types.js';
 export default function dev(options: ServerCommandOptions): Promise<void>;

package/commands/index.js

@@ -7,6 +7,7 @@ import preview from './preview.js';
 import init from './init.js';
 import info from './info.js';
 import upgrade from './upgrade.js';
+import add from './add.js';
 const { name, description, version } = getZubyPackageConfig();
 const program = new Command().name(name).description(description).version(version);
 program
@@ -46,4 +47,8 @@ program
     .description('Upgrades Zuby to the latest compatible version')
     .option('-t, --tag <tag>', 'The tag to upgrade to (e.g. v1, v2, latest)')
     .action(async (options) => upgrade(options));
+program
+    .command('add [plugins...]')
+    .description('Adds one or more Zuby plugins to your project')
+    .action(async (plugins, options) => add({ ...options, args: plugins }));
 program.parse(process.argv);

package/commands/info.d.ts

@@ -1,2 +1,2 @@
-import { BaseCommandOptions } from '../types.js';
+import type { BaseCommandOptions } from '../types.js';
 export default function info({ configFile }: BaseCommandOptions): Promise<void>;

package/commands/info.js

@@ -9,6 +9,6 @@ export default async function info({ configFile }) {
     logger.info(`OS: ${os.type()} ${os.release()}`);
     logger.info(`Output: ${output}`);
     logger.info(`Output dir: ${outDir}`);
-    const pluginNames = plugins.map(plugin => plugin.name).join(', ');
+    const pluginNames = plugins.map((plugin) => plugin.name).join(', ');
     logger.info(`Plugins: ${plugins.length ? pluginNames : 'none'}`);
 }

package/commands/init.d.ts

@@ -1,5 +1,5 @@
-import { InitCommandOptions } from '../types.js';
-export default function init({ projectPath, jsxProviderName, exampleName, useTypescript, }: InitCommandOptions): Promise<void>;
+import type { InitCommandOptions } from '../types.js';
+export default function init({ projectPath, jsxProviderName, exampleName, useTypescript }: InitCommandOptions): Promise<void>;
 export declare function initExample(example: Example, options: InitOptions): Promise<void>;
 export declare function getExamples(): Example[];
 export interface Example {

package/commands/init.js

@@ -11,16 +11,16 @@ import { getZubyPackageConfig } from '../packageConfig.js';
 import { globSync } from 'glob';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-export default async function init({ projectPath, jsxProviderName, exampleName, useTypescript, }) {
+export default async function init({ projectPath, jsxProviderName, exampleName, useTypescript }) {
     const logger = createLogger();
     logger.clearScreen('info');
     logger?.info(`${getTitle(`Let's get started with Zuby`)}\r\n`);
     logger.info('Initializing a new Zuby project');
     const examples = getExamples();
     const defaultProjectName = 'my-zuby-app';
-    const defaultExample = examples.find(example => example.name === 'basic');
+    const defaultExample = examples.find((example) => example.name === 'basic');
     const jsxProviderNames = ['preact', 'react'];
-    const exampleNames = examples.map(example => example.name);
+    const exampleNames = examples.map((example) => example.name);
     const validateProjectPath = (projectPath) => {
         if (existsSync(projectPath)) {
             return 'Project with this name already exists. Please choose a different one.';
@@ -86,7 +86,7 @@ export default async function init({ projectPath, jsxProviderName, exampleName,
     else {
         logger.info(`Example project: ${exampleName}`);
     }
-    const selectedExample = examples.find(example => example.name === exampleName);
+    const selectedExample = examples.find((example) => example.name === exampleName);
     if (!selectedExample) {
         logger.error(`Example ${exampleName} was not found`);
         process.exit(1);
@@ -145,7 +145,7 @@ options) {
 export function getExamples() {
     const examplesPath = normalizePath(join(__dirname, '..', 'examples'));
     const exampleNames = readdirSync(examplesPath);
-    return exampleNames.map(exampleName => ({
+    return exampleNames.map((exampleName) => ({
         name: exampleName,
         path: normalizePath(join(examplesPath, exampleName)),
         isJs: existsSync(normalizePath(join(examplesPath, exampleName, 'js'))),

package/commands/preview.d.ts

@@ -1,2 +1,2 @@
-import { ServerCommandOptions } from '../types.js';
+import { type ServerCommandOptions } from '../types.js';
 export default function preview(options: ServerCommandOptions): Promise<void>;

package/commands/upgrade.d.ts

@@ -1,3 +1,3 @@
-import { UpgradeCommandOptions } from '../types.js';
+import type { UpgradeCommandOptions } from '../types.js';
 export default function upgrade({ configFile, tag }: UpgradeCommandOptions): Promise<void>;
 export declare function installDependencies(): boolean;

package/commands/upgrade.js

@@ -15,12 +15,25 @@ export default async function upgrade({ configFile, tag }) {
         process.exit(1);
     }
     const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
-    const res = await fetch('https://registry.npmjs.org/-/package/zuby/dist-tags');
-    if (!res.ok) {
-        logger.error(`ERROR: Failed to fetch latest version from NPM.`);
+    let tags;
+    try {
+        const res = await fetch('https://registry.npmjs.org/-/package/zuby/dist-tags', {
+            signal: AbortSignal.timeout(5000),
+        });
+        if (!res.ok) {
+            logger.error(`ERROR: Failed to fetch latest version from NPM.`);
+            process.exit(1);
+        }
+        tags = (await res.json());
+        if (!tags || typeof tags !== 'object' || !tags.latest) {
+            logger.error(`ERROR: Invalid response from NPM registry.`);
+            process.exit(1);
+        }
+    }
+    catch (error) {
+        logger.error(`ERROR: Failed to check for latest version: ${error instanceof Error ? error.message : String(error)}`);
         process.exit(1);
     }
-    const tags = (await res.json());
     const latestVersion = tags.latest;
     const selectedVersion = tags[tag || `v${currentMajor}`] || latestVersion;
     logger.info(getTitle(`Checking...`));
@@ -42,8 +55,9 @@ export default async function upgrade({ configFile, tag }) {
     Object.keys({
         ...(packageJson.dependencies || {}),
         ...(packageJson.devDependencies || {}),
-    }).forEach(name => {
-        if (!name.match(/^zuby|@zubyjs\/(.+)$/i))
+    }).forEach((name) => {
+        // Match packages starting with 'zuby' or '@zubyjs/'
+        if (!name.match(/^(zuby|@zubyjs\/)(.+)?$/i))
             return;
         if (packageJson.dependencies?.[name]) {
             packageJson.dependencies[name] = selectedVersion;

package/config.d.ts

@@ -1,4 +1,4 @@
-import { PluginHook, ZubyConfig, ZubyHookParams, ZubyInternalConfig, ZubyPlugin } from './types.js';
+import { type PluginHook, type ZubyConfig, type ZubyHookParams, type ZubyInternalConfig, type ZubyPlugin } from './types.js';
 import type { PluginOption as VitePluginOption, Plugin as VitePlugin } from 'vite';
 /**
  * Returns the path to the ZubyConfig file.

package/config.js

@@ -1,4 +1,4 @@
-import { PLUGIN_HOOKS, } from './types.js';
+import { PLUGIN_HOOKS } from './types.js';
 import { BUILD_CHUNKS_MANIFEST, ZUBY_CONFIG_FILE } from './constants.js';
 import { existsSync } from 'fs';
 import { randomBytes } from 'crypto';
@@ -24,11 +24,7 @@ let zubyInternalConfig;
  */
 export const getDefaultConfigPath = () => {
     // Find the config file with various extensions
-    return [
-        ZUBY_CONFIG_FILE,
-        ZUBY_CONFIG_FILE.replace(/\.mjs$/, '.js'),
-        ZUBY_CONFIG_FILE.replace(/\.mjs$/, '.ts'),
-    ].find(file => existsSync(file));
+    return [ZUBY_CONFIG_FILE, ZUBY_CONFIG_FILE.replace(/\.mjs$/, '.js'), ZUBY_CONFIG_FILE.replace(/\.mjs$/, '.ts')].find((file) => existsSync(file));
 };
 /**
  * This function loads the config file and returns the config object.
@@ -162,11 +158,7 @@ export const mergeDefaultConfig = async (config) => {
     config.cacheDir = config.cacheDir ?? '.zuby-cache';
     config.output = config.output ?? 'static';
     config.prerenderPaths = config.prerenderPaths ?? [];
-    config.plugins = await normalizePlugins([
-        ...getBuiltInPlugins(),
-        ...(config.jsx?.getPlugins() ?? []),
-        ...(config.plugins ?? []),
-    ]);
+    config.plugins = await normalizePlugins([...getBuiltInPlugins(), ...(config.jsx?.getPlugins() ?? []), ...(config.plugins ?? [])]);
     // Default server config
     config.server = config.server ?? {};
     config.server.host = config.server.host ?? '127.0.0.1';
@@ -180,8 +172,7 @@ export const mergeDefaultConfig = async (config) => {
     // Image config
     config.image = config.image ?? {};
     config.image.sizes = config.image.sizes ?? [160, 320, 640, 768, 1024, 1280, 1536, 1920, 2048];
-    config.image.loader =
-        config.image.loader ?? normalizePath(resolve(__dirname, 'image', 'imageLoader.js'));
+    config.image.loader = config.image.loader ?? normalizePath(resolve(__dirname, 'image', 'imageLoader.js'));
     config.image.defaultFormat = config.image.defaultFormat ?? 'webp';
     config.image.defaultQuality = config.image.defaultQuality ?? 80;
     // Build ID generator
@@ -243,15 +234,7 @@ export const mergeDefaultConfig = async (config) => {
  * before removing any of them.
  */
 export const getBuiltInPlugins = () => {
-    return [
-        injectPlugin(),
-        contextPlugin(),
-        chunkNamingPlugin(),
-        manifestPlugin(),
-        prerenderPlugin(),
-        standaloneBuildPlugin(),
-        preloadPlugin(),
-    ];
+    return [injectPlugin(), contextPlugin(), chunkNamingPlugin(), manifestPlugin(), prerenderPlugin(), standaloneBuildPlugin(), preloadPlugin()];
 };
 /**
  * Executes the Zuby plugins for the given hook.
@@ -303,9 +286,9 @@ export const normalizePlugins = async (plugins) => {
     const resolvePlugins = await Promise.resolve(plugins);
     return resolvePlugins
         // Flatten the array and normalize inner arrays
-        .flatMap(plugin => (Array.isArray(plugin) ? normalizePlugins(plugin) : [plugin]))
+        .flatMap((plugin) => (Array.isArray(plugin) ? normalizePlugins(plugin) : [plugin]))
         // Remove false, undefined, null values
-        .filter(plugin => !!plugin);
+        .filter((plugin) => !!plugin);
 };
 /**
  * Returns random base32 like build ID

package/contexts/globalContext.d.ts

@@ -1,5 +1,5 @@
-import { LazyTemplate } from '../templates/types.js';
-import { ImageFormat, ImageLoader, RenderToStream, RenderToString } from '../types.js';
+import type { LazyTemplate } from '../templates/types.js';
+import type { ImageFormat, ImageLoader, RenderToStream, RenderToString } from '../types.js';
 export interface GlobalContext {
     /**
      * The array with templates.

package/contexts/globalContext.js

@@ -3,5 +3,5 @@ export const getGlobalContext = () => {
     if (!globalContext) {
         globalThis._zubyGlobalContext = {};
     }
-    return globalContext;
+    return globalThis._zubyGlobalContext;
 };

package/contexts/index.d.ts

@@ -1,6 +1,6 @@
 export * from './globalContext.js';
 export * from './pageContext.js';
-export { PageContext as HandlerContext } from './pageContext.js';
-export { PageContext as ZubyPageContext } from './pageContext.js';
-export { PageContext as ZubyHandlerContext } from './pageContext.js';
-export { GlobalContext as ZubyGlobalContext } from './globalContext.js';
+export type { PageContext as HandlerContext } from './pageContext.js';
+export type { PageContext as ZubyPageContext } from './pageContext.js';
+export type { PageContext as ZubyHandlerContext } from './pageContext.js';
+export type { GlobalContext as ZubyGlobalContext } from './globalContext.js';

package/contexts/index.js

@@ -1,5 +1,2 @@
 export * from './globalContext.js';
 export * from './pageContext.js';
-export { PageContext as HandlerContext } from './pageContext.js';
-export { PageContext as ZubyPageContext } from './pageContext.js';
-export { PageContext as ZubyHandlerContext } from './pageContext.js';

package/contexts/pageContext.d.ts

@@ -1,4 +1,4 @@
-import { GlobalContext } from './globalContext.js';
+import { type GlobalContext } from './globalContext.js';
 export declare class PageContext {
     protected _url: URL;
     protected _initialPath: string;

package/contexts/pageContext.js

@@ -233,7 +233,7 @@ export class PageContext {
      * @example /products/1
      */
     get isInitialPath() {
-        return (this._initialPath.replace(/(.+)\/+$/, '$1') === this.url.pathname.replace(/(.+)\/+$/, '$1'));
+        return this._initialPath.replace(/(.+)\/+$/, '$1') === this.url.pathname.replace(/(.+)\/+$/, '$1');
     }
     /**
      * Returns array of all locales
@@ -262,7 +262,7 @@ export class PageContext {
      */
     get locale() {
         const currentPath = `${this.url.pathname}/`;
-        return this.locales.find(locale => currentPath.startsWith(`/${locale}/`)) || this.defaultLocale;
+        return this.locales.find((locale) => currentPath.startsWith(`/${locale}/`)) || this.defaultLocale;
     }
     /**
      * Returns path prefixed for given locale.
@@ -283,7 +283,7 @@ export class PageContext {
      * @example getPathLocale('/de/products/1') => 'de'
      */
     getPathLocale(path) {
-        return this.locales.find(locale => path.startsWith(`/${locale}`)) || this.defaultLocale;
+        return this.locales.find((locale) => path.startsWith(`/${locale}`)) || this.defaultLocale;
     }
     /**
      * Localizes the given text for the current locale
@@ -359,7 +359,7 @@ export class PageContext {
      * @private
      */
     async getHeadElements() {
-        return Promise.all(this._headElements.map(element => this.getElement(element)));
+        return Promise.all(this._headElements.map((element) => this.getElement(element)));
     }
     /**
      * Returns array of all elements as string
@@ -367,7 +367,7 @@ export class PageContext {
      * @private
      */
     async getBodyElements() {
-        return Promise.all(this._bodyElements.map(element => this.getElement(element)));
+        return Promise.all(this._bodyElements.map((element) => this.getElement(element)));
     }
     /**
      * Renders the given HTML element

package/defineConfig.d.ts

@@ -1,4 +1,4 @@
-import { ZubyConfig } from './types.js';
+import type { ZubyConfig } from './types.js';
 /**
  * This helper function is used to define the Zuby config in zuby.config.mjs.
  *

package/examples/basic/js/components/Card/index.css

@@ -1,37 +1,37 @@
 .link-card {
-  list-style: none;
-  display: flex;
-  padding: 1px;
-  background-color: #23262d;
-  background-image: none;
-  background-size: 400%;
-  border-radius: 7px;
-  background-position: 100%;
-  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #23262d;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .link-card > a {
-  width: 100%;
-  text-decoration: none;
-  line-height: 1.4;
-  padding: calc(1.5rem - 1px);
-  border-radius: 8px;
-  color: white;
-  background-color: #23262d;
-  opacity: 0.8;
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: white;
+    background-color: #23262d;
+    opacity: 0.8;
 }
 h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 }
 p {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
 }
 .link-card:is(:hover, :focus-within) {
-  background-position: 0;
+    background-position: 0;
 }
 .link-card:is(:hover, :focus-within) h2 {
-  color: #ffcc00;
+    color: #ffcc00;
 }

package/examples/basic/js/components/Card/index.jsx

@@ -1,15 +1,15 @@
 import styles from './index.module.css';
 
 export default function Card({ href, title, body }) {
-  return (
-    <li className={styles.linkCard}>
-      <a href={href}>
-        <h2>
-          {title}
-          <span>&rarr;</span>
-        </h2>
-        <p>{body}</p>
-      </a>
-    </li>
-  );
+    return (
+        <li className={styles.linkCard}>
+            <a href={href}>
+                <h2>
+                    {title}
+                    <span>&rarr;</span>
+                </h2>
+                <p>{body}</p>
+            </a>
+        </li>
+    );
 }