Update v1.3.0 (#20)

Features

- Add Container component
- Add Description component
- Add TextEffect component
- Add LinkBox component
- Add more responsivity to layout
- Add title to links components
- Add astro-rename to hash class names

Changes

- Fix Header on top
- Update 404 page location to match spring boot requirements
- Update dependencies
- Update package name
- Update settings and tsconfig
- Update README
- Update yarn.lock
- Move css to global file
- Make BackgroundEffect responsive
- Make Footer fixed
- Remove sdks page
- Remove main from 404 and index pages
- Remove style from Link component
- Replace Button with Link component
- Replace a tag with Link component
- Rename border color css variable
- Rename nav class names
- Rename nav class names

*Bump version to 1.3.0*
*Upgrade to yarn 4.X*

.gitignore

@@ -11,6 +11,14 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # environment variables
 .env

.vscode/settings.json

@@ -29,9 +29,6 @@
   "typescript.updateImportsOnFileMove.enabled": "always",
   "javascript.updateImportsOnFileMove.enabled": "always",
   "prettier.documentSelectors": ["**/*.astro"],
-  "[astro]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
   "eslint.validate": [
     "javascript",
     "javascriptreact",

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -5,7 +5,6 @@ This repository contains the source code required to build the [HawAPI](https://
 ## Topics
 
 - [Prerequisites](#prerequisites)
-- [Dependencies](#dependencies)
 - [Setup](#usage)
 - [Scripts](#scripts)
 - [Contributing](#contributing)
@@ -14,17 +13,9 @@ This repository contains the source code required to build the [HawAPI](https://
 ## Prerequisites
 
 - Text editor or IDE (VsCode, Subline, Noteped++)
-- Npm/Yarn
+- Yarn
   - [Astro](https://astro.build/) for [website](https://github.com/HawAPI/website) generation
 
-## Dependencies
-
-- [@astrojs/sitemap](https://www.npmjs.com/package/@astrojs/sitemap)
-- [astro](https://www.npmjs.com/package/astro)
-- [astro-compress](https://www.npmjs.com/package/astro-compress)
-- [eslint](https://www.npmjs.com/package/eslint)
-- [prettier](https://www.npmjs.com/package/prettier)
-
 ## Setup
 
 Step by step of how to run the application.

astro.config.mjs

@@ -2,6 +2,11 @@ import sitemap from '@astrojs/sitemap';
 import { defineConfig } from 'astro/config';
 
 import compress from 'astro-compress';
+import rename from 'astro-rename';
+
+import HashRenamer from './src/lib/hash-renamer';
+
+const renamer = new HashRenamer();
 
 // https://astro.build/config
 export default defineConfig({
@@ -19,7 +24,13 @@ export default defineConfig({
   // Astro sitemap.
   //
   // Ref: https://docs.astro.build/en/guides/integrations-guide/sitemap/
-  integrations: [sitemap(), compress()],
+  integrations: [
+    sitemap(),
+    rename({
+      rename: { except: ['title'], strategy: (key) => renamer.rename(key) },
+    }),
+    compress(),
+  ],
   // Listen on all addresses, including LAN and public addresses.
   //
   // Ref: https://docs.astro.build/en/reference/configuration-reference/#serverhost

package.json

@@ -1,24 +1,26 @@
 {
-  "name": "@hawapi/root",
-  "version": "1.2.0",
+  "name": "@hawapi/website",
+  "packageManager": "yarn@4.0.1",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
     "clean": "rm -rf ./build"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "astro": "^3.1.1",
-    "astro-compress": "^2.0.12",
+    "@astrojs/sitemap": "^3.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "astro": "^3.4.2",
+    "astro-compress": "^2.2.0",
     "astro-icon": "^0.8.1",
-    "eslint": "^8.49.0",
+    "astro-rename": "^1.1.1",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-astro": "^0.29.0",
+    "eslint-plugin-astro": "^0.29.1",
     "prettier": "^3.0.3",
-    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-astro": "^0.12.1",
     "svgo": "2.8.0"
   }
 }

src/components/core/BackgroundEffect.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <span class="background-effect"></span>
@@ -7,13 +8,20 @@
   .background-effect {
     width: 0px;
     height: 0px;
-    border-left: 32rem solid transparent;
-    border-right: 32rem solid transparent;
-    border-top: 70rem solid red;
+    border-left: 26.6vw solid transparent;
+    border-right: 26.6vw solid transparent;
+    border-top: 60vh solid red;
     filter: blur(120px);
     top: 0;
     opacity: 0.15;
     position: absolute;
     pointer-events: none;
   }
+
+  @media (max-width: 768px) {
+    .background-effect {
+      border-left: 50vw solid transparent;
+      border-right: 50vw solid transparent;
+    }
+  }
 </style>

src/components/core/Description.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  value?: string;
+  margin?: string;
+}
+
+const { value, margin = '1rem' } = Astro.props;
+---
+
+<p class="description-container">
+  {value ?? <slot />}
+</p>
+
+<style define:vars={{ margin }}>
+  .description-container {
+    text-align: center;
+    margin: var(--margin);
+  }
+</style>

src/components/core/Link.astro

@@ -0,0 +1,30 @@
+---
+interface Props {
+  name?: string;
+  title: string;
+  href: string;
+  isLocal?: boolean;
+  active?: boolean;
+  id?: string;
+  classes?: string[];
+}
+
+const { name, title, href, isLocal, id, classes } = Astro.props as Props;
+---
+
+<a
+  class:list={['link-item', classes]}
+  href={href}
+  rel={isLocal ? undefined : 'noopener noreferrer'}
+  target={isLocal ? undefined : '_blank'}
+  id={id}
+  title={title}
+>
+  {name ?? <slot />}
+</a>
+
+<style>
+  .link-item {
+    display: initial;
+  }
+</style>

src/components/core/LinkBox.astro

@@ -0,0 +1,50 @@
+---
+interface Props {
+  name: string;
+  title: string;
+  href: string;
+  isLocal?: boolean;
+  active?: boolean;
+  id?: string;
+}
+
+const { name, title, href, isLocal, active, id } = Astro.props as Props;
+---
+
+<a
+  class:list={['link-box', active ? 'active' : undefined]}
+  href={href}
+  rel={isLocal ? undefined : 'noopener noreferrer'}
+  target={isLocal ? undefined : '_blank'}
+  id={id}
+  title={title}
+>
+  {name}
+</a>
+
+<style>
+  .link-box {
+    display: flex;
+    height: 2.5rem;
+    width: 8rem;
+    border-radius: var(--border-radius);
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s;
+    cursor: pointer;
+    border: 1px solid rgb(179, 2, 2);
+    color: white;
+  }
+
+  .link-box:hover {
+    background-color: var(--secondary-color);
+  }
+
+  .active {
+    background-color: var(--secondary-color);
+  }
+
+  .active:hover {
+    background-color: rgb(151, 0, 0);
+  }
+</style>