Skip to content

Commit 22cfafc

Browse files
mhasanincemhasanince
authored
Update latest packages and upgrade tailwindcss@4 (#9)
* Update latest packages * update tailwind and astro/tailwind * upgrade tailwind * format with prettier
1 parent f2e9698 commit 22cfafc

15 files changed

+1992
-2016
lines changed

‎.prettierrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
"tabWidth": 2,
1616
"useTabs": false,
1717
"embeddedLanguageFormatting": "auto",
18-
"plugins": ["prettier-plugin-astro"]
18+
"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
1919
}

‎astro.config.mjs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { defineConfig } from 'astro/config';
2-
import tailwind from '@astrojs/tailwind';
2+
3+
import tailwindcss from '@tailwindcss/vite';
34

45
// https://astro.build/config
56
export default defineConfig({
67
site: 'https://craftgate.github.io',
7-
integrations: [tailwind()],
8+
vite: { plugins: [tailwindcss()] },
89
});

‎package-lock.json‎

Lines changed: 1889 additions & 1928 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,22 @@
88
"build": "astro check && astro build",
99
"preview": "astro preview",
1010
"astro": "astro",
11-
"prettier": "prettier --write . --plugin=prettier-plugin-astro",
11+
"prettier": "prettier --write src",
1212
"lint": "eslint --ext .js,.astro src"
1313
},
1414
"dependencies": {
1515
"@astrojs/check": "^0.9.4",
16-
"@astrojs/tailwind": "^5.1.5",
17-
"astro": "^5.1.10",
18-
"tailwindcss": "^3.4.17",
19-
"typescript": "^5.7.3"
16+
"@tailwindcss/vite": "^4.1.3",
17+
"astro": "^5.6.1",
18+
"tailwindcss": "^4.1.3",
19+
"typescript": "^5.8.3"
2020
},
2121
"devDependencies": {
22-
"@typescript-eslint/parser": "^8.22.0",
22+
"@typescript-eslint/parser": "^8.29.1",
2323
"eslint": "^8.57.1",
2424
"eslint-plugin-astro": "^1.3.1",
25-
"prettier": "^3.4.2",
26-
"prettier-plugin-astro": "^0.14.1"
25+
"prettier": "^3.5.3",
26+
"prettier-plugin-astro": "^0.14.1",
27+
"prettier-plugin-tailwindcss": "^0.6.11"
2728
}
2829
}

‎src/components/footer.astro‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Image } from 'astro:assets';
33
---
44

55
<footer class="bg-black">
6-
<div class="container flex flex-wrap gap-4 items-center justify-between py-5">
6+
<div class="container flex flex-wrap items-center justify-between gap-4 py-5">
77
<a href="https://craftgate.io">
88
<Image src="/images/logo.svg" width={135} height={32} alt="Craftgate" />
99
</a>
@@ -12,7 +12,7 @@ import { Image } from 'astro:assets';
1212
<li>
1313
<a
1414
href="https://github.com/craftgate"
15-
class="flex gap-1.5 items-center"
15+
class="flex items-center gap-1.5"
1616
target="_blank"
1717
rel="noopener noreferrer"
1818
>
@@ -23,13 +23,13 @@ import { Image } from 'astro:assets';
2323
class="h-4 w-auto"
2424
alt="Craftgate Github"
2525
/>
26-
Github
26+
Github
2727
</a>
2828
</li>
2929
<li>
3030
<a
3131
href="https://twitter.com/craftgateio"
32-
class="flex gap-1.5 items-center"
32+
class="flex items-center gap-1.5"
3333
target="_blank"
3434
rel="noopener noreferrer"
3535
>
@@ -40,13 +40,13 @@ import { Image } from 'astro:assets';
4040
class="h-4 w-auto"
4141
alt="Craftgate Twitter"
4242
/>
43-
Twitter
43+
Twitter
4444
</a>
4545
</li>
4646
<li>
4747
<a
4848
href="https://www.linkedin.com/company/craftgate"
49-
class="flex gap-1.5 items-center"
49+
class="flex items-center gap-1.5"
5050
target="_blank"
5151
rel="noopener noreferrer"
5252
>
@@ -57,13 +57,13 @@ import { Image } from 'astro:assets';
5757
class="h-4 w-auto"
5858
alt="Craftgate Linkedin"
5959
/>
60-
Linkedin
60+
Linkedin
6161
</a>
6262
</li>
6363
<li>
6464
<a
6565
href="https://www.instagram.com/craftgateio"
66-
class="flex gap-1.5 items-center"
66+
class="flex items-center gap-1.5"
6767
target="_blank"
6868
rel="noopener noreferrer"
6969
>
@@ -74,13 +74,13 @@ import { Image } from 'astro:assets';
7474
class="h-4 w-auto"
7575
alt="Craftgate Instagram"
7676
/>
77-
Instagram
77+
Instagram
7878
</a>
7979
</li>
8080
<li>
8181
<a
8282
href="https://www.youtube.com/@craftgateio"
83-
class="flex gap-1.5 items-center"
83+
class="flex items-center gap-1.5"
8484
target="_blank"
8585
rel="noopener noreferrer"
8686
>
@@ -91,7 +91,7 @@ import { Image } from 'astro:assets';
9191
class="h-3.5 w-auto"
9292
alt="Craftgate Youtube"
9393
/>
94-
Youtube
94+
Youtube
9595
</a>
9696
</li>
9797
</ul>

‎src/components/header.astro‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,19 @@ import { Image } from 'astro:assets';
33
---
44

55
<header
6-
class="container flex flex-wrap gap-4 items-center justify-between py-5"
6+
class="container flex flex-wrap items-center justify-between gap-4 py-5"
77
>
88
<a href="https://craftgate.io">
9-
<Image src="/images/logo.svg" width={145} height={37} alt="Craftgate" />
9+
<Image
10+
src="/images/logo.svg"
11+
width={145}
12+
height={37}
13+
alt="Craftgate"
14+
loading="eager"
15+
/>
1016
</a>
1117
<nav>
12-
<ul class="flex gap-6 sm:gap-8 font-medium">
18+
<ul class="flex gap-6 font-medium sm:gap-8">
1319
<li>
1420
<a href="https://craftgate.github.io" class="whitespace-nowrap"
1521
>Open Source</a

‎src/components/repo-card.astro‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,34 @@ const { name, description, stargazers_count, html_url } = Astro.props;
99

1010
<a
1111
href={html_url}
12-
class="group flex flex-col gap-4 p-5 bg-card border border-white rounded-md"
12+
class="group bg-card flex flex-col gap-4 rounded-md border border-white p-5"
1313
target="_blank"
1414
rel="noopener noreferrer"
1515
>
16-
<div class="flex gap-3 items-center">
17-
<Image src="/images/bookmark.svg" width={16} height={16} alt="Bookmark" />
16+
<div class="flex items-center gap-3">
17+
<Image
18+
src="/images/bookmark.svg"
19+
width={16}
20+
height={16}
21+
alt="Bookmark"
22+
loading="eager"
23+
/>
1824
<h5 class="group-hover:underline">{name}</h5>
1925
<div
20-
class="text-xs text-tertiary bg-card border border-tertiary rounded-full py-1 px-2"
26+
class="text-tertiary bg-card border-tertiary rounded-full border px-2 py-1 text-xs"
2127
>
2228
Public
2329
</div>
2430
</div>
25-
<p class="text-sm text-tertiary">{description}</p>
26-
<div class="flex gap-2 items-center">
27-
<Image src="/images/star.svg" width={16} height={16} alt="Star" />
31+
<p class="text-tertiary text-sm">{description}</p>
32+
<div class="flex items-center gap-2">
33+
<Image
34+
src="/images/star.svg"
35+
width={16}
36+
height={16}
37+
alt="Star"
38+
loading="eager"
39+
/>
2840
{stargazers_count}
2941
</div>
3042
</a>

‎src/components/team-member-card.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ const { name, login, avatar_url, html_url } = Astro.props;
99

1010
<a
1111
href={html_url}
12-
class="group flex gap-4 items-center p-5 bg-card rounded-md"
12+
class="group bg-card flex items-center gap-4 rounded-md p-5"
1313
target="_blank"
1414
rel="noopener noreferrer"
1515
>
1616
<Image
1717
src={avatar_url}
1818
width={80}
1919
height={80}
20-
alt={name ?? ""}
20+
alt={name ?? ''}
2121
class="rounded-full"
2222
/>
2323
<div class="flex flex-col gap-1 text-xl">

‎src/layouts/layout.astro‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import Header from '@/components/header.astro';
33
import Footer from '@/components/footer.astro';
44
5+
import '@/styles/global.css';
6+
57
interface Props {
68
title: string;
79
description: string;
@@ -31,28 +33,13 @@ const { title, description } = Astro.props;
3133
<Footer />
3234
<div
3335
style="background: radial-gradient(74.81% 74.81% at 77.01% 30.21%, rgba(31, 195, 231, 0.84) 0%, #1F34E7 100%);"
34-
class="absolute w-[776px] h-[776px] opacity-40 blur-[125px] -top-40 -right-40 -z-10"
36+
class="absolute -top-40 -right-40 -z-10 h-[776px] w-[776px] opacity-40 blur-[125px]"
3537
>
3638
</div>
3739
<div
3840
style="background: radial-gradient(74.81% 74.81% at 77.01% 30.21%, rgba(31, 195, 231, 0.84) 0%, #1F34E7 100%);"
39-
class="absolute w-[760px] h-[760px] opacity-20 blur-[150px] -bottom-0 -left-80 -z-10"
41+
class="absolute -bottom-0 -left-80 -z-10 h-[760px] w-[760px] opacity-20 blur-[150px]"
4042
>
4143
</div>
4244
</body>
4345
</html>
44-
45-
<style is:global>
46-
@import url('https://fonts.googleapis.com/css2?&family=Rubik:wght@300;400;500&display=swap');
47-
48-
html {
49-
font-family: 'Rubik', system-ui, sans-serif;
50-
@apply antialiased text-[14px] sm:text-[16px];
51-
}
52-
body {
53-
@apply relative overflow-x-hidden bg-black text-white;
54-
}
55-
p {
56-
@apply leading-relaxed;
57-
}
58-
</style>

‎src/styles/global.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import url('https://fonts.googleapis.com/css2?&family=Rubik:wght@300;400;500&display=swap');
2+
3+
@import 'tailwindcss';
4+
5+
@theme {
6+
--font-family: 'Rubik', system-ui, sans-serif;
7+
8+
--color-tertiary: #cccccc;
9+
--color-card: #222225;
10+
11+
--breakpoint-*: initial;
12+
--breakpoint-xs: 425px;
13+
--breakpoint-sm: 640px;
14+
--breakpoint-md: 768px;
15+
--breakpoint-lg: 1024px;
16+
--breakpoint-xl: 1280px;
17+
}
18+
19+
@layer base {
20+
html {
21+
@apply font-family text-sm antialiased sm:text-base;
22+
}
23+
body {
24+
@apply relative overflow-x-hidden bg-black text-white;
25+
}
26+
}
27+
28+
@utility container {
29+
margin-inline: auto;
30+
padding-inline: 1rem;
31+
}

0 commit comments

Comments
 (0)