docs: uwu (angular#55666)

PR Close angular#55666

Author: JeanMeche

adev/src/app/app.component.html

@@ -1,11 +1,11 @@
 @defer (when isBrowser) {
-<adev-progress-bar />
+  <adev-progress-bar />
 }
 <button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
 
 <div class="adev-nav"></div>
 @if (displaySecondaryNav()) {
-<adev-secondary-navigation />
+  <adev-secondary-navigation />
 }
 <div class="docs-app-main-content">
   <!--
@@ -22,9 +22,9 @@
       }
     }
   }
-    <router-outlet />
+  <router-outlet />
 
   @if (displayFooter()) {
-  <footer adev-footer></footer>
+    <footer adev-footer></footer>
   }
 </div>

adev/src/app/core/layout/navigation/navigation.component.html

@@ -82,7 +82,8 @@
       >
         <a aria-label="Angular homepage" routerLink="/">
           <!-- Logo Symbol -->
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
+          @if(!isUwu) {
+          <svg class="angular-logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
             <g clip-path="url(#a)">
               <path
                 fill="url(#b)"
@@ -125,6 +126,14 @@
               </clipPath>
             </defs>
           </svg>
+        } @else {
+          <img
+            src="assets/images/uwu.png"
+            style="width: auto; margin: 0"
+            class="uwu-logo"
+            alt="Angular logo"
+            height="34"/>
+        }
         </a>
 
         <!-- Version picker for v18+ -->

adev/src/app/core/layout/navigation/navigation.component.scss

@@ -251,6 +251,10 @@
   }
 }
 
+.adev-nav-item--logo a {
+  height: 34px;
+}
+
 .adev-close-nav {
   display: none;
   @include mq.for-phone-only {

adev/src/app/core/layout/navigation/navigation.component.ts

@@ -27,7 +27,7 @@ import {
   isApple,
   IS_SEARCH_DIALOG_OPEN,
 } from '@angular/docs';
-import {NavigationEnd, Router, RouterLink} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router, RouterLink} from '@angular/router';
 import {filter, map, startWith} from 'rxjs/operators';
 import {DOCS_ROUTES, REFERENCE_ROUTES, TUTORIALS_ROUTES} from '../../../routes';
 import {GITHUB, MEDIUM, X, YOUTUBE} from '../../constants/links';
@@ -83,6 +83,9 @@ export class Navigation implements OnInit {
   readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
   readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
 
+  // We can't use the ActivatedRouter queryParams as we're outside the router outlet
+  readonly isUwu = 'location' in globalThis ? location.search.includes('uwu') : false;
+
   miniMenuPositions = [
     new ConnectionPositionPair(
       {originX: 'end', originY: 'center'},

adev/src/app/features/home/home.component.html

@@ -21,7 +21,7 @@ import {
   inject,
 } from '@angular/core';
 import {WINDOW, shouldReduceMotion, isIos} from '@angular/docs';
-import {RouterLink} from '@angular/router';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 
 import {injectAsync} from '../../core/services/inject-async';
 
@@ -48,8 +48,10 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
   private readonly ngZone = inject(NgZone);
   private readonly platformId = inject(PLATFORM_ID);
   private readonly window = inject(WINDOW);
+  private readonly activatedRoute = inject(ActivatedRoute);
 
   protected readonly tutorialFiles = TUTORIALS_HOMEPAGE_DIRECTORY;
+  protected readonly isUwu = 'uwu' in this.activatedRoute.snapshot.queryParams;
   private element!: HTMLDivElement;
   private homeAnimation?: HomeAnimation;
   private intersectionObserver: IntersectionObserver | undefined;
@@ -74,7 +76,7 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
       // at the end of the page, and to load the embedded editor.
       this.initIntersectionObserver();
 
-      if (this.isWebGLAvailable() && !shouldReduceMotion()) {
+      if (this.isWebGLAvailable() && !shouldReduceMotion() && !this.isUwu) {
         this.ngZone.runOutsideAngular(async () => {
           await this.loadHomeAnimation();
         });

adev/src/app/features/home/home.component.ts

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- We set all theme classes to allow critters to inline the theme styles and prevent flickering -->
 <html lang="en" class="docs-dark-mode docs-light-mode">
   <head>
@@ -24,7 +24,22 @@
       } else {
         documentClassList.add(LIGHT_MODE_CLASS_NAME);
       }
+
+      if(location.search.includes('uwu')) {
+        documentClassList.add('uwu');
+      }
     </script>
+    <style>
+      .uwu-logo {
+        display: none;
+      }
+      html.uwu .angular-logo {
+        display: none;
+      }
+      html.uwu .uwu-logo {
+        display: block !important;
+      }
+    </style>
 
     <meta charset="utf-8" />
     <title>Angular</title>