add ladle

apps/web/.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 .turbo
+
+#ladle
+/.ladle
+/build-ladle

apps/web/package.json

@@ -4,14 +4,17 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:ladle": "ladle serve",
     "build": "next build",
     "build:open": "npx open-next build",
+    "build:ladle": "ladle build -o ladle-build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.398.0",
     "@headlessui/react": "^1.7.17",
+    "@ladle/react": "^4.0.2",
     "@tabler/icons-react": "^2.42.0",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/container-queries": "0.1.1",
@@ -33,11 +36,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "vite": "^5.0.10"
   },
   "devDependencies": {
     "@cleandev/eslint-config": "workspace:*",
     "@types/prismjs": "^1.26.0",
     "eslint-plugin-tailwindcss": "^3.13.0"
   }
-}
+}

apps/web/src/Components.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta } from "@ladle/react";
+
+<Meta title="Welcome" />
+
+# Header
+
+> Some quote: Suspendisse at tempor velit. **Fusce** a fermentum arcu,
+> vitae semper mi. Nunc placerat, mauris ac volutpat tempus, arcu eros
+> accumsan nisi, in congue risus turpis in ligula.
+
+Some [example](https://example.com) link.
+
+1. One
+2. Two
+3. Three

apps/web/src/components/SkillBar.stories.tsx

@@ -0,0 +1,4 @@
+import type { Story } from '@ladle/react';
+import { SkillBar } from './SkillBar';
+
+export const SkillBarStory: Story = () => <SkillBar level={1} skill="JavaScript" />;

apps/web/vite.config.ts

@@ -0,0 +1,11 @@
+import path from 'node:path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'next/image': path.resolve(__dirname, './.ladle/UnoptimizedImage.tsx'),
+      'next/link': path.resolve(__dirname, './.ladle/UnoptimizedLink.tsx'),
+    },
+  },
+});

package.json

@@ -11,6 +11,7 @@
     "export": "turbo run export",
     "build": "dotenv -- turbo run build",
     "build:open": "dotenv -- turbo build:open",
+    "build:ladle": "dotenv -- turbo build:ladle",
     "lint": "turbo run lint",
     "synth": "turbo run synth",
     "test": "turbo run test"
@@ -50,7 +51,7 @@
   "lint-staged": {
     "*.{ts,tsx}": "eslint --fix"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@8.12.1",
   "dependencies": {
     "@parcel/watcher": "^2.3.0"
   }

packages/cdk-next-app/next-app.ts

@@ -12,7 +12,7 @@ import type { ICertificate } from 'aws-cdk-lib/aws-certificatemanager';
 import { Certificate } from 'aws-cdk-lib/aws-certificatemanager';
 import type { ARecordProps} from 'aws-cdk-lib/aws-route53';
 import { ARecord, AaaaRecord, HostedZone, RecordTarget } from 'aws-cdk-lib/aws-route53';
-import { CloudFrontTarget } from 'aws-cdk-lib/aws-route53-targets';
+import { BucketWebsiteTarget, CloudFrontTarget } from 'aws-cdk-lib/aws-route53-targets';
 import { CacheControl } from 'aws-cdk-lib/aws-s3-deployment';
 import { Effect, PolicyStatement } from 'aws-cdk-lib/aws-iam';
 import { Artifact, Pipeline } from 'aws-cdk-lib/aws-codepipeline';
@@ -53,6 +53,9 @@ export class NextApp extends Construct {
   /** the bucket that serves cache */
   readonly cacheBucket: Bucket;
 
+  /** the bucket that serves stories */
+  readonly storiesBucket: Bucket;
+
   /** the queue that triggers revalidation */
   readonly revalidationQueue: Queue;
 
@@ -97,6 +100,7 @@ export class NextApp extends Construct {
     // this.buildApp();
     this.staticBucket = this.prepareStaticBucket();
     this.cacheBucket = this.prepareCacheBucket();
+    this.storiesBucket = this.prepareStoriesBucket();
 
     this.revalidationQueue = this.prepareRevalidationQueue();
 
@@ -149,6 +153,16 @@ export class NextApp extends Construct {
     new ARecord(this, 'ARecord', recordProps);
     new AaaaRecord(this, 'AaaaRecord', recordProps);
 
+    // stories config
+
+    const storiesRecordProps: ARecordProps = {
+      recordName: ['stories', domainName].join('.'),
+      zone: hostedZone,
+      target: RecordTarget.fromAlias(new BucketWebsiteTarget(this.storiesBucket)),
+    };
+    new ARecord(this, 'ARecord', storiesRecordProps);
+    new AaaaRecord(this, 'AaaaRecord', storiesRecordProps);
+
     // queue config
     this.revalidationQueue.grantSendMessages(this.serverFunction);
     this.revalidationQueue.grantConsumeMessages(this.revalidationFunction);
@@ -184,6 +198,16 @@ export class NextApp extends Construct {
     });
   }
 
+  private prepareStoriesBucket(): Bucket {
+    return new Bucket(this, 'StoriesBucket', {
+      bucketName: ['stories', this.domainName].join('.'),
+      removalPolicy: RemovalPolicy.DESTROY,
+      autoDeleteObjects: true,
+      publicReadAccess: true,
+      websiteIndexDocument: 'index.html',
+    });
+  }
+
   private prepareRevalidationQueue(): Queue {
     return new Queue(this, 'RevalidationQueue', {
       fifo: true,
@@ -372,6 +396,7 @@ export class NextApp extends Construct {
     const sourceArtifact = new Artifact('Source');
     const assetsArtifact = new Artifact('Assets');
     const cacheArtifact = new Artifact('Cache');
+    const storiesArtifact = new Artifact('Stories');
 
     const serverFunctionArtifact = new Artifact('ServerFunctionArtifact');
     const revalidationFunctionArtifact = new Artifact('RevalidationFunctionArtifact');
@@ -498,6 +523,7 @@ export class NextApp extends Construct {
           build: {
             commands: [
               'pnpm build:open',
+              'pnpm build:ladle',
             ],
           }
         },
@@ -510,6 +536,10 @@ export class NextApp extends Construct {
             Cache: {
               files: ['**/*'],
               'base-directory': 'apps/web/.open-next/cache',
+            },
+            Stories: {
+              files: ['**/*'],
+              'base-directory': 'apps/web/ladle-build',
             }
           }
         }
@@ -546,6 +576,7 @@ export class NextApp extends Construct {
       outputs: [
         assetsArtifact,
         cacheArtifact,
+        storiesArtifact,
       ],
     });
 
@@ -603,6 +634,12 @@ export class NextApp extends Construct {
       cacheControl: [cacheControl],
     });
 
+    const storiesDeployAction = new S3DeployAction({
+      actionName: 'DeployStories',
+      input: storiesArtifact,
+      bucket: this.storiesBucket,
+    });
+
 
     // stages
 
@@ -638,7 +675,8 @@ export class NextApp extends Construct {
         warmerDeployAction,
         imageOptimizationDeployAction,
         assetDeployAction,
-        cacheDeployAction
+        cacheDeployAction,
+        storiesDeployAction,
       ],
     });