Update v1.1.0 (#17)

Features

- Add `404` page

Changes

- Refactor main buttons
- Update background effect
- Update website metadata
- Remove preview from README

Fixes

- Fix wrong swagger url
- Fix wrong scrollbar color

Author: LucJosin

README.md

@@ -8,7 +8,6 @@ This repository contains the source code required to build the [HawAPI](https://
 - [Dependencies](#dependencies)
 - [Setup](#usage)
 - [Scripts](#scripts)
-- [Preview](#preview)
 - [Contributing](#contributing)
 - [License](#license)
 
@@ -76,25 +75,6 @@ All scripts are run from the root of the project, from a terminal:
 | `yarn build-all`  | Build all production site to `./build/`            |
 | `yarn clean`      | Remove `./build/`                                  |
 
-> **Note** \
-> See [docs](https://github.com/HawAPI/docs) to check all docs scripts.
-
-## Preview
-
-<details>
-<summary>Home</summary>
-
-![Home](./assets/preview-home-min.png)
-
-</details>
-
-<details>
-<summary>Try it</summary>
-
-![Try it](./assets/preview-try-it-min.png)
-
-</details>
-
 ## Contributing
 
 You could help continuing its development by:

assets/preview-home-min.png

@@ -11,8 +11,9 @@
     border-right: 32rem solid transparent;
     border-top: 70rem solid red;
     filter: blur(120px);
+    top: 0;
     opacity: 0.15;
-    position: fixed;
+    position: absolute;
     pointer-events: none;
   }
 </style>

assets/preview-try-it-min.png

@@ -18,8 +18,8 @@ const {
   description = 'A Free and Open Source API for Stranger Things.',
   tags = 'stranger things, stranger, things, stranger-things, st1, st2, st3, st4, api, github, git, hawapi, haw api, haw-api, HawAPI/HawAPI, theproject id, theproject.id, hawapi.theproject.id, netflix, watch, rest, free, open source',
   author = 'LucJosin',
-  banner = '/images/banner.png',
-  icon = '/favicon.ico',
+  banner = Astro.url + 'images/banner.png',
+  icon = Astro.url + 'favicon.ico',
 } = Astro.props as Props;
 ---
 
@@ -40,9 +40,8 @@ const {
     <meta name="robots" content="index,follow" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content={author} />
-    <meta name="twitter:site" content={Astro.url} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content={'@' + author} />
     <meta name="twitter:domain" content={Astro.url} />
     <meta name="twitter:title" content={title + ' | ' + project} />
     <meta
@@ -59,7 +58,7 @@ const {
 
     <!-- Open Graph -->
     <meta property="og:url" content={Astro.url} />
-    <meta property="og:title" content={title} />
+    <meta property="og:title" content={title + ' | ' + project} />
     <meta property="og:site_name" content={project} />
     <meta property="og:description" content={description} />
     <meta property="og:type" content="website" />
@@ -171,7 +170,6 @@ const {
 
       :global(body) {
         margin: 0;
-        overflow: hidden;
       }
 
       :global(main) {
@@ -181,7 +179,6 @@ const {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        overflow: hidden;
       }
 
       :global(a) {
@@ -214,7 +211,35 @@ const {
       }
 
       :global(::-webkit-scrollbar-thumb) {
-        background-color: #fff;
+        background-color: var(--secondary-color);
+      }
+
+      :global(.btn) {
+        display: flex;
+        height: 2.5rem;
+        width: 8rem;
+        border: none;
+        border-radius: 5px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.5s;
+        border: 1px solid transparent;
+      }
+
+      :global(.btn-full) {
+        background-color: rgb(179, 2, 2);
+        color: white;
+      }
+
+      :global(.btn-full:hover) {
+        background-color: rgb(100, 2, 2);
+        color: white;
+      }
+
+      :global(.btn-border) {
+        border: 1px solid rgb(179, 2, 2);
+        background-color: transparent;
+        color: white;
       }
 
       @media (max-width: 1340px) {

src/components/core/BackgroundEffect.astro

@@ -0,0 +1,25 @@
+---
+import BackgroundEffect from '@components/core/BackgroundEffect.astro';
+import Layout from '@components/layouts/Layout.astro';
+---
+
+<Layout title="404">
+  <main>
+    <BackgroundEffect />
+    <h1 class="sw-effect-title">404</h1>
+    <p class="error-sub-title">This page could not be found.</p>
+    <a href="/" class="btn btn-full">Go Back</a>
+  </main>
+</Layout>
+
+<style>
+  body {
+    overflow: hidden;
+  }
+
+  .error-sub-title {
+    font-size: 1.1em;
+    margin: 0 0 1.2em 0;
+    text-align: center;
+  }
+</style>

src/components/layouts/Layout.astro

@@ -5,8 +5,7 @@ import Layout from '@components/layouts/Layout.astro';
 
 <script
   is:inline
-  src="https://cdn.statically.io/libs/typed.js/2.0.11/typed.min.js"
-></script>
+  src="https://cdn.statically.io/libs/typed.js/2.0.11/typed.min.js"></script>
 
 <Layout title="Home">
   <main>
@@ -27,13 +26,17 @@ import Layout from '@components/layouts/Layout.astro';
     </p>
 
     <div class="home-btns">
-      <a href="/docs/" class="hm-btn hm-btn-1">Docs</a>
-      <a href="/try-it/" class="hm-btn hm-btn-2">Try it</a>
+      <a href="/docs/" class="btn btn-full">Docs</a>
+      <a href="/try-it/" class="btn btn-border">Try it</a>
     </div>
   </main>
 </Layout>
 
 <style>
+  body {
+    overflow: hidden;
+  }
+
   .home-sub-title {
     font-size: 1.1em;
     margin: 0 0 1.2em 0;
@@ -50,34 +53,6 @@ import Layout from '@components/layouts/Layout.astro';
     font-family: Benguiat !important;
     white-space: normal;
   }
-
-  .hm-btn {
-    display: flex;
-    height: 2.5rem;
-    width: 8rem;
-    border: none;
-    border-radius: 5px;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.5s;
-    border: 1px solid transparent;
-  }
-
-  .hm-btn {
-    background-color: rgb(179, 2, 2);
-    color: white;
-  }
-
-  .hm-btn-1:hover {
-    background-color: rgb(100, 2, 2);
-    color: white;
-  }
-
-  .hm-btn-2 {
-    border: 1px solid rgb(179, 2, 2);
-    background-color: transparent;
-    color: white;
-  }
 </style>
 
 <script is:inline>

src/pages/404.astro

@@ -32,8 +32,7 @@ import Layout from '@components/layouts/Layout.astro';
 
 <script
   is:inline
-  src="https://unpkg.com/swagger-ui-dist@4.19.0/swagger-ui-bundle.js"
-></script>
+  src="https://unpkg.com/swagger-ui-dist@4.19.0/swagger-ui-bundle.js"></script>
 <script
   is:inline
   src="https://unpkg.com/swagger-ui-dist@4.19.0/swagger-ui-standalone-preset.js"
@@ -42,7 +41,7 @@ import Layout from '@components/layouts/Layout.astro';
   window.onload = function () {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const ui = SwaggerUIBundle({
-      url: 'http://localhost:8080/v3/api-docs',
+      url: 'https://hawapi.theproject.id/v3/api-docs',
       dom_id: '#swagger-ui',
       deepLinking: true,
       tagsSorter: 'alpha',