;
* This component displays a call-to-action block to help users get started with the application.
*/
const meta = {
- component: GetStarted,
- tags: ['autodocs'],
- title: 'Molecules/Blocks/GetStarted'
+ component: GetStarted,
+ tags: ['autodocs'],
+ title: 'Molecules/Blocks/GetStarted'
} satisfies GetStartedMeta;
export default meta;
diff --git a/src/components/molecules/blocks/GetStarted/index.tsx b/src/components/molecules/blocks/GetStarted/index.tsx
index 7345689..96ce9ca 100644
--- a/src/components/molecules/blocks/GetStarted/index.tsx
+++ b/src/components/molecules/blocks/GetStarted/index.tsx
@@ -1,12 +1,12 @@
import { Code } from '~/components/atoms/typography/Code';
export function GetStarted() {
- /* JSX */
+ /* JSX */
- return (
-
- Get started by editing
- src/app/page.tsx
-
- );
+ return (
+
+ Get started by editing
+ src/app/page.tsx
+
+ );
}
diff --git a/src/components/molecules/cards/ResourceCard/index.stories.tsx b/src/components/molecules/cards/ResourceCard/index.stories.tsx
index b673d64..e0f334b 100644
--- a/src/components/molecules/cards/ResourceCard/index.stories.tsx
+++ b/src/components/molecules/cards/ResourceCard/index.stories.tsx
@@ -14,9 +14,9 @@ type ResourceCardMeta = Meta;
* Displays a resource card with a title, description, and link.
*/
const meta = {
- component: ResourceCard,
- tags: ['autodocs'],
- title: 'Molecules/Cards/ResourceCard'
+ component: ResourceCard,
+ tags: ['autodocs'],
+ title: 'Molecules/Cards/ResourceCard'
} satisfies ResourceCardMeta;
export default meta;
@@ -34,25 +34,25 @@ type ResourceCardStory = StoryObj;
* Default resource card.
*/
export const Default = {
- args: {
- title: 'Docs',
- description: 'Find in-depth information about Next.js features and API.',
- link: 'https://nextjs.org/docs'
- }
+ args: {
+ title: 'Docs',
+ description: 'Find in-depth information about Next.js features and API.',
+ link: 'https://nextjs.org/docs'
+ }
} satisfies ResourceCardStory;
/**
* Resource card with hover state.
*/
export const Hover = {
- args: {
- title: 'Docs',
- description: 'Find in-depth information about Next.js features and API.',
- link: 'https://nextjs.org/docs'
- },
- parameters: {
- pseudo: {
- hover: true
- }
- }
+ args: {
+ title: 'Docs',
+ description: 'Find in-depth information about Next.js features and API.',
+ link: 'https://nextjs.org/docs'
+ },
+ parameters: {
+ pseudo: {
+ hover: true
+ }
+ }
} satisfies ResourceCardStory;
diff --git a/src/components/molecules/cards/ResourceCard/index.tsx b/src/components/molecules/cards/ResourceCard/index.tsx
index b52a5b4..6c797ec 100644
--- a/src/components/molecules/cards/ResourceCard/index.tsx
+++ b/src/components/molecules/cards/ResourceCard/index.tsx
@@ -5,33 +5,33 @@ import { Heading } from '~/components/atoms/typography/Heading';
* Props for the ArrowIcon component.
*/
type ResourceCardProps = {
- /** Title of the card */
- title: string;
+ /** Title of the card */
+ title: string;
- /** Description of the card */
- description: string;
+ /** Description of the card */
+ description: string;
- /** Link to the resource */
- link: string;
+ /** Link to the resource */
+ link: string;
};
export function ResourceCard({ title, description, link }: ResourceCardProps) {
- /* JSX */
+ /* JSX */
- return (
-
-
- {title}{' '}
-
-
- {description}
-
- );
+ return (
+
+
+ {title}{' '}
+
+
+ {description}
+
+ );
}
diff --git a/src/components/organisms/sections/HeaderSection/index.stories.tsx b/src/components/organisms/sections/HeaderSection/index.stories.tsx
index bd3747a..1585c3e 100644
--- a/src/components/organisms/sections/HeaderSection/index.stories.tsx
+++ b/src/components/organisms/sections/HeaderSection/index.stories.tsx
@@ -14,9 +14,9 @@ type HeaderSectionMeta = Meta;
* Header section with a get started block and a creator credit block.
*/
const meta = {
- component: HeaderSection,
- tags: ['autodocs'],
- title: 'Organisms/Sections/HeaderSection'
+ component: HeaderSection,
+ tags: ['autodocs'],
+ title: 'Organisms/Sections/HeaderSection'
} satisfies HeaderSectionMeta;
export default meta;
diff --git a/src/components/organisms/sections/HeaderSection/index.tsx b/src/components/organisms/sections/HeaderSection/index.tsx
index 63d247d..562cd7f 100644
--- a/src/components/organisms/sections/HeaderSection/index.tsx
+++ b/src/components/organisms/sections/HeaderSection/index.tsx
@@ -2,15 +2,15 @@ import { CreatorCredit } from '~/components/molecules/blocks/CreatorCredit';
import { GetStarted } from '~/components/molecules/blocks/GetStarted';
export function HeaderSection() {
- /* JSX */
+ /* JSX */
- return (
-
-
+ return (
+
- );
+
+
+
+
+ );
}
diff --git a/src/components/organisms/sections/LogoSection/index.stories.tsx b/src/components/organisms/sections/LogoSection/index.stories.tsx
index b99ee25..0a5c046 100644
--- a/src/components/organisms/sections/LogoSection/index.stories.tsx
+++ b/src/components/organisms/sections/LogoSection/index.stories.tsx
@@ -14,9 +14,9 @@ type LogoSectionMeta = Meta;
* Section with a centered Next.js logo.
*/
const meta = {
- component: LogoSection,
- tags: ['autodocs'],
- title: 'Organisms/Sections/LogoSection'
+ component: LogoSection,
+ tags: ['autodocs'],
+ title: 'Organisms/Sections/LogoSection'
} satisfies LogoSectionMeta;
export default meta;
diff --git a/src/components/organisms/sections/LogoSection/index.tsx b/src/components/organisms/sections/LogoSection/index.tsx
index 2a35dd8..a529332 100644
--- a/src/components/organisms/sections/LogoSection/index.tsx
+++ b/src/components/organisms/sections/LogoSection/index.tsx
@@ -1,11 +1,11 @@
import { NextJSLogo } from '~/components/atoms/logos/NextJSLogo';
export function LogoSection() {
- /* JSX */
+ /* JSX */
- return (
-
- );
+ return (
+
+ );
}
diff --git a/src/components/organisms/sections/ResourceSection/index.stories.tsx b/src/components/organisms/sections/ResourceSection/index.stories.tsx
index 157ed28..fd01ba1 100644
--- a/src/components/organisms/sections/ResourceSection/index.stories.tsx
+++ b/src/components/organisms/sections/ResourceSection/index.stories.tsx
@@ -14,9 +14,9 @@ type ResourceSectionMeta = Meta;
* Section with a list of resources.
*/
const meta = {
- component: ResourceSection,
- tags: ['autodocs'],
- title: 'Organisms/Sections/ResourceSection'
+ component: ResourceSection,
+ tags: ['autodocs'],
+ title: 'Organisms/Sections/ResourceSection'
} satisfies ResourceSectionMeta;
export default meta;
diff --git a/src/components/organisms/sections/ResourceSection/index.tsx b/src/components/organisms/sections/ResourceSection/index.tsx
index ea08e45..623a114 100644
--- a/src/components/organisms/sections/ResourceSection/index.tsx
+++ b/src/components/organisms/sections/ResourceSection/index.tsx
@@ -1,33 +1,33 @@
import { ResourceCard } from '../../../molecules/cards/ResourceCard';
export function ResourceSection() {
- /* JSX */
+ /* JSX */
- return (
-
+ );
}
diff --git a/src/env.js b/src/env.js
index 43fac90..a5b733f 100644
--- a/src/env.js
+++ b/src/env.js
@@ -2,44 +2,44 @@ import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';
export const env = createEnv({
- /**
- * Specify your client-side environment variables schema here. This way you can ensure the app
- * isn't built with invalid env vars. To expose them to the client, prefix them with
- * `NEXT_PUBLIC_`.
- */
- client: {
- // NEXT_PUBLIC_CLIENT_VAR: z.string(),
- },
+ /**
+ * Specify your client-side environment variables schema here. This way you can ensure the app
+ * isn't built with invalid env vars. To expose them to the client, prefix them with
+ * `NEXT_PUBLIC_`.
+ */
+ client: {
+ // NEXT_PUBLIC_CLIENT_VAR: z.string(),
+ },
- /**
- * Specify your server-side environment variables schema here. This way you can ensure the app
- * isn't built with invalid env vars.
- */
- server: {
- NODE_ENV: z.enum(['development', 'test', 'production']).default('development')
- },
+ /**
+ * Specify your server-side environment variables schema here. This way you can ensure the app
+ * isn't built with invalid env vars.
+ */
+ server: {
+ NODE_ENV: z.enum(['development', 'test', 'production']).default('development')
+ },
- /**
- * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
- * middlewares) or client-side so we need to destruct manually.
- */
- runtimeEnv: {
- /* Client */
- // NEXT_PUBLIC_CLIENT_VAR: process.env.NEXT_PUBLIC_CLIENT_VAR
+ /**
+ * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+ * middlewares) or client-side so we need to destruct manually.
+ */
+ runtimeEnv: {
+ /* Client */
+ // NEXT_PUBLIC_CLIENT_VAR: process.env.NEXT_PUBLIC_CLIENT_VAR
- /* Server */
- NODE_ENV: process.env.NODE_ENV
- },
+ /* Server */
+ NODE_ENV: process.env.NODE_ENV
+ },
- /**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
- * useful for Docker builds.
- */
- skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+ /**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+ * useful for Docker builds.
+ */
+ skipValidation: !!process.env.SKIP_ENV_VALIDATION,
- /**
- * Makes it so that empty strings are treated as undefined.
- * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
- */
- emptyStringAsUndefined: true
+ /**
+ * Makes it so that empty strings are treated as undefined.
+ * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
+ */
+ emptyStringAsUndefined: true
});
diff --git a/src/lib/__tests__/utils.test.mjs b/src/lib/__tests__/utils.test.mjs
index b210997..96ac7f9 100644
--- a/src/lib/__tests__/utils.test.mjs
+++ b/src/lib/__tests__/utils.test.mjs
@@ -1,11 +1,11 @@
import { cn } from '~/lib/utils';
describe('cn', () => {
- it('merges tailwind class names', () => {
- const classNames = cn('bg-red hover:bg-dark-red px-2 py-1', 'bg-[#b91c1c] p-3');
- const expectedClasses = ['hover:bg-dark-red', 'p-3', 'bg-[#b91c1c]'];
+ it('merges tailwind class names', () => {
+ const classNames = cn('bg-red hover:bg-dark-red px-2 py-1', 'bg-[#b91c1c] p-3');
+ const expectedClasses = ['hover:bg-dark-red', 'p-3', 'bg-[#b91c1c]'];
- expect(classNames.split(' ').sort()).toEqual(expectedClasses.sort());
- expect(classNames.split(' ').length).toBe(expectedClasses.length);
- });
+ expect(classNames.split(' ').sort()).toEqual(expectedClasses.sort());
+ expect(classNames.split(' ').length).toBe(expectedClasses.length);
+ });
});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 23840fe..c5db915 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,13 +2,13 @@ import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
+ return twMerge(clsx(inputs));
}
export function toPascalCase(string: string) {
- return string
- .replace(/(\w)(\w*)/g, function (g0: string, g1: string, g2: string) {
- return g1.toUpperCase() + g2.toLowerCase();
- })
- .replace(/\s+/g, '');
+ return string
+ .replace(/(\w)(\w*)/g, function (g0: string, g1: string, g2: string) {
+ return g1.toUpperCase() + g2.toLowerCase();
+ })
+ .replace(/\s+/g, '');
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 64437f4..8d56888 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,18 +1,18 @@
:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
}
body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index f4ec6ab..79008c2 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,7 +3,7 @@
@tailwind utilities;
@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
+ .text-balance {
+ text-wrap: balance;
+ }
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d6a71aa..c4bbb1a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,25 +1,25 @@
import type { Config } from 'tailwindcss';
const config: Config = {
- /**
- * Configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names.
- * @see https://tailwindcss.com/docs/content-configuration
- */
- content: ['./src/**/*.tsx'],
+ /**
+ * Configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names.
+ * @see https://tailwindcss.com/docs/content-configuration
+ */
+ content: ['./src/**/*.tsx'],
- /**
- * Define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more.
- */
- theme: {
- extend: {
- backgroundImage: {
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
- }
- }
- },
+ /**
+ * Define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more.
+ */
+ theme: {
+ extend: {
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+ }
+ }
+ },
- safelist: ['dark']
+ safelist: ['dark']
};
export default config;
diff --git a/tests/example.test.ts b/tests/example.test.ts
index 56f8d93..0b5c765 100644
--- a/tests/example.test.ts
+++ b/tests/example.test.ts
@@ -1,18 +1,18 @@
import { expect, test } from '@playwright/test';
test('has title', async ({ page }) => {
- await page.goto('https://playwright.dev/');
+ await page.goto('https://playwright.dev/');
- // Expect a title "to contain" a substring.
- await expect(page).toHaveTitle(/Playwright/);
+ // Expect a title "to contain" a substring.
+ await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
- await page.goto('https://playwright.dev/');
+ await page.goto('https://playwright.dev/');
- // Click the get started link.
- await page.getByRole('link', { name: 'Get started' }).click();
+ // Click the get started link.
+ await page.getByRole('link', { name: 'Get started' }).click();
- // Expects page to have a heading with the name of Installation.
- await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+ // Expects page to have a heading with the name of Installation.
+ await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
diff --git a/tsconfig.json b/tsconfig.json
index 11b39e6..3b5ceb5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,43 +1,43 @@
{
- "compilerOptions": {
- /* Base Options */
- "esModuleInterop": true,
- "skipLibCheck": true,
- "target": "ES2022",
- "allowJs": true,
- "resolveJsonModule": true,
- "moduleDetection": "force",
- "isolatedModules": true,
+ "compilerOptions": {
+ /* Base Options */
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "target": "ES2022",
+ "allowJs": true,
+ "resolveJsonModule": true,
+ "moduleDetection": "force",
+ "isolatedModules": true,
- /* Strictness */
- "strict": true,
- "noUncheckedIndexedAccess": true,
- "checkJs": true,
+ /* Strictness */
+ "strict": true,
+ "noUncheckedIndexedAccess": true,
+ "checkJs": true,
- /* Bundled Projects */
- "lib": ["dom", "dom.iterable", "ES2022"],
- "noEmit": true,
- "module": "ESNext",
- "moduleResolution": "Bundler",
- "jsx": "preserve",
- "plugins": [{ "name": "next" }],
- "incremental": true,
+ /* Bundled Projects */
+ "lib": ["dom", "dom.iterable", "ES2022"],
+ "noEmit": true,
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "jsx": "preserve",
+ "plugins": [{ "name": "next" }],
+ "incremental": true,
- /* Path Aliases */
- "baseUrl": ".",
- "paths": {
- "~/*": ["./src/*"]
- }
- },
- "include": [
- ".eslintrc.cjs",
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- "**/*.cjs",
- "**/*.js",
- "**/*.mjs",
- ".next/types/**/*.ts"
- ],
- "exclude": ["node_modules"]
+ /* Path Aliases */
+ "baseUrl": ".",
+ "paths": {
+ "~/*": ["./src/*"]
+ }
+ },
+ "include": [
+ ".eslintrc.cjs",
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "**/*.cjs",
+ "**/*.js",
+ "**/*.mjs",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": ["node_modules"]
}