create-ng-tailwind 2.0.1 → 2.1.1

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

@@ -0,0 +1,290 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * SEO Features for Starter Template
+ * Simple and focused SEO implementation - developers can extend as needed
+ */
+
+/**
+ * Create simplified SEO Service (only essential features)
+ */
+function createSEOService() {
+  return `import { Injectable, inject } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { Router, NavigationEnd } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { filter } from 'rxjs/operators';
+
+/**
+ * SEO Service - Simple SEO management for Angular apps
+ *
+ * Includes:
+ * - Dynamic meta tags (title, description, keywords)
+ * - Open Graph tags for social sharing (Facebook, LinkedIn)
+ * - Twitter Card tags
+ * - Canonical URLs (auto-updated on route changes)
+ * - Structured data (JSON-LD) support
+ *
+ * @example
+ * // In any component
+ * constructor(private seo: SeoService) {}
+ *
+ * ngOnInit() {
+ *   this.seo.updateMeta({
+ *     title: 'About Us',
+ *     description: 'Learn more about our company',
+ *     keywords: 'about, company, team'
+ *   });
+ * }
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+  private meta = inject(Meta);
+  private title = inject(Title);
+  private router = inject(Router);
+  private document = inject(DOCUMENT);
+
+  // Default configuration - update these values for your app
+  private readonly config = {
+    siteName: 'My Angular App', // TODO: Update with your site name
+    siteUrl: 'https://example.com', // TODO: Update with your production URL
+    titleSuffix: ' | My Angular App',
+    defaultDescription: 'A modern Angular application built with best practices and SEO optimization.',
+    defaultImage: '/assets/images/og-default.svg', // TODO: Replace with JPG/PNG for better compatibility
+  };
+
+  constructor() {
+    // Auto-update canonical URL on route changes
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => {
+        this.updateCanonicalUrl();
+      });
+  }
+
+  /**
+   * Update SEO meta tags for a page
+   */
+  updateMeta(options: {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    ogImage?: string;
+    ogType?: 'website' | 'article';
+  }): void {
+    // Update title
+    if (options.title) {
+      const fullTitle = options.title + this.config.titleSuffix;
+      this.title.setTitle(fullTitle);
+    }
+
+    // Update meta tags
+    const description = options.description || this.config.defaultDescription;
+    const image = this.getFullUrl(options.ogImage || this.config.defaultImage);
+
+    this.meta.updateTag({ name: 'description', content: description });
+    if (options.keywords) {
+      this.meta.updateTag({ name: 'keywords', content: options.keywords });
+    }
+
+    // Open Graph tags
+    this.meta.updateTag({ property: 'og:title', content: options.title || this.config.siteName });
+    this.meta.updateTag({ property: 'og:description', content: description });
+    this.meta.updateTag({ property: 'og:image', content: image });
+    this.meta.updateTag({ property: 'og:url', content: this.getCurrentUrl() });
+    this.meta.updateTag({ property: 'og:type', content: options.ogType || 'website' });
+    this.meta.updateTag({ property: 'og:site_name', content: this.config.siteName });
+
+    // Twitter Card tags
+    this.meta.updateTag({ property: 'twitter:card', content: 'summary_large_image' });
+    this.meta.updateTag({ property: 'twitter:title', content: options.title || this.config.siteName });
+    this.meta.updateTag({ property: 'twitter:description', content: description });
+    this.meta.updateTag({ property: 'twitter:image', content: image });
+
+    // Update canonical URL
+    this.updateCanonicalUrl();
+  }
+
+  /**
+   * Add structured data (JSON-LD) to the page
+   * Use with helper functions from @core/utils/structured-data
+   */
+  addStructuredData(data: Record<string, unknown>): void {
+    let script: HTMLScriptElement | null = this.document.querySelector('script[type="application/ld+json"]');
+
+    if (!script) {
+      script = this.document.createElement('script');
+      script.type = 'application/ld+json';
+      this.document.head.appendChild(script);
+    }
+
+    script.textContent = JSON.stringify(data);
+  }
+
+  /**
+   * Update canonical URL based on current route
+   */
+  private updateCanonicalUrl(): void {
+    const currentUrl = this.getCurrentUrl();
+    let link: HTMLLinkElement | null = this.document.querySelector('link[rel="canonical"]');
+
+    if (!link) {
+      link = this.document.createElement('link');
+      link.setAttribute('rel', 'canonical');
+      this.document.head.appendChild(link);
+    }
+
+    link.setAttribute('href', currentUrl);
+  }
+
+  /**
+   * Get current full URL
+   */
+  private getCurrentUrl(): string {
+    return this.config.siteUrl + this.router.url;
+  }
+
+  /**
+   * Convert relative URL to absolute URL
+   */
+  private getFullUrl(url: string): string {
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      return url;
+    }
+    return this.config.siteUrl + url;
+  }
+}
+`;
+}
+
+/**
+ * Create simplified Structured Data Utility (only essential schemas)
+ */
+function createStructuredDataUtil() {
+  return `/**
+ * Structured Data Utility - Simple Schema.org helpers
+ *
+ * Provides basic schemas for SEO. Add more schemas as needed.
+ *
+ * @see https://schema.org
+ * @see https://developers.google.com/search/docs/appearance/structured-data
+ */
+
+export interface Organization {
+  name: string;
+  url: string;
+  logo: string;
+  description?: string;
+  sameAs?: string[]; // Social media profiles
+}
+
+export interface WebSite {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+/**
+ * Generate Organization structured data
+ *
+ * @example
+ * const orgData = createOrganizationSchema({
+ *   name: 'My Company',
+ *   url: 'https://example.com',
+ *   logo: '/assets/images/logo.svg',
+ *   sameAs: ['https://twitter.com/mycompany']
+ * });
+ */
+export function createOrganizationSchema(org: Organization): Record<string, unknown> {
+  const schema: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: org.name,
+    url: org.url,
+    logo: org.logo,
+  };
+
+  if (org.description) {
+    schema['description'] = org.description;
+  }
+
+  if (org.sameAs && org.sameAs.length > 0) {
+    schema['sameAs'] = org.sameAs;
+  }
+
+  return schema;
+}
+
+/**
+ * Generate WebSite structured data
+ *
+ * @example
+ * const siteData = createWebSiteSchema({
+ *   name: 'My Website',
+ *   url: 'https://example.com',
+ *   description: 'A modern web application'
+ * });
+ */
+export function createWebSiteSchema(site: WebSite): Record<string, unknown> {
+  const schema: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: site.name,
+    url: site.url,
+  };
+
+  if (site.description) {
+    schema['description'] = site.description;
+  }
+
+  return schema;
+}
+
+/**
+ * NEED MORE SCHEMAS?
+ *
+ * You can easily add more schemas as needed:
+ * - Article - for blog posts
+ * - Product - for e-commerce
+ * - BreadcrumbList - for navigation
+ * - FAQ - for FAQ pages
+ * - Person - for author profiles
+ *
+ * See: https://schema.org/docs/full.html
+ */
+`;
+}
+
+/**
+ * Create robots.txt for Angular apps
+ */
+function createRobotsTxt() {
+  return `# robots.txt for Angular Application
+# Allow all search engines to crawl the site
+
+User-agent: *
+Allow: /
+
+# Disallow admin areas (if any)
+# Disallow: /admin/
+# Disallow: /api/
+
+# Disallow Angular assets that shouldn't be indexed
+Disallow: /*.js$
+Disallow: /*.css$
+Disallow: /*.json$
+
+# Sitemap location
+# TODO: Update this with your actual sitemap URL after deployment
+Sitemap: https://example.com/sitemap.xml
+`;
+}
+
+module.exports = {
+  createSEOService,
+  createStructuredDataUtil,
+  createRobotsTxt,
+};