remove tailwind, install unocss

nulfrost 943488c1 ab13a784

-15
astro.config.mjs
··· 1 - import { defineConfig } from "astro/config"; 2 - import tailwind from "@astrojs/tailwind"; 3 - 4 - import sitemap from "@astrojs/sitemap"; 5 - 6 - // https://astro.build/config 7 - export default defineConfig({ 8 - site: "https://danethe.dev", 9 - integrations: [ 10 - tailwind({ 11 - applyBaseStyles: false, 12 - }), 13 - sitemap(), 14 - ], 15 - });
+13
astro.config.ts
··· 1 + import { defineConfig } from "astro/config"; 2 + import sitemap from "@astrojs/sitemap"; 3 + import UnoCSS from "unocss/astro" 4 + 5 + export default defineConfig({ 6 + site: "https://dane.computer", 7 + integrations: [ 8 + UnoCSS({ 9 + injectReset: true 10 + }), 11 + sitemap(), 12 + ], 13 + });
bun.lockb

This is a binary file and will not be displayed.

+5 -3
package.json
··· 11 11 }, 12 12 "dependencies": { 13 13 "@astrojs/sitemap": "latest", 14 - "@astrojs/tailwind": "latest", 15 14 "@fontsource-variable/asap": "^5.0.9", 16 15 "@notionhq/client": "^2.2.10", 17 16 "@tailwindcss/typography": "^0.5.9", 18 - "astro": "latest", 19 - "tailwindcss": "^3.3.3" 17 + "astro": "latest" 18 + }, 19 + "devDependencies": { 20 + "@unocss/reset": "^0.58.0", 21 + "unocss": "^0.58.0" 20 22 } 21 23 }
-2
src/components/Meta.astro
··· 1 1 --- 2 - import "../styles/tailwind.css"; 3 - import "@fontsource-variable/asap"; 4 2 interface Props { 5 3 title: string; 6 4 description: string;
-35
src/components/Navbar.astro
··· 1 - --- 2 - const links = [ 3 - { path: "/blogs", label: "Blog" }, 4 - { path: "/bookmarks", label: "Bookmarks" }, 5 - { path: "/uses", label: "Uses" }, 6 - ]; 7 - --- 8 - 9 - <header class="px-3 mt-10 xl:px-0"> 10 - <nav 11 - class="flex w-full max-w-5xl mx-auto bg-snes-light-purple" 12 - aria-label="Main site navigation" 13 - > 14 - <a 15 - href="#maincontent" 16 - class="absolute -translate-y-[300%] left-2/4 focus-visible:-translate-y-[170%] duration-150 bg-snes-black text-snes-light-gray px-2 focus-visible:outline-snes-purple focus-visible:outline-4 focus-within:outline-dotted font-bold" 17 - > 18 - Skip to main content 19 - </a> 20 - <a 21 - href="/" 22 - class="border-2 border-white [border-style:outset] bg-snes-purple px-2 py-1 font-bold uppercase text-white text-xs active:[border-style:inset] link-focus" 23 - >Dane</a 24 - > 25 - <ul class="flex items-center gap-2 pr-4 ml-auto"> 26 - { 27 - links.map((link) => ( 28 - <li class="text-blue-800 underline hover:text-blue-600 link-focus"> 29 - <a href={link.path}>{link.label}</a> 30 - </li> 31 - )) 32 - } 33 - </ul> 34 - </nav> 35 - </header>
-2
src/layouts/BlogLayout.astro
··· 4 4 description: string; 5 5 } 6 6 7 - import Navbar from "../components/Navbar.astro"; 8 7 import Meta from "../components/Meta.astro"; 9 8 const { title, description } = Astro.props; 10 9 --- ··· 13 12 <html lang="en" class="font-sans" dir="ltr"> 14 13 <Meta title={title} description={description} /> 15 14 <body class="bg-snes-light-gray"> 16 - <Navbar /> 17 15 <main class="max-w-5xl px-3 mx-auto xl:px-0" id="maincontent"> 18 16 <h1 class="mt-4 mb-1 text-2xl font-bold text-snes-black"> 19 17 {title}
-2
src/layouts/Layout.astro
··· 1 1 --- 2 - import Navbar from "../components/Navbar.astro"; 3 2 import Meta from "../components/Meta.astro"; 4 3 interface Props { 5 4 title: string; ··· 13 12 <html lang="en" class="font-sans" dir="ltr"> 14 13 <Meta title={title} description={description} /> 15 14 <body class="bg-snes-light-gray"> 16 - <Navbar /> 17 15 <main class="max-w-5xl px-3 mx-auto xl:px-0" id="maincontent"> 18 16 <slot /> 19 17 </main>
-40
src/pages/bookmarks.astro
··· 1 - --- 2 - import Layout from "../layouts/Layout.astro"; 3 - import { Client } from "@notionhq/client"; 4 - 5 - const notion = new Client({ auth: import.meta.env.NOTION_INTEGRATION_TOKEN }); 6 - const databaseId = import.meta.env.NOTION_DATABASE_ID; 7 - 8 - const bookmarks = await notion.databases.query({ 9 - database_id: databaseId, 10 - }); 11 - --- 12 - 13 - <Layout 14 - title="Dane's site / Bookmarks" 15 - description="Articles or code snippets I've found on the web that are interesting." 16 - > 17 - <h1 class="mt-4 mb-4 text-2xl font-bold text-snes-black">Bookmarks</h1> 18 - <ul class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 auto-cols-fr"> 19 - { 20 - bookmarks.results.map((bookmark) => ( 21 - <li> 22 - <a 23 - href={bookmark?.properties?.URL?.url} 24 - target="_blank" 25 - rel="noreferrer noopener" 26 - aria-label={`${bookmark?.properties?.Title?.title[0].plain_text}, opens in a new tab`} 27 - class="[border-style:outset] border-2 border-white p-3 hover:[border-style:inset] focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-snes-purple focus-visible:outline-dashed focus-visible:underline hover:underline w-full h-full flex flex-col" 28 - > 29 - <h2 class="font-bold"> 30 - {bookmark?.properties?.Title?.title[0].plain_text} 31 - </h2> 32 - <p class="mt-auto text-sm"> 33 - {bookmark?.properties?.Author.rich_text[0]?.plain_text} 34 - </p> 35 - </a> 36 - </li> 37 - )) 38 - } 39 - </ul> 40 - </Layout>
+1 -53
src/pages/index.astro
··· 6 6 title="Dane's site / Home" 7 7 description="Hey, I'm Dane. A frontend/fullstack developer from Toronto that enjoys building cool and accessible websites using the latest web technologies." 8 8 > 9 - <div> 10 - <h1 class="mt-4 text-2xl font-bold text-snes-black">Howdy, I'm Dane</h1> 11 - <div class="my-3"></div> 12 - <p> 13 - A frontend/fullstack developer from Toronto that enjoys building cool and 14 - accessible websites using the latest web technologies. On my website 15 - you'll find things that I'm working on, my interests and maybe a blog post 16 - or two when I find the time to write. 17 - </p> 18 - <div class="my-3"></div> 19 - <p> 20 - In my spare time I enjoy playing video games with my friends, finding new 21 - places in the city to eat at, listening to music, skateboarding, biking, 22 - building insane website ideas and most importantly napping. 23 - </p> 24 - <div class="border-b-4 [border-style:double] border-snes-purple my-4"></div> 25 - <h2 class="text-lg font-bold"> 26 - Other places on the internet where you can find me: 27 - </h2> 28 - <ul class="mb-3 list-disc list-inside"> 29 - <li> 30 - <a 31 - href="https://www.linkedin.com/in/dmiller94/" 32 - target="_blank" 33 - aria-label="Dane's linkedin profile, opens in a new tab" 34 - class="text-blue-800 hover:underline link-focus" 35 - > 36 - Linkedin 37 - </a> 38 - </li> 39 - <li> 40 - <a 41 - rel="me" 42 - href="https://hachyderm.io/@dane" 43 - target="_blank" 44 - aria-label="Dane's mastodon profile, opens in a new tab" 45 - class="text-blue-800 hover:underline link-focus" 46 - > 47 - Mastodon 48 - </a> 49 - </li> 50 - <li> 51 - <a 52 - href="https://github.com/nulfrost" 53 - target="_blank" 54 - aria-label="Dane's github profile, opens in a new tab" 55 - class="text-blue-800 hover:underline link-focus" 56 - > 57 - Github 58 - </a> 59 - </li> 60 - </ul> 61 - </div> 9 + beep beep ima jeep 62 10 </Layout>
-34
src/pages/uses.astro
··· 1 - --- 2 - import Layout from "../layouts/Layout.astro"; 3 - --- 4 - 5 - <Layout 6 - title="Dane's site / Uses" 7 - description="Tech / Hardware that I use on a daily basis." 8 - > 9 - <h1 class="mt-4 text-2xl font-bold text-snes-black">Uses</h1> 10 - <p class="mb-8"> 11 - Here you'll find things I use on a day to day basis for my job or for 12 - personal use. I tend to change my set up a little bit as the years go on but 13 - most of this stuff stays the same. 14 - </p> 15 - <h2 class="text-lg font-bold text-snes-black">Hardware</h2> 16 - <ul class="mb-8 list-disc list-inside"> 17 - <li>Macbook Pro 2019 15 inch (Work)</li> 18 - <li>Macbook Air 2021 13 inch (Personal)</li> 19 - <li>Caldigit TS3 Plus</li> 20 - <li>NK65 Mechanical Keyboard</li> 21 - <ul class="pl-5 list-disc list-inside"> 22 - <li>Loobedswitches Gateron Milky Yellow Switches, Lubed</li> 23 - <li>CHERRY PROFILE CEMENT GREY JAPANESE PBT DYE-SUB KEYCAPS SET</li> 24 - </ul> 25 - </ul> 26 - <h2 class="text-lg font-bold text-snes-black">Software</h2> 27 - <ul class="list-disc list-inside"> 28 - <li>Visual Studio Code / Lazyvim</li> 29 - <li>Notion</li> 30 - <li>Google Chrome</li> 31 - <li>iTerm 2</li> 32 - <li>Docker</li> 33 - </ul> 34 - </Layout>
-17
src/styles/tailwind.css
··· 1 - @tailwind base; 2 - @tailwind utilities; 3 - @tailwind components; 4 - 5 - @layer base { 6 - :root { 7 - --snes-black: #211a21; 8 - --snes-light-gray: #cec9cc; 9 - --snes-dark-gray: #908a99; 10 - --snes-purple: #4f43ae; 11 - --snes-light-purple: #b5b6e4; 12 - } 13 - 14 - .link-focus { 15 - @apply focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-dashed focus-visible:outline-snes-black; 16 - } 17 - }
-22
tailwind.config.cjs
··· 1 - /** @type {import('tailwindcss').Config} */ 2 - 3 - const defaultTheme = require("tailwindcss/defaultTheme"); 4 - 5 - module.exports = { 6 - content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 7 - theme: { 8 - extend: { 9 - colors: { 10 - "snes-black": "var(--snes-black)", 11 - "snes-light-gray": "var(--snes-light-gray)", 12 - "snes-dark-gray": "var(--snes-dark-gray)", 13 - "snes-purple": "var(--snes-purple)", 14 - "snes-light-purple": "var(--snes-light-purple)", 15 - }, 16 - fontFamily: { 17 - sans: ["AsapVariable", ...defaultTheme.fontFamily.sans], 18 - }, 19 - }, 20 - }, 21 - plugins: [require("@tailwindcss/typography")], 22 - };
+4
uno.config.ts
··· 1 + import { defineConfig } from 'unocss' 2 + 3 + export default defineConfig({ 4 + })