Merge pull request #1 from ArmoLab/try-4.0-and-tailand

Upgrades, use TailwindCSS, etc.
ArmoLab · Dec 30, 2023 · 2c1d8e5 · 2c1d8e5
2 parents 20ee9cd + a9eccb8
commit 2c1d8e5
Show file tree

Hide file tree

Showing 11 changed files with 2,602 additions and 1,772 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
-
+.idea/
 node_modules/
 dist/
+.astro/
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,6 +2,8 @@ import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import fs from "node:fs";
 import compress from "astro-compress";
+import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
 const {
   homepage: domain
 } = JSON.parse(fs.readFileSync("./package.json"));
@@ -12,5 +14,5 @@ export default defineConfig({
   site: domain,
   integrations: [sitemap({
     filter: page => page !== `${domain}/404.html` && page !== `${domain}/404/` && page !== `${domain}/404`
-  }), compress()]
-});
+  }), compress(), tailwind(), icon()]
+});
diff --git a/package.json b/package.json
@@ -13,12 +13,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.0.2",
-    "@iconify-json/bxl": "^1.1.7",
-    "astro": "^3.3.2",
+    "@astrojs/sitemap": "^3.0.3",
+    "@astrojs/tailwind": "^5.0.3",
+    "@iconify-json/simple-icons": "^1.1.86",
+    "astro": "^4.0.6",
     "astro-compress": "^2.0.15",
-    "astro-icon": "^0.8.1",
+    "astro-icon": "^1.0.1",
     "autoprefixer": "^10.4.16",
-    "sass": "^1.69.4"
+    "sass": "^1.69.4",
+    "tailwindcss": "^3.0.24"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
diff --git a/src/components/links.astro b/src/components/links.astro
@@ -1,51 +1,25 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 const LinkArray = [
     {
-        icon: "bxl:github",
+        icon: "simple-icons:github",
         link: "https://github.com/ArmoLab",
         desc: "ArmoLab"
     },
     {
-        icon: "bxl:telegram",
+        icon: "simple-icons:telegram",
         link: "https://t.me/ArmoLab",
         desc: "ArmoLab"
     }
 ]
 ---
-<div>
+<div class="flex gap-x-2.5 justify-center">
     {LinkArray.map((i) => (
-        <a class="link-item" href={i.link}>
-            <span class="icon">
+        <a class="flex items-center text-xl my-3 py-1.5 px-2 pr-3 rounded-full bg-LinkBG" href={i.link}>
+            <span class="pr-1.5 mr-1.5 ml-0.5 border-solid border-r border-r-gray-100">
                 <Icon name={i.icon} />
             </span>
             <span class="desc">{i.desc}</span>
         </a>
     ))}
 </div>
-
-<style lang="scss">
-    .link-item {
-        display: inline-flex;
-        align-items: center;
-        font-size: large;
-        background-color: #404040;
-        padding: 6px 8px;
-        padding-right: 12px;
-        border-radius: 50px;
-        .icon {
-            border-right-color: #909090;
-            border-right-width: 1px;
-            border-right-style: solid;
-            padding-right: 6px;
-            margin-right: 6px;
-        }
-        &:not(:last-child) {
-            margin-right: 10px;
-        }
-        &::after {
-            content: none;
-            display: none;
-        }
-    }
-</style>
diff --git a/src/components/typer.astro b/src/components/typer.astro
@@ -1,6 +1,11 @@
 ---
 ---
-<p>/* <span id="typer"></span> */</p>
+<p>/* 
+    <span class="
+        after:bg-white after:inline-block after:h-3.5 after:w-px after:mx-1 after:animate-pulse
+    " id="typer"></span>
+ */</p>
+
 <script>
     const textList = [
         "Welcome to the Armo Laboratory.",

diff --git a/src/icons/bxl.js b/src/icons/bxl.js
diff --git a/src/layout/main.astro b/src/layout/main.astro
@@ -1,8 +1,7 @@
 ---
-import "@assets/css/base.scss";
 ---
 
-<html lang="en">
+<html lang="en" class="min-h-screen">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/png" href="/favicon.png" />
@@ -12,7 +11,7 @@ import "@assets/css/base.scss";
 		<link rel="sitemap" href="/sitemap-index.xml">
 		<title>Home - ArmoLab</title>
 	</head>
-	<body>
+	<body class="min-h-screen flex items-center justify-center bg-BG text-Text">
         <slot />
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,10 +4,12 @@ import Typer from "@components/typer.astro"
 import Links from "@components/links.astro"
 ---
 <Layout>
-	<div class="main">
-		<img src="/favicon.png" alt="Armo Lab Favicon.">
-		<h1>
-			The <span>Armo Laboratory</span>
+	<div class="text-center w-5/6 max-w-5xl main">
+		<img class="w-64 h-64 mx-auto rounded-full border-gray-600 border-2 border-solid" src="/favicon.png" alt="Armo Lab Favicon.">
+		<h1 class="text-3xl font-semibold my-3">
+			The 
+			<span class="bg-clip-text text-transparent
+						 bg-gradient-to-r from-purple-500 to-pink-500">Armo Laboratory</span>
 		</h1>
 		<Typer />
 		<Links />
@@ -16,9 +18,6 @@ import Links from "@components/links.astro"
 
 <style lang="scss">
 	div.main {
-		text-align: center;
-		width: 85%;
-		max-width: 1000px;
 		animation: ZoomIn cubic-bezier(.25,.1,0,1) .75s 1 forwards;
 
 		@keyframes ZoomIn {
@@ -33,23 +32,5 @@ import Links from "@components/links.astro"
   				opacity: 1;
 			}
 		}
-		img {
-			width: 250px;
-			height: 250px;
-			border-radius: 50%;
-			border-color: #444444;
-			border-style: solid;
-			border-width: 2px;
-		}
-		h1 {
-			font-size: xxx-large;
-			font-weight: bold;
-			margin: 10px 0;
-	  		span {
-				background-clip: text;
-				color: transparent;
-				background-image: linear-gradient(45deg, #4d688f, #dea7cf);
-	  		}
- 		}
 	}
 </style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				"BG": "#1f1f1f",
+				"Text": "#f8f8ff",
+				"LinkBG": "#404040"
+			},
+		},
+	},
+	plugins: [],
+}