create-ng-tailwind 2.0.1 → 2.1.1

package/CHANGELOG.md

@@ -5,6 +5,87 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.1] - 2025-10-30
+
+### 🐛 Fixed
+
+- **SSR Hydration Error in Contact Form**: Fixed NG0500 hydration mismatch in contact component textarea
+  - Removed whitespace between textarea opening and closing tags
+  - Prevents "Angular expected a text node but the node was not found" error
+  - Ensures proper SSR hydration when Server-Side Rendering is enabled
+
+- **AI Config Prettier Formatting**: All AI configuration templates (CLAUDE.md, .cursorrules, .windsurfrules) now pass Prettier formatting checks automatically
+  - Added empty lines before code blocks for proper markdown formatting
+  - Added parentheses around arrow function parameters (arrowParens: "always")
+  - Reordered Tailwind CSS classes according to prettier-plugin-tailwindcss
+  - Added trailing commas in objects and arrays per Prettier config
+  - Fixed HTML example indentation and structure
+  - Renamed Claude file to CLAUDE.md (uppercase) to match Angular CLI convention
+  - Scaffolded projects now pass `npm run format:check` without manual fixes
+
+## [2.1.0] - 2025-10-28
+
+### ✨ New Features - Simple SEO Solution
+
+- **Simple SEO Service** (Easy to use, easy to extend):
+  - ✅ Dynamic meta tags (title, description, keywords)
+  - ✅ Open Graph tags for social sharing (Facebook, LinkedIn)
+  - ✅ Twitter Card tags for optimized sharing
+  - ✅ Canonical URL management (auto-updated on route changes)
+  - ✅ Structured data (JSON-LD) support
+  - 🎯 **Only 2 methods**: `updateMeta()` and `addStructuredData()` - that's it!
+  - 📝 Well-documented with clear examples
+  - 🔧 Developers can easily extend with more features as needed
+
+- **Essential Structured Data**:
+  - ✅ Organization schema (company info, logo, social profiles)
+  - ✅ WebSite schema (site name, description)
+  - 💡 Comment in code shows how to add more schemas (Article, Product, FAQ, etc.)
+  - 🎯 Keep it simple - only what's actually being used
+
+- **SEO Assets**:
+  - `robots.txt` - Properly configured for Angular apps with sitemap reference
+  - Default Open Graph image (1200x630px SVG placeholder)
+  - Complete favicon set (SVG with project initial)
+  - Apple Touch Icon for iOS devices
+  - Android Chrome icons (192x192 and 512x512)
+  - Logo SVG with project branding
+  - All placeholders include clear instructions for replacement
+
+- **Pre-Integrated & Ready to Use**:
+  - ✅ All page components (Home, About, Contact) have SEO meta tags configured
+  - ✅ App component includes Organization and WebSite structured data
+  - ✅ SEO service auto-updates canonical URLs on navigation
+  - ✅ Works seamlessly with existing i18n system
+  - ✅ SSR-compatible for server-side rendering
+  - ✅ TypeScript interfaces for type safety
+  - ✅ Well-documented with JSDoc comments and usage examples
+
+### 🧹 Maintenance
+
+- **Package Cleanup**: Removed CLAUDE.md from published package (internal development file)
+
+### 🐛 Fixed
+
+- **LICENSE Link**: Fixed LICENSE link in README to work properly on npmjs.com (changed from relative link to descriptive text)
+- **Directory Overwrite Flow**: Ensured consistent behavior between local and npx usage. Directory existence check now always happens AFTER configuration questions in both cases.
+
+## [2.0.2] - 2025-10-24
+
+### 📝 Documentation
+
+- **CHANGELOG**: Added v2.0.1 and v2.0.2 entries to published package
+- **PUBLISHING.md**: Updated version references and simplified guidance
+
+## [2.0.1] - 2025-10-24
+
+### 📝 Documentation Improvements
+
+- **README Enhancements**: Removed "Related Projects" section, consolidated duplicate support sections, improved project structure documentation
+- **Terminal Output**: Simplified CLI output to be minimal and professional with green checkmarks and white text
+- **Accuracy Fixes**: Corrected pipe count from 4 to 2 (Truncate, TimeAgo) in all documentation and translations
+- **Better Organization**: Enhanced "Starter Template Features" section with detailed breakdown of core services, UI components, and utilities
+
 ## [2.0.0] - 2025-01-20
 
 **Major Release with Breaking Changes** - This release includes significant updates to the CLI architecture, template system, and development workflow. Review the breaking changes and migration guide below before upgrading.
@@ -177,16 +258,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Breaking Changes Impact:
 
 1. **CSS-Only Approach**:
+
    - **Before (v1.x)**: `--style` flag supported css, scss, sass, less
    - **After (v2.0)**: Only CSS is supported (--style flag removed)
    - **Migration**: If you need SCSS, continue using v1.x or migrate to modern CSS
 
 2. **Template Names**:
+
    - **Before (v1.x)**: `--template=none`
    - **After (v2.0)**: `--template=minimal`
    - **Migration**: Update scripts to use `minimal` instead of `none`
 
 3. **Interactive Mode**:
+
    - **Before (v1.x)**: Non-interactive by default, `--interactive` flag to enable
    - **After (v2.0)**: Interactive by default, provide all flags to skip prompts
    - **Migration**: Add all required flags to CI/CD scripts for non-interactive mode
@@ -197,6 +281,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
    - **Migration**: Contact via email for support (tehseen_ullah786@hotmail.com)
 
 #### Recommended Update Command:
+
 ```bash
 # Update to v2.0.0
 npx create-ng-tailwind@latest my-app --template=minimal

package/README.md

@@ -7,9 +7,7 @@
 [![Node.js Version](https://img.shields.io/node/v/create-ng-tailwind.svg)](https://nodejs.org/)
 [![Downloads](https://img.shields.io/npm/dm/create-ng-tailwind.svg)](https://www.npmjs.com/package/create-ng-tailwind)
 
-**🚀 Create Angular projects with Tailwind CSS in seconds**
-
-_Zero configuration • Modern setup • Beautiful starter templates_
+**🚀 A CLI tool to give starter template for angular project with tailwind css**
 
 </div>
 
@@ -19,219 +17,99 @@ _Zero configuration • Modern setup • Beautiful starter templates_
 
 - 🎯 **Angular 20+** - Latest version with standalone components and signals
 - 🎨 **Tailwind CSS v4** - Utility-first CSS framework preconfigured
+- 🚀 **SEO Optimized** - Meta tags, Open Graph, Twitter Cards, structured data, robots.txt
 - 🌍 **i18n Translation** - English & Arabic with RTL support
 - 🎮 **Interactive UI** - Toast notifications, Modal dialogs, and components
 - 🏗️ **Zero Configuration** - Everything set up and ready to go
-- 💨 **Fast Setup** - Get started in seconds, not minutes
 
 ## Quick Start
 
 ### Using npx (Recommended)
 
+Run the following command and follow the prompts:
+
 ```bash
 npx create-ng-tailwind my-awesome-app
-cd my-awesome-app
-ng serve
 ```
 
 ### Using npm
 
+Install globally and use:
+
 ```bash
 npm install -g create-ng-tailwind
 create-ng-tailwind my-awesome-app
-cd my-awesome-app
-ng serve
-```
-
-## Usage
-
-```bash
-create-ng-tailwind [project-name] [options]
 ```
 
-### Options
-
-| Option                      | Description                                 | Default                            |
-| --------------------------- | ------------------------------------------- | ---------------------------------- |
-| `-t, --template <template>` | Template to use (minimal, starter)          | **Prompted** (mandatory selection) |
-| `--routing`                 | Enable Angular routing                      | true (routing enabled by default)  |
-| `--no-routing`              | Disable Angular routing                     | false                              |
-| `--ssr`                     | Enable Server-Side Rendering                | **Prompted** (default: false)      |
-| `--zoneless`                | Create zoneless application without zone.js | **Prompted** (default: false)      |
-| `--ai-config <tools>`       | AI tools to configure                       | **Prompted** (default: none)       |
-| `--skip-install`            | Skip npm install                            | false                              |
-| `-h, --help`                | Display help for command                    | -                                  |
-| `-V, --version`             | Display version number                      | -                                  |
-
-#### Template Options:
-
-- `minimal` - Just Angular + Tailwind (minimal setup with basic example)
-- `starter` - Professional foundation with essential components, routing, services, and best practices
-
-**Note:** If you don't provide the `--template` flag, you will be prompted to choose a template during setup.
-
-#### AI Tools Options:
+### What happens next?
 
-When you select AI tools during setup, Angular CLI will automatically create configuration folders and files:
+The CLI will guide you through:
+1. Choosing a template (Minimal or Starter)
+2. Configuring Server-Side Rendering (optional)
+3. Setting up zoneless application (optional)
+4. Selecting AI tools integration (optional)
 
-- `none` (default) - No AI tools configured
-- `claude` - Configure Claude integration
-- `cursor` - Configure Cursor integration
-- `gemini` - Configure Gemini integration
-- `copilot` - Configure GitHub Copilot integration
-- `jetbrains` - Configure JetBrains AI Assistant
-- `windsurf` - Configure Windsurf integration
-
-**Note:** You can select multiple AI tools (checkbox selection). Each selected tool will have its configuration folder created by Angular CLI (`ng new --ai-config`). Our CLI focuses on Tailwind CSS setup and template application.
-
-### Examples
-
-#### Default Interactive Mode (Like `ng new`)
-
-```bash
-# Run the CLI - it will prompt you for all options
-npx create-ng-tailwind my-app
-
-# You'll be asked:
-# ✔ What is your project name? (my-angular-app)
-# ✔ Which template would you like to use?
-#   ❯ Minimal     - Just Angular + Tailwind (minimal setup)
-#     Starter     - Professional foundation with essential components
-# ✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
-# ✔ Do you want to create a 'zoneless' application without zone.js? (y/N)
-# ✔ Which AI tools do you want to configure? (Press <space> to select, <a> to toggle all)
-#   ❯◉ None
-#    ◯ Claude
-#    ◯ Cursor
-#    ◯ Gemini
-#    ◯ GitHub Copilot
-#    ◯ JetBrains AI
-#    ◯ Windsurf
-```
-
-#### Quick Start with CLI Flags (Skip Prompts)
+After setup completes:
 
 ```bash
-# Skip all prompts by providing all options via CLI flags
-npx create-ng-tailwind my-app --template=starter
-
-# With more options
-npx create-ng-tailwind my-app --template=starter --ssr --zoneless --ai-config=cursor
-
-# Or use short flag for template
-npx create-ng-tailwind my-app -t starter
-```
-
-#### Other Options
-
-```bash
-# Skip npm install (for CI/CD or manual installation later)
-npx create-ng-tailwind my-app --template=starter --skip-install
-
-# Disable routing
-npx create-ng-tailwind my-app --template=starter --no-routing
-
-# Combine multiple flags
-npx create-ng-tailwind my-app --template=starter --ssr --zoneless --skip-install
+cd my-awesome-app
+npm install
+ng serve
 ```
 
-## What's Included
-
-### 📦 Dependencies
-
-- **Angular 20** - Latest Angular framework
-- **Tailwind CSS** - Utility-first CSS framework
-- **@tailwindcss/postcss** - Modern PostCSS plugin for Tailwind
-- **PostCSS** - CSS processing tool
-
-### 🎨 Preconfigured Setup
-
-- Modern PostCSS configuration (`.postcssrc.json`)
-- Tailwind CSS import in styles file
-- Example components with Tailwind classes
-- Responsive design examples
-- Zero configuration required
-
-### 🎯 CSS-Only Approach (Tailwind v4 Official)
-
-**We use CSS exclusively for Tailwind v4 compatibility:**
+Your app will be running at `http://localhost:4200` 🎉
 
-- **✅ Official Tailwind v4 Approach** - Tailwind v4 no longer supports preprocessors (SCSS/Sass/Less)
-- **🚀 Simpler Build Process** - No preprocessor compilation needed
-- **⚡ Faster Builds** - Direct PostCSS processing with LightningCSS
-- **🎨 Modern CSS Features** - CSS nesting, variables, and modern features built-in
-- **🛠️ Full Tailwind Support** - All Tailwind directives work seamlessly
-- **📦 Smaller Bundle Size** - No preprocessor runtime needed
-- **🔧 Zero Configuration** - Works out of the box with Angular CLI
-
-**Note:** Tailwind CSS v4 uses LightningCSS internally and does not support SCSS, Sass, or Less preprocessors. Modern CSS provides nesting and other features previously requiring preprocessors.
-
-### 🏗️ Project Structure (Starter Template)
+## 🏗️ Project Structure
 
 ```
 my-app/
 ├── src/
 │   ├── app/
 │   │   ├── core/                  # Core services and interceptors
-│   │   │   ├── services/          # Auth, API, Toast, Modal, etc.
+│   │   │   ├── services/          # Auth, API, SEO, Toast, Modal, etc.
 │   │   │   ├── interceptors/      # HTTP interceptors
-│   │   │   ├── guards/           # Route guards
-│   │   │   └── i18n/             # Translation service
-│   │   ├── shared/               # Shared components and utilities
-│   │   │   ├── components/       # Button, Card, Toast, Modal
-│   │   │   ├── pipes/           # Truncate, TimeAgo
-│   │   │   ├── directives/      # ClickOutside, Tooltip
-│   │   │   └── models/          # TypeScript interfaces
-│   │   ├── features/            # Feature modules
-│   │   │   ├── home/            # Home page
-│   │   │   ├── about/           # About page
-│   │   │   ├── contact/         # Contact page
-│   │   │   └── auth/            # Authentication pages
-│   │   ├── layout/              # Layout components
-│   │   │   ├── header/          # Navigation header
-│   │   │   └── footer/          # Footer component
-│   │   ├── app.config.ts        # App configuration
-│   │   ├── app.routes.ts        # Routing configuration
-│   │   └── app.ts               # Main app component
-│   ├── styles.css               # Tailwind CSS imports
-│   └── main.ts                  # Bootstrap
+│   │   │   ├── guards/            # Route guards
+│   │   │   ├── i18n/              # Translation service
+│   │   │   └── utils/             # Structured data utilities
+│   │   ├── shared/                # Shared components and utilities
+│   │   │   ├── components/        # Button, Card, Toast, Modal
+│   │   │   ├── pipes/             # Truncate, TimeAgo
+│   │   │   ├── directives/        # ClickOutside, Tooltip
+│   │   │   └── models/            # TypeScript interfaces
+│   │   ├── features/              # Feature modules
+│   │   │   ├── home/              # Home page
+│   │   │   ├── about/             # About page
+│   │   │   ├── contact/           # Contact page
+│   │   │   └── auth/              # Authentication pages
+│   │   ├── layout/                # Layout components
+│   │   │   ├── header/            # Navigation header
+│   │   │   └── footer/            # Footer component
+│   │   ├── app.config.ts          # App configuration
+│   │   ├── app.routes.ts          # Routing configuration
+│   │   └── app.ts                 # Main app component
+│   ├── styles.css                 # Tailwind CSS imports
+│   └── main.ts                    # Bootstrap
 ├── public/
-│   └── assets/
-│       └── i18n/                # Translation files (en.json, ar.json)
-├── .postcssrc.json              # PostCSS configuration
+│   ├── assets/
+│   │   ├── i18n/                  # Translation files (en.json, ar.json)
+│   │   └── images/                # OG images, logos
+│   ├── robots.txt                 # SEO robots file
+│   ├── favicon.svg                # Favicon
+│   └── android-chrome-*.svg       # PWA icons
+├── .postcssrc.json                # PostCSS configuration
 ├── package.json
 └── ...
 ```
 
-## 🚀 Interactive Mode
-
-By default, the CLI works like `ng new` with interactive prompts:
-
-```bash
-npx create-ng-tailwind my-app
-
-? Which template would you like to use? › Starter
-? Enable Server-Side Rendering (SSR)? › No
-? Create zoneless application? › No
-? Configure AI tools? › None
-
-✅ Project created successfully!
-```
-
-**Fast Mode**: Skip prompts by providing flags:
-
-```bash
-npx create-ng-tailwind my-app --template=starter
-```
-
 ## 🎯 Starter Template Features
 
-The **Starter Template** includes 20+ production-ready features:
+The **Starter Template** includes 25+ production-ready features:
 
 ### Core Services
 
 - **AuthService** - Authentication & user management
 - **ApiService** - Centralized HTTP request handling
+- **SeoService** - Comprehensive SEO management (meta tags, Open Graph, Twitter Cards, structured data)
 - **ToastService** - Notification system (success, error, warning, info)
 - **ModalService** - Dialog system with confirm & alert
 - **LoadingService** - Global loading state with signals
@@ -239,6 +117,16 @@ The **Starter Template** includes 20+ production-ready features:
 - **StorageService** - LocalStorage wrapper with type safety
 - **i18nService** - Internationalization management
 
+### SEO Optimization (Simple & Ready to Use)
+
+- **SEO Service** - Just 2 methods: `updateMeta()` and `addStructuredData()`
+- **Meta Tags** - Title, description, keywords (auto-configured on all pages)
+- **Social Sharing** - Open Graph & Twitter Cards (pre-configured)
+- **Structured Data** - Organization & WebSite schemas (included)
+- **Canonical URLs** - Auto-updated on route changes
+- **Assets** - robots.txt, favicon set, OG image placeholder
+- **Extensible** - Easy to add more schemas as needed
+
 ### UI Components
 
 - **ButtonComponent** - Variants: primary, secondary, danger
@@ -249,7 +137,7 @@ The **Starter Template** includes 20+ production-ready features:
 
 ### Utilities
 
-- **Pipes** - Truncate, TimeAgo, FileSize, SafeHtml
+- **Pipes** - Truncate, TimeAgo
 - **Directives** - ClickOutside, Tooltip
 - **HTTP Interceptors** - Auth, Error handling, Loading, Caching
 - **TypeScript Path Aliases** - Clean imports with `@core/*`, `@shared/*`, `@features/*`
@@ -260,9 +148,29 @@ The **Starter Template** includes 20+ production-ready features:
 - **Language Switcher** - Built-in header component
 - **Translation Files** - JSON-based translation system
 
+### Additional Features
+
+- **Routing** - Pre-configured with lazy loading
+- **Authentication Pages** - Login, Register, Forgot Password
+- **Example Pages** - Home, About, Contact with reactive forms
+- **PWA Support** - Service worker configuration
+- **Linting & Formatting** - ESLint + Prettier + Husky pre-commit hooks (all files pass formatting checks out of the box)
+- **Modern Stack** - Tailwind v4, TypeScript, Signals
+
+## 🎨 Tailwind CSS v4
+
+This tool uses **Tailwind CSS v4** with the official PostCSS approach:
+
+- ✅ **Modern PostCSS Plugin** - `@tailwindcss/postcss`
+- ⚡ **LightningCSS** - Fast CSS processing
+- 🎨 **Modern CSS Features** - Nesting, variables, and more built-in
+- 🚀 **Simplified Build** - No preprocessors needed
+
+**Note:** Tailwind v4 does not support SCSS, Sass, or Less. Modern CSS provides all the features you need!
+
 ## 📄 License
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+MIT License - see the LICENSE file included in the package.
 
 ## 🙏 Support & Community
 
@@ -278,8 +186,4 @@ If you find this tool helpful, please consider:
 
 [![NPM](https://nodei.co/npm/create-ng-tailwind.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/create-ng-tailwind)
 
-**🚀 Happy coding with Angular and Tailwind CSS!**
-
-_Built with ❤️ by developers, for developers_
-
 </div>

package/lib/managers/ProjectManager.js

@@ -14,13 +14,13 @@ class ProjectManager {
   }
 
   async create() {
-    // Check if directory exists
+    // Check if directory exists (after all configuration questions)
     if (await fs.pathExists(this.config.fullPath)) {
       const { overwrite } = await this.logger.prompt([
         {
           type: "confirm",
           name: "overwrite",
-          message: `Directory ${this.config.projectName} already exists. Overwrite?`,
+          message: `Directory ${this.config.projectName} already exists. Do you want to overwrite it?`,
           default: false,
         },
       ]);

package/lib/templates/starter/features.js

@@ -2,7 +2,7 @@ const fs = require('fs-extra');
 const path = require('path');
 
 async function createContactComponent(config) {
-  const contactComponentTs = `import { Component, inject } from '@angular/core';
+  const contactComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
@@ -16,6 +16,7 @@ import {
   heroPaperAirplane,
 } from '@ng-icons/heroicons/outline';
 import { ButtonComponent } from '@shared/components/button/button.component';
+import { SeoService } from '@core/services/seo.service';
 
 @Component({
   selector: 'app-contact',
@@ -30,12 +31,23 @@ import { ButtonComponent } from '@shared/components/button/button.component';
   })],
   templateUrl: './contact.component.html'
 })
-export class ContactComponent {
+export class ContactComponent implements OnInit {
   private fb = inject(FormBuilder);
+  private seo = inject(SeoService);
 
   isSubmitting = false;
   submitted = false;
 
+  ngOnInit(): void {
+    // Set SEO meta tags for Contact page
+    this.seo.updateMeta({
+      title: 'Contact Us',
+      description: 'Get in touch with us. We would love to hear from you and answer any questions you may have.',
+      keywords: 'contact, support, get in touch, email',
+      ogType: 'website'
+    });
+  }
+
   contactForm = this.fb.group({
     name: ['', [Validators.required, Validators.minLength(2)]],
     email: ['', [Validators.required, Validators.email]],
@@ -197,8 +209,7 @@ export class ContactComponent {
               placeholder="Tell us more about your inquiry..."
               class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-vertical"
               [class.border-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
-              [class.focus:ring-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched">
-            </textarea>
+              [class.focus:ring-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"></textarea>
             @if (contactForm.get('message')?.invalid && contactForm.get('message')?.touched) {
               <div class="mt-2 text-sm text-red-600 flex items-center gap-1">
                 <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
@@ -499,7 +510,7 @@ export const appConfig: ApplicationConfig = {
 }
 
 async function createAppComponent(config) {
-  const app = `import { Component, inject } from '@angular/core';
+  const app = `import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './layout/header/header.component';
@@ -507,6 +518,8 @@ import { FooterComponent } from './layout/footer/footer.component';
 import { ToastComponent } from '@shared/components/toast/toast.component';
 import { ModalComponent } from '@shared/components/modal/modal.component';
 import { TranslationService } from '@core/i18n/translation.service';
+import { SeoService } from '@core/services/seo.service';
+import { createOrganizationSchema, createWebSiteSchema } from '@core/utils/structured-data';
 
 @Component({
   selector: 'app-root',
@@ -529,10 +542,39 @@ import { TranslationService } from '@core/i18n/translation.service';
     </div>
   \`
 })
-export class App {
-  // Inject translation service to initialize it (auto-detects and loads language)
+export class App implements OnInit {
+  // Inject services
   private translationService = inject(TranslationService);
+  private seo = inject(SeoService);
+
   title = '${config.projectName}';
+
+  ngOnInit(): void {
+    // Add global Organization structured data
+    const organizationData = createOrganizationSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com', // TODO: Update with your production URL
+      logo: '/assets/images/logo.svg',
+      description: 'A modern Angular application built with best practices',
+      sameAs: [
+        // 'https://twitter.com/yourhandle',
+        // 'https://facebook.com/yourpage',
+        // 'https://linkedin.com/company/yourcompany'
+      ]
+    });
+
+    const websiteData = createWebSiteSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com', // TODO: Update with your production URL
+      description: 'A modern Angular application with Tailwind CSS, SEO optimization, and i18n support'
+    });
+
+    // Add structured data to the page
+    this.seo.addStructuredData({
+      '@context': 'https://schema.org',
+      '@graph': [organizationData, websiteData]
+    });
+  }
 }`;
 
   const appHtml = `<!-- This file is not used in standalone components -->