analogjs · benpsnyder · Aug 16, 2025 · Aug 16, 2025 · Aug 16, 2025 · Aug 16, 2025
diff --git a/.gitignore b/.gitignore
@@ -69,3 +69,4 @@ tmpanalogapp*
 vite.config.*.timestamp*
 .vite-inspect
 vitest.config.*.timestamp*
+gradle.properties
diff --git a/.prettierignore b/.prettierignore
@@ -12,3 +12,4 @@ pnpm-lock.yaml
 /packages/create-analog/template-*
 .vite-inspect
 .all-contributorsrc
+routeTree.gen.ts
diff --git a/apps/analog-app-e2e-playwright/tests/app.spec.ts b/apps/analog-app-e2e-playwright/tests/app.spec.ts
@@ -31,8 +31,17 @@ afterEach(async () => {
 describe('My Store', () => {
   test(`Given the user has navigated to the home page
     Then the app title is visible`, async () => {
-    await expect(
-      page.locator('role=heading[level=1] >> text=My Store'),
-    ).toContain(/My Store/i);
+    // Wait for the page to be fully loaded and Angular to be ready
+    await page.waitForLoadState('networkidle');
+
+    // Wait for the Angular app to be fully rendered
+    await page.waitForSelector('analogjs-root');
+
+    // Wait for the top bar component to be rendered
+    await page.waitForSelector('analogjs-top-bar');
+
+    // Now check for the heading - use a simpler selector that should work
+    const heading = page.locator('h1:has-text("My Store")');
+    await expect(await heading.textContent()).toContain('My Store');
   });
 });
diff --git a/apps/analog-app-e2e-playwright/tsconfig.json b/apps/analog-app-e2e-playwright/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["node", "vitest/globals"],
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["tests/**/*.ts", "src/**/*.js"],
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/apps/analog-app/package.json b/apps/analog-app/package.json
@@ -6,6 +6,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "schema-dts": "^1.1.5"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

diff --git a/apps/analog-app/src/app/pages/article.page.ts b/apps/analog-app/src/app/pages/article.page.ts
@@ -0,0 +1,109 @@
+import { Component } from '@angular/core';
+import type { RouteMeta } from '@analogjs/router';
+import type { WithContext, Article } from 'schema-dts';
+
+// Route metadata for Angular Router
+export const routeMeta: RouteMeta = {
+  title: 'Example Article',
+  data: {
+    description: 'An example article demonstrating JSON-LD structured data',
+  },
+};
+
+// JSON-LD structured data for SEO
+export const routeJsonLd: WithContext<Article> = {
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  headline: 'How to Use JSON-LD with AnalogJS',
+  description:
+    'Learn how to add structured data to your AnalogJS routes for better SEO',
+  author: {
+    '@type': 'Person',
+    name: 'John Doe',
+    url: 'https://example.com/authors/john-doe',
+  },
+  datePublished: '2024-01-30',
+  dateModified: '2024-01-30',
+  publisher: {
+    '@type': 'Organization',
+    name: 'AnalogJS Blog',
+    logo: {
+      '@type': 'ImageObject',
+      url: 'https://example.com/logo.png',
+    },
+  },
+  image: {
+    '@type': 'ImageObject',
+    url: 'https://example.com/article-image.jpg',
+    width: {
+      '@type': 'QuantitativeValue',
+      value: 1200,
+      unitCode: 'PX',
+    } as const,
+    height: {
+      '@type': 'QuantitativeValue',
+      value: 630,
+      unitCode: 'PX',
+    } as const,
+  },
+  mainEntityOfPage: {
+    '@type': 'WebPage',
+    '@id': 'https://example.com/articles/json-ld-analogjs',
+  },
+};
+
+@Component({
+  selector: 'app-article',
+  standalone: true,
+  template: `
+    <article>
+      <h1>How to Use JSON-LD with AnalogJS</h1>
+      <p>
+        This page demonstrates how to export structured data using schema-dts.
+      </p>
+
+      <section>
+        <h2>What is JSON-LD?</h2>
+        <p>
+          JSON-LD (JavaScript Object Notation for Linked Data) is a method of
+          encoding linked data using JSON. It's used by search engines to better
+          understand the content of your pages.
+        </p>
+      </section>
+
+      <section>
+        <h2>Benefits</h2>
+        <ul>
+          <li>Better SEO rankings</li>
+          <li>Rich snippets in search results</li>
+          <li>Type-safe with schema-dts</li>
+        </ul>
+      </section>
+    </article>
+  `,
+  styles: [
+    `
+      article {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      h1 {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+      }
+
+      h2 {
+        font-size: 1.8rem;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      section {
+        margin-bottom: 2rem;
+      }
+    `,
+  ],
+})
+export default class ArticlePageComponent {}
diff --git a/apps/analog-app/src/app/pages/event.page.ts b/apps/analog-app/src/app/pages/event.page.ts
@@ -0,0 +1,135 @@
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import type { WithContext, Event } from 'schema-dts';
+
+export const routeJsonLd: WithContext<Event> = {
+  '@context': 'https://schema.org',
+  '@type': 'Event',
+  name: 'AnalogJS Conference 2024',
+  description: 'The premier conference for AnalogJS developers',
+  startDate: '2024-06-15T09:00:00-07:00',
+  endDate: '2024-06-17T18:00:00-07:00',
+  location: {
+    '@type': 'Place',
+    name: 'San Francisco Convention Center',
+    address: {
+      '@type': 'PostalAddress',
+      streetAddress: '747 Howard St',
+      addressLocality: 'San Francisco',
+      addressRegion: 'CA',
+      postalCode: '94103',
+      addressCountry: 'US',
+    },
+  },
+  organizer: {
+    '@type': 'Organization',
+    name: 'AnalogJS Foundation',
+    url: 'https://analogjs.org',
+  },
+  offers: {
+    '@type': 'Offer',
+    url: 'https://analogjs.org/conf/tickets',
+    price: '299',
+    priceCurrency: 'USD',
+    availability: 'https://schema.org/InStock',
+    validFrom: '2024-01-01T00:00:00-07:00',
+  },
+  performer: {
+    '@type': 'Person',
+    name: 'Brandon Roberts',
+    jobTitle: 'Creator of AnalogJS',
+  },
+};
+
+@Component({
+  selector: 'app-event',
+  standalone: true,
+  template: `
+    <div class="event-page">
+      <h1>AnalogJS Conference 2024</h1>
+
+      <div class="event-info">
+        <div class="date-location">
+          <h2>📅 June 15-17, 2024</h2>
+          <p>📍 San Francisco Convention Center</p>
+        </div>
+
+        <div class="description">
+          <p>Join us for the premier conference for AnalogJS developers!</p>
+          <ul>
+            <li>3 days of workshops and talks</li>
+            <li>Meet the creators and core team</li>
+            <li>Network with the community</li>
+            <li>Learn best practices and new features</li>
+          </ul>
+        </div>
+
+        <div class="ticket-info">
+          <h2>Early Bird Tickets</h2>
+          <p class="price">$299</p>
+          <button class="register-btn">Register Now</button>
+        </div>
+      </div>
+
+      <section class="speakers">
+        <h2>Featured Speaker</h2>
+        <div class="speaker">
+          <h3>Brandon Roberts</h3>
+          <p>Creator of AnalogJS</p>
+        </div>
+      </section>
+    </div>
+  `,
+  styles: [
+    `
+      .event-page {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      .event-info {
+        background: #f8f9fa;
+        padding: 2rem;
+        border-radius: 8px;
+        margin: 2rem 0;
+      }
+
+      .date-location h2 {
+        color: #007bff;
+        margin-bottom: 0.5rem;
+      }
+
+      .price {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #28a745;
+      }
+
+      .register-btn {
+        background: #007bff;
+        color: white;
+        border: none;
+        padding: 1rem 2rem;
+        font-size: 1.2rem;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-top: 1rem;
+      }
+
+      .register-btn:hover {
+        background: #0056b3;
+      }
+
+      .speakers {
+        margin-top: 3rem;
+      }
+
+      .speaker {
+        background: #e9ecef;
+        padding: 1rem;
+        border-radius: 4px;
+      }
+    `,
+  ],
+})
+export default class EventPageComponent {}
diff --git a/apps/analog-app/src/app/pages/product.page.ts b/apps/analog-app/src/app/pages/product.page.ts
@@ -0,0 +1,89 @@
+import { Component } from '@angular/core';
+import type { WithContext, Product } from 'schema-dts';
+
+// JSON-LD for a product page
+export const routeJsonLd: WithContext<Product> = {
+  '@context': 'https://schema.org',
+  '@type': 'Product',
+  name: 'AnalogJS Pro License',
+  description:
+    'Professional license for AnalogJS framework with premium features',
+  image: 'https://example.com/analogjs-pro.jpg',
+  brand: {
+    '@type': 'Brand',
+    name: 'AnalogJS',
+  },
+  offers: {
+    '@type': 'Offer',
+    price: '99.00',
+    priceCurrency: 'USD',
+    availability: 'https://schema.org/InStock',
+    seller: {
+      '@type': 'Organization',
+      name: 'AnalogJS Inc.',
+    },
+  },
+  aggregateRating: {
+    '@type': 'AggregateRating',
+    ratingValue: '4.8',
+    reviewCount: '142',
+  },
+};
+
+@Component({
+  selector: 'app-product',
+  standalone: true,
+  template: `
+    <div class="product-page">
+      <h1>AnalogJS Pro License</h1>
+      <div class="product-info">
+        <img src="/analogjs-pro.jpg" alt="AnalogJS Pro" />
+        <div class="details">
+          <p class="price">$99.00</p>
+          <p class="description">
+            Professional license for AnalogJS framework with premium features
+          </p>
+          <div class="rating">⭐⭐⭐⭐⭐ 4.8/5 (142 reviews)</div>
+          <button class="buy-button">Buy Now</button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .product-page {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      .product-info {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+        margin-top: 2rem;
+      }
+
+      .price {
+        font-size: 2rem;
+        font-weight: bold;
+        color: #007bff;
+      }
+
+      .buy-button {
+        background: #28a745;
+        color: white;
+        border: none;
+        padding: 1rem 2rem;
+        font-size: 1.2rem;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .buy-button:hover {
+        background: #218838;
+      }
+    `,
+  ],
+})
+export default class ProductPageComponent {}