feat: adding guide with contentlayer, wip

Signed-off-by: sarthakjdev <[email protected]>

apps/wapijs.co/.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.contentlayer

apps/wapijs.co/contentlayer.config.js

@@ -0,0 +1,52 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import remarkGfm from 'remark-gfm'
+import { remarkCodeHike } from '@code-hike/mdx';;
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+
+export const GuideDocument = defineDocumentType(() => ({
+  name: 'Content',
+  filePathPattern: `**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      required: true,
+    },
+    category: {
+      type: 'string',
+      required: true,
+    },
+  },
+  computedFields: {
+    slug: {
+      type: 'string',
+      resolve: (doc) => doc._raw.flattenedPath.replace(/\d+-/g, ''),
+    },
+    url: {
+      type: 'string',
+      resolve: (doc) => `/guide/${doc._raw.flattenedPath.replace(/\d+-/g, '')}`,
+    },
+  },
+}));
+
+export default makeSource({
+  contentDirPath: 'src/guide-content',
+  documentTypes: [GuideDocument],
+  mdx: {
+    remarkPlugins: [remarkGfm, [remarkCodeHike]],
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          properties: {
+            class:
+              'relative inline-flex place-items-center place-content-center outline-none text-black dark:text-white pr-2 -ml-8 opacity-0 group-hover:opacity-100',
+          },
+          behavior: 'prepend',
+        },
+      ],
+    ],
+  },
+});

apps/wapijs.co/guide-content/installation-and-setup/get-api-credentials.mdx

@@ -0,0 +1 @@
+## How to get your Whatsapp Cloud API credentials

apps/wapijs.co/guide-content/installation-and-setup/initiate-bot.mdx

@@ -0,0 +1 @@
+## How to initiate your Wapi.js Bot

apps/wapijs.co/guide-content/installation-and-setup/register-phone-number.mdx

@@ -0,0 +1 @@
+## How to register a phone number

apps/wapijs.co/guide-content/introduction/before-you-begin.mdx

@@ -0,0 +1 @@
+## Before you begin

apps/wapijs.co/next.config.mjs

@@ -1,9 +1,20 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-	reactStrictMode: true,
-	compiler: {
-		removeConsole: process.env.NODE_ENV === 'production'
-	}
-}
+
+import BundleAnalyzerPlugin from '@next/bundle-analyzer'
+import { withContentlayer } from 'next-contentlayer'
+
+const withBundleAnalyzer = BundleAnalyzerPlugin({
+	enabled: process.env.ANALYZE === 'true'
+})
+
+const nextConfig = withBundleAnalyzer(
+	withContentlayer({
+		reactStrictMode: true,
+		compiler: {
+			removeConsole: process.env.NODE_ENV === 'production'
+		},
+		poweredByHeader: false
+	})
+)
 
 export default nextConfig

apps/wapijs.co/package.json

@@ -6,22 +6,28 @@
 		"build": "NODE_ENV=production  next build",
 		"start": "NODE_ENV=production next start ",
 		"lint": "next lint",
-		"pretty": "pnpm prettier --write \"src/**/*.{ts,tsx,css}\""
+		"pretty": "pnpm prettier --write \"src/**/*.{ts,tsx,css}\"",
+		"gen": "contentlayer build"
 	},
 	"dependencies": {
+		"@code-hike/mdx": "^0.9.0",
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@heroicons/react": "^2.1.3",
 		"@microsoft/api-extractor-model": "^7.28.14",
 		"@microsoft/tsdoc": "^0.14.2",
 		"@microsoft/tsdoc-config": "^0.16.2",
+		"@next/bundle-analyzer": "^14.2.3",
 		"@react-icons/all-files": "^4.1.0",
 		"@shikijs/rehype": "^1.4.0",
 		"@tailwindcss/typography": "^0.5.10",
 		"@wapijs/tailwind-config": "workspace:*",
 		"@wapijs/ui": "workspace:*",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
+		"contentlayer": "^0.3.4",
+		"html-escaper": "^3.0.3",
 		"next": "14.2.3",
+		"next-contentlayer": "^0.3.4",
 		"next-mdx-remote": "^4.4.1",
 		"overlayscrollbars": "^2.7.3",
 		"overlayscrollbars-react": "^0.5.6",
@@ -30,17 +36,21 @@
 		"react-dom": "^18.3.1",
 		"react-use": "^17.5.0",
 		"react-wrap-balancer": "^1.1.0",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-slug": "^6.0.0",
 		"remark-gfm": "^3.0.1",
 		"shiki": "^1.4.0",
 		"tailwindcss": "^3.4.1"
 	},
 	"devDependencies": {
+		"@types/html-escaper": "^3.0.2",
 		"@types/node": "^20",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",
 		"@wapijs/eslint-config": "workspace:*",
 		"@wapijs/prettier-config": "workspace:*",
 		"@wapijs/typescript-config": "workspace:*",
+		"i": "^0.3.7",
 		"typescript": "5.4.5"
 	}
 }

apps/wapijs.co/src/app/guide/[slug]/layout.tsx

@@ -0,0 +1,5 @@
+const GuideDynamicPageLayout: React.FC<{
+	children: React.ReactNode
+}> = ({ children }) => {
+	return <>{children}</>
+}

apps/wapijs.co/src/app/guide/[slug]/page.tsx

@@ -0,0 +1,18 @@
+import { notFound } from 'next/navigation'
+import { allContents } from 'contentlayer/generated'
+
+export async function generateStaticParams() {
+	return allContents.map(content => ({ slug: [content.slug] }))
+}
+
+const Page = ({ params }: { readonly params: { slug: string[] } }) => {
+	const content = allContents.find(content => content.slug === params.slug?.join('/'))
+
+	if (!content) {
+		notFound()
+	}
+
+	return <article className="prose max-w-none px-5">{/* render the content here */}</article>
+}
+
+export default Page

apps/wapijs.co/src/app/guide/layout.tsx

@@ -0,0 +1,7 @@
+const GuideLayout: React.FC<{
+	children: React.ReactNode
+}> = ({ children }) => {
+	return <>{children}</>
+}
+
+export default GuideLayout

apps/wapijs.co/src/app/guide/page.tsx

@@ -0,0 +1,5 @@
+const WapiGuidePage = () => {
+	return <section></section>
+}
+
+export default WapiGuidePage

apps/wapijs.co/tsconfig.json

@@ -3,8 +3,10 @@
 	"compilerOptions": {
 		"paths": {
 			"~/*": ["./src/*"],
-			"root/*": ["./*"]
-		}
+			"root/*": ["./*"],
+			"contentlayer/generated/*": ["./.contentlayer/generated/*"]
+		},
+		"baseUrl": "."
 	},
 	"include": [
 		"next-env.d.ts",
@@ -15,6 +17,6 @@
 		"tailwind.config.js",
 		"prettier.config.js",
 		".eslintrc.js"
-	],
+, "contentlayer.config.js"	],
 	"exclude": ["node_modules"]
 }