@analogjs/platform 0.2.0-beta.9 → 0.2.0-rc.1

package/src/lib/nx-plugin/src/generators/app/files/welcome-components/css/src/app/pages/analog-welcome.component.ts__template__

@@ -0,0 +1,264 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: '<%= fileName %>-analog-welcome',
+  standalone: true,
+  styles: [
+    `
+      :host {
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        display: flex;
+        padding: 2rem 1rem 8rem;
+        flex-direction: column;
+        background: rgb(250 250 250);
+        height: 100%;
+      }
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+      .main {
+        margin: 0 auto;
+        flex: 1 1 0;
+      }
+      .intro-section {
+        padding-top: 1.5rem;
+        padding-bottom: 2rem;
+      }
+      .intro-section > * + * {
+        margin-top: 1.5rem;
+      }
+      @media (min-width: 768px) {
+        .intro-section {
+          padding-top: 2.5rem;
+          padding-bottom: 3rem;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-section {
+          padding-top: 8rem;
+          padding-bottom: 8rem;
+        }
+      }
+      .intro-container {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+        align-items: center;
+        max-width: 64rem;
+      }
+      .intro-logo {
+        height: 3rem;
+        width: 3rem;
+      }
+      .intro-badge {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 0.375rem 1rem;
+        background-color: rgb(228 228 231);
+        border-radius: 1rem;
+      }
+      .intro-heading {
+        margin: 0;
+        font-weight: 500;
+      }
+
+      @media (min-width: 640px) {
+        .intro-heading {
+          font-size: 3rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 768px) {
+        .intro-heading {
+          font-size: 3.75rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-heading {
+          font-size: 4.5rem;
+          line-height: 1;
+        }
+      }
+      .intro-analog {
+        color: #dd0031;
+      }
+      .intro-description {
+        line-height: 1.5;
+        max-width: 42rem;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .intro-description {
+          line-height: 2rem;
+          font-size: 1.25rem;
+        }
+      }
+      .btn-container > * + * {
+        margin-left: 1rem;
+      }
+      .darkBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        background-color: rgb(9 9 11);
+        border-radius: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        cursor: pointer;
+        display: inline-flex;
+      }
+      .darkBtn:hover {
+        background-color: rgb(9 9 11 / 0.9);
+      }
+      .lightBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(24, 24, 27);
+        background: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229, 231, 235);
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        display: inline-flex;
+        cursor: pointer;
+      }
+      .lightBtn:hover {
+        background-color: rgb(244 244 245);
+      }
+      .counter-section {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+
+      @media (min-width: 768px) {
+        .counter-section {
+          padding-top: 3rem;
+          padding-bottom: 3rem;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .counter-section {
+          padding-top: 6rem;
+          padding-bottom: 6rem;
+        }
+      }
+      .counter-container {
+        text-align: center;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        max-width: 58rem;
+        display: flex;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .counter-heading {
+        color: #dd0031;
+        line-height: 1.1;
+        font-weight: 500;
+        font-size: 1.875rem;
+        margin: 0;
+      }
+      .counter-description {
+        line-height: 1.5;
+        max-width: 85%;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .counter-description {
+          line-height: 1.75rem;
+          font-size: 1.125rem;
+        }
+      }
+      .count {
+        margin-left: 0.25rem;
+        font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+      }
+    `,
+  ],
+  template: `
+    <main class="main">
+      <section class="intro-section">
+        <div class="intro-container">
+          <img
+            class="intro-logo"
+            src="https://analogjs.org/img/logos/analog-logo.svg"
+            alt="AnalogJs logo. Two red triangles and a white analog wave in front"
+          />
+          <a
+            class="intro-badge"
+            target="_blank"
+            href="https://twitter.com/analogjs"
+            >Follow along on Twitter</a
+          >
+          <h1 class="intro-heading">
+            <span class="intro-analog">Analog.</span> The fullstack Angular
+            meta-framework
+          </h1>
+          <p class="intro-description">
+            Analog is for building applications and websites with Angular.
+            <br />Powered by Vite.
+          </p>
+          <div class="btn-container">
+            <a class="darkBtn" href="https://analogjs.org">Read the docs</a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              class="lightBtn"
+              href="https://github.com/analogjs/analog"
+              >Star on GitHub</a
+            >
+          </div>
+        </div>
+      </section>
+    <section id="counter-demo" class="section">
+        <div class="counter-container">
+          <h2 class="counter-heading">Counter</h2>
+          <p class="counter-description">
+            This is a simple interactive counter. Powered by Angular.
+          </p>
+          <button (click)="increment()" class="lightBtn">
+            Count: <span class="count">{{ count }}</span>
+          </button>
+        </div>
+      </section>
+    </main>
+  `,
+})
+export class AnalogWelcomeComponent {
+  count = 0;
+  increment() {
+    this.count++;
+  }
+}

package/src/lib/nx-plugin/src/generators/app/files/welcome-components/css-trpc/src/app/pages/analog-welcome.component.ts__template__

@@ -0,0 +1,439 @@
+import { Component } from '@angular/core';
+import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
+import { FormsModule, NgForm } from '@angular/forms';
+import { waitFor } from '@analogjs/trpc';
+import { shareReplay, Subject, switchMap, take } from 'rxjs';
+import { injectTrpcClient } from '../../trpc-client';
+import { Note } from '../../note';
+
+@Component({
+  selector: '<%= fileName %>-analog-welcome',
+  standalone: true,
+  imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf],
+  styles: [
+    `
+      :host {
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        display: flex;
+        padding: 2rem 1rem 8rem;
+        flex-direction: column;
+        background: rgb(250 250 250);
+        height: 100%;
+      }
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+      .main {
+        margin: 0 auto;
+        flex: 1 1 0;
+      }
+      .intro-section {
+        padding-top: 1.5rem;
+        padding-bottom: 2rem;
+      }
+      .intro-section > * + * {
+        margin-top: 1.5rem;
+      }
+      @media (min-width: 768px) {
+        .intro-section {
+          padding-top: 2.5rem;
+          padding-bottom: 3rem;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-section {
+          padding-top: 8rem;
+          padding-bottom: 8rem;
+        }
+      }
+      .intro-container {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+        align-items: center;
+        max-width: 64rem;
+      }
+      .intro-logo {
+        height: 3rem;
+        width: 3rem;
+      }
+      .intro-badge {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 0.375rem 1rem;
+        background-color: rgb(228 228 231);
+        border-radius: 1rem;
+      }
+      .intro-heading {
+        margin: 0;
+        font-weight: 500;
+      }
+
+      @media (min-width: 640px) {
+        .intro-heading {
+          font-size: 3rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 768px) {
+        .intro-heading {
+          font-size: 3.75rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-heading {
+          font-size: 4.5rem;
+          line-height: 1;
+        }
+      }
+      .intro-analog {
+        color: #dd0031;
+      }
+      .intro-description {
+        line-height: 1.5;
+        max-width: 42rem;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .intro-description {
+          line-height: 2rem;
+          font-size: 1.25rem;
+        }
+      }
+      .btn-container > * + * {
+        margin-left: 1rem;
+      }
+      .darkBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        background-color: rgb(9 9 11);
+        border-radius: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        cursor: pointer;
+        display: inline-flex;
+      }
+      .darkBtn:hover {
+        background-color: rgb(9 9 11 / 0.9);
+      }
+      .lightBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(24, 24, 27);
+        background: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229, 231, 235);
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        display: inline-flex;
+        cursor: pointer;
+      }
+      .lightBtn:hover {
+        background-color: rgb(244 244 245);
+      }
+      .trpc-section {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+
+      @media (min-width: 768px) {
+        .trpc-section {
+          padding-top: 3rem;
+          padding-bottom: 3rem;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .trpc-section {
+          padding-top: 6rem;
+          padding-bottom: 6rem;
+        }
+      }
+      .trpc-container {
+        text-align: center;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        max-width: 58rem;
+        display: flex;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .trpc-heading {
+        color: #dd0031;
+        line-height: 1.1;
+        font-weight: 500;
+        font-size: 1.875rem;
+        margin: 0;
+      }
+      .trpc-description {
+        line-height: 1.5;
+        max-width: 85%;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .trpc-description {
+          line-height: 1.75rem;
+          font-size: 1.125rem;
+        }
+      }
+      .trpc-form {
+        padding-bottom: 0.5rem;
+        align-items: center;
+        display: flex;
+        margin-top: 2rem;
+        gap: 0.5rem;
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+      .trpcInput {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        border-radius: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 2.5rem;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        color: inherit;
+        margin: 0;
+        border: 1px solid rgb(229, 231, 235);
+      }
+
+      .notes {
+        margin-top: 1rem;
+      }
+      .note {
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.375rem;
+        font-weight: 400;
+        border: 1px solid rgb(229, 231, 235);
+      }
+      .note-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .note-date {
+        font-size: 0.875rem;
+        margin: 0;
+        line-height: 1.25rem;
+        color: rgb(161, 161, 170);
+      }
+      .note-note {
+        margin: 0 0 2rem 0;
+      }
+      .noteDeleteBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        border-radius: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        display: inline-flex;
+        cursor: pointer;
+        background: none;
+        border: 1px solid transparent;
+      }
+      .noteDeleteBtn:hover {
+        background-color: rgb(244 244 245);
+      }
+
+      .no-notes {
+        padding: 5rem;
+        border-radius: 0.75rem;
+        text-align: center;
+      }
+      .no-notes-headline {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+        font-weight: 500;
+        margin: 0;
+      }
+      .no-notes-desc {
+        color: rgb(161 161 170);
+        margin: 0;
+      }
+
+      .loading-text {
+        margin-top: 1rem;
+        text-align: center;
+      }
+    `,
+  ],
+  template: `
+    <main class="main">
+      <section class="intro-section">
+        <div class="intro-container">
+          <img
+            class="intro-logo"
+            src="https://analogjs.org/img/logos/analog-logo.svg"
+            alt="AnalogJs logo. Two red triangles and a white analog wave in front"
+          />
+          <a
+            class="intro-badge"
+            target="_blank"
+            href="https://twitter.com/analogjs"
+            >Follow along on Twitter</a
+          >
+          <h1 class="intro-heading">
+            <span class="intro-analog">Analog.</span> The fullstack Angular
+            meta-framework
+          </h1>
+          <p class="intro-description">
+            Analog is for building applications and websites with Angular.
+            <br />Powered by Vite.
+          </p>
+          <div class="btn-container">
+            <a class="darkBtn" href="https://analogjs.org">Read the docs</a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              class="lightBtn"
+              href="https://github.com/analogjs/analog"
+              >Star on GitHub</a
+            >
+          </div>
+        </div>
+      </section>
+      <section id="trpc-demo" class="trpc-section">
+        <div class="trpc-container">
+          <h2 class="trpc-heading">Leave a note</h2>
+          <p class="trpc-description">
+            This is an example of how to you can use tRPC to superpower you
+            client server interaction.
+          </p>
+        </div>
+        <form class="trpc-form" #f="ngForm" (ngSubmit)="addNote(f)">
+          <label class="sr-only" for="newNote"> Note </label>
+          <input
+            required
+            autocomplete="off"
+            name="newNote"
+            [(ngModel)]="newNote"
+            class="trpcInput"
+          />
+          <button class="lightBtn">+</button>
+        </form>
+        <div class="notes" *ngIf="notes$ | async as notes; else loading">
+          <div
+            class="note"
+            *ngFor="let note of notes; trackBy: noteTrackBy; let i = index"
+          >
+            <div class="note-head">
+              <p class="note-date">{{ note.createdAt | date }}</p>
+              <button class="noteDeleteBtn" (click)="removeNote(note.id)">
+                x
+              </button>
+            </div>
+            <p class="note-note">{{ note.note }}</p>
+          </div>
+
+          <div class="no-notes " *ngIf="notes.length === 0">
+            <h3 class="no-notes-headline">No notes yet!</h3>
+            <p class="no-notes-desc">
+              Add a new one and see them appear here...
+            </p>
+          </div>
+        </div>
+        <ng-template #loading>
+          <p class="loading-text">Loading...</p>
+        </ng-template>
+      </section>
+    </main>
+  `,
+})
+export class AnalogWelcomeComponent {
+   private _trpc = injectTrpcClient();
+  public triggerRefresh$ = new Subject<void>();
+  public notes$ = this.triggerRefresh$.pipe(
+    switchMap(() => this._trpc.note.list.query()),
+    shareReplay(1)
+  );
+  public newNote = '';
+
+  constructor() {
+    void waitFor(this.notes$);
+    this.triggerRefresh$.next();
+  }
+
+  public noteTrackBy = (index: number, note: Note) => {
+    return note.id;
+  };
+
+  public addNote(form: NgForm) {
+    if (!form.valid) {
+      form.form.markAllAsTouched();
+      return;
+    }
+    this._trpc.note.create
+      .mutate({ note: this.newNote })
+      .pipe(take(1))
+      .subscribe(() => this.triggerRefresh$.next());
+    this.newNote = '';
+    form.form.reset();
+  }
+
+  public removeNote(id: number) {
+    this._trpc.note.remove
+      .mutate({ id })
+      .pipe(take(1))
+      .subscribe(() => this.triggerRefresh$.next());
+  }
+}