create-ng-tailwind 2.0.1 → 2.1.1

package/lib/templates/starter/index.js

@@ -27,6 +27,21 @@ const {
   createTooltipDirective,
 } = require('./ui-features');
 
+const {
+  createSEOService,
+  createStructuredDataUtil,
+  createRobotsTxt,
+} = require('./seo-features');
+
+const {
+  createDefaultOGImage,
+  createFavicon,
+  createAppleTouchIcon,
+  createAndroidIcon,
+  createAndroidIconLarge,
+  createLogo,
+} = require('./seo-assets');
+
 const starter = {
   info: {
     name: 'Starter',
@@ -37,6 +52,10 @@ const starter = {
       'HTTP Interceptors (Auth, Error, Loading, Caching)',
       'i18n translation support (English & Arabic) with RTL',
       'Language switcher in header (desktop & mobile)',
+      'Comprehensive SEO service (meta tags, Open Graph, Twitter Cards)',
+      'Structured data (JSON-LD) for rich search results',
+      'Multi-language SEO with hreflang tags',
+      'robots.txt and favicon set included',
       'Toast/Notification system with auto-dismiss',
       'Modal/Dialog system with confirm & alert',
       'Essential UI components (Button, Card, Spinner, Toast, Modal)',
@@ -46,7 +65,7 @@ const starter = {
       'Authentication UI (Login, Register, Forgot Password)',
       '3 example pages (Home, About, Contact)',
       'Reactive forms with validation',
-      'API, Auth, Storage, Loading, Cache services',
+      'API, Auth, Storage, Loading, Cache, SEO services',
       'TypeScript interfaces and models',
       'Responsive Tailwind design system',
       'ESLint + Prettier + Husky pre-commit hooks',
@@ -74,6 +93,7 @@ const starter = {
     await this.createDirectoryStructure(config);
     await this.createEnvironments(config);
     await this.createCoreServices(config);
+    await this.createSEOFeatures(config);
     await this.createHttpInterceptors(config);
     await this.createI18n(config);
     await this.createGuards(config);
@@ -97,17 +117,18 @@ const starter = {
     await this.setupLinting(config);
     await this.setupPWA(config);
     await this.formatCode(config);
-
+    
     // Stop spinner and show summary
     if (spinner) spinner.stop();
-
+    
     // Show minimal, professional summary
     console.log('');
     completeStep('Angular 20+ project created');
     completeStep('Tailwind CSS v4 configured');
     completeStep('i18n translation support (English & Arabic)');
+    completeStep('SEO optimization (meta tags, Open Graph, structured data)');
     completeStep('HTTP interceptors (Auth, Error, Loading, Cache)');
-    completeStep('Core services (8 services)');
+    completeStep('Core services (9 services including SEO)');
     completeStep('UI components (Button, Card, Toast, Modal, Spinner)');
     completeStep('Utility pipes & directives');
     completeStep('Authentication pages & guards');
@@ -123,6 +144,7 @@ const starter = {
       'src/app/core/guards',
       'src/app/core/i18n',
       'src/app/core/interceptors',
+      'src/app/core/utils',
       'src/app/shared/components/button',
       'src/app/shared/components/card',
       'src/app/shared/components/loading-spinner',
@@ -142,8 +164,7 @@ const starter = {
       'src/app/layout/auth',
       'public/assets/images',
       'public/assets/i18n',
-      'public/images',
-      'public/styles',
+      'public/assets/icons',
     ];
 
     for (const dir of directories) {
@@ -545,6 +566,70 @@ export class StorageService {
     );
   },
 
+  async createSEOFeatures(config) {
+    // Create SEO Service
+    const seoService = createSEOService();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/seo.service.ts'),
+      seoService
+    );
+
+    // Create Structured Data Utility
+    const structuredDataUtil = createStructuredDataUtil();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/utils/structured-data.ts'),
+      structuredDataUtil
+    );
+
+    // Create robots.txt in public folder
+    const robotsTxt = createRobotsTxt();
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/robots.txt'),
+      robotsTxt
+    );
+
+    // Create default OG image (SVG as placeholder)
+    const ogImage = createDefaultOGImage(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/images/og-default.svg'),
+      ogImage
+    );
+
+    // Create favicon
+    const favicon = createFavicon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/favicon.svg'),
+      favicon
+    );
+
+    // Create Apple Touch Icon (SVG as placeholder)
+    const appleTouchIcon = createAppleTouchIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/apple-touch-icon.svg'),
+      appleTouchIcon
+    );
+
+    // Create Android Chrome icons (SVG as placeholder)
+    const androidIcon = createAndroidIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-192x192.svg'),
+      androidIcon
+    );
+
+    const androidIconLarge = createAndroidIconLarge(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-512x512.svg'),
+      androidIconLarge
+    );
+
+    // Create logo
+    const logo = createLogo(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/images/logo.svg'),
+      logo
+    );
+  },
+
   async createHttpInterceptors(config) {
     // Create all HTTP interceptors
     await createAuthInterceptor(config);
@@ -2734,7 +2819,7 @@ export class ForgotPasswordComponent {
   },
 
   async createHomeComponent(config) {
-    const homeComponentTs = `import { Component, inject } from '@angular/core';
+    const homeComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
@@ -2757,6 +2842,7 @@ import { ButtonComponent } from '@shared/components/button/button.component';
 import { CardComponent } from '@shared/components/card/card.component';
 import { ToastService } from '@core/services/toast.service';
 import { ModalService } from '@core/services/modal.service';
+import { SeoService } from '@core/services/seo.service';
 
 @Component({
   selector: 'app-home',
@@ -2778,11 +2864,22 @@ import { ModalService } from '@core/services/modal.service';
   })],
   templateUrl: './home.component.html'
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
   protected readonly projectName = '${config.projectName}';
 
   private toast = inject(ToastService);
   private modal = inject(ModalService);
+  private seo = inject(SeoService);
+
+  ngOnInit(): void {
+    // Set SEO meta tags for Home page
+    this.seo.updateMeta({
+      title: 'Home',
+      description: 'Welcome to ${config.projectName} - A modern Angular application with Tailwind CSS, SEO optimization, and i18n support.',
+      keywords: 'angular, tailwind, seo, i18n, typescript',
+      ogType: 'website'
+    });
+  }
 
   // Toast Examples
   showSuccessToast(): void {
@@ -3350,7 +3447,7 @@ export class HomeComponent {
   },
 
   async createAboutComponent(config) {
-    const aboutComponentTs = `import { Component } from '@angular/core';
+    const aboutComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
@@ -3364,6 +3461,7 @@ import {
 } from '@ng-icons/heroicons/outline';
 import { TranslateModule } from '@ngx-translate/core';
 import { ButtonComponent } from '@shared/components/button/button.component';
+import { SeoService } from '@core/services/seo.service';
 
 @Component({
   selector: 'app-about',
@@ -3379,8 +3477,19 @@ import { ButtonComponent } from '@shared/components/button/button.component';
   })],
   templateUrl: './about.component.html'
 })
-export class AboutComponent {
+export class AboutComponent implements OnInit {
   protected readonly projectName = '${config.projectName}';
+  private seo = inject(SeoService);
+
+  ngOnInit(): void {
+    // Set SEO meta tags for About page
+    this.seo.updateMeta({
+      title: 'About Us',
+      description: 'Learn more about ${config.projectName} and our mission to create modern web applications.',
+      keywords: 'about, team, mission, company',
+      ogType: 'website'
+    });
+  }
 }`;
 
     const aboutComponentHtml = `<!-- Hero Section -->
@@ -3939,49 +4048,13 @@ npx lint-staged
       description: `${config.projectName} - Built with Angular and Tailwind CSS`,
       icons: [
         {
-          src: 'assets/icons/icon-72x72.svg',
-          sizes: '72x72',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-96x96.svg',
-          sizes: '96x96',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-128x128.svg',
-          sizes: '128x128',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-144x144.svg',
-          sizes: '144x144',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-152x152.svg',
-          sizes: '152x152',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-192x192.svg',
+          src: 'assets/icons/android-chrome-192x192.svg',
           sizes: '192x192',
           type: 'image/svg+xml',
           purpose: 'maskable any',
         },
         {
-          src: 'assets/icons/icon-384x384.svg',
-          sizes: '384x384',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-512x512.svg',
+          src: 'assets/icons/android-chrome-512x512.svg',
           sizes: '512x512',
           type: 'image/svg+xml',
           purpose: 'maskable any',

package/lib/templates/starter/seo-assets.js

@@ -0,0 +1,141 @@
+/**
+ * SEO Assets - SVG placeholders for OG images and favicons
+ * These are temporary placeholders that users should replace with their own branding
+ */
+
+/**
+ * Generate default Open Graph image (1200x630px - recommended size)
+ */
+function createDefaultOGImage(projectName) {
+  return `<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#grad)"/>
+  <text x="600" y="280" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="white" text-anchor="middle">
+    ${projectName}
+  </text>
+  <text x="600" y="350" font-family="Arial, sans-serif" font-size="32" fill="white" text-anchor="middle" opacity="0.9">
+    Modern Angular Application
+  </text>
+  <text x="600" y="550" font-family="Arial, sans-serif" font-size="20" fill="white" text-anchor="middle" opacity="0.7">
+    Replace this image with your own branding
+  </text>
+</svg>`;
+}
+
+/**
+ * Generate favicon (32x32px)
+ */
+function createFavicon(projectName) {
+  // Get first letter of project name
+  const letter = projectName.charAt(0).toUpperCase();
+
+  return `<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="faviconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="6" fill="url(#faviconGrad)"/>
+  <text x="16" y="23" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">
+    ${letter}
+  </text>
+</svg>`;
+}
+
+/**
+ * Generate Apple Touch Icon (180x180px)
+ */
+function createAppleTouchIcon(projectName) {
+  const letter = projectName.charAt(0).toUpperCase();
+
+  return `<svg width="180" height="180" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="appleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="180" height="180" rx="40" fill="url(#appleGrad)"/>
+  <text x="90" y="130" font-family="Arial, sans-serif" font-size="100" font-weight="bold" fill="white" text-anchor="middle">
+    ${letter}
+  </text>
+</svg>`;
+}
+
+/**
+ * Generate Android Chrome icon (192x192px)
+ */
+function createAndroidIcon(projectName) {
+  const letter = projectName.charAt(0).toUpperCase();
+
+  return `<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="androidGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="192" height="192" rx="48" fill="url(#androidGrad)"/>
+  <text x="96" y="140" font-family="Arial, sans-serif" font-size="110" font-weight="bold" fill="white" text-anchor="middle">
+    ${letter}
+  </text>
+</svg>`;
+}
+
+/**
+ * Generate large Android Chrome icon (512x512px)
+ */
+function createAndroidIconLarge(projectName) {
+  const letter = projectName.charAt(0).toUpperCase();
+
+  return `<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="androidLargeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="128" fill="url(#androidLargeGrad)"/>
+  <text x="256" y="370" font-family="Arial, sans-serif" font-size="300" font-weight="bold" fill="white" text-anchor="middle">
+    ${letter}
+  </text>
+</svg>`;
+}
+
+/**
+ * Generate logo SVG
+ */
+function createLogo(projectName) {
+  const letter = projectName.charAt(0).toUpperCase();
+
+  return `<svg width="200" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="50" height="50" x="5" y="5" rx="10" fill="url(#logoGrad)"/>
+  <text x="30" y="42" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white" text-anchor="middle">
+    ${letter}
+  </text>
+  <text x="70" y="40" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1f2937">
+    ${projectName}
+  </text>
+</svg>`;
+}
+
+module.exports = {
+  createDefaultOGImage,
+  createFavicon,
+  createAppleTouchIcon,
+  createAndroidIcon,
+  createAndroidIconLarge,
+  createLogo,
+};