docs: uwu

angular · May 3, 2024 · b9014de · b9014de
1 parent 6e1e70d
commit b9014de
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 54 deletions.
diff --git a/adev/src/app/app.component.html b/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>
diff --git a/adev/src/app/core/layout/navigation/navigation.component.html b/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+ -->

diff --git a/adev/src/app/core/layout/navigation/navigation.component.scss b/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 {

diff --git a/adev/src/app/core/layout/navigation/navigation.component.ts b/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'},

diff --git a/adev/src/app/features/home/home.component.html b/adev/src/app/features/home/home.component.html
diff --git a/adev/src/app/features/home/home.component.ts b/adev/src/app/features/home/home.component.ts
@@ -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();
  });

diff --git a/adev/src/assets/images/uwu.png b/adev/src/assets/images/uwu.png
diff --git a/adev/src/index.html b/adev/src/index.html
@@ -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,25 @@
  } else {
  documentClassList.add(LIGHT_MODE_CLASS_NAME);
  }
+
+ if(location.search.includes('uwu')) {
+ documentClassList.add('uwu');
+ }
  </script>
+ <style>
+ .uwu-logo {
+ display: none;
+ opacity: 0;
+ transition: opacity 1s, display 1s;
+ }
+ html.uwu .angular-logo {
+ display: none;
+ }
+ html.uwu .uwu-logo {
+ display: block !important;
+ opacity: 1;
+ }
+ </style>
 
  <meta charset="utf-8" />
  <title>Angular</title>