diff --git a/Readme.md b/Readme.md index 7fd8f43..e782e34 100644 --- a/Readme.md +++ b/Readme.md @@ -1,5 +1,11 @@ # Astro Deploy Starter +## Features + +- 🚀 Astro.js 4 +- 🐳 Docker integration +- 🍃 Tailwind CSS + ## How to use this template ```sh @@ -15,6 +21,14 @@ Update astro.config.mjs Update /src/\* +### Add shadcn/ui components + +Visit https://ui.shadcn.com/docs/ for a list of components + +```sh +pnpm dlx shadcn-ui@latest add componentName +``` + ### Start the Server Development Server: @@ -32,12 +46,6 @@ sudo docker build -t astro-deploy . docker run -d -p 1234:80 astro-deploy ``` -## Features - -- 🚀 Astro.js 4 -- 🐳 Docker integration -- 🍃 Tailwind CSS - ## 🧞 Commands All commands are run from the root of the project, from a terminal: diff --git a/astro.config.mjs b/astro.config.mjs index 3e5026f..f651a5d 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,16 @@ import { defineConfig } from 'astro/config'; -import tailwind from '@astrojs/tailwind'; +import react from '@astrojs/react'; import sitemap from '@astrojs/sitemap'; +import tailwind from '@astrojs/tailwind'; // https://astro.build/config export default defineConfig({ site: 'https://astro.deployn.de', - integrations: [tailwind(), sitemap()], + integrations: [ + react(), + sitemap(), + tailwind({ + applyBaseStyles: false, + }), + ], }); diff --git a/components.json b/components.json new file mode 100644 index 0000000..dda292b --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.mjs", + "css": "./src/styles/globals.css", + "baseColor": "zinc", + "cssVariables": false, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} diff --git a/package.json b/package.json index c120bc3..a1e0928 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@astrojs/check": "^0.5.5", + "@astrojs/react": "^3.0.10", "@astrojs/sitemap": "^3.1.1", "@astrojs/tailwind": "^5.1.0", "astro": "^4.4.4" @@ -27,15 +28,24 @@ "@commitlint/cz-commitlint": "^18.6.1", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", + "@types/react": "^18.2.58", + "@types/react-dom": "^18.2.19", "@vite-pwa/assets-generator": "^0.2.4", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", "commitizen": "^4.3.0", "cz-conventional-changelog": "^3.3.0", + "lucide-react": "^0.338.0", "prettier": "^3.2.5", "prettier-plugin-astro": "^0.13.0", "prettier-plugin-tailwindcss": "^0.5.11", "pwa-asset-generator": "^6.3.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "semantic-release": "^23.0.2", "tailwindcss": "^3.4.1", + "tailwind-merge": "^2.2.1", + "tailwindcss-animate": "^1.0.7", "typescript": "^5.3.3" }, "config": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13a8b11..664778b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@astrojs/check': specifier: ^0.5.5 version: 0.5.5(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.3.3) + '@astrojs/react': + specifier: ^3.0.10 + version: 3.0.10(@types/react-dom@18.2.19)(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.4) '@astrojs/sitemap': specifier: ^3.1.1 version: 3.1.1 @@ -34,15 +37,30 @@ devDependencies: '@semantic-release/git': specifier: ^10.0.1 version: 10.0.1(semantic-release@23.0.2) + '@types/react': + specifier: ^18.2.58 + version: 18.2.58 + '@types/react-dom': + specifier: ^18.2.19 + version: 18.2.19 '@vite-pwa/assets-generator': specifier: ^0.2.4 version: 0.2.4 + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.0 + version: 2.1.0 commitizen: specifier: ^4.3.0 version: 4.3.0(@types/node@20.11.20)(typescript@5.3.3) cz-conventional-changelog: specifier: ^3.3.0 version: 3.3.0(@types/node@20.11.20)(typescript@5.3.3) + lucide-react: + specifier: ^0.338.0 + version: 0.338.0(react@18.2.0) prettier: specifier: ^3.2.5 version: 3.2.5 @@ -55,12 +73,24 @@ devDependencies: pwa-asset-generator: specifier: ^6.3.1 version: 6.3.1 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) semantic-release: specifier: ^23.0.2 version: 23.0.2(typescript@5.3.3) + tailwind-merge: + specifier: ^2.2.1 + version: 2.2.1 tailwindcss: specifier: ^3.4.1 version: 3.4.1 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.1) typescript: specifier: ^5.3.3 version: 5.3.3 @@ -173,6 +203,26 @@ packages: prismjs: 1.29.0 dev: false + /@astrojs/react@3.0.10(@types/react-dom@18.2.19)(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.4): + resolution: {integrity: sha512-uGRIwKMAn7tva2vxXMyoVIGxWFr0rjZ8ZWIlkTG/vIpnAjD2nM8Cz6B8j7yzj176jvl6gZ6xTbTVPm09aeK0Yw==} + engines: {node: '>=18.14.1'} + peerDependencies: + '@types/react': ^17.0.50 || ^18.0.21 + '@types/react-dom': ^17.0.17 || ^18.0.6 + react: ^17.0.2 || ^18.0.0 + react-dom: ^17.0.2 || ^18.0.0 + dependencies: + '@types/react': 18.2.58 + '@types/react-dom': 18.2.19 + '@vitejs/plugin-react': 4.2.1(vite@5.1.4) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + ultrahtml: 1.5.3 + transitivePeerDependencies: + - supports-color + - vite + dev: false + /@astrojs/sitemap@3.1.1: resolution: {integrity: sha512-qPgdBIcDUaea98mTtLfi5z9oXZpzSjEn/kes70/Ex8FOZZ+DIHVKRYOLOtvy8p+FTXr/9oc7BjmIbTYmYLLJVg==} dependencies: @@ -384,6 +434,26 @@ packages: '@babel/helper-plugin-utils': 7.22.5 dev: false + /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.9): + resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.9 + '@babel/helper-plugin-utils': 7.22.5 + dev: false + + /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9): + resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.9 + '@babel/helper-plugin-utils': 7.22.5 + dev: false + /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9): resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} @@ -398,6 +468,13 @@ packages: '@babel/types': 7.23.9 dev: false + /@babel/runtime@7.23.9: + resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.1 + dev: true + /@babel/template@7.23.9: resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} engines: {node: '>=6.9.0'} @@ -1367,12 +1444,30 @@ packages: resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} dev: true + /@types/prop-types@15.7.11: + resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} + + /@types/react-dom@18.2.19: + resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==} + dependencies: + '@types/react': 18.2.58 + + /@types/react@18.2.58: + resolution: {integrity: sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==} + dependencies: + '@types/prop-types': 15.7.11 + '@types/scheduler': 0.16.8 + csstype: 3.1.3 + /@types/sax@1.2.7: resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} dependencies: '@types/node': 20.11.20 dev: false + /@types/scheduler@0.16.8: + resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} + /@types/unist@2.0.10: resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} dev: false @@ -1406,6 +1501,22 @@ packages: unconfig: 0.3.11 dev: true + /@vitejs/plugin-react@4.2.1(vite@5.1.4): + resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + dependencies: + '@babel/core': 7.23.9 + '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.9) + '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9) + '@types/babel__core': 7.20.5 + react-refresh: 0.14.0 + vite: 5.1.4(@types/node@20.11.20) + transitivePeerDependencies: + - supports-color + dev: false + /@volar/kit@2.0.4(typescript@5.3.3): resolution: {integrity: sha512-USRx/o0jKz7o8+lEKWMxWqbqvC46XFrf3IE6CZBYzRo9kM7RERQLwUYaoT2bOcHt5DQWublpnTgdgHMm37Gysg==} peerDependencies: @@ -2038,6 +2149,12 @@ packages: engines: {node: '>=8'} dev: false + /class-variance-authority@0.7.0: + resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==} + dependencies: + clsx: 2.0.0 + dev: true + /clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -2121,10 +2238,14 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx@2.0.0: + resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} + engines: {node: '>=6'} + dev: true + /clsx@2.1.0: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} engines: {node: '>=6'} - dev: false /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -2391,6 +2512,9 @@ packages: engines: {node: '>=4'} hasBin: true + /csstype@3.1.3: + resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + /cz-conventional-changelog@3.3.0(@types/node@20.11.20)(typescript@5.3.3): resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==} engines: {node: '>= 10'} @@ -3936,6 +4060,12 @@ packages: engines: {node: '>=0.10.0'} dev: true + /loose-envify@1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + dependencies: + js-tokens: 4.0.0 + /lru-cache@10.2.0: resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==} engines: {node: 14 || >=16.14} @@ -3952,6 +4082,14 @@ packages: dependencies: yallist: 4.0.0 + /lucide-react@0.338.0(react@18.2.0): + resolution: {integrity: sha512-Uq+vcn/gp6l01GpDH8SxY6eAvO6Ur2bSU39NxEEJt35OotnVCH5q26TZEVPtJf23gTAncXd3DJQqcezIm6HA7w==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: true + /magic-string@0.30.7: resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==} engines: {node: '>=12'} @@ -5391,6 +5529,26 @@ packages: minimist: 1.2.8 strip-json-comments: 2.0.1 + /react-dom@18.2.0(react@18.2.0): + resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} + peerDependencies: + react: ^18.2.0 + dependencies: + loose-envify: 1.4.0 + react: 18.2.0 + scheduler: 0.23.0 + + /react-refresh@0.14.0: + resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} + engines: {node: '>=0.10.0'} + dev: false + + /react@18.2.0: + resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + /read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: @@ -5470,6 +5628,10 @@ packages: strip-indent: 3.0.0 dev: true + /regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + dev: true + /registry-auth-token@5.0.2: resolution: {integrity: sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==} engines: {node: '>=14'} @@ -5731,6 +5893,11 @@ packages: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: false + /scheduler@0.23.0: + resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} + dependencies: + loose-envify: 1.4.0 + /section-matter@1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} @@ -6145,6 +6312,20 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /tailwind-merge@2.2.1: + resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==} + dependencies: + '@babel/runtime': 7.23.9 + dev: true + + /tailwindcss-animate@1.0.7(tailwindcss@3.4.1): + resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + tailwindcss: 3.4.1 + dev: true + /tailwindcss@3.4.1: resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==} engines: {node: '>=14.0.0'} @@ -6397,6 +6578,10 @@ packages: dev: true optional: true + /ultrahtml@1.5.3: + resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==} + dev: false + /unbzip2-stream@1.4.3: resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==} dependencies: diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..d084cca --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/pages/index.astro b/src/pages/index.astro index 781942e..a7bd7cd 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,3 +1,7 @@ +--- +import '@/styles/globals.css'; +--- + diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index d7fed1b..f03aedf 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,8 +1,32 @@ /** @type {import('tailwindcss').Config} */ export default { + darkMode: ['class'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + prefix: '', theme: { - extend: {}, + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px', + }, + }, + extend: { + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, + }, + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + }, + }, }, - plugins: [], + plugins: [require('tailwindcss-animate')], }; diff --git a/tsconfig.json b/tsconfig.json index 36cdf5c..ff2ad85 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,8 +3,11 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@src/*": ["*"] - } + "@src/*": ["*"], + "@/*": ["./src/*"] + }, + "jsx": "react-jsx", + "jsxImportSource": "react" }, "exclude": ["node_modules", "dist", ".github", ".vscode"] }