feat(press-release): tooltip and hero

Author: CaioRolla

apps/valor-software-site/src/assets/press-releases/rs-pack-rust-based-web-bundler/press-release-header.png

@@ -578,6 +578,44 @@ const ex: { [key: string]: { nameType: 'meta' | 'title', name: string, nameValue
             nameValue: 'title',
             content: 'Non-profit Organizations - Valor Software'
         }
+    ],
+    'press-release/rs-pack-rust-based-web-bundler': [
+        {
+            nameType: 'meta',
+            name: 'name',
+            nameValue: 'description',
+            content: 'The Rust-Based Web Bundler that Combines High Performance with webpack Interoperability'
+        },
+        {
+            nameType: 'meta',
+            name: 'property',
+            nameValue: 'og:title',
+            content: 'Announcing Rspack: A new and high-performance frontend bundler'
+        },
+        {
+            nameType: 'meta',
+            name: 'property',
+            nameValue: 'og:description',
+            content: 'The Rust-Based Web Bundler that Combines High Performance with webpack Interoperability'
+        },
+        {
+            nameType: 'meta',
+            name: 'property',
+            nameValue: 'twitter:title',
+            content: 'Announcing Rspack: A new and high-performance frontend bundler'
+        },
+        {
+            nameType: 'meta',
+            name: 'property',
+            nameValue: 'twitter:description',
+            content: 'The Rust-Based Web Bundler that Combines High Performance with webpack Interoperability'
+        },
+        {
+            nameType: 'title',
+            name: 'title',
+            nameValue: 'title',
+            content: 'Announcing Rspack: A new and high-performance frontend bundler'
+        }
     ]
 };
 
@@ -587,7 +625,8 @@ enum routeValues {
     services = 'services',
     articles = 'articles',
     projects = 'projects',
-    careers = 'careers'
+    careers = 'careers',
+    pressRelease = 'press-release',
 
 };
 
@@ -651,6 +690,14 @@ export class SeoService {
                 }
             }
 
+
+            if (value[0].path === 'press-release') {
+                const tags = this.metaList[`${value[0].path}/${value[1].path}`];
+                if (tags?.length) {
+                    this.addTags(tags);
+                }
+            }
+
             return '';
         }
 

libs/common-docs/src/services/seo.service.ts

@@ -61,7 +61,7 @@ <h2 class="!text-2xl !mt-9 !mb-5">About Valor Software</h2>
                 contributors, and created ngx-bootstrap (an Angular component library with over 300 thousand downloads a week).</p>
 
             <h2 class="!text-2xl !mt-9 !mb-5">"First Look" video</h2>
-            
+
             <div class="videoblock">
                 <div class="content">
                     <iframe src="https://www.youtube.com/embed/rgLMfSYpn5s"
@@ -77,23 +77,36 @@ <h2 class="!text-2xl !mt-9 !mb-5">Additional Links</h2>
 
             <div class="flex flex-wrap gap-8 lg:gap-0">
 
+
+
                 <div *ngFor="let link of additionalLinks; let firstLink = first; let lastLink = last"
                      [class.lg:pr-7]="firstLink"
                      [class.lg:pl-7]="lastLink"
                      [class.lg:px-7]="!firstLink && !lastLink"
                      [class.lg:border-l]="!firstLink"
                      class="border-[#36363A]">
-                    <a [href]="link.href"
+                    <a (mouseenter)="onAdditionalLinkMouseEnter(link.src)"
+                       (mouseleave)="onAdditionalLinkMouseLeave()"
+                       [href]="link.href"
                        target="_blank"
                        rel="noopener noreferrer"
-                       class="flex flex-col items-center justify-center w-16 h-16 bg-[#0D0D0E] rounded">
+                       class="flex flex-col items-center justify-center w-16 h-16 bg-[#0D0D0E] rounded relative">
                         <img class="!m-0 !h-8 !w-8 !w-auto"
                              [src]="link.src"
                              [alt]="link.alt">
+
+
+                        <div *ngIf="(activeTooltip$ | async) === link.src"
+                             class="absolute translate-y-[120%] mt-2 bottom-0 bg-light_grey_bg text-header_font_col text-base font-normal py-3 px-6 rounded-lg"> {{ link.alt }}</div>
+
                     </a>
+
+
+
                 </div>
 
 
+
             </div>
 
 

libs/route-pages/press-release/src/press-release.component.html

@@ -1,11 +1,17 @@
 import { Component } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: "press-release",
   templateUrl: "./press-release.component.html",
 })
 export class PressReleaseComponent {
+
+  private readonly _activeTooltip$ = new BehaviorSubject<string | null>(null);
+
+  public readonly activeTooltip$ = this._activeTooltip$.asObservable();
+
   public readonly additionalLinks = [
     { src: "assets/press-releases/icons/discord.svg", href: "http://bit.ly/3F2nyOX", alt: "Discord" },
     { src: "assets/press-releases/icons/github.svg", href: "https://github.com/web-infra-dev/rspack", alt: "Github" },
@@ -62,4 +68,12 @@ export class PressReleaseComponent {
       href: 'https://valor-software.com/'
     }
   ];
+
+  onAdditionalLinkMouseEnter(linkSrc: string): void {
+    this._activeTooltip$.next(linkSrc);
+  }
+
+  onAdditionalLinkMouseLeave(): void {
+    this._activeTooltip$.next(null);
+  }
 }