Technical Guides & Knowledge Base

Relevant source files

The following files were used as context for generating this wiki page:

• sunrise-angular/src/app/pages/guides/guide-list/guide-list.component.ts
• sunrise-angular/src/app/pages/guides/guide-detail/guide-detail.component.ts
• sunrise-angular/src/app/pages/guides/guide-list/guide-list.component.html
• sunrise-angular/src/app/pages/guides/guide-detail/guide-detail.component.html
• sunrise-angular/src/app/core/services/seo.service.ts
• task.md

The Technical Guides and Knowledge Base module provides authoritative engineering blueprints, best practices, and statutory guidelines for housing societies and enterprise IT heads. It functions as a structured repository of expertise regarding security systems, telecommunications, and maintenance procurement.

This module integrates deep technical specifications with search engine optimization strategies, specifically targeting Answer Engine Optimization (AEO) and Agentic Discovery (AAO) through structured metadata and automated schema injection.

Sources: guide-list.component.html:10-14, task.md:1-15

System Architecture & Data Flow

The Knowledge Base is built using Angular standalone components and a signal-based reactive architecture. Data resides in a central constants file and flows through specialized components for listing and detailed viewing.

Architecture Overview

The diagram shows how guide data is consumed by Angular components and processed by the SEO Service to generate machine-readable metadata.
Sources: guide-list.component.ts:16-18, guide-detail.component.ts:24-30

Component Responsibilities

Component	Responsibility	Key Features
GuideListComponent	Displays the directory of available technical resources.	Category filtering, read-time estimates, key takeaway snippets.
GuideDetailComponent	Renders full technical articles with interactive elements.	FAQ accordions, WhatsApp consultation generator, structured content blocks.
SeoService	Injects semantic metadata into the document head.	Unified JSON-LD @graph, FAQPage schema, Article schema.

Sources: guide-list.component.html:19-45, guide-detail.component.html:26-80, seo.service.ts:310-330

Content Structure & Data Models

The knowledge base uses a specific data structure to ensure content is both human-readable and machine-discoverable. Each guide entry includes metadata for SEO and technical takeaways for professional audiences.

Technical Guide Schema

Citations and metadata are generated based on the TechnicalGuideItem interface.

export interface TechnicalGuideItem {
  slug: string;
  title: string;
  category: string;
  readTime: string;
  summary: string;
  heroSubtitle: string;
  keyTakeaways: string[];
  sections: {
    heading: string;
    paragraphs: string[];
    checklist?: string[];
  }[];
  faqs: {
    question: string;
    answer: string;
  }[];
}

Sources: guide-detail.component.ts:10-15, seo.service.ts:310-315

SEO & Discoverability Implementation

The system implements a multi-pillar discovery strategy to ensure technical guides are indexed by both traditional search engines and AI agents (LLMs).

Schema Injection Sequence

When a user or bot accesses a guide, the GuideDetailComponent triggers an automated metadata update.

The sequence illustrates the flow from route activation to the injection of structured data.
Sources: guide-detail.component.ts:37-47, seo.service.ts:333-350

Discovery Pillars

1. AIO / KGO (Knowledge Graph): The SeoService refactors metadata into a unified JSON-LD @graph containing Article, FAQPage, and LocalBusiness nodes.
2. AEO (Answer Engine): Content is structured using 40-word Inverted Pyramid definitions and FAQ datasets to serve AI Answer Boxes.
3. AAO / B2A (Agentic Discovery): Machine-readable manifests (llms.txt, llms.json) provide technical specifications and SLAs for AI user-agents like GPTBot and ClaudeBot.

Sources: task.md:9-25, seo.service.ts:352-385

User Interaction & Conversion Logic

The technical guides include interactive components designed to convert readers into leads through direct communication channels.

WhatsApp Lead Generation

The GuideDetailComponent uses a computed signal to generate dynamic WhatsApp URLs. This URL includes a pre-filled message citing the specific guide the user was reading.

  whatsappShareUrl = computed(() => {
    const g = this.guide();
    if (!g) return '';
    const phone = this.siteData.social.whatsapp.replace('https://wa.me/', '');
    const msg = `Hi Sunrise Communication, I read your guide on "${g.title}" and would like to consult with your technical engineer regarding our premise requirement.`;
    return `https://wa.me/${phone}?text=${encodeURIComponent(msg)}`;
  });

Sources: guide-detail.component.ts:30-35, guide-detail.component.html:93-95

FAQ Navigation

Technical FAQs utilize a state-driven accordion. The activeFaqIndex signal manages which question is expanded, ensuring a clean UI for mobile-first Search Experience Optimization (SXO).
Sources: guide-detail.component.ts:25, guide-detail.component.html:135-145

Technical Specifications Summary

The guides are optimized for performance and accessibility using the following technical constraints:

• Rendering: SSR-optimized using @angular/ssr to ensure initial HTML contains all technical text and schema markup.
• Assets: Static images utilize NgOptimizedImage for performance, while placeholders handle missing assets.
• Expertise Attribution: All guides are attributed to senior engineering leadership (e.g., Tanaji Dada Pol) to establish E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness).

Sources: guide-detail.component.html:72-80, seo.service.ts:358-365, implementation_plan.md:15-30

Technical Guides serve as the primary knowledge repository of the Sunrise Communication platform. By combining structured data injection with expert-authored content, the system ensures high visibility across both human search interfaces and machine-to-machine discovery layers.