🚀 Add CI to build and deploy to GH pages

Signed-off-by: Prajeen Govardhanam <[email protected]>

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy
+    environment: Cloudflare Pages
+    permissions:
+      contents: write
+      deployments: write
+      pages: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⚙️ Checkout
+        uses: actions/checkout@v4
+      - name: 🥖 Install Bun
+        uses: oven-sh/setup-bun@v1
+      - name: ⬇️ Install dependencies
+        run: bun install
+      - name: ✔️ Run Lint
+        run: bun run lint
+      - name: 🏗️ Build Website
+        run: bun run build
+      - name: 🚀 Deploy to GH Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: .output/public
+          cname: attoleap.com

app.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from "@solidjs/start/config";
 import UnoCSS from "unocss/vite";
 
 export default defineConfig({
+  ssr: true,
+  server: {
+    preset: "github-pages"
+  },
   vite: {
     plugins: [UnoCSS()]
   }

package.json

@@ -18,6 +18,7 @@
     "@unocss/reset": "^0.59.4",
     "solid-js": "^1.8.17",
     "unocss": "^0.59.4",
+    "unocss-preset-autoprefixer": "^0.0.7",
     "vinxi": "^0.3.11"
   },
   "engines": {
@@ -35,8 +36,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-solid": "^0.14.0",
     "lightningcss": "^1.25.1",
-    "prettier": "^3.3.1",
-    "unocss-preset-autoprefixer": "^0.0.7"
+    "prettier": "^3.3.1"
   },
   "eslintConfig": {
     "env": {

src/app.tsx

@@ -4,8 +4,8 @@ import "virtual:uno.css";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
-import Nav from "~/components/Nav";
 import { MetaProvider } from "@solidjs/meta";
+import Nav from "~/components/Nav";
 
 export default function App() {
   return (

src/components/Nav.tsx

@@ -6,16 +6,16 @@ export default function Nav() {
   const active = (path: string) =>
     path === location.pathname ? "text-color-gray-100" : "text-color-gray-400";
   return (
-    <nav class=":uno: bg-black w-full h-72px flex flex-row place-items-center justify-between px-16 py-8">
-      <div class=":uno: flex flex-row gap-4 place-items-center">
+    <nav class=":uno: h-72px w-full flex flex-row place-items-center justify-between bg-black px-16 py-8">
+      <div class=":uno: flex flex-row place-items-center gap-4">
         <a href="/">
-          <img width="32px" height="32px" src={logo} alt="Attoleap's white logo"></img>
+          <img width="32px" height="32px" src={logo} alt="Attoleap's white logo" />
         </a>
-        <h1 class=":uno: font-brand font-900 text-size-[24px]" text-color="white" tracking-wider>
+        <h1 class=":uno: text-size-[24px] font-900 font-brand" text-color="white" tracking-wider>
           attoleap
         </h1>
       </div>
-      <ul class=":uno: flex place-items-center gap-4 font-sans font-600 text-lg">
+      <ul class=":uno: flex place-items-center gap-4 text-lg font-600 font-sans">
         <li class={`:uno: ${active("/")}`}>
           <a href="/">Home</a>
         </li>

src/routes/[...404].tsx

@@ -5,9 +5,9 @@ export default function NotFound() {
   return (
     <>
       <Title>AttoLeap | 404 Page Not Found</Title>
-      <main class=":uno: bg-black h-[calc(100vh_-_72px)] font-sans text-center mx-auto text-gray-200 p-4">
-        <h1 class=":uno: max-6-xs text-6xl text-gray-100 font-thin uppercase my-16">Not Found</h1>
-        <p class=":uno: font-mono mt-8">Oops! Looks like you got lost in here</p>
+      <main class=":uno: mx-auto h-[calc(100vh_-_72px)] bg-black p-4 text-center text-gray-200 font-sans">
+        <h1 class=":uno: max-6-xs my-16 text-6xl text-gray-100 font-thin uppercase">Not Found</h1>
+        <p class=":uno: mt-8 font-mono">Oops! Looks like you got lost in here</p>
         <p class=":uno: my-4">
           <A href="/" class=":uno: text-orange-400 hover:underline">
             Home

src/routes/about.tsx

@@ -1,11 +1,11 @@
-import { MetaProvider, Title } from "@solidjs/meta";
+import { Title } from "@solidjs/meta";
 
 export default function About() {
   return (
     <>
       <Title>AttoLeap | About Us</Title>
-      <main class=":uno: h-[calc(100vh_-_72px)] bg-black grid place-items-center font-sans text-center px-[10%] md:px-[20%] text-gray-700 p-4">
-        <h1 class=":uno: font-bold tracking-wider text-3xl text-color-gray-100">
+      <main class=":uno: grid h-[calc(100vh_-_72px)] place-items-center bg-black p-4 px-[10%] text-center text-gray-700 font-sans md:px-[20%]">
+        <h1 class=":uno: text-3xl text-color-gray-100 font-bold tracking-wider">
           AttoLeap is a tech startup dedicated to providing innovative solutions for valuable
           customer problems. We as an organization are passionate about giving back to opensource
           community and make it thrive as much as we can.

src/routes/index.tsx

@@ -1,11 +1,11 @@
-import { MetaProvider, Title } from "@solidjs/meta";
+import { Title } from "@solidjs/meta";
 
 export default function Home() {
   return (
     <>
       <Title>AttoLeap | Leaping Beyond Boundaries</Title>
-      <main class=":uno: bg-black grid place-items-center h-[calc(100vh_-_72px)] my-auto p-4 font-sans text-center">
-        <h1 class=":uno: md:w-50vw font-700 text-4xl md:text-7xl line-height-relaxed tracking-wider md:line-height-[6rem] text-color-gray-100">
+      <main class=":uno: grid my-auto h-[calc(100vh_-_72px)] place-items-center bg-black p-4 text-center font-sans">
+        <h1 class=":uno: text-4xl text-color-gray-100 font-700 line-height-relaxed tracking-wider md:w-50vw md:text-7xl md:line-height-[6rem]">
           Leaping Beyond Boundaries
         </h1>
       </main>

uno.config.ts

@@ -1,5 +1,11 @@
-import { defineConfig, presetUno, presetWebFonts, transformerCompileClass, transformerDirectives } from "unocss";
-import presetAutoprefixer from 'unocss-preset-autoprefixer';
+import {
+  defineConfig,
+  presetUno,
+  presetWebFonts,
+  transformerCompileClass,
+  transformerDirectives
+} from "unocss";
+import presetAutoprefixer from "unocss-preset-autoprefixer";
 
 export default defineConfig({
   presets: [
@@ -14,8 +20,5 @@ export default defineConfig({
     }),
     presetAutoprefixer()
   ],
-  transformers: [
-    transformerDirectives(),
-    transformerCompileClass()
-  ]
+  transformers: [transformerDirectives(), transformerCompileClass()]
 });