@djangocfg/nextjs 2.1.30 → 2.1.31

package/src/config/utils/manifest.ts

@@ -0,0 +1,195 @@
+/**
+ * PWA Manifest Metadata Utilities
+ *
+ * Helper functions for creating Next.js metadata for PWA manifest
+ */
+
+import type { Metadata, MetadataRoute } from 'next';
+
+export interface ManifestConfig {
+  name: string;
+  shortName?: string;
+  description?: string;
+  themeColor?: string;
+  backgroundColor?: string;
+  display?: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';
+  orientation?: 'portrait' | 'landscape' | 'any';
+  startUrl?: string;
+  scope?: string;
+  lang?: string;
+  dir?: 'ltr' | 'rtl' | 'auto';
+  icons?: {
+    src: string;
+    sizes: string;
+    type?: string;
+    purpose?: string;
+  }[];
+}
+
+/**
+ * Icon paths configuration
+ */
+export interface IconPaths {
+  logo192?: string;
+  logo384?: string;
+  logo512?: string;
+}
+
+/**
+ * Create manifest metadata for Next.js app
+ *
+ * @example
+ * ```typescript
+ * export const metadata: Metadata = {
+ *   ...createManifestMetadata({
+ *     name: 'My App',
+ *     shortName: 'App',
+ *     description: 'My awesome app',
+ *   }),
+ * };
+ * ```
+ */
+export function createManifestMetadata(config: ManifestConfig): Metadata {
+  return {
+    manifest: '/manifest.json',
+    themeColor: config.themeColor || '#000000',
+    appleWebApp: {
+      capable: true,
+      statusBarStyle: 'default',
+      title: config.shortName || config.name,
+    },
+    applicationName: config.name,
+    formatDetection: {
+      telephone: false,
+    },
+    viewport: {
+      width: 'device-width',
+      initialScale: 1,
+      maximumScale: 1,
+    },
+  };
+}
+
+/**
+ * Create Next.js manifest function
+ *
+ * Use this in your app/manifest.ts file
+ *
+ * @example
+ * ```typescript
+ * // app/manifest.ts
+ * import { createManifest } from '@djangocfg/nextjs/config';
+ * import { settings } from '@core/settings';
+ *
+ * export default createManifest({
+ *   name: settings.app.name,
+ *   description: settings.app.description,
+ *   icons: {
+ *     logo192: settings.app.icons.logo192,
+ *     logo384: settings.app.icons.logo384,
+ *     logo512: settings.app.icons.logo512,
+ *   },
+ * });
+ * ```
+ */
+export function createManifest(config: {
+  name: string;
+  shortName?: string;
+  description?: string;
+  themeColor?: string;
+  backgroundColor?: string;
+  display?: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';
+  orientation?: 'portrait' | 'landscape' | 'any';
+  startUrl?: string;
+  scope?: string;
+  lang?: string;
+  dir?: 'ltr' | 'rtl' | 'auto';
+  icons?: IconPaths | ManifestConfig['icons'];
+}): () => MetadataRoute.Manifest {
+  return () => {
+    // Convert IconPaths to manifest icons format
+    let manifestIcons: MetadataRoute.Manifest['icons'];
+
+    if (Array.isArray(config.icons)) {
+      // Already in manifest format
+      manifestIcons = config.icons as MetadataRoute.Manifest['icons'];
+    } else if (config.icons) {
+      // Convert IconPaths to manifest icons
+      const { logo192, logo384, logo512 } = config.icons as IconPaths;
+      manifestIcons = [
+        ...(logo192
+          ? [
+              {
+                src: logo192,
+                sizes: '192x192',
+                type: 'image/png',
+                purpose: 'maskable' as const,
+              },
+            ]
+          : []),
+        ...(logo384
+          ? [
+              {
+                src: logo384,
+                sizes: '384x384',
+                type: 'image/png',
+              },
+            ]
+          : []),
+        ...(logo512
+          ? [
+              {
+                src: logo512,
+                sizes: '512x512',
+                type: 'image/png',
+              },
+            ]
+          : []),
+      ];
+    } else {
+      // Default icons
+      manifestIcons = [
+        {
+          src: '/static/logos/192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'maskable' as const,
+        },
+        {
+          src: '/static/logos/384x384.png',
+          sizes: '384x384',
+          type: 'image/png',
+        },
+        {
+          src: '/static/logos/512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ];
+    }
+
+    return {
+      name: config.name,
+      short_name: config.shortName || config.name,
+      description: config.description || config.name,
+      start_url: config.startUrl || '/',
+      scope: config.scope || '/',
+      display: config.display || 'standalone',
+      orientation: config.orientation || 'portrait',
+      background_color: config.backgroundColor || '#000000',
+      theme_color: config.themeColor || '#ffffff',
+      lang: config.lang || 'en',
+      dir: config.dir || 'ltr',
+      icons: manifestIcons,
+    };
+  };
+}
+
+/**
+ * Generate manifest.json content (legacy)
+ *
+ * @deprecated Use createManifest() instead
+ */
+export function generateManifest(config: ManifestConfig): Record<string, any> {
+  return createManifest(config)();
+}