feature: web in progess and fix urls

felipevogtf · Feb 25, 2024 · dd02c39 · dd02c39
1 parent e11f152
commit dd02c39
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 5 deletions.
diff --git a/src/components/Weakness.astro b/src/components/Weakness.astro
@@ -1,4 +1,6 @@
 ---
+import { getBaseUrl } from '@utils/baseUrl';
+
 interface Props {
   weakness: string[];
 }
@@ -34,7 +36,7 @@ const WEAK_IMGS: { [key: number]: string } = {
       weakness.map((weak, index) => (
         <div class="weak-container">
           <div class="weak">
-            <img src={import.meta.env.BASE_URL + WEAK_IMGS[index]} alt="" />
+            <img src={getBaseUrl() + WEAK_IMGS[index]} alt="" />
             <span class="weak__title">{WEAK_TEXTS[weak]}</span>
           </div>
         </div>
@@ -87,6 +89,7 @@ const WEAK_IMGS: { [key: number]: string } = {
   .weak img {
     min-width: 40px;
     max-width: 40px;
+    aspect-ratio: 4 / 3;
   }
 
   .weak-container:nth-child(even) {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -13,12 +13,20 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <meta name="description" content={description} />
   </head>
   <body>
+    <div class="webprogress">
+      <div class="webprogress__background">
+        <div class="webprogress__background2"></div>
+      </div>
+
+      <div class="webprogress__content">Web in Prgress!</div>
+    </div>
+
     <div class="content">
       <slot />
     </div>
@@ -68,4 +76,47 @@ const { title, description } = Astro.props;
       Courier New,
       monospace;
   }
+
+  .webprogress {
+    position: fixed;
+    margin: 20px;
+    bottom: 0;
+    right: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    height: 70px;
+    padding: 5px 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .webprogress__content {
+    position: relative;
+    color: white;
+    font-weight: bold;
+  }
+
+  .webprogress__background {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 5px;
+    transform: skew(-3deg, -0.3deg);
+    z-index: 0;
+  }
+
+  .webprogress__background2 {
+    background-color: black;
+    transform: skew(2deg, 0.2deg);
+    width: 100%;
+    height: 100%;
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,7 +7,10 @@ import { PersonaList } from '../components/PersonaList/PersonaList';
 const data: Personas = PERSONAS_ROYAL_DATA;
 ---
 
-<Layout title="Persona Dex" description="Persona 5 royal dex">
+<Layout
+  title="PersonaDex"
+  description="Unlock the secrets of the Persona world with our PersonaDex for Persona 5 Royal! Explore stats, weaknesses, strengths, and hidden powers of your favorite Personas. Dive into the mysterious universe of the game and uncover the hidden depths awaiting at every turn. Get ready to meet your allies and foes like never before!"
+>
   <main>
     <PersonaList data={data} client:visible />
   </main>

diff --git a/src/pages/persona/[key].astro b/src/pages/persona/[key].astro
@@ -4,6 +4,7 @@ import { PERSONAS_ROYAL_DATA } from '@data/personas.data';
 import Layout from '@layouts/Layout.astro';
 import Description from '@components/Description.astro';
 import Weakness from '@components/Weakness.astro';
+import { getBaseUrl } from '@utils/baseUrl';
 
 const { key } = Astro.params;
 
@@ -55,7 +56,7 @@ export function getStaticPaths() {
     </div>
 
     <div class="persona-detail__img">
-      <img src={import.meta.env.BASE_URL + data.img} alt="" />
+      <img src={getBaseUrl() + data.img} alt="" />
     </div>
 
     <div class="persona-detail__box">
@@ -169,14 +170,17 @@ export function getStaticPaths() {
     .persona-detail__img {
       grid-column: 2 / span 1;
       grid-row: 3;
+      aspect-ratio: 1;
     }
 
     .persona-detail__img img {
       max-width: 100%;
       object-fit: contain;
       display: block;
       margin: auto;
-      max-height: 500px;
+      max-height: 100%;
+
+      filter: drop-shadow(7px 4px 0px white);
     }
 
     .stat__name {