besaid.zone
Dane's personal website
dane.computer
remove tailwind, install unocss
+23
-225
-15
astro.config.mjs
-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
+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
bun.lockb
This is a binary file and will not be displayed.
+5
-3
package.json
+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
-2
src/components/Meta.astro
-2
src/layouts/BlogLayout.astro
-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
-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
-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
+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
-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
-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
-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
-
};