angular-sanctuary · geromegrignon · May 31, 2024 · May 30, 2024 · May 30, 2024
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/install-pwa-button.analog b/angular-hub/src/app/components/navigation/install-pwa-button.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-item.analog b/angular-hub/src/app/components/navigation/navigation-item.analog
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { input, output } from '@angular/core';
+
+  import {
+    RouterLink,
+    RouterLinkActive,
+  } from '@angular/router' with { analog: 'imports' };
+  import { NgTemplateOutlet } from '@angular/common' with { analog: 'imports' };
+
+  const clicked = output();
+  const to = input.required<string>();
+  const external = input(false);
+</script>
+
+<template class="contents">
+  <ng-template #content><ng-content /></ng-template>
+
+  <li>
+    @if (external()) {
+      <a
+        class="flex gap-4 items-center px-4 py-3 rounded-xl font-bold"
+        [href]="to()"
+        target="_blank"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <a
+        class="flex gap-4 items-center px-4 py-3 rounded-xl font-bold"
+        routerLinkActive="sidebarActive"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [routerLink]="[to()]"
+        (click)="clicked.emit()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    }
+  </li>
+</template>
+
+<style>
+  a:hover,
+  .sidebarActive {
+    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/navigation.analog b/angular-hub/src/app/components/navigation/navigation.analog
@@ -0,0 +1,181 @@
+<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 './navigation-item.analog' with { analog: 'imports' };
+  import InstallPwaButton from './install-pwa-button.analog' with { analog: 'imports' };
+  import SwaggerIcon from './swagger-icon.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' };
+
+  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"
+      >
+        <SwaggerIcon />
+        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"
+          >
+            <SwaggerIcon />
+            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>