@analogjs/platform 0.2.0-beta.25 → 0.2.0-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/platform",
-  "version": "0.2.0-beta.25",
+  "version": "0.2.0-beta.26",
   "type": "commonjs",
   "description": "The fullstack meta-framework for Angular",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -25,10 +25,9 @@
   },
   "dependencies": {
     "nitropack": "^2.0.0",
-    "@analogjs/vite-plugin-angular": "^0.2.0-beta.25",
-    "@analogjs/vite-plugin-nitro": "^0.2.0-beta.25",
-    "@nx/devkit": "^16.0.0",
-    "xmlbuilder2": "^3.0.2"
+    "@analogjs/vite-plugin-angular": "^0.2.0-beta.26",
+    "@analogjs/vite-plugin-nitro": "^0.2.0-beta.26",
+    "@nx/devkit": "^16.0.0"
   },
   "generators": "./src/lib/nx-plugin/generators.json",
   "schematics": "./src/lib/nx-plugin/generators.json",

package/src/lib/content-plugin.js

@@ -3,21 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentPlugin = void 0;
 const fs = require("fs");
 function contentPlugin() {
+    const cache = new Map();
     return [
         {
             name: 'analogjs-content-frontmatter',
-            async transform(_code, id) {
+            async transform(code, id) {
                 // Transform only the frontmatter into a JSON object for lists
-                if (id.includes('.md?analog-content-list')) {
-                    const fm = await Promise.resolve().then(() => require('front-matter'));
-                    const fileContents = fs.readFileSync(id.split('?')[0], 'utf8');
-                    const frontmatter = fm(fileContents).attributes;
-                    return `export default ${JSON.stringify(frontmatter)}`;
+                if (!id.includes('.md?analog-content-list')) {
+                    return;
                 }
-                return;
+                const cachedContent = cache.get(id);
+                // There's no reason to run `readFileSync` and frontmatter parsing if the
+                // `transform` hook is called with the same code. In such cases, we can simply
+                // return the cached attributes, which is faster than repeatedly reading files
+                // synchronously during the build process.
+                if (cachedContent?.code === code) {
+                    return `export default ${cachedContent.attributes}`;
+                }
+                const fm = await Promise.resolve().then(() => require('front-matter'));
+                // The `default` property will be available in CommonJS environment, for instance,
+                // when running unit tests. It's safe to retrieve `default` first, since we still
+                // fallback to the original implementation.
+                const frontmatter = fm.default || fm;
+                const fileContents = fs.readFileSync(id.split('?')[0], 'utf8');
+                const { attributes } = frontmatter(fileContents);
+                const content = {
+                    code,
+                    attributes: JSON.stringify(attributes),
+                };
+                cache.set(id, content);
+                return `export default ${content.attributes}`;
             },
         },
     ];
 }
 exports.contentPlugin = contentPlugin;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1wbHVnaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9wbGF0Zm9ybS9zcmMvbGliL2NvbnRlbnQtcGx1Z2luLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUNBLHlCQUF5QjtBQUV6QixTQUFnQixhQUFhO0lBQzNCLE9BQU87UUFDTDtZQUNFLElBQUksRUFBRSw4QkFBOEI7WUFDcEMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDdkIsOERBQThEO2dCQUM5RCxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMseUJBQXlCLENBQUMsRUFBRTtvQkFDMUMsTUFBTSxFQUFFLEdBQVEsMkNBQWEsY0FBYyxFQUFDLENBQUM7b0JBQzdDLE1BQU0sWUFBWSxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQztvQkFDL0QsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQyxDQUFDLFVBQVUsQ0FBQztvQkFFaEQsT0FBTyxrQkFBa0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO2lCQUN4RDtnQkFFRCxPQUFPO1lBQ1QsQ0FBQztTQUNGO0tBQ0YsQ0FBQztBQUNKLENBQUM7QUFsQkQsc0NBa0JDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1wbHVnaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9wbGF0Zm9ybS9zcmMvbGliL2NvbnRlbnQtcGx1Z2luLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUNBLHlCQUF5QjtBQU96QixTQUFnQixhQUFhO0lBQzNCLE1BQU0sS0FBSyxHQUFHLElBQUksR0FBRyxFQUFtQixDQUFDO0lBRXpDLE9BQU87UUFDTDtZQUNFLElBQUksRUFBRSw4QkFBOEI7WUFDcEMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtnQkFDdEIsOERBQThEO2dCQUM5RCxJQUFJLENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyx5QkFBeUIsQ0FBQyxFQUFFO29CQUMzQyxPQUFPO2lCQUNSO2dCQUVELE1BQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7Z0JBQ3BDLHlFQUF5RTtnQkFDekUsOEVBQThFO2dCQUM5RSw4RUFBOEU7Z0JBQzlFLDBDQUEwQztnQkFDMUMsSUFBSSxhQUFhLEVBQUUsSUFBSSxLQUFLLElBQUksRUFBRTtvQkFDaEMsT0FBTyxrQkFBa0IsYUFBYSxDQUFDLFVBQVUsRUFBRSxDQUFDO2lCQUNyRDtnQkFFRCxNQUFNLEVBQUUsR0FBUSwyQ0FBYSxjQUFjLEVBQUMsQ0FBQztnQkFDN0Msa0ZBQWtGO2dCQUNsRixpRkFBaUY7Z0JBQ2pGLDJDQUEyQztnQkFDM0MsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUM7Z0JBQ3JDLE1BQU0sWUFBWSxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQztnQkFDL0QsTUFBTSxFQUFFLFVBQVUsRUFBRSxHQUFHLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztnQkFDakQsTUFBTSxPQUFPLEdBQUc7b0JBQ2QsSUFBSTtvQkFDSixVQUFVLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUM7aUJBQ3ZDLENBQUM7Z0JBQ0YsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLEVBQUUsT0FBTyxDQUFDLENBQUM7Z0JBRXZCLE9BQU8sa0JBQWtCLE9BQU8sQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNoRCxDQUFDO1NBQ0Y7S0FDRixDQUFDO0FBQ0osQ0FBQztBQXRDRCxzQ0FzQ0MifQ==

package/src/lib/nx-plugin/generators.json

@@ -6,20 +6,21 @@
     "app": {
       "factory": "./src/generators/app/generator",
       "schema": "./src/generators/app/schema.json",
-      "description": "Generates an AnalogJs application"
+      "description": "Generates an Analog application"
     },
     "preset": {
       "factory": "./src/generators/preset/generator",
       "schema": "./src/generators/preset/schema.json",
       "description": "Analog preset for create-nx-workspace",
-      "x-use-standalone-layout": true
+      "x-use-standalone-layout": true,
+      "hidden": true
     }
   },
   "schematics": {
     "app": {
       "factory": "./src/generators/app/compat",
       "schema": "./src/generators/app/schema.json",
-      "description": "Add Angular Three with proper packages and config"
+      "description": "Generates an Analog application"
     }
   }
 }

package/src/lib/nx-plugin/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "main": "src/index.js",
   "dependencies": {
-    "@nrwl/angular": "16.4.0",
-    "@nx/devkit": "16.4.0",
+    "@nrwl/angular": "16.5.1",
+    "@nx/devkit": "16.5.1",
     "semver": "^7.5.1"
   },
   "peerDependencies": {

package/src/lib/nx-plugin/src/generators/app/files/trpc/src/server/trpc/routers/notes.ts__template__

@@ -8,13 +8,13 @@ export const noteRouter = router({
   create: publicProcedure
     .input(
       z.object({
-        title: z.string(),
+        note: z.string(),
       })
     )
     .mutation(({ input }) =>
       notes.push({
         id: noteId++,
-        note: input.title,
+        note: input.note,
         createdAt: new Date().toISOString(),
       })
     ),

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

@@ -5,339 +5,250 @@ import { Component } from '@angular/core';
   standalone: true,
   styles: [
     `
-       a {
-         color: inherit;
-         text-decoration: inherit;
-       }
-
       :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;
+        padding: 2rem 1rem 8rem;
         flex-direction: column;
+        background: rgb(250 250 250);
         height: 100%;
-        min-height: 100vh;
-        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";
       }
-
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
       .main {
-        margin-left: auto;
-        margin-right: auto;
+        margin: 0 auto;
         flex: 1 1 0;
       }
-
-      .section-main {
+      .intro-section {
         padding-top: 1.5rem;
         padding-bottom: 2rem;
+      }
+      .intro-section > * + * {
         margin-top: 1.5rem;
       }
-
       @media (min-width: 768px) {
-        .section-main {
+        .intro-section {
           padding-top: 2.5rem;
           padding-bottom: 3rem;
         }
       }
-
       @media (min-width: 1024px) {
-        .section-main {
+        .intro-section {
           padding-top: 8rem;
           padding-bottom: 8rem;
         }
       }
-
-      .main-icon {
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: -1rem;
-        width: 4rem;
-        height: 4rem;
-      }
-
-      .container-main {
+      .intro-container {
         display: flex;
-        text-align: center;
         flex-direction: column;
-        align-items: center;
+        text-align: center;
         gap: 1rem;
+        align-items: center;
+        max-width: 64rem;
       }
-
-      .button-badge {
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
+      .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;
-        font-weight: 500;
-        border-radius: 1rem;
+        padding: 0.375rem 1rem;
         background-color: rgb(228 228 231);
+        border-radius: 1rem;
       }
-
-      .text-analog-red {
-        color: rgb(221,0,49);
-      }
-
-      .heading-1 {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
+      .intro-heading {
+        margin: 0;
         font-weight: 500;
-        margin: 1rem 0;
       }
 
       @media (min-width: 640px) {
-        .heading-1 {
-          font-size: 2.25rem; /* 36px */
-          line-height: 2.5rem; /* 40px */
+        .intro-heading {
+          font-size: 3rem;
+          line-height: 1;
         }
       }
-
       @media (min-width: 768px) {
-        .heading-1 {
-          font-size: 3rem; /* 48px */
+        .intro-heading {
+          font-size: 3.75rem;
           line-height: 1;
         }
       }
-
       @media (min-width: 1024px) {
-        .heading-1 {
-          font-size: 3.75rem; /* 60px */
+        .intro-heading {
+          font-size: 4.5rem;
           line-height: 1;
         }
       }
-
-      .paragraph-intro {
+      .intro-analog {
+        color: #dd0031;
+      }
+      .intro-description {
         line-height: 1.5;
+        max-width: 42rem;
+        margin: 0;
       }
 
       @media (min-width: 640px) {
-        .paragraph-intro {
-          font-size: 1.25rem;
+        .intro-description {
           line-height: 2rem;
+          font-size: 1.25rem;
         }
       }
-
-      .button-group {
-        display: flex;
-        gap: 1rem;
+      .btn-container > * + * {
+        margin-left: 1rem;
       }
-
-      .primary-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.875rem;
-        font-weight: 500;
-        transition-property: color, background-color;
+      .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;
-        outline-offset: 2px;
-        opacity: 1;
-        pointer-events: auto;
-        background-color: rgb(9, 9, 11);
-        color: rgb(250, 250, 250);
-        height: 2.75rem;
+        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;
-      }
-
-      .secondary-button {
-        display: inline-flex;
-        align-items: center;
         justify-content: center;
-        font-size: 0.875rem;
-        font-weight: 500;
-        transition-property: color, background-color, border-color;
-        transition-duration: 150ms;
-        outline-offset: 2px;
-        opacity: 1;
-        pointer-events: auto;
-        background-color: rgb(250, 250, 250);
-        color: rgb(9, 9, 11);
+        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: 1px solid rgb(161, 161, 170, 0.25);
         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;
       }
-
-      .secondary-button:hover {
+      .lightBtn:hover {
         background-color: rgb(244 244 245);
-        color: rgb(9, 9, 11);
       }
-
-      .section {
-        margin-top: 8rem;
-        margin-bottom: 8rem;
+      .counter-section {
         padding-top: 2rem;
         padding-bottom: 2rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
       }
 
       @media (min-width: 768px) {
-        .section {
+        .counter-section {
           padding-top: 3rem;
           padding-bottom: 3rem;
         }
       }
 
       @media (min-width: 1024px) {
-        .section {
+        .counter-section {
           padding-top: 6rem;
+          padding-bottom: 6rem;
         }
       }
-
-      .intro-container {
-        margin-left: auto;
-        margin-right: auto;
+      .counter-container {
+        text-align: center;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
         max-width: 58rem;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-        text-align: center;
+        margin-left: auto;
+        margin-right: auto;
       }
-
-      .title {
-        font-weight: 500;
-        font-size: 3rem;
+      .counter-heading {
+        color: #dd0031;
         line-height: 1.1;
-        text-align: center;
+        font-weight: 500;
+        font-size: 1.875rem;
         margin: 0;
       }
-
-      .description {
+      .counter-description {
+        line-height: 1.5;
         max-width: 85%;
-        font-size: 1.125rem;
-        line-height: 1.75rem;
+        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;
+        font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
       }
     `,
   ],
   template: `
     <main class="main">
-      <section class="section-main">
-        <div class="container-main">
- <svg
-          class="main-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:svg="http://www.w3.org/2000/svg"
-          width="362.26562"
-          zoomAndPan="magnify"
-          viewBox="0 0 271.62214 192.65233"
-          height="256.86978"
-          preserveAspectRatio="xMidYMid meet"
-          version="1.0"
-          id="svg27"
-        >
-          <defs id="defs11">
-            <clipPath id="id1">
-              <path
-                d="M 127.29688,75.375 H 347.57031 V 267.52734 H 127.29688 Z m 0,0"
-                clip-rule="nonzero"
-                id="path2"
-              />
-            </clipPath>
-            <clipPath id="id2">
-              <path
-                d="M 75.871094,104 H 263.33594 V 268.03125 H 75.871094 Z m 0,0"
-                clip-rule="nonzero"
-                id="path5"
-              />
-            </clipPath>
-            <clipPath id="id3">
-              <path
-                d="m 105,169.02344 h 210 v 87.875 H 105 Z m 0,0"
-                clip-rule="nonzero"
-                id="path8"
-              />
-            </clipPath>
-          </defs>
-          <g
-            clip-path="url(#id1)"
-            id="g15"
-            transform="translate(-75.931091,-75.378906)"
-          >
-            <path
-              fill="#c30f2e"
-              d="M 237.43359,75.378906 347.57031,267.52734 H 127.29688 L 237.43359,75.378906"
-              fill-opacity="1"
-              fill-rule="nonzero"
-              id="path13"
-            />
-          </g>
-          <g
-            clip-path="url(#id2)"
-            id="g19"
-            transform="translate(-75.931091,-75.378906)"
-          >
-            <path
-              fill="#dd0330"
-              d="m 169.60156,104 93.73047,164.03125 H 75.871094 L 169.60156,104"
-              fill-opacity="1"
-              fill-rule="nonzero"
-              id="path17"
-            />
-          </g>
-          <path
-            fill="#ffffff"
-            d="M 252.96344,143.58984 H 19.221253 v -2.56641 H 252.96344 v 2.56641"
-            fill-opacity="1"
-            fill-rule="nonzero"
-            id="path21"
+      <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"
           />
-          <g
-            clip-path="url(#id3)"
-            id="g25"
-            transform="translate(-75.931091,-75.378906)"
-          >
-            <path
-              fill="#ffffff"
-              d="m 292.78516,256.51172 c -0.91407,0 -1.77344,-0.37891 -2.49219,-1.09766 -4.29297,-4.3125 -4.48047,-21.84765 -4.27344,-48.10937 0.11719,-14.35157 0.27344,-34.00782 -2.01562,-35.5586 -2.23438,0.92578 -2.45704,17.16407 -2.60157,27.91407 -0.17187,12.50781 -0.34765,25.44921 -2.3789,32.03906 -0.60547,1.95312 -1.38672,3.74219 -2.95703,3.59765 -2.21485,-0.19531 -2.92969,-3.6914 -4.58204,-17.48828 -0.6875,-5.73047 -1.39843,-11.65234 -2.23046,-13.94531 -0.10938,-0.28906 -0.20313,-0.51953 -0.28516,-0.69922 -0.88672,2.00391 -1.91016,7.51172 -2.62109,11.33594 -0.98438,5.28125 -1.91407,10.26953 -3.07813,12.44531 -0.89844,1.67188 -2.32422,3.85156 -4.31641,3.42969 -2.71484,-0.57031 -3.52734,-6.04297 -3.76953,-9.25391 0,-27.01562 -3.53515,-30.16015 -4.24218,-30.51562 l -0.11329,0.0859 -0.17187,-0.0391 c -2.52344,1.10157 -2.66016,9.86328 -2.78906,18.33594 -0.10157,6.21484 -0.21094,13.25781 -1.11719,19.84766 -1.17578,8.54297 -2.59766,10.1914 -4.36719,10.08984 -4.07422,-0.27734 -4.1914,-14.30859 -4.1914,-15.90625 0,-0.5 0.0117,-1.08984 0.0273,-1.74219 0.0781,-3.26562 0.21875,-9.33984 -1.78906,-11.2539 -0.26563,-0.25391 -0.64063,-0.54688 -0.9336,-0.46485 -1.42968,0.35938 -2.91406,5.00391 -3.40625,6.53125 -0.15625,0.48438 -0.28125,0.88282 -0.38672,1.15625 -0.082,0.22657 -0.1875,0.54688 -0.3125,0.9336 -1.08203,3.28515 -2.3125,6.5625 -4.41406,7.37109 -0.77734,0.30078 -1.58984,0.23438 -2.35156,-0.19531 -1.01172,-0.57422 -1.83594,-1.7461 -2.60547,-3.69531 -0.42187,-1.07813 -0.78125,-2.17188 -1.14844,-3.26954 -0.44531,-1.33984 -0.90234,-2.72656 -1.46875,-4.04296 -0.44531,-1.02344 -1.55468,-1.48438 -2.96875,-1.23438 -2.9375,0.52344 -3.42968,3.49219 -3.84375,7.96094 -0.0742,0.77734 -0.14453,1.53906 -0.24218,2.25781 -0.0117,0.21094 -0.53125,6.76953 -0.86329,8.85547 -0.91796,5.71875 -2.125,7.97266 -4.1289,7.80859 -4.94531,-0.42187 -7.21485,-22.11328 -7.09375,-31.27734 0.0937,-6.99609 -1.17188,-9.55078 -1.92969,-9.95703 -0.0781,-0.0352 -0.19922,-0.10156 -0.48828,0.10156 -0.89453,0.60547 -1.69141,2.49219 -1.44531,4.47266 2.72265,21.5664 0.71484,46.26562 -4.20313,51.82812 -1.55078,1.75 -3.66015,1.72656 -5.1289,0.25 -4.29688,-4.3125 -4.47657,-21.84765 -4.27344,-48.10937 0.11719,-14.35157 0.26953,-34.00782 -2.01563,-35.5586 -2.23437,0.92578 -2.45312,17.16407 -2.60156,27.91407 -0.17187,12.50781 -0.34766,25.44921 -2.38281,32.03906 -0.60547,1.95312 -1.38672,3.74219 -2.95313,3.59765 -2.21875,-0.19531 -2.92968,-3.6914 -4.58593,-17.48828 -0.6875,-5.73047 -1.39844,-11.65234 -2.23047,-13.94531 -0.10547,-0.28906 -0.19922,-0.51953 -0.28516,-0.69922 -0.88281,2.00391 -1.90625,7.51172 -2.61719,11.33594 -0.98437,5.28125 -1.91406,10.26953 -3.08203,12.44531 -0.89844,1.67188 -2.32422,3.85156 -4.3125,3.42969 -2.71484,-0.57031 -3.52734,-6.04297 -3.76953,-9.25391 -0.004,-27.01562 -3.53516,-30.16015 -4.24219,-30.51562 l -0.11328,0.0859 -0.17578,-0.0391 c -2.51953,1.10157 -2.65625,9.86328 -2.78906,18.33594 -0.0977,6.21484 -0.20703,13.25781 -1.11328,19.84766 -1.17578,8.54297 -2.58594,10.20703 -4.36328,10.08984 -4.08204,-0.27734 -4.19922,-14.30859 -4.19922,-15.90625 0,-0.5 0.0156,-1.08984 0.0312,-1.74219 0.0781,-3.26562 0.21875,-9.33984 -1.78907,-11.2539 -0.26562,-0.25391 -0.64062,-0.54688 -0.93359,-0.46485 -1.42969,0.35938 -2.91797,5.00391 -3.40234,6.53125 -0.15625,0.48047 -0.28907,0.88282 -0.38672,1.15625 -0.0859,0.22266 -0.19141,0.54297 -0.31641,0.92969 -1.08203,3.28516 -2.3125,6.56641 -4.41015,7.375 -0.78125,0.30078 -1.59766,0.23438 -2.35547,-0.19531 -1.01172,-0.57422 -1.83985,-1.7461 -2.60547,-3.69531 -0.42188,-1.07813 -0.78516,-2.17188 -1.14844,-3.26954 -0.44531,-1.33984 -0.90625,-2.72656 -1.47265,-4.04296 -0.44141,-1.02344 -1.55469,-1.48438 -2.96875,-1.23438 -3.38282,0.60156 -4.1836,4.79688 -4.82813,9.80469 l -0.11328,0.89062 -2.55859,-0.33984 0.12109,-0.875 c 0.55859,-4.39063 1.41016,-11.02734 6.92969,-12.00391 2.59765,-0.46093 4.86718,0.61719 5.78125,2.74219 0.61328,1.42188 1.09375,2.85938 1.55468,4.25391 0.34375,1.05078 0.69532,2.10156 1.10157,3.14062 0.71484,1.8125 1.26953,2.28125 1.47656,2.39453 1.29297,-0.40234 2.61328,-4.42187 3.05078,-5.74609 0.13672,-0.42578 0.25391,-0.77734 0.34766,-1.02734 0.0898,-0.2461 0.20703,-0.60547 0.34765,-1.03907 1.16407,-3.64062 2.625,-7.58203 5.21875,-8.23828 0.79297,-0.20312 2.01953,-0.17578 3.35156,1.09766 2.82813,2.69922 2.67969,9 2.58204,13.17187 -0.0156,0.625 -0.0312,1.19532 -0.0312,1.67969 0,6.65625 0.98828,11.30859 1.74218,12.90625 0.39063,-0.81641 1.0586,-2.79297 1.69532,-7.4375 0.88281,-6.4375 0.99609,-13.39844 1.08984,-19.53906 0.17187,-10.86719 0.29297,-18.7461 4.22656,-20.59766 0.58594,-0.35937 1.5586,-0.55469 2.58594,-0.0352 3.80469,1.91406 5.65234,12.61328 5.65234,32.70703 0.23828,3.10547 1.07422,6.375 1.76172,6.84375 0.004,-0.0703 0.5625,-0.41407 1.48047,-2.13282 0.98047,-1.82421 1.95703,-7.07421 2.81641,-11.70312 1.90234,-10.20313 2.76562,-13.78516 5.01562,-13.97266 1.71485,-0.16797 2.50781,2.01172 2.83985,2.92969 0.9375,2.57031 1.63281,8.37109 2.36718,14.51563 0.57422,4.76562 1.39063,11.57031 2.22266,14.32421 0.0898,-0.24218 0.19141,-0.53125 0.30078,-0.88671 1.92578,-6.23829 2.10156,-18.98438 2.26953,-31.31641 0.23438,-17.12891 0.53516,-27.74219 3.66016,-29.95703 0.69531,-0.49219 1.54297,-0.61328 2.37109,-0.33594 3.66016,1.21484 3.94141,11.94531 3.73438,37.99609 -0.14844,18.89063 -0.33203,42.40235 3.52734,46.27735 0.33594,0.33984 0.57422,0.33984 0.66016,0.33984 0.17968,0 0.4375,-0.17187 0.71093,-0.48047 3.90625,-4.41797 6.37891,-27.61718 3.57813,-49.80468 -0.34766,-2.76172 0.71875,-5.66407 2.53906,-6.91407 1.00391,-0.6914 2.16016,-0.78125 3.16016,-0.24609 2.27734,1.21094 3.38281,5.33203 3.29297,12.25391 -0.16016,12.08593 2.74218,26.23046 4.63672,28.48828 0.30078,-0.5 0.89453,-1.8711 1.46484,-5.46094 0.32031,-1.98438 0.84766,-8.65234 0.85547,-8.71875 0.0937,-0.75391 0.16406,-1.48438 0.23047,-2.22656 0.39062,-4.16407 0.87109,-9.34375 5.95703,-10.2461 2.59375,-0.46093 4.86328,0.61328 5.78125,2.74219 0.61328,1.42188 1.08984,2.85938 1.55078,4.25391 0.35156,1.05078 0.70312,2.10156 1.10937,3.14062 0.71094,1.8125 1.26954,2.28125 1.47266,2.39453 1.29297,-0.40234 2.61719,-4.42187 3.05078,-5.74218 0.14063,-0.42579 0.25781,-0.78125 0.34766,-1.03125 0.0937,-0.24219 0.20703,-0.60547 0.34375,-1.03907 1.16797,-3.64062 2.6289,-7.58203 5.22656,-8.23828 0.78516,-0.20312 2.01563,-0.17578 3.34766,1.09766 2.82812,2.69922 2.67968,9 2.58593,13.17187 -0.0195,0.625 -0.0352,1.19532 -0.0352,1.67969 0,6.65625 0.98828,11.30859 1.74219,12.90625 0.38671,-0.81641 1.05468,-2.79297 1.69921,-7.4375 0.88282,-6.4375 0.98829,-13.39844 1.08985,-19.53906 0.16797,-10.86719 0.28906,-18.7461 4.22265,-20.59766 0.58594,-0.35937 1.5586,-0.55469 2.58985,-0.0352 3.80078,1.91406 5.65234,12.61328 5.65234,32.70703 0.23828,3.10547 1.07422,6.375 1.75781,6.84375 0.008,-0.0703 0.5586,-0.41407 1.48438,-2.13282 0.98047,-1.82421 1.95312,-7.07421 2.81641,-11.70312 1.89453,-10.20313 2.76171,-13.78516 5.01171,-13.97266 1.71875,-0.16797 2.51172,2.01172 2.84375,2.92969 0.9336,2.57031 1.62891,8.37109 2.3711,14.51563 0.5664,4.76562 1.38281,11.57031 2.21875,14.32421 0.0859,-0.24218 0.1875,-0.53125 0.29687,-0.88671 1.92578,-6.23829 2.09766,-18.98438 2.26953,-31.31641 0.23047,-17.12891 0.53516,-27.74219 3.66016,-29.95703 0.69922,-0.49219 1.54297,-0.61328 2.37109,-0.33594 3.66407,1.21484 3.94532,11.94531 3.73438,37.99609 -0.14844,18.89063 -0.33203,42.40235 3.52344,46.27735 0.34375,0.33984 0.57812,0.33984 0.66797,0.33984 0.17578,0 0.43359,-0.17187 0.70312,-0.48047 3.91406,-4.41797 6.38281,-27.61718 3.58203,-49.80468 -0.36328,-2.89063 0.45703,-5.80469 1.95313,-6.92579 0.7539,-0.57031 1.67187,-0.6875 2.51562,-0.33203 2.17969,0.92969 3.65625,4.91407 4.51563,12.1875 0.35937,3.04688 0.67968,6.33985 0.98828,9.58985 0.67969,7.09375 1.60156,16.65234 2.84765,18.7539 0.38282,-0.48828 1.16407,-1.80859 2.32422,-5.34765 l 2.44922,0.80078 c -1.80078,5.47265 -3.21094,7.53515 -5.04687,7.32422 -2.85547,-0.31641 -3.67969,-6.08594 -5.13672,-21.28516 -0.3086,-3.23437 -0.625,-6.50781 -0.98438,-9.53906 -1.09375,-9.27735 -2.95312,-10.11719 -2.97265,-10.125 -0.36328,0.18359 -1.20703,2.11328 -0.89453,4.57422 2.71484,21.5664 0.71484,46.26953 -4.20704,51.82812 -0.79296,0.89453 -1.68359,1.34766 -2.63671,1.34766"
-              fill-opacity="1"
-              fill-rule="nonzero"
-              id="path23"
-            />
-          </g>
-        </svg>
           <a
-            class="button-badge"
+            class="intro-badge"
             target="_blank"
             href="https://twitter.com/analogjs"
             >Follow along on Twitter</a
           >
-          <h1 class="heading-1">
-            <span class="text-analog-red">Analog.</span> The fullstack Angular meta-framework
+          <h1 class="intro-heading">
+            <span class="intro-analog">Analog.</span> The fullstack Angular
+            meta-framework
           </h1>
-          <p class="paragraph-intro">
+          <p class="intro-description">
             Analog is for building applications and websites with Angular.
             <br />Powered by Vite.
           </p>
-          <div class="button-group">
-            <a class="primary-button" href="https://analogjs.org"
-              >Read the docs</a
-            >
+          <div class="btn-container">
+            <a class="darkBtn" href="https://analogjs.org">Read the docs</a>
             <a
-              class="secondary-button"
+              target="_blank"
+              rel="noreferrer"
+              class="lightBtn"
               href="https://github.com/analogjs/analog"
-              >GitHub</a
+              >Star on GitHub</a
             >
           </div>
         </div>
       </section>
     <section id="counter-demo" class="section">
-        <div class="intro-container">
-          <h2 class="text-analog-red title">Counter</h2>
-          <p class="description">
+        <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="secondary-button">
+          <button (click)="increment()" class="lightBtn">
             Count: <span class="count">{{ count }}</span>
           </button>
         </div>
@@ -346,8 +257,8 @@ import { Component } from '@angular/core';
   `,
 })
 export class AnalogWelcomeComponent {
-  public count = 0;
-  public increment() {
+  count = 0;
+  increment() {
     this.count++;
-  }  
+  }
 }