feat: convert Navigation component to Analog SFC

angular-sanctuary · May 30, 2024 · 2963440 · 2963440
1 parent 62c20ab
commit 2963440
Show file tree

Hide file tree

Showing 16 changed files with 366 additions and 378 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,11 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.analog",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }
diff --git a/angular-hub/index.html b/angular-hub/index.html
@@ -46,7 +46,7 @@
     </script>
   </head>
   <body>
-    <angular-hub-root></angular-hub-root>
+    <App></App>
     <script type="module" src="/src/main.ts"></script>
     <noscript
       >Please enable JavaScript to continue using this application.</noscript

diff --git a/angular-hub/src/app/App.analog b/angular-hub/src/app/App.analog
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { afterNextRender, inject } from '@angular/core';
+  import { NavigationEnd, Router } from '@angular/router';
+  import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
+  import { filter, switchMap } from 'rxjs';
+  import { PwaService } from './services/pwa.service';
+
+  import Navigation from './components/navigation/Navigation.analog' with { analog: 'imports' };
+
+  const router = inject(Router);
+  const swUpdate = inject(SwUpdate);
+  const pwaService = inject(PwaService);
+
+  afterNextRender(() => {
+    pwaService.initPwaPrompt();
+    router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        switchMap(() => swUpdate.versionUpdates),
+        filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
+      )
+      .subscribe(() => {
+        document.location.reload();
+      });
+  });
+</script>
+
+<template class="w-full">
+  <Navigation class="h-full" />
+</template>
diff --git a/angular-hub/src/app/app.component.ts b/angular-hub/src/app/app.component.ts
diff --git a/angular-hub/src/app/components/navigation/InstallPwaButton.analog b/angular-hub/src/app/components/navigation/InstallPwaButton.analog
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { output } from '@angular/core';
+
+  const initInstall = output();
+</script>
+
+<template>
+  <button
+    class="pwa-install px-[2px] py-[2px] rounded font-bold w-full"
+    (click)="initInstall.emit()"
+  >
+    <span class="flex gap-4 items-center bg-[#1F212D] px-[14px] py-[10px]">
+      <i class="pi pi-download text-2xl"></i>
+      Install
+    </span>
+  </button>
+</template>
+
+<style>
+  .pwa-install,
+  .pwa-install:hover span {
+    background: rgb(191, 37, 185);
+    background: linear-gradient(
+      148deg,
+      rgba(191, 37, 185, 1) 23%,
+      rgba(146, 73, 194, 1) 48%,
+      rgba(119, 94, 200, 1) 76%,
+      rgba(86, 120, 207, 1) 86%,
+      rgba(38, 159, 216, 1) 96%,
+      rgba(0, 190, 224, 1) 100%
+    );
+  }
+</style>
diff --git a/angular-hub/src/app/components/navigation/Logo.analog b/angular-hub/src/app/components/navigation/Logo.analog
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { input } from '@angular/core';
+  import { RouterLink } from '@angular/router' with { analog: 'imports' };
+
+  const logoClass = input.required<string>();
+</script>
+
+<template class="contents">
+  <a class="flex items-center gap-2" routerLink="/">
+    <img [class]="logoClass()" src="/assets/images/logo.webp" alt="" />
+    <span class="title text-3xl"><ng-content /></span>
+  </a>
+</template>
diff --git a/angular-hub/src/app/components/navigation/Navigation.analog b/angular-hub/src/app/components/navigation/Navigation.analog
@@ -0,0 +1,209 @@
+<script lang="ts">
+  import { inject, signal, viewChild } from '@angular/core';
+  import { Sidebar } from 'primeng/sidebar';
+  import { PwaService } from '../../services/pwa.service';
+
+  import Logo from './Logo.analog' with { analog: 'imports' };
+  import NavigationItem from './NavigationItem.analog' with { analog: 'imports' };
+  import InstallPwaButton from './InstallPwaButton.analog' with { analog: 'imports' };
+
+  import {
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet,
+  } from '@angular/router' with { analog: 'imports' };
+  import { ButtonModule } from 'primeng/button' with { analog: 'imports' };
+  import { SidebarModule } from 'primeng/sidebar' with { analog: 'imports' };
+  import { DividerModule } from 'primeng/divider' with { analog: 'imports' };
+  import { IconFieldModule } from 'primeng/iconfield' with { analog: 'imports' };
+  import { InputIconModule } from 'primeng/inputicon' with { analog: 'imports' };
+  import { InputTextModule } from 'primeng/inputtext' with { analog: 'imports' };
+
+  const pwaService = inject(PwaService);
+
+  const sidebarVisible = signal(false);
+  const isInstallButtonVisible = pwaService.isInstallButtonVisible;
+
+  const sidebarRef = viewChild.required(Sidebar);
+
+  function closeCallback(e: Event) {
+    sidebarRef().close(e);
+  }
+</script>
+
+<template class="flex">
+  <nav
+    class="hidden min-w-72 px-8 pt-4 lg:flex flex-col items-center bg-[#20212C] drop-shadow-r-2xl"
+  >
+    <Logo logoClass="h-12">HUB</Logo>
+    <ul class="flex flex-col gap-2 mt-12">
+      <!-- Navbar menu content here -->
+      <NavigationItem to="/" (clicked)="sidebarVisible.set(false)">
+        <i class="pi pi-calendar text-2xl"></i>
+        Events
+      </NavigationItem>
+      <NavigationItem to="/communities" (clicked)="sidebarVisible.set(false)">
+        <i class="pi pi-users text-2xl"></i>
+        Communities
+      </NavigationItem>
+      <NavigationItem to="/podcasts" (clicked)="sidebarVisible.set(false)">
+        <i class="pi pi-microphone text-2xl"></i>
+        Podcasts
+      </NavigationItem>
+      <NavigationItem to="/callforpapers" (clicked)="sidebarVisible.set(false)">
+        <i class="pi pi-megaphone text-2xl"></i>
+        Call for papers
+      </NavigationItem>
+      <p-divider />
+      <NavigationItem
+        [external]="true"
+        to="https://angular-hub.com/api/v1/swagger"
+      >
+        <svg
+          fill="#000000"
+          width="24px"
+          height="24px"
+          viewBox="0 0 24 24"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>Swagger icon</title>
+          <path
+            fill="white"
+            d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c6.616 0 12-5.383 12-12S18.616 0 12 0zm0 1.144c5.995 0 10.856 4.86 10.856 10.856 0 5.995-4.86 10.856-10.856 10.856-5.996 0-10.856-4.86-10.856-10.856C1.144 6.004 6.004 1.144 12 1.144zM8.37 5.868a6.707 6.707 0 0 0-.423.005c-.983.056-1.573.517-1.735 1.472-.115.665-.096 1.348-.143 2.017-.013.35-.05.697-.115 1.038-.134.609-.397.798-1.016.83a2.65 2.65 0 0 0-.244.042v1.463c1.126.055 1.278.452 1.37 1.629.033.429-.013.858.015 1.287.018.406.073.808.156 1.2.259 1.075 1.307 1.435 2.575 1.218v-1.283c-.203 0-.383.005-.558 0-.43-.013-.591-.12-.632-.535-.056-.535-.042-1.08-.075-1.62-.064-1.001-.175-1.988-1.153-2.625.503-.37.868-.812.983-1.398.083-.41.134-.821.166-1.237.028-.415-.023-.84.014-1.25.06-.665.102-.937.9-.91.12 0 .235-.017.369-.027v-1.31c-.16 0-.31-.004-.454-.006zm7.593.009a4.247 4.247 0 0 0-.813.06v1.274c.245 0 .434 0 .623.005.328.004.577.13.61.494.032.332.031.669.064 1.006.065.669.101 1.347.217 2.007.102.544.475.95.941 1.283-.817.549-1.057 1.333-1.098 2.215-.023.604-.037 1.213-.069 1.822-.028.554-.222.734-.78.748-.157.004-.31.018-.484.028v1.305c.327 0 .627.019.927 0 .932-.055 1.495-.507 1.68-1.412.078-.498.124-1 .138-1.504.032-.461.028-.927.074-1.384.069-.715.397-1.01 1.112-1.057a.972.972 0 0 0 .199-.046v-1.463c-.12-.014-.204-.027-.291-.032-.536-.023-.804-.203-.937-.71a5.146 5.146 0 0 1-.152-.993c-.037-.618-.033-1.241-.074-1.86-.08-1.192-.794-1.753-1.887-1.786zm-6.89 5.28a.844.844 0 0 0-.083 1.684h.055a.83.83 0 0 0 .877-.78v-.046a.845.845 0 0 0-.83-.858zm2.911 0a.808.808 0 0 0-.834.78c0 .027 0 .05.004.078 0 .503.342.826.859.826.507 0 .826-.332.826-.853-.005-.503-.342-.836-.855-.831zm2.963 0a.861.861 0 0 0-.876.835c0 .47.378.849.849.849h.009c.425.074.853-.337.881-.83.023-.457-.392-.854-.863-.854z"
+          />
+        </svg>
+        Community API
+      </NavigationItem>
+      <NavigationItem
+        [external]="true"
+        to="https://github.com/angular-sanctuary/angular-hub"
+      >
+        <i class="pi pi-github text-2xl"></i>
+        Contribute
+      </NavigationItem>
+      @if (isInstallButtonVisible()) {
+        <li>
+          <InstallPwaButton (initInstall)="pwaService.installPwa()" />
+        </li>
+      }
+    </ul>
+  </nav>
+  <div class="flex-1">
+    <header
+      class="flex justify-start items-center gap-4 lg:hidden p-4 bg-[#20212C]"
+    >
+      <p-button
+        aria-label="Open sidebar menu"
+        class="flex-none lg:hidden"
+        (click)="sidebarVisible.set(true)"
+        [text]="true"
+        icon="pi pi-bars"
+      />
+      <Logo logoClass="h-8">ANGULAR HUB</Logo>
+      <!-- TODO
+      <p-iconField iconPosition="left">
+        <p-inputIcon styleClass="pi pi-search" />
+        <input type="text" pInputText placeholder="Search" />
+      </p-iconField>
+      <p-button label="Login" size="small" />
+      -->
+    </header>
+
+    <main class="pb-4 flex-1">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+
+  <p-sidebar
+    [visible]="sidebarVisible()"
+    (visibleChange)="sidebarVisible.set($event)"
+  >
+    <ng-template pTemplate="headless">
+      <nav
+        class="min-w-72 px-8 pt-4 flex flex-col items-center bg-[#20212C] drop-shadow-r-2xl h-full"
+      >
+        <p-button
+          class="close-button"
+          type="button"
+          (click)="closeCallback($event)"
+          icon="pi pi-times"
+          rounded="true"
+          outlined="true"
+          styleClass="h-2rem w-2rem"
+        />
+        <ul class="flex flex-col gap-2 mt-12">
+          <!-- Navbar menu content here -->
+
+          <NavigationItem to="/" (clicked)="sidebarVisible.set(false)">
+            <i class="pi pi-calendar text-2xl"></i>
+            Events
+          </NavigationItem>
+          <NavigationItem
+            to="/communities"
+            (clicked)="sidebarVisible.set(false)"
+          >
+            <i class="pi pi-users text-2xl"></i>
+            Communities
+          </NavigationItem>
+          <NavigationItem to="/podcasts" (clicked)="sidebarVisible.set(false)">
+            <i class="pi pi-microphone text-2xl"></i>
+            Podcasts
+          </NavigationItem>
+          <NavigationItem
+            to="/callforpapers"
+            (clicked)="sidebarVisible.set(false)"
+          >
+            <i class="pi pi-megaphone text-2xl"></i>
+            Call for papers
+          </NavigationItem>
+          <p-divider />
+          <NavigationItem
+            [external]="true"
+            to="https://angular-hub.com/api/v1/swagger"
+          >
+            <svg
+              fill="#000000"
+              width="24px"
+              height="24px"
+              viewBox="0 0 24 24"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Swagger icon</title>
+              <path
+                fill="white"
+                d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c6.616 0 12-5.383 12-12S18.616 0 12 0zm0 1.144c5.995 0 10.856 4.86 10.856 10.856 0 5.995-4.86 10.856-10.856 10.856-5.996 0-10.856-4.86-10.856-10.856C1.144 6.004 6.004 1.144 12 1.144zM8.37 5.868a6.707 6.707 0 0 0-.423.005c-.983.056-1.573.517-1.735 1.472-.115.665-.096 1.348-.143 2.017-.013.35-.05.697-.115 1.038-.134.609-.397.798-1.016.83a2.65 2.65 0 0 0-.244.042v1.463c1.126.055 1.278.452 1.37 1.629.033.429-.013.858.015 1.287.018.406.073.808.156 1.2.259 1.075 1.307 1.435 2.575 1.218v-1.283c-.203 0-.383.005-.558 0-.43-.013-.591-.12-.632-.535-.056-.535-.042-1.08-.075-1.62-.064-1.001-.175-1.988-1.153-2.625.503-.37.868-.812.983-1.398.083-.41.134-.821.166-1.237.028-.415-.023-.84.014-1.25.06-.665.102-.937.9-.91.12 0 .235-.017.369-.027v-1.31c-.16 0-.31-.004-.454-.006zm7.593.009a4.247 4.247 0 0 0-.813.06v1.274c.245 0 .434 0 .623.005.328.004.577.13.61.494.032.332.031.669.064 1.006.065.669.101 1.347.217 2.007.102.544.475.95.941 1.283-.817.549-1.057 1.333-1.098 2.215-.023.604-.037 1.213-.069 1.822-.028.554-.222.734-.78.748-.157.004-.31.018-.484.028v1.305c.327 0 .627.019.927 0 .932-.055 1.495-.507 1.68-1.412.078-.498.124-1 .138-1.504.032-.461.028-.927.074-1.384.069-.715.397-1.01 1.112-1.057a.972.972 0 0 0 .199-.046v-1.463c-.12-.014-.204-.027-.291-.032-.536-.023-.804-.203-.937-.71a5.146 5.146 0 0 1-.152-.993c-.037-.618-.033-1.241-.074-1.86-.08-1.192-.794-1.753-1.887-1.786zm-6.89 5.28a.844.844 0 0 0-.083 1.684h.055a.83.83 0 0 0 .877-.78v-.046a.845.845 0 0 0-.83-.858zm2.911 0a.808.808 0 0 0-.834.78c0 .027 0 .05.004.078 0 .503.342.826.859.826.507 0 .826-.332.826-.853-.005-.503-.342-.836-.855-.831zm2.963 0a.861.861 0 0 0-.876.835c0 .47.378.849.849.849h.009c.425.074.853-.337.881-.83.023-.457-.392-.854-.863-.854z"
+              />
+            </svg>
+            Community API
+          </NavigationItem>
+          <NavigationItem
+            [external]="true"
+            to="https://github.com/angular-sanctuary/angular-hub"
+          >
+            <i class="pi pi-github text-2xl"></i>
+            Contribute
+          </NavigationItem>
+          @if (isInstallButtonVisible()) {
+            <li>
+              <InstallPwaButton (initInstall)="pwaService.installPwa()" />
+            </li>
+          }
+        </ul>
+      </nav>
+    </ng-template>
+  </p-sidebar>
+</template>
+
+<style>
+  nav {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
+    clip-path: inset(0px -15px 0px 0px);
+  }
+
+  .close-button {
+    position: absolute;
+    right: 20px;
+  }
+</style>