Merge pull request #57 from danieljancar/develop

feat: add og meta tags

.github/workflows/release.yml

@@ -53,6 +53,10 @@ jobs:
           mv dist/apps/frontend/browser/* dist/apps/frontend/
           rmdir dist/apps/frontend/browser
 
+      - name: Copy Social Media Preview Image
+        run: |
+          cp assets/previews/social-media-preview.png dist/apps/frontend/
+
       - name: Configure Git User
         run: |
           git config --global user.email "[email protected]"

apps/frontend/src/app/features/login/login.component.html

@@ -89,7 +89,7 @@
       Don't have an account?
       <a
         class="text-indigo-600 hover:underline cursor-pointer focus:outline-none focus:underline"
-        href="/register"
+        routerLink="/register"
         >Register</a
       >
     </p>

apps/frontend/src/app/features/login/login.component.ts

@@ -11,6 +11,7 @@ import { AuthService } from '../../core/auth.service'
 import { ErrorComponent } from '../../shared/feedback/error/error.component'
 import { LoadingComponent } from '../../shared/feedback/loading/loading.component'
 import { SuccessComponent } from '../../shared/feedback/success/success.component'
+import { RouterLink } from '@angular/router'
 
 @Component({
   selector: 'app-login',
@@ -23,6 +24,7 @@ import { SuccessComponent } from '../../shared/feedback/success/success.componen
     ErrorComponent,
     LoadingComponent,
     SuccessComponent,
+    RouterLink,
   ],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],

apps/frontend/src/app/features/register/register.component.html

@@ -153,7 +153,7 @@ <h1 class="font-bold">Your public and secret keys</h1>
       Already have an account?
       <a
         class="text-indigo-600 hover:underline cursor-pointer focus:outline-none focus:underline"
-        href="/login"
+        routerLink="/login"
         >Log in</a
       >
     </p>

apps/frontend/src/app/features/register/register.component.ts

@@ -8,7 +8,7 @@ import {
   Validators,
 } from '@angular/forms'
 import { AuthService } from '../../core/auth.service'
-import { Router } from '@angular/router'
+import { Router, RouterLink } from '@angular/router'
 import { ErrorComponent } from '../../shared/feedback/error/error.component'
 import { LoadingComponent } from '../../shared/feedback/loading/loading.component'
 import { SuccessComponent } from '../../shared/feedback/success/success.component'
@@ -24,6 +24,7 @@ import { SuccessComponent } from '../../shared/feedback/success/success.componen
     LoadingComponent,
     SuccessComponent,
     NgOptimizedImage,
+    RouterLink,
   ],
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css'],

apps/frontend/src/app/features/voting/results/results.component.html

@@ -49,7 +49,7 @@ <h2 class="font-bold">Your opinion?</h2>
           It looks like you didn't cast your vote yet. Give your opinion on this
           vote - every opinion matters!
           <a
-            [href]="'/voting/' + voteId"
+            routerLink="/voting/{{ voteId }}"
             class="hover:underline font-medium cursor-pointer text-gray-900 hover:text-gray-600 focus:outline-none focus:underline focus:text-gray-600"
             role="link"
             tabindex="0"

apps/frontend/src/app/features/voting/results/results.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterLink } from '@angular/router'
 import { SorobanRpc } from '@stellar/stellar-sdk'
 import { Keypair } from '@stellar/typescript-wallet-sdk'
 import { GetVoteResultsService } from '../../../core/stellar/getVoteResults.service'
@@ -22,7 +22,7 @@ import { ErrorComponent } from '../../../shared/feedback/error/error.component'
   standalone: true,
   templateUrl: './results.component.html',
   styleUrls: ['./results.component.css'],
-  imports: [LoadingComponent, ErrorComponent],
+  imports: [LoadingComponent, ErrorComponent, RouterLink],
 })
 export class ResultsComponent implements OnInit, OnDestroy {
   public hasAlreadyVoted = false

apps/frontend/src/app/shared/navigation/navbar/navbar.component.html

@@ -4,7 +4,7 @@
     class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
   >
     <div class="flex lg:flex-1">
-      <a class="-m-1.5 p-1.5" href="/">
+      <a class="-m-1.5 p-1.5" routerLink="/">
         <span class="sr-only">VoteVault</span>
         <img
           alt="VoteVault logo"
@@ -42,12 +42,12 @@
     <div class="hidden lg:flex lg:gap-x-12">
       <a
         class="text-sm font-semibold leading-6 text-gray-900 focus:ring-2 focus:ring-gray-500"
-        href="/"
+        routerLink="/"
         >Home</a
       >
       <a
         class="text-sm font-semibold leading-6 text-gray-900 focus:ring-2 focus:ring-gray-500"
-        href="/about"
+        routerLink="/about"
         >About</a
       >
     </div>
@@ -64,7 +64,7 @@
     <div class="hidden lg:flex lg:flex-1 lg:justify-end">
       <a
         class="text-sm font-semibold leading-6 text-gray-900 focus:ring-2 focus:ring-gray-500"
-        href="/login"
+        routerLink="/login"
       >
         Log in <span aria-hidden="true">&rarr;</span>
       </a>
@@ -87,7 +87,7 @@
       class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
     >
       <div class="flex items-center justify-between">
-        <a class="-m-1.5 p-1.5" href="/apps/frontend/public">
+        <a class="-m-1.5 p-1.5" routerLink="/">
           <span class="sr-only">VoteVault</span>
           <img
             alt="VoteVault logo"
@@ -126,14 +126,14 @@
             <a
               (click)="closeMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 focus:ring-2 focus:ring-gray-500"
-              href="/apps/frontend/public"
+              routerLink="/"
             >
               Home
             </a>
             <a
               (click)="closeMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 focus:ring-2 focus:ring-gray-500"
-              href="/about"
+              routerLink="/about"
             >
               About
             </a>
@@ -143,7 +143,7 @@
             <a
               (click)="closeMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 focus:ring-2 focus:ring-gray-500"
-              href="/login"
+              routerLink="/login"
             >
               Log in
             </a>

apps/frontend/src/app/shared/navigation/navbar/navbar.component.ts

@@ -1,13 +1,14 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { AuthService } from '../../../core/auth.service'
 import { Subscription } from 'rxjs'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
 import { LoadingComponent } from '../../feedback/loading/loading.component'
+import { RouterLink } from '@angular/router'
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage, LoadingComponent],
+  imports: [CommonModule, NgOptimizedImage, LoadingComponent, RouterLink],
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
 })

apps/frontend/src/index.html

@@ -6,12 +6,42 @@
       VoteVault - Anonymously vote on anything with Stellar Smart Contracts
     </title>
     <meta
-      content="An anounymous and straightforward voting platform built on Stellar Smart Contract for the Dev Challenge. VoteVault is a decentralized voting platform that allows users to create and vote on polls without the need for a central authority."
+      content="An anonymous and straightforward voting platform built on Stellar Smart Contract for the Dev Challenge. VoteVault is a decentralized voting platform that allows users to create and vote on polls without the need for a central authority."
       name="description"
     />
-    <base href="/" />
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <link href="favicon.ico" rel="icon" type="image/x-icon" />
+
+    <!-- Open Graph Meta Tags for Root -->
+    <meta
+      content="VoteVault - Anonymously vote on anything with Stellar Smart Contracts"
+      property="og:title"
+    />
+    <meta
+      content="VoteVault is a decentralized, anonymous voting platform built on Stellar Smart Contracts. Secure, transparent, and verifiable voting for everyone."
+      property="og:description"
+    />
+    <meta
+      content="https://vv.danieljancar.dev/social-media-preview.png"
+      property="og:image"
+    />
+    <meta content="https://vv.danieljancar.dev" property="og:url" />
+    <meta content="website" property="og:type" />
+
+    <!-- Twitter Card Meta Tags for Root -->
+    <meta content="summary_large_image" name="twitter:card" />
+    <meta
+      content="VoteVault - Anonymously vote on anything with Stellar Smart Contracts"
+      name="twitter:title"
+    />
+    <meta
+      content="VoteVault is a decentralized, anonymous voting platform built on Stellar Smart Contracts. Secure, transparent, and verifiable voting for everyone."
+      name="twitter:description"
+    />
+    <meta
+      content="https://vv.danieljancar.dev/social-media-preview.png"
+      name="twitter:image"
+    />
   </head>
   <body>
     <app-root></app-root>