feat: add site meta and og images

Signed-off-by: sarthakjdev <jsarthak448@gmail.com>

apps/wapijs.co/src/app/docs/[version]/layout.tsx

@@ -3,10 +3,69 @@ import { ApiModel } from '@microsoft/api-extractor-model'
 import { resolveItemUri } from '~/reusable-function'
 import { notFound } from 'next/navigation'
 import { addPackageToModel, fetchDocumentationJsonDataFromSlug } from '~/utils/api-extractor'
+import type { Metadata } from 'next'
+import {
+	MetaTitle,
+	CANONICAL_SITE_DOMAIN,
+	META_CATEGORY,
+	ProductDescription,
+	META_KEYWORDS,
+	META_CLASSIFICATION
+} from '~/constant'
 
 export const revalidate = 60 * 60 * 24 * 30
 export const dynamicParams = true
 
+export const metadata: Metadata = {
+	title: `Docs | ${MetaTitle}`,
+	description: ProductDescription,
+	applicationName: 'Wapijs',
+	authors: [{ name: 'Sarthak Jain', url: `https://github.com/sarthakjdev` }],
+	generator: 'Next.js',
+	referrer: 'origin-when-cross-origin',
+	keywords: META_KEYWORDS,
+	publisher: 'Softlancer - Ideate. Innovate. Elevate',
+	robots: 'index, follow',
+	creator: 'Softlancer',
+	manifest: `${CANONICAL_SITE_DOMAIN}/manifest.json`,
+	openGraph: {
+		type: 'website',
+		url: CANONICAL_SITE_DOMAIN,
+		title: MetaTitle,
+		description: ProductDescription,
+		images: [{ url: `${CANONICAL_SITE_DOMAIN}/doc-og.png` }],
+		siteName: 'Wapijs'
+	},
+	twitter: {
+		card: 'summary_large_image',
+		site: '@sarthakjdev',
+		description: ProductDescription,
+		title: MetaTitle,
+		creator: '@sarthakjdev',
+		images: `${CANONICAL_SITE_DOMAIN}/doc-og.png`
+	},
+	verification: {
+		google: 'mrOKVGMry1NOe6Hrn1lXqy0dYcuAqNVbiDr5HeSfRWo'
+	},
+	formatDetection: { telephone: false },
+	appleWebApp: true,
+	assets: `${CANONICAL_SITE_DOMAIN}/assets`,
+	category: META_CATEGORY.join(', '),
+	classification: META_CLASSIFICATION.join(', '),
+	other: {
+		'X-UA-Compatible': 'IE=edge,chrome=1',
+		'mobile-web-app-capable': 'yes'
+	},
+	metadataBase: new URL(CANONICAL_SITE_DOMAIN),
+	alternates: {
+		canonical: new URL(CANONICAL_SITE_DOMAIN)
+	},
+	icons: [
+		{ rel: 'icon', url: `${CANONICAL_SITE_DOMAIN}/favicon.ico` },
+		{ rel: 'apple-touch-icon', url: `${CANONICAL_SITE_DOMAIN}/apple-icon.png` }
+	]
+}
+
 export default async function VersionHomeLayout({
 	children,
 	params

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

@@ -1,15 +1,78 @@
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import 'overlayscrollbars/overlayscrollbars.css'
 import { clsx } from 'clsx'
 import { GoogleTagManager } from '@next/third-parties/google'
-import { IS_PRODUCTION } from '~/constant'
+import {
+	CANONICAL_SITE_DOMAIN,
+	IS_PRODUCTION,
+	META_CATEGORY,
+	META_CLASSIFICATION,
+	META_KEYWORDS,
+	MetaTitle,
+	ProductDescription
+} from '~/constant'
 
 const inter = Inter({ subsets: ['latin'] })
 
+export const viewport: Viewport = {
+	themeColor: {
+		color: '#25D366'
+	},
+	colorScheme: 'light',
+	width: 'device-width',
+	initialScale: 1
+}
+
 export const metadata: Metadata = {
-	title: 'Build whatsapp chat bot with ease - Wapi.js'
+	title: MetaTitle,
+	description: ProductDescription,
+	applicationName: 'Wapijs',
+	authors: [{ name: 'Sarthak Jain', url: `https://github.com/sarthakjdev` }],
+	generator: 'Next.js',
+	referrer: 'origin-when-cross-origin',
+	keywords: META_KEYWORDS,
+	publisher: 'Softlancer - Ideate. Innovate. Elevate',
+	robots: 'index, follow',
+	creator: 'Softlancer',
+	manifest: `${CANONICAL_SITE_DOMAIN}/manifest.json`,
+	openGraph: {
+		type: 'website',
+		url: CANONICAL_SITE_DOMAIN,
+		title: MetaTitle,
+		description: ProductDescription,
+		images: [{ url: `${CANONICAL_SITE_DOMAIN}/og.png` }],
+		siteName: 'Wapijs'
+	},
+	twitter: {
+		card: 'summary_large_image',
+		site: '@sarthakjdev',
+		description: ProductDescription,
+		title: MetaTitle,
+		creator: '@sarthakjdev',
+		images: `${CANONICAL_SITE_DOMAIN}/og.png`
+	},
+	verification: {
+		google: 'G7K6qtaRxHsmA5TSwlNyM4iOi9J3J4WeqdPCFoqKAY4'
+	},
+	formatDetection: { telephone: false },
+	appleWebApp: true,
+	assets: `${CANONICAL_SITE_DOMAIN}/assets`,
+	category: META_CATEGORY.join(', '),
+	classification: META_CLASSIFICATION.join(', '),
+	other: {
+		'X-UA-Compatible': 'IE=edge,chrome=1',
+		'mobile-web-app-capable': 'yes'
+	},
+	metadataBase: new URL(CANONICAL_SITE_DOMAIN),
+	alternates: {
+		canonical: new URL(CANONICAL_SITE_DOMAIN)
+	},
+	icons: [
+		{ rel: 'icon', url: `${CANONICAL_SITE_DOMAIN}/favicon.ico` },
+		{ rel: 'apple-touch-icon', url: `${CANONICAL_SITE_DOMAIN}/apple-icon.png` }
+	]
 }
 
 export default function RootLayout({

apps/wapijs.co/src/app/manifest.ts

@@ -3,13 +3,13 @@ import { metaDescription } from '~/constant'
 
 export default function manifest(): MetadataRoute.Manifest {
 	return {
-		name: 'Softlancer',
-		short_name: 'Softlancer',
+		name: 'Wapi.js',
+		short_name: 'Wapi',
 		description: metaDescription,
 		start_url: '/',
 		display: 'standalone',
 		background_color: '#fff',
-		theme_color: '#f16232',
+		theme_color: '#25D366',
 		icons: [
 			{
 				src: '/favicon.ico',

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

@@ -8,7 +8,7 @@ export default function Home() {
 		<main className="my-auto flex min-h-screen flex-row items-center justify-center gap-5 pl-10">
 			<div className="flex flex-1 flex-col gap-6">
 				<div
-					className="flex w-fit flex-row mx-auto items-center justify-center gap-5 py-4"
+					className="mx-auto flex w-fit flex-row items-center justify-center gap-5 py-4"
 					id="launch-banners"
 				>
 					<div className="flex-1">

apps/wapijs.co/src/constant.ts

@@ -9,3 +9,29 @@ export const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development'
 
 export const IS_STAGING = !IS_DEVELOPMENT && !IS_PRODUCTION
+
+export const MetaTitle = 'Build WhatsApp business apps with ease and faster - Wapi.js'
+
+export const ProductDescription =
+	'Wapi.js is a node library built for developing WhatsApp cloud API based app in a user friendly way. It provides a single client to handle all the operations, listen to user and system notification via event listeners and integrated webhook server.'
+
+export const CANONICAL_SITE_DOMAIN = 'https://www.wapijs.co'
+
+export const META_KEYWORDS = [
+	'nodejs',
+	'typescript',
+	'whatsapp chat bot',
+	'whatsapp bot',
+	'cloud api',
+	'whatsapp chatbot',
+	'cloud api sdk',
+	'whatsapp cloud api',
+	'whatsappjs',
+	'whatsapp business app',
+	'whatsapp business platform',
+	'meta business platform'
+]
+
+export const META_CATEGORY = []
+
+export const META_CLASSIFICATION = []

packages/create-wapi-app/src/create-bot.ts

@@ -15,7 +15,7 @@ import chalk from "chalk";
 import { installPackages } from "./reusable-function.js";
 import { PackageManagerEnum } from "./type.js";
 
-const glob = fastGlob.glob
+const glob = fastGlob.glob;
 
 export async function createWhatsappBot(options: {
   directory: string;
@@ -62,7 +62,7 @@ export async function createWhatsappBot(options: {
   const deno = packageManagerInUse === PackageManagerEnum.Deno;
   await cp(
     new URL(
-      `../../template/${deno ? "Deno" : isTypescriptEnabled ? "typescript" : 'javascript'}`,
+      `../../template/${deno ? "Deno" : isTypescriptEnabled ? "typescript" : "javascript"}`,
       import.meta.url,
     ),
     root,
@@ -76,7 +76,8 @@ export async function createWhatsappBot(options: {
   if (bun) {
     await cp(
       new URL(
-        `../template/Bun/${isTypescriptEnabled ? "typescript" : "javascript"
+        `../template/Bun/${
+          isTypescriptEnabled ? "typescript" : "javascript"
         }/package.json`,
         import.meta.url,
       ),