diff --git a/.astro/types.d.ts b/.astro/types.d.ts new file mode 100644 index 0000000..ff39d7b --- /dev/null +++ b/.astro/types.d.ts @@ -0,0 +1,178 @@ +declare module 'astro:content' { + interface Render { + '.mdx': Promise<{ + Content: import('astro').MarkdownInstance<{}>['Content']; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + }>; + } +} + +declare module 'astro:content' { + interface Render { + '.md': Promise<{ + Content: import('astro').MarkdownInstance<{}>['Content']; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + }>; + } +} + +declare module 'astro:content' { + type Flatten = T extends { [K: string]: infer U } ? U : never; + + export type CollectionKey = keyof AnyEntryMap; + export type CollectionEntry = Flatten; + + export type ContentCollectionKey = keyof ContentEntryMap; + export type DataCollectionKey = keyof DataEntryMap; + + type AllValuesOf = T extends any ? T[keyof T] : never; + type ValidContentEntrySlug = AllValuesOf< + ContentEntryMap[C] + >['slug']; + + export function getEntryBySlug< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + // Note that this has to accept a regular string too, for SSR + entrySlug: E + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + + export function getDataEntryById( + collection: C, + entryId: E + ): Promise>; + + export function getCollection>( + collection: C, + filter?: (entry: CollectionEntry) => entry is E + ): Promise; + export function getCollection( + collection: C, + filter?: (entry: CollectionEntry) => unknown + ): Promise[]>; + + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >(entry: { + collection: C; + slug: E; + }): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >(entry: { + collection: C; + id: E; + }): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + slug: E + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + collection: C, + id: E + ): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + + /** Resolve an array of entry references from the same collection */ + export function getEntries( + entries: { + collection: C; + slug: ValidContentEntrySlug; + }[] + ): Promise[]>; + export function getEntries( + entries: { + collection: C; + id: keyof DataEntryMap[C]; + }[] + ): Promise[]>; + + export function reference( + collection: C + ): import('astro/zod').ZodEffects< + import('astro/zod').ZodString, + C extends keyof ContentEntryMap + ? { + collection: C; + slug: ValidContentEntrySlug; + } + : { + collection: C; + id: keyof DataEntryMap[C]; + } + >; + // Allow generic `string` to avoid excessive type errors in the config + // if `dev` is not running to update as you edit. + // Invalid collection names will be caught at build time. + export function reference( + collection: C + ): import('astro/zod').ZodEffects; + + type ReturnTypeOrOriginal = T extends (...args: any[]) => infer R ? R : T; + type InferEntrySchema = import('astro/zod').infer< + ReturnTypeOrOriginal['schema']> + >; + + type ContentEntryMap = { + "blog": { +"10-essential-web-development-tools-for-building-stunning-websites.mdx": { + id: "10-essential-web-development-tools-for-building-stunning-websites.mdx"; + slug: "10-essential-web-development-tools-for-building-stunning-websites"; + body: string; + collection: "blog"; + data: InferEntrySchema<"blog"> +} & { render(): Render[".mdx"] }; +"essential-frontend-tools-for-astro-js-developers.mdx": { + id: "essential-frontend-tools-for-astro-js-developers.mdx"; + slug: "essential-frontend-tools-for-astro-js-developers"; + body: string; + collection: "blog"; + data: InferEntrySchema<"blog"> +} & { render(): Render[".mdx"] }; +"exploring-nodejs-development-trends-2024.mdx": { + id: "exploring-nodejs-development-trends-2024.mdx"; + slug: "exploring-nodejs-development-trends-2024"; + body: string; + collection: "blog"; + data: InferEntrySchema<"blog"> +} & { render(): Render[".mdx"] }; +"unleasing-the-power-of-astro-js-for-better-web-development.mdx": { + id: "unleasing-the-power-of-astro-js-for-better-web-development.mdx"; + slug: "unleasing-the-power-of-astro-js-for-better-web-development"; + body: string; + collection: "blog"; + data: InferEntrySchema<"blog"> +} & { render(): Render[".mdx"] }; +}; + + }; + + type DataEntryMap = { + + }; + + type AnyEntryMap = ContentEntryMap & DataEntryMap; + + export type ContentConfig = typeof import("../src/content/config.js"); +} diff --git a/.prettierignore b/.prettierignore index 7f5ec31..3158590 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,4 @@ +.astro .github dist node_modules diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e4834c..e188fe2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,23 @@ +# [1.15.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.15.0-beta.1...v1.15.0-beta.2) (2024-03-03) + + +### Features + +* **blog:** use responsive table in mdx blog ([e0f6525](https://github.com/deployn/astro-deploy/commit/e0f65256cd7eb3922ab402bfadd4799d90682ad3)) + +# [1.15.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.14.0...v1.15.0-beta.1) (2024-03-03) + + +### Bug Fixes + +* move type import into type-only import ([e92e713](https://github.com/deployn/astro-deploy/commit/e92e7139c1ed5265e08c13785306c7e3c5ccda5a)) + + +### Features + +* **blog:** add mdx blog functionality ([7607ff0](https://github.com/deployn/astro-deploy/commit/7607ff07fbfc1b10c232c9184170135cd082fd33)) +* **ui:** add navigation to header ([d8615eb](https://github.com/deployn/astro-deploy/commit/d8615eb1ee8dd7e389f906911619c756485e0ae5)) + # [1.14.0](https://github.com/deployn/astro-deploy/compare/v1.13.1...v1.14.0) (2024-03-02) diff --git a/Readme.md b/Readme.md index 3615c47..9b70743 100644 --- a/Readme.md +++ b/Readme.md @@ -9,6 +9,10 @@ A custom Astro.js template - ๐Ÿš€ Astro.js 4 - ๐Ÿณ Docker integration - ๐Ÿƒ Tailwind CSS +- ๐Ÿ–Š๏ธ MDX Blog +- โš›๏ธ React.js +- ๐Ÿ”๏ธ Alpine.js integration +- ๐Ÿ“˜ TypeScript ## How to use this template @@ -68,6 +72,7 @@ All commands are run from the root of the project, from a terminal: - [Astro.js Basic Example](https://github.com/withastro/astro/tree/main/examples/basics) - [Astro.js Docs](https://docs.astro.build/) +- [Astro Starter Kit](https://github.com/zankhq/astro-starter) - [Docker](https://www.docker.com/) - [Material-Tailwind](https://www.material-tailwind.com/) - [nginx](https://www.nginx.com/) diff --git a/astro.config.mjs b/astro.config.mjs index 551dbb9..3f32944 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,4 +1,6 @@ import { defineConfig } from 'astro/config'; +import alpinejs from '@astrojs/alpinejs'; +import mdx from '@astrojs/mdx'; import react from '@astrojs/react'; import sitemap from '@astrojs/sitemap'; import tailwind from '@astrojs/tailwind'; @@ -9,7 +11,9 @@ const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de'; export default defineConfig({ site: SITE_URL, integrations: [ + alpinejs(), icon(), + mdx(), react(), sitemap(), tailwind({ diff --git a/package.json b/package.json index 450e656..a6de8d0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "astro-deploy", "type": "module", - "version": "1.14.0", + "version": "1.15.0-beta.2", "description": "A custom Astro.js template", "private": true, "scripts": { @@ -16,13 +16,15 @@ "commit": "cz" }, "dependencies": { + "@astrojs/alpinejs": "^0.4.0", "@astrojs/check": "^0.5.6", + "@astrojs/mdx": "^2.1.1", "@astrojs/react": "^3.0.10", "@astrojs/sitemap": "^3.1.1", "@astrojs/tailwind": "^5.1.0", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-slot": "^1.0.2", - "astro": "^4.4.6", + "astro": "^4.4.9", "astro-icon": "^1.1.0" }, "devDependencies": { @@ -32,14 +34,17 @@ "@iconify-json/line-md": "^1.1.36", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", + "@tailwindcss/typography": "^0.5.10", + "@types/alpinejs": "^3.13.6", "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", "@vite-pwa/assets-generator": "^0.2.4", + "alpinejs": "^3.13.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "commitizen": "^4.3.0", "cz-conventional-changelog": "^3.3.0", - "lucide-react": "^0.343.0", + "lucide-react": "^0.344.0", "prettier": "^3.2.5", "prettier-plugin-astro": "^0.13.0", "prettier-plugin-tailwindcss": "^0.5.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae244cd..56f06f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,9 +5,15 @@ settings: excludeLinksFromLockfile: false dependencies: + '@astrojs/alpinejs': + specifier: ^0.4.0 + version: 0.4.0(@types/alpinejs@3.13.6)(alpinejs@3.13.5) '@astrojs/check': specifier: ^0.5.6 version: 0.5.6(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.3.3) + '@astrojs/mdx': + specifier: ^2.1.1 + version: 2.1.1(astro@4.4.9) '@astrojs/react': specifier: ^3.0.10 version: 3.0.10(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.4) @@ -16,7 +22,7 @@ dependencies: version: 3.1.1 '@astrojs/tailwind': specifier: ^5.1.0 - version: 5.1.0(astro@4.4.6)(tailwindcss@3.4.1) + version: 5.1.0(astro@4.4.9)(tailwindcss@3.4.1) '@radix-ui/react-dropdown-menu': specifier: ^2.0.6 version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0) @@ -24,8 +30,8 @@ dependencies: specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.61)(react@18.2.0) astro: - specifier: ^4.4.6 - version: 4.4.6(@types/node@20.11.24)(typescript@5.3.3) + specifier: ^4.4.9 + version: 4.4.9(@types/node@20.11.24)(typescript@5.3.3) astro-icon: specifier: ^1.1.0 version: 1.1.0 @@ -49,6 +55,12 @@ devDependencies: '@semantic-release/git': specifier: ^10.0.1 version: 10.0.1(semantic-release@23.0.2) + '@tailwindcss/typography': + specifier: ^0.5.10 + version: 0.5.10(tailwindcss@3.4.1) + '@types/alpinejs': + specifier: ^3.13.6 + version: 3.13.6 '@types/react': specifier: ^18.2.61 version: 18.2.61 @@ -58,6 +70,9 @@ devDependencies: '@vite-pwa/assets-generator': specifier: ^0.2.4 version: 0.2.4 + alpinejs: + specifier: ^3.13.5 + version: 3.13.5 class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -71,8 +86,8 @@ devDependencies: specifier: ^3.3.0 version: 3.3.0(@types/node@20.11.24)(typescript@5.3.3) lucide-react: - specifier: ^0.343.0 - version: 0.343.0(react@18.2.0) + specifier: ^0.344.0 + version: 0.344.0(react@18.2.0) prettier: specifier: ^3.2.5 version: 3.2.5 @@ -124,6 +139,14 @@ packages: '@jridgewell/trace-mapping': 0.3.22 dev: false + /@ampproject/remapping@2.3.0: + resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + dev: false + /@antfu/install-pkg@0.1.1: resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==} dependencies: @@ -134,6 +157,16 @@ packages: /@antfu/utils@0.7.7: resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==} + /@astrojs/alpinejs@0.4.0(@types/alpinejs@3.13.6)(alpinejs@3.13.5): + resolution: {integrity: sha512-68BY1CA0XuielLW3WdX2sfh9F4sSTnFqQ//IE9AditbiYJ77HJDb4uZx07pTFDtr1jOMU7lCvH+iS9gmNafM1g==} + peerDependencies: + '@types/alpinejs': ^3.0.0 + alpinejs: ^3.0.0 + dependencies: + '@types/alpinejs': 3.13.6 + alpinejs: 3.13.5 + dev: false + /@astrojs/check@0.5.6(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.3.3): resolution: {integrity: sha512-i7j5ogoSg/Bu2NV5zVvwCo9R4kGWXWsJDejxpCu9F7iNNlR333u8EwpP4bpeKASDtjOA1rXKo9ogUTEVlIAHqA==} hasBin: true @@ -217,6 +250,32 @@ packages: - supports-color dev: false + /@astrojs/mdx@2.1.1(astro@4.4.9): + resolution: {integrity: sha512-AgGFdE7HOGmoFooGvMSatkA9FiSKwyVW7ImHot/bXJ6uAbFfu6iG2ht18Cf1pT22Hda/6iSCGWusFvBv0/EnKQ==} + engines: {node: '>=18.14.1'} + peerDependencies: + astro: ^4.0.0 + dependencies: + '@astrojs/markdown-remark': 4.2.1 + '@mdx-js/mdx': 3.0.1 + acorn: 8.11.3 + astro: 4.4.9(@types/node@20.11.24)(typescript@5.3.3) + es-module-lexer: 1.4.1 + estree-util-visit: 2.0.0 + github-slugger: 2.0.0 + gray-matter: 4.0.3 + hast-util-to-html: 9.0.0 + kleur: 4.1.5 + rehype-raw: 7.0.0 + remark-gfm: 4.0.0 + remark-smartypants: 2.1.0 + source-map: 0.7.4 + unist-util-visit: 5.0.0 + vfile: 6.0.1 + transitivePeerDependencies: + - supports-color + dev: false + /@astrojs/prism@3.0.0: resolution: {integrity: sha512-g61lZupWq1bYbcBnYZqdjndShr/J3l/oFobBKPA3+qMat146zce3nz2kdO4giGbhYDt4gYdhmoBz0vZJ4sIurQ==} engines: {node: '>=18.14.1'} @@ -251,13 +310,13 @@ packages: zod: 3.22.4 dev: false - /@astrojs/tailwind@5.1.0(astro@4.4.6)(tailwindcss@3.4.1): + /@astrojs/tailwind@5.1.0(astro@4.4.9)(tailwindcss@3.4.1): resolution: {integrity: sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==} peerDependencies: astro: ^3.0.0 || ^4.0.0 tailwindcss: ^3.0.24 dependencies: - astro: 4.4.6(@types/node@20.11.24)(typescript@5.3.3) + astro: 4.4.9(@types/node@20.11.24)(typescript@5.3.3) autoprefixer: 10.4.17(postcss@8.4.35) postcss: 8.4.35 postcss-load-config: 4.0.2(postcss@8.4.35) @@ -320,7 +379,7 @@ packages: resolution: {integrity: sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==} engines: {node: '>=6.9.0'} dependencies: - '@ampproject/remapping': 2.2.1 + '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.23.5 '@babel/generator': 7.23.6 '@babel/helper-compilation-targets': 7.23.6 @@ -343,9 +402,9 @@ packages: resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 - '@jridgewell/gen-mapping': 0.3.4 - '@jridgewell/trace-mapping': 0.3.23 + '@babel/types': 7.24.0 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 dev: false @@ -1327,13 +1386,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.22 - /@jridgewell/gen-mapping@0.3.4: - resolution: {integrity: sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==} + /@jridgewell/gen-mapping@0.3.5: + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} dependencies: - '@jridgewell/set-array': 1.1.2 + '@jridgewell/set-array': 1.2.1 '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.23 + '@jridgewell/trace-mapping': 0.3.25 dev: false /@jridgewell/resolve-uri@3.1.2: @@ -1344,6 +1403,11 @@ packages: resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} engines: {node: '>=6.0.0'} + /@jridgewell/set-array@1.2.1: + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} + engines: {node: '>=6.0.0'} + dev: false + /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} @@ -1353,8 +1417,8 @@ packages: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 - /@jridgewell/trace-mapping@0.3.23: - resolution: {integrity: sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==} + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} dependencies: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 @@ -1367,6 +1431,36 @@ packages: call-bind: 1.0.7 dev: true + /@mdx-js/mdx@3.0.1: + resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==} + dependencies: + '@types/estree': 1.0.5 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdx': 2.0.11 + collapse-white-space: 2.1.0 + devlop: 1.1.0 + estree-util-build-jsx: 3.0.1 + estree-util-is-identifier-name: 3.0.0 + estree-util-to-js: 2.0.0 + estree-walker: 3.0.3 + hast-util-to-estree: 3.1.0 + hast-util-to-jsx-runtime: 2.3.0 + markdown-extensions: 2.0.0 + periscopic: 3.1.0 + remark-mdx: 3.0.1 + remark-parse: 11.0.0 + remark-rehype: 11.1.0 + source-map: 0.7.4 + unified: 11.0.4 + unist-util-position-from-estree: 2.0.0 + unist-util-stringify-position: 4.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.1 + transitivePeerDependencies: + - supports-color + dev: false + /@medv/finder@3.2.0: resolution: {integrity: sha512-JmU7JIBwyL8RAzefvzALT4sP2M0biGk8i2invAgpQmma/QgfsaqoHIvJ7S0YC8n9hUVG8X3Leul2nGa06PvhbQ==} dev: false @@ -2228,16 +2322,37 @@ packages: engines: {node: '>=18'} dev: true + /@tailwindcss/typography@0.5.10(tailwindcss@3.4.1): + resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.4.1 + dev: true + /@trysound/sax@0.2.0: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} dev: false + /@types/acorn@4.0.6: + resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} + dependencies: + '@types/estree': 1.0.5 + dev: false + + /@types/alpinejs@3.13.6: + resolution: {integrity: sha512-BMi1/2uQz7mp30VFn69SzjN7YwQ0QzE4Hn3RMBt4iMpQeasdbMiImv1f5yvK1bYmvjIyG/YFg+CgPxbjIXZk0g==} + /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/parser': 7.24.0 + '@babel/types': 7.24.0 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.5 @@ -2246,20 +2361,20 @@ packages: /@types/babel__generator@7.6.8: resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 dev: false /@types/babel__template@7.4.4: resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/parser': 7.24.0 + '@babel/types': 7.24.0 dev: false /@types/babel__traverse@7.20.5: resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 dev: false /@types/cheerio@0.22.35: @@ -2280,6 +2395,12 @@ packages: '@types/ms': 0.7.34 dev: false + /@types/estree-jsx@1.0.5: + resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} + dependencies: + '@types/estree': 1.0.5 + dev: false + /@types/estree@1.0.5: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: false @@ -2296,6 +2417,10 @@ packages: '@types/unist': 3.0.2 dev: false + /@types/mdx@2.0.11: + resolution: {integrity: sha512-HM5bwOaIQJIQbAYfax35HCKxx7a3KrK3nBtIqJgSOitivTD1y3oW9P3rxY9RkXYPUk7y/AjAohfHKmFpGE79zw==} + dev: false + /@types/minimist@1.2.5: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: true @@ -2495,6 +2620,14 @@ packages: resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==} dev: false + /@vue/reactivity@3.1.5: + resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==} + dependencies: + '@vue/shared': 3.1.5 + + /@vue/shared@3.1.5: + resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==} + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -2508,6 +2641,14 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dev: true + /acorn-jsx@5.3.2(acorn@8.11.3): + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + acorn: 8.11.3 + dev: false + /acorn@8.11.3: resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==} engines: {node: '>=0.4.0'} @@ -2556,6 +2697,11 @@ packages: uri-js: 4.4.1 dev: true + /alpinejs@3.13.5: + resolution: {integrity: sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==} + dependencies: + '@vue/reactivity': 3.1.5 + /ansi-align@3.0.1: resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} dependencies: @@ -2652,6 +2798,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /astring@1.8.6: + resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==} + hasBin: true + dev: false + /astro-icon@1.1.0: resolution: {integrity: sha512-Nksc09p7UuHeMcPNS9w1pKqRw3+wEmmh0A3FJW+FNXvqaeWI4RLvD1MCWErpY3Z5Cvad317rvLdik/Hg8GEk8Q==} dependencies: @@ -2662,8 +2813,8 @@ packages: - supports-color dev: false - /astro@4.4.6(@types/node@20.11.24)(typescript@5.3.3): - resolution: {integrity: sha512-kns2TtiMYTyDPgcvtaQjMfBhY/F/2+O3eSX4XWH13FFQW1hp7AcTXfGwq8SvJ14JNoU4bsKeJbaB9CxUN9ZQlQ==} + /astro@4.4.9(@types/node@20.11.24)(typescript@5.3.3): + resolution: {integrity: sha512-FTWhzKjao7rHHiF/CqPqPS18AFad+fmUcYUFhWWIsYETHcc9g0IIIiv6cHXUE7g6mEZf7ycAa+WdboeEHUhraQ==} engines: {node: '>=18.14.1', npm: '>=6.14.0'} hasBin: true dependencies: @@ -2783,8 +2934,8 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - /bare-events@2.2.0: - resolution: {integrity: sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==} + /bare-events@2.2.1: + resolution: {integrity: sha512-9GYPpsPFvrWBkelIhOhTWtkeZxVxZOdb3VnFTCzlOo3OjvmTvzLoZFUT8kNFACx0vJej6QPney1Cf9BvzCNE/A==} requiresBuild: true optional: true @@ -2792,7 +2943,7 @@ packages: resolution: {integrity: sha512-+CjmZANQDFZWy4PGbVdmALIwmt33aJg8qTkVjClU6X4WmZkTPBDxRHiBn7fpqEWEfF3AC2io++erpViAIQbSjg==} requiresBuild: true dependencies: - bare-events: 2.2.0 + bare-events: 2.2.1 bare-os: 2.2.0 bare-path: 2.1.0 streamx: 2.16.1 @@ -3002,6 +3153,10 @@ packages: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} dev: false + /character-reference-invalid@2.0.1: + resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} + dev: false + /chardet@0.7.0: resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==} dev: true @@ -3177,6 +3332,10 @@ packages: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} engines: {node: '>=6'} + /collapse-white-space@2.1.0: + resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -3832,6 +3991,40 @@ packages: hasBin: true dev: false + /estree-util-attach-comments@3.0.0: + resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==} + dependencies: + '@types/estree': 1.0.5 + dev: false + + /estree-util-build-jsx@3.0.1: + resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==} + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-walker: 3.0.3 + dev: false + + /estree-util-is-identifier-name@3.0.0: + resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} + dev: false + + /estree-util-to-js@2.0.0: + resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==} + dependencies: + '@types/estree-jsx': 1.0.5 + astring: 1.8.6 + source-map: 0.7.4 + dev: false + + /estree-util-visit@2.0.0: + resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/unist': 3.0.2 + dev: false + /estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: @@ -4394,6 +4587,29 @@ packages: zwitch: 2.0.4 dev: false + /hast-util-to-estree@3.1.0: + resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==} + dependencies: + '@types/estree': 1.0.5 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-attach-comments: 3.0.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.0 + mdast-util-mdx-jsx: 3.1.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 6.4.1 + space-separated-tokens: 2.0.2 + style-to-object: 0.4.4 + unist-util-position: 5.0.0 + zwitch: 2.0.4 + transitivePeerDependencies: + - supports-color + dev: false + /hast-util-to-html@9.0.0: resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==} dependencies: @@ -4411,6 +4627,28 @@ packages: zwitch: 2.0.4 dev: false + /hast-util-to-jsx-runtime@2.3.0: + resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==} + dependencies: + '@types/estree': 1.0.5 + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.0 + mdast-util-mdx-jsx: 3.1.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 6.4.1 + space-separated-tokens: 2.0.2 + style-to-object: 1.0.5 + unist-util-position: 5.0.0 + vfile-message: 4.0.2 + transitivePeerDependencies: + - supports-color + dev: false + /hast-util-to-parse5@8.0.0: resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} dependencies: @@ -4605,6 +4843,14 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dev: true + /inline-style-parser@0.1.1: + resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==} + dev: false + + /inline-style-parser@0.2.2: + resolution: {integrity: sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==} + dev: false + /inquirer@8.2.5: resolution: {integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==} engines: {node: '>=12.0.0'} @@ -4661,6 +4907,17 @@ packages: loose-envify: 1.4.0 dev: false + /is-alphabetical@2.0.1: + resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} + dev: false + + /is-alphanumerical@2.0.1: + resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} + dependencies: + is-alphabetical: 2.0.1 + is-decimal: 2.0.1 + dev: false + /is-arrayish@0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} dev: true @@ -4689,6 +4946,10 @@ packages: dependencies: hasown: 2.0.1 + /is-decimal@2.0.1: + resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} + dev: false + /is-docker@2.2.1: resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==} engines: {node: '>=8'} @@ -4719,6 +4980,10 @@ packages: dependencies: is-extglob: 2.1.1 + /is-hexadecimal@2.0.1: + resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} + dev: false + /is-inside-container@1.0.0: resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} engines: {node: '>=14.16'} @@ -4756,6 +5021,12 @@ packages: engines: {node: '>=12'} dev: false + /is-reference@3.0.2: + resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} + dependencies: + '@types/estree': 1.0.5 + dev: false + /is-stream@2.0.1: resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==} engines: {node: '>=8'} @@ -5049,6 +5320,10 @@ packages: resolution: {integrity: sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==} dev: true + /lodash.castarray@4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} + dev: true + /lodash.escaperegexp@4.1.2: resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==} dev: true @@ -5156,8 +5431,8 @@ packages: dependencies: yallist: 4.0.0 - /lucide-react@0.343.0(react@18.2.0): - resolution: {integrity: sha512-zDjzr5OlS86DJZNSy5igMx18T423LfEyZ6lxo82KpjCi8m5DPddl/OPLRDHyfs/TqZPh7C1ySPw4D6matfm6bQ==} + /lucide-react@0.344.0(react@18.2.0): + resolution: {integrity: sha512-6YyBnn91GB45VuVT96bYCOKElbJzUHqp65vX8cDcu55MQL9T969v4dhGClpljamuI/+KMO9P6w9Acq1CVQGvIQ==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 dependencies: @@ -5181,6 +5456,11 @@ packages: engines: {node: '>=8'} dev: true + /markdown-extensions@2.0.0: + resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} + engines: {node: '>=16'} + dev: false + /markdown-table@3.0.3: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: false @@ -5315,6 +5595,64 @@ packages: - supports-color dev: false + /mdast-util-mdx-expression@2.0.0: + resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==} + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.3 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + dev: false + + /mdast-util-mdx-jsx@3.1.0: + resolution: {integrity: sha512-A8AJHlR7/wPQ3+Jre1+1rq040fX9A4Q1jG8JxmSNp/PLPHg80A6475wxTp3KzHpApFH6yWxFotHrJQA3dXP6/w==} + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.3 + '@types/unist': 3.0.2 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + parse-entities: 4.0.1 + stringify-entities: 4.0.3 + unist-util-remove-position: 5.0.0 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.2 + transitivePeerDependencies: + - supports-color + dev: false + + /mdast-util-mdx@3.0.0: + resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==} + dependencies: + mdast-util-from-markdown: 2.0.0 + mdast-util-mdx-expression: 2.0.0 + mdast-util-mdx-jsx: 3.1.0 + mdast-util-mdxjs-esm: 2.0.1 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + dev: false + + /mdast-util-mdxjs-esm@2.0.1: + resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.3 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + dev: false + /mdast-util-phrasing@4.1.0: resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} dependencies: @@ -5489,6 +5827,67 @@ packages: micromark-util-types: 2.0.0 dev: false + /micromark-extension-mdx-expression@3.0.0: + resolution: {integrity: sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==} + dependencies: + '@types/estree': 1.0.5 + devlop: 1.1.0 + micromark-factory-mdx-expression: 2.0.1 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.2 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + dev: false + + /micromark-extension-mdx-jsx@3.0.0: + resolution: {integrity: sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==} + dependencies: + '@types/acorn': 4.0.6 + '@types/estree': 1.0.5 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + micromark-factory-mdx-expression: 2.0.1 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + vfile-message: 4.0.2 + dev: false + + /micromark-extension-mdx-md@2.0.0: + resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==} + dependencies: + micromark-util-types: 2.0.0 + dev: false + + /micromark-extension-mdxjs-esm@3.0.0: + resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==} + dependencies: + '@types/estree': 1.0.5 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.2 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.2 + dev: false + + /micromark-extension-mdxjs@3.0.0: + resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + dependencies: + acorn: 8.11.3 + acorn-jsx: 5.3.2(acorn@8.11.3) + micromark-extension-mdx-expression: 3.0.0 + micromark-extension-mdx-jsx: 3.0.0 + micromark-extension-mdx-md: 2.0.0 + micromark-extension-mdxjs-esm: 3.0.0 + micromark-util-combine-extensions: 2.0.0 + micromark-util-types: 2.0.0 + dev: false + /micromark-factory-destination@2.0.0: resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==} dependencies: @@ -5506,6 +5905,19 @@ packages: micromark-util-types: 2.0.0 dev: false + /micromark-factory-mdx-expression@2.0.1: + resolution: {integrity: sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==} + dependencies: + '@types/estree': 1.0.5 + devlop: 1.1.0 + micromark-util-character: 2.1.0 + micromark-util-events-to-acorn: 2.0.2 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.2 + dev: false + /micromark-factory-space@2.0.0: resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==} dependencies: @@ -5578,6 +5990,19 @@ packages: resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==} dev: false + /micromark-util-events-to-acorn@2.0.2: + resolution: {integrity: sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==} + dependencies: + '@types/acorn': 4.0.6 + '@types/estree': 1.0.5 + '@types/unist': 3.0.2 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + vfile-message: 4.0.2 + dev: false + /micromark-util-html-tag-name@2.0.0: resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==} dev: false @@ -5825,8 +6250,8 @@ packages: '@types/nlcst': 1.0.4 dev: false - /node-abi@3.55.0: - resolution: {integrity: sha512-uPEjtyh2tFEvWYt4Jw7McOD5FPcHkcxm/tHZc5PWaDB3JYq0rGFUbgaAK+CT5pYpQddBfsZVWI08OwoRfdfbcQ==} + /node-abi@3.56.0: + resolution: {integrity: sha512-fZjdhDOeRcaS+rcpve7XuwHBmktS1nS1gzgghwKUQQ8nTy2FdSDr6ZT8k6YhvlJeHmmQMYiT/IH9hfco5zeW2Q==} engines: {node: '>=10'} requiresBuild: true dependencies: @@ -6190,6 +6615,19 @@ packages: callsites: 3.1.0 dev: true + /parse-entities@4.0.1: + resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==} + dependencies: + '@types/unist': 2.0.10 + character-entities: 2.0.2 + character-entities-legacy: 3.0.0 + character-reference-invalid: 2.0.1 + decode-named-character-reference: 1.0.2 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + is-hexadecimal: 2.0.1 + dev: false + /parse-json@4.0.0: resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==} engines: {node: '>=4'} @@ -6316,6 +6754,14 @@ packages: /pend@1.2.0: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} + /periscopic@3.1.0: + resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} + dependencies: + '@types/estree': 1.0.5 + estree-walker: 3.0.3 + is-reference: 3.0.2 + dev: false + /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -6407,6 +6853,14 @@ packages: postcss: 8.4.35 postcss-selector-parser: 6.0.15 + /postcss-selector-parser@6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + /postcss-selector-parser@6.0.15: resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==} engines: {node: '>=4'} @@ -6425,8 +6879,8 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 - /prebuild-install@7.1.1: - resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==} + /prebuild-install@7.1.2: + resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==} engines: {node: '>=10'} hasBin: true requiresBuild: true @@ -6437,7 +6891,7 @@ packages: minimist: 1.2.8 mkdirp-classic: 0.5.3 napi-build-utils: 1.0.2 - node-abi: 3.55.0 + node-abi: 3.56.0 pump: 3.0.0 rc: 1.2.8 simple-get: 4.0.1 @@ -6851,6 +7305,15 @@ packages: - supports-color dev: false + /remark-mdx@3.0.1: + resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==} + dependencies: + mdast-util-mdx: 3.0.0 + micromark-extension-mdxjs: 3.0.0 + transitivePeerDependencies: + - supports-color + dev: false + /remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} dependencies: @@ -7166,7 +7629,7 @@ packages: color: 4.2.3 detect-libc: 2.0.2 node-addon-api: 6.1.0 - prebuild-install: 7.1.1 + prebuild-install: 7.1.2 semver: 7.6.0 simple-get: 4.0.1 tar-fs: 3.0.5 @@ -7297,6 +7760,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /source-map@0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: false + /space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} dev: false @@ -7363,7 +7831,7 @@ packages: fast-fifo: 1.3.2 queue-tick: 1.0.1 optionalDependencies: - bare-events: 2.2.0 + bare-events: 2.2.1 /string-width@4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} @@ -7468,6 +7936,18 @@ packages: engines: {node: '>=8'} dev: true + /style-to-object@0.4.4: + resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==} + dependencies: + inline-style-parser: 0.1.1 + dev: false + + /style-to-object@1.0.5: + resolution: {integrity: sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==} + dependencies: + inline-style-parser: 0.2.2 + dev: false + /sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -7881,12 +8361,25 @@ packages: array-iterate: 2.0.1 dev: false + /unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + dependencies: + '@types/unist': 3.0.2 + dev: false + /unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} dependencies: '@types/unist': 3.0.2 dev: false + /unist-util-remove-position@5.0.0: + resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} + dependencies: + '@types/unist': 3.0.2 + unist-util-visit: 5.0.0 + dev: false + /unist-util-stringify-position@3.0.3: resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} dependencies: diff --git a/src/components/blog/Table.astro b/src/components/blog/Table.astro new file mode 100644 index 0000000..f1aaa4d --- /dev/null +++ b/src/components/blog/Table.astro @@ -0,0 +1,9 @@ +--- + +--- + +
+ + +
+
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro index ebc529e..dec416a 100644 --- a/src/components/layout/Footer.astro +++ b/src/components/layout/Footer.astro @@ -1,8 +1,5 @@ --- -import { Image } from 'astro:assets'; import { Icon } from 'astro-icon/components'; - -import logoImage from '@/assets/images/logo.png'; ---
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index cee8b37..3642ed9 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -3,6 +3,11 @@ import { Image } from 'astro:assets'; import { ModeToggle } from '@/components/ModeToggle'; import logoImage from '@/assets/images/logo.png'; + +const navLinks = [ + { href: '/', label: 'Home' }, + { href: '/blog/', label: 'Blog' }, +]; ---
{ + this.open = value < 640 ? false : true; + }); + window.addEventListener('resize', () => { + this.$nextTick(() => { + this.windowWidth = window.innerWidth; + }); + }); + } +}`} + x-init="init()" class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
+ class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
- + +
+ + +
+
+
+
diff --git a/src/content/blog/10-essential-web-development-tools-for-building-stunning-websites.mdx b/src/content/blog/10-essential-web-development-tools-for-building-stunning-websites.mdx new file mode 100644 index 0000000..f4eee4b --- /dev/null +++ b/src/content/blog/10-essential-web-development-tools-for-building-stunning-websites.mdx @@ -0,0 +1,109 @@ +--- +title: '10 Essential Web Development Tools for Building Stunning Websites' +--- + +Are you ready to elevate your web development game and build stunning websites that captivate your audience? In this blog post, we're diving into the world of web development tools that are essential for creating top-notch websites. From front-end tools that help you craft interactive user interfaces to backend tools that ensure seamless functionality, we've got you covered. Discover how optimization tools can boost your website's performance, visual design tools can make your site stand out, and collaborative tools can streamline your projects for maximum efficiency. Stay tuned as we unveil the must-have tools that will take your web development skills to the next level and help you create websites that shine in the digital landscape + +## Top Front-End Development Tools for Interactive User Interfaces + +When it comes to building stunning websites with interactive user interfaces, having the right front-end development tools can make all the difference. These tools are essential for web developers looking to create visually appealing and engaging websites that keep users coming back for more. + +1. **Code Editors**: Tools like Visual Studio Code, Sublime Text, and Atom are indispensable for writing and editing code efficiently. They offer features like syntax highlighting, auto-completion, and error checking to streamline the coding process. + +2. **CSS Preprocessors**: Sass and Less are popular CSS preprocessors that allow developers to write more maintainable and scalable CSS code. They offer features like variables, mixins, and nested rules, making styling web pages a breeze. + +3. **JavaScript Frameworks**: Frameworks like React, Angular, and Vue.js are essential for building dynamic and interactive user interfaces. They provide components, state management, and routing capabilities that simplify the development of complex web applications. + +4. **Task Runners**: Tools like Gulp and Webpack automate repetitive tasks like minification, compilation, and optimization of code. They help streamline the development workflow and improve the performance of web applications. + +5. **Browser Developer Tools**: Every web developer should be familiar with the developer tools built into browsers like Chrome and Firefox. These tools allow developers to inspect and debug web pages in real-time, making it easier to identify and fix issues. + +6. **Responsive Design Testing Tools**: Tools like BrowserStack and Responsinator help developers test their websites on different devices and screen sizes. Ensuring that websites are responsive is crucial for providing a seamless user experience across various platforms. + +7. **Version Control Systems**: Git is a widely used version control system that helps developers track changes to their codebase, collaborate with team members, and revert to previous versions if needed. It is essential for managing and organizing project files effectively. + +8. **Front-End Libraries**: Libraries like jQuery, Bootstrap, and Foundation provide pre-built components and styles that can be easily integrated into web projects. They help speed up development time and ensure a consistent look and feel across the website. + +9. **Graphic Design Tools**: Tools like Adobe Photoshop and Sketch are essential for creating visual assets like images, icons, and logos for websites. Having a good eye for design and the ability to create appealing visuals is crucial for building stunning websites. + +10. **API Testing Tools**: Tools like Postman and Swagger are essential for testing and debugging APIs used in web applications. They help developers ensure that APIs are functioning correctly and returning the expected results, improving the overall performance of web projects. + +By leveraging these essential front-end development tools, web developers can create visually stunning websites with interactive user interfaces that captivate audiences and deliver exceptional user experiences + +## Must-Have Backend Tools for Seamless Website Functionality + +When it comes to developing a website, having the right backend tools is crucial for ensuring seamless functionality and optimal performance. These tools play a significant role in supporting the frontend design and overall user experience. Here are some essential backend web development tools that every web developer should have in their toolkit: + +1. **Node.js**: This open-source, cross-platform runtime environment allows developers to build scalable network applications. With Node.js, you can execute JavaScript code server-side, making it ideal for building fast and lightweight web applications. + +2. **MongoDB**: As a popular NoSQL database, MongoDB is known for its flexibility and scalability. It is well-suited for handling large volumes of data and is commonly used in web development to store and manage dynamic content. + +3. **Express.js**: Express is a minimal and flexible Node.js framework that provides a robust set of features for web and mobile applications. It simplifies the process of building APIs and handling HTTP requests, making backend development more efficient. + +4. **Postman**: Postman is a collaboration platform for API development that allows developers to design, test, and document APIs quickly and easily. It helps streamline the backend development process by enabling efficient API testing and monitoring. + +5. **Git**: Git is a widely used version control system that allows developers to track changes in their codebase efficiently. It is essential for managing collaborative web development projects and ensuring seamless integration of backend code. + +6. **Docker**: Docker is a containerization platform that simplifies the process of packaging, distributing, and running applications. It enables developers to create isolated environments for their backend services, ensuring consistency across different development environments. + +7. **Nginx**: Nginx is a high-performance web server that is commonly used as a reverse proxy and load balancer. It helps optimize server resources and improve website performance by efficiently handling incoming client requests. + +8. **Redis**: Redis is an open-source, in-memory data structure store that is often used as a caching layer in web applications. It is known for its high performance and low latency, making it ideal for speeding up data retrieval in backend systems. + +9. **Swagger**: Swagger is an open-source tool for designing and documenting APIs in an interactive and user-friendly way. It helps streamline backend development by providing a standardized format for describing API endpoints and parameters. + +10. **Webpack**: Webpack is a popular module bundler for JavaScript applications that streamlines the process of bundling and optimizing frontend and backend assets. It helps improve website performance by efficiently managing dependencies and assets in a project. + +By incorporating these essential backend web development tools into your workflow, you can enhance the functionality and performance of your websites while ensuring a seamless user experience for visitors + +## Enhancing Website Performance with Optimization Tools + +When it comes to building websites, one of the key factors that can make or break the success of your site is its performance. Slow loading times, clunky functionality, and poor optimization can drive users away and impact your search engine rankings. That's where web development tools come in to save the day. + +Optimization tools play a crucial role in enhancing website performance. These tools are designed to streamline your code, optimize images, minify scripts, and improve overall site speed. By utilizing these tools, web developers can ensure that their websites load quickly, operate smoothly, and provide an optimal user experience. + +One essential optimization tool for web developers is a content delivery network (CDN). CDNs help deliver website content faster by caching files on servers located closer to the user, reducing latency and improving load times. Another useful tool is a performance monitoring service, which allows developers to track and analyze site performance metrics to identify areas for improvement. + +In addition to optimization tools, web developers can also leverage tools for code debugging, browser testing, responsive design, and more to ensure their websites are high-performing across all devices and platforms. By incorporating these essential web development tools into their workflow, developers can create stunning websites that not only look great but also function seamlessly, providing users with an exceptional browsing experience + +## Visual Design Tools for Creating Eye-Catching Websites + +When it comes to building visually captivating websites, having the right web development tools at your disposal can make all the difference. In the world of web development, the use of visual design tools is essential for creating websites that not only look stunning but also function seamlessly. These tools enable developers to bring their creative visions to life, ensuring that every element on a website is designed with precision and attention to detail. + +From graphic design software to prototyping tools, there is a wide array of web development tools that cater specifically to visual design. Tools like Adobe Photoshop and Sketch allow developers to create high-quality graphics and images that can enhance the overall look of a website. Prototyping tools such as InVision and Figma are invaluable for creating interactive prototypes that showcase the website's layout and user interface. + +In addition to graphic design and prototyping tools, developers can also leverage tools like Canva and Piktochart for creating visually appealing infographics and other graphics to enhance the website's content. These tools make it easy to add a creative touch to the website, making it more engaging for visitors. + +Furthermore, tools like ColorZilla and Adobe Color Wheel help developers choose the perfect color schemes for their websites, ensuring a cohesive and visually appealing design. With the right color combinations, developers can create websites that are not only visually striking but also evoke the right emotions and responses from users. + +In conclusion, visual design tools play a crucial role in creating eye-catching websites that stand out in a crowded online space. By incorporating these tools into the web development process, developers can ensure that every aspect of their websites is visually appealing, engaging, and memorable + +## Collaborative Tools for Streamlining Web Development Projects + +Web development projects often involve collaboration among multiple team members, including designers, developers, content creators, and project managers. To streamline these projects effectively, it is essential to utilize the right web development tools that support collaboration and enhance productivity. By leveraging these tools, teams can communicate efficiently, share resources seamlessly, and track project progress in real-time. Let's explore some essential web development tools that facilitate collaboration and streamline the web development process. + +1. **Version Control Systems (VCS)**: Tools like Git enable developers to work simultaneously on a project, track changes, merge code seamlessly, and resolve conflicts efficiently. Platforms like GitHub and Bitbucket provide a central repository for team members to collaborate on code development. + +2. **Project Management Software**: Platforms such as Trello, Asana, or Jira help teams organize tasks, set priorities, allocate resources, and track project timelines. These tools improve communication, streamline workflows, and enhance project visibility. + +3. **Collaboration Platforms**: Tools like Slack or Microsoft Teams facilitate real-time communication among team members through chat, video calls, and file sharing. These platforms help teams stay connected, brainstorm ideas, and resolve issues promptly. + +4. **Prototyping Tools**: Software like Figma or Adobe XD allows designers and developers to create interactive prototypes, share feedback, and iterate on designs collaboratively. These tools streamline the design process and ensure a seamless transition from design to development. + +5. **Code Editors**: Integrated development environments (IDEs) like Visual Studio Code or Sublime Text provide features for code editing, debugging, and version control integration. Developers can collaborate on code, share snippets, and customize their workspace for optimum productivity. + +6. **Browser Developer Tools**: Built-in browser tools such as Chrome DevTools or Firefox Developer Edition offer features for inspecting, debugging, and optimizing code in real-time. Developers can collaborate on troubleshooting issues and testing website performance across different devices. + +7. **Content Management Systems (CMS)**: Platforms like WordPress or Drupal enable content creators to manage website content collaboratively. Teams can create, edit, and publish content seamlessly, ensuring a consistent user experience across the site. + +8. **Responsive Design Testing Tools**: Tools like BrowserStack or Responsinator help teams test websites on multiple devices and screen sizes simultaneously. This ensures a responsive design that offers a consistent user experience across various platforms. + +9. **Accessibility Checkers**: Tools such as Axe or WAVE ensure that websites meet accessibility standards and are usable by individuals with disabilities. These tools help teams identify and fix accessibility issues collaboratively. + +10. **Analytics Tools**: Platforms like Google Analytics or Hotjar provide insights into website performance, user behavior, and conversion rates. Teams can analyze data collaboratively, make informed decisions, and optimize the website for better results. + +By incorporating these essential web development tools into your projects, you can foster collaboration, streamline workflows, and build stunning websites efficiently. Embracing the right tools can transform the web development process into a seamless and productive experience for your entire team + +## Conclusion + +In conclusion, mastering the art of web development requires utilizing a diverse set of tools to create websites that are not only visually stunning but also highly functional. From front-end tools for crafting engaging user interfaces to backend tools for ensuring seamless performance, each tool plays a crucial role in the web development process. By incorporating optimization tools for improved performance, visual design tools for enhanced aesthetics, and collaborative tools for efficient project management, developers can elevate their skills to create websites that truly shine in the digital realm. Embrace these essential web development tools and empower yourself to build websites that leave a lasting impression on your audience diff --git a/src/content/blog/essential-frontend-tools-for-astro-js-developers.mdx b/src/content/blog/essential-frontend-tools-for-astro-js-developers.mdx new file mode 100644 index 0000000..586f73c --- /dev/null +++ b/src/content/blog/essential-frontend-tools-for-astro-js-developers.mdx @@ -0,0 +1,66 @@ +--- +title: 'Essential Frontend Tools for Astro.js Developers' +--- + +Astro.js has rapidly become a favorite among developers for building fast, modern web applications. Its unique approach to loading only the necessary JavaScript has paved the way for optimized performance and better user experiences. As an Astro.js developer, having a toolkit filled with essential frontend tools can significantly streamline your workflow and enhance your project's quality. In this blog post, we'll explore those indispensable tools every Astro.js developer should consider integrating into their development process. + +## Key Takeaways + +| Tool Type | Name | Purpose | Why Essential | +| ----------------- | ------------------ | ---------------------------------------------------- | --------------------------------------------------- | +| Code Editor | Visual Studio Code | Text editing and code management | Highly customizable, extensive plugin ecosystem | +| CSS Framework | TailwindCSS | Utility-first CSS framework | Efficient styling without leaving HTML | +| CSS Preprocessor | Sass | Writing more maintainable CSS | Add functionalities like variables, mixins | +| Language | TypeScript | Typed superset of JavaScript | Improved code quality, better tooling support | +| Version Control | Git | Tracking changes in source code | Facilitates collaboration and version tracking | +| Remote Repository | GitHub | Hosting for Git repositories | Centralized codebase management | +| Build Tool | Webpack / Vite | Optimizing the build process | Fast development server, efficient bundling | +| Linter/Formatters | ESLint/Prettier | Ensuring code quality and consistency | Identifies and fixes syntax errors, formats code | +| Component Library | Headless UI | Designing UIs and integrating interactive components | Rapid UI development, customizable | +| Package Manager | npm/Yarn/PNPM | Managing project dependencies | Efficient package management, dependency resolution | + +## Visual Studio Code + +Visual Studio Code (VS Code) is a lightweight but powerful source code editor that supports a wide range of programming languages and frameworks, including TypeScript and frameworks like Astro.js. Its vast ecosystem of extensions, such as the Tailwind CSS IntelliSense for seamless TailwindCSS integration and the Astro extension for better syntax highlighting and autocompletion, makes it an ideal choice for frontend developers. + +## TailwindCSS + +TailwindCSS is a utility-first CSS framework that enables developers to style their applications efficiently without leaving the HTML. It pairs exceptionally well with Astro.js, offering a way to build custom user interfaces with speed without the bloat of unused CSS. The combination of TailwindCSS's utility classes with Astro.js's component architecture allows for building highly responsive and visually appealing websites faster. + +## Headless UI + +When you need interactive components like dropdowns, modals, or tabs, Headless UI pairs perfectly with Tailwind, providing completely unstyled, fully accessible UI components that you can bring to life with your own styling. + +## CSS Preprocessor: Sass + +Sass is a powerful CSS extension language that enables developers to use variables, nested rules, mixins, and more, making CSS more maintainable. It integrates well with Astro.js, allowing for more dynamic styling options. + +## TypeScript + +TypeScript, a typed superset of JavaScript, provides optional static typing, classes, and interface. For developers working with Astro.js, TypeScript brings several advantages, such as improved code quality, easier debugging, and enhanced developer productivity through better tooling support. Integrating TypeScript into your Astro.js projects can significantly reduce runtime errors and lead to more maintainable codebases. + +## Version Control: Git + +Version control is non-negotiable in modern web development workflows. Git offers a robust system for tracking changes, collaborating with teams, and managing codebases across different stages of development. Leveraging Git's branching and merging capabilities ensures that development processes remain smooth and organized, even when integrating new features or experimenting with your Astro.js projects. + +## Remote Repository: GitHub + +GitHub is a popular platform for hosting Git repositories, providing a centralized location for managing and collaborating on codebases. It offers a wide range of features, such as issue tracking, pull requests, and continuous integration, making it an essential tool for Astro.js developers looking to streamline their development process and maintain a well-organized codebase. + +## Webpack / Vite + +While Astro.js comes with its build optimizations, understanding tools like Webpack or Vite can be beneficial for complex projects that require custom build processes or advanced optimization strategies. Vite, in particular, offers a fast development environment by leveraging modern JavaScript features, making it a good fit for projects using Astro.js and TypeScript. It enhances the developer experience with features like hot module replacement (HMR) and efficient bundling strategies. + +## ESLint & Prettier + +Maintaining code quality and consistency is crucial in team environments or even for individual developers aiming for best practices. ESLint helps identify and fix problems in your JavaScript/TypeScript code, while Prettier automatically formats your code according to specified style guidelines. Integrating these tools into your Astro.js projects ensures that your code is not only functional but also clean and consistent. + +## Package Manager: npm / Yarn / PNPM + +Package managers like npm, Yarn, and PNPM are essential for managing project dependencies and ensuring efficient package resolution. They provide a convenient way to install, update, and remove packages, making it easier to manage the various libraries and tools required for Astro.js development. Choosing the right package manager depends on your specific project needs and personal preferences, but all three are widely used and well-supported within the Astro.js community. + +## Conclusion + +The landscape of frontend web development is rich and diverse, offering a multitude of tools designed to improve efficiency, collaboration, and end-user experience. By incorporating these essential tools into your Astro.js projects, you're not just keeping up with modern development practicesโ€”you're also ensuring that your web applications are built on a solid foundation of performance, maintainability, and scalability. + +Remember, the best toolkit is one that suits your specific project needs and personal workflow preferences. Experimenting with these tools alongside Astro.js can make a significant difference in your development process, enabling you to focus more on creativity and less on the tedious aspects of programming. Happy coding! diff --git a/src/content/blog/exploring-nodejs-development-trends-2024.mdx b/src/content/blog/exploring-nodejs-development-trends-2024.mdx new file mode 100644 index 0000000..a7fb41a --- /dev/null +++ b/src/content/blog/exploring-nodejs-development-trends-2024.mdx @@ -0,0 +1,73 @@ +--- +title: 'Exploring the Latest Node.js Development Trends in 2024' +--- + +The landscape of Node.js development is always evolving, with each year bringing new trends, tools, and best practices. As we delve into 2024, it's crucial for developers and businesses alike to stay ahead of the curve. In this blog post, we'll explore the latest trends in Node.js development that are shaping the future of web and application development. + +## Key Takeaways + +| Trend | Description | Impact on Development | +| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | +| Serverless Architectures | Adoption of serverless computing to reduce system administration tasks and enhance scalability.Adoption of serverless computing to reduce system administration tasks and enhance scalability. | Simplifies deployment, reduces costs. | +| Full-stack JavaScript with Node.js | Leveraging Node.js for server-side scripting, enabling full-stack development with JavaScript. | Streamlines development process, reduces context switching. | +| Increased Focus on Security | Emphasis on implementing robust security practices from the start, including dependency audits and encryption. | Reduces vulnerabilities, protects sensitive data. | +| Adoption of GraphQL | Increased integration of GraphQL to provide clients with precisely the data they request. | Improves performance, reduces data transfer. | +| TypeScript's Growing Popularity | Widespread adoption of TypeScript for large-scale Node.js applications. | Enhances reliability, maintainability, and code management. | +| Performance Optimization | Continuous exploration of techniques to optimize runtime efficiency, such as lazy loading and code splitting. | Improves application performance, user experience. | +| Cross-platform Development | Node.js frameworks enabling developers to build desktop and mobile applications using web technologies. | Streamlines development processes across different platforms. | +| Deno's Rise | Deno's growing popularity for its security features and support for TypeScript out of the box. | Prompts discussions about the future direction of Node.js. | +| Microservices | Continued adoption of microservices architecture for better scalability and flexibility. | Enables frequent and efficient deployment of updates. | +| AI and ML Integration | Increasing integration of AI and ML capabilities in Node.js applications. | Empowers developers to create more intelligent solutions. | +| Edge Computing | Node.js applications running directly on edge devices or in edge data centers to improve performance and user satisfaction. | Enhances performance and user satisfaction. | + +## 1. Rise of Serverless Architectures + +Serverless computing has been gaining traction over the years, and in 2024, it's more prevalent than ever. Node.js fits perfectly into this trend due to its lightweight nature and ability to handle asynchronous tasks efficiently. Developers are leveraging serverless platforms like AWS Lambdam Google Cloud Functions, and Azure Functions more extensively for building microservices, reducing operational costs, and improving scalability. + +## 2. Full-stack JavaScript with Node.js + +The concept of JavaScript everywhere has solidified with Node.js enabling server-side scripting. Full-stack development with JavaScript is now more streamlined, thanks to frameworks like Next.js and Nuxt.js, which work seamlessly with Node.js. This approach simplifies the development process, making it faster and more efficient by using a single language across the stack. + +## 3. Increased Focus on Security + +As Node.js applications become more complex and widespread, security is becoming a central concern. In 2024, we're seeing an increased emphasis on implementing robust security practices from the start. This includes regular dependency audits with tools like npm audit, embracing security linters, and adopting encryption for data protection. Open-source tools and community-driven initiatives are also playing a crucial role in identifying and patching vulnerabilities faster. + +## 4. Adoption of GraphQL + +GraphQL's popularity continues to rise as developers seek more efficient ways to query and manipulate data. Node.js applications are increasingly integrating GraphQL to provide clients with precisely the data they request, reducing the amount of data transferred over the network and improving performance. Apollo Server and Express-GraphQL are popular choices for setting up a GraphQL server with Node.js. + +## 5. TypeScript's Growing Popularity + +TypeScript has become indispensable in the Node.js ecosystem for large-scale applications. Its static type-checking ability adds a layer of reliability and maintainability that's hard to achieve with vanilla JavaScript. The trend shows a growing number of Node.js projects adopting TypeScript for better development experience, error reduction, and easier code management. + +## 6. Performance Optimization + +Performance remains a key focus, with the Node.js community continuously exploring ways to optimize runtime efficiency. Techniques like lazy loading, code splitting, and leveraging worker threads are becoming standard practices. Additionally, profiling tools and performance monitoring solutions are increasingly sophisticated, helping developers identify and address bottlenecks more effectively. + +## 7. Cross-platform Development + +Node.js is playing a significant role in cross-platform development, with frameworks like Electron and React Native enabling developers to build desktop and mobile applications using web technologies. This trend is empowering developers to create versatile applications with a single codebase, streamlining development processes across different platforms. + +## 8. Deno's Rise + +Although Node.js continues to be immensely popular, Deno โ€” created by the original developer of Node.js โ€” is garnering attention for its security features and support for TypeScript out of the box. While not a direct replacement, Deno's rise prompts discussions among developers about the future direction of server-side JavaScript environments. + +## 9. microservices + +The microservices architecture pattern remains a cornerstone in the Node.js community. By breaking down applications into smaller, loosely coupled services, developers can achieve better scalability and flexibility. This approach fits perfectly with the dynamic nature of Node.js, allowing teams to deploy updates more frequently and efficiently. + +## 10. AI and ML Integration + +Artificial Intelligence (AI) and Machine Learning (ML) are no longer just buzzwords but integral parts of modern web development. In 2024, we're seeing an increasing number of Node.js applications integrating AI and ML capabilities, from chatbots and personal assistants to sophisticated data analysis tools. This trend is empowering developers to create more intelligent, automated solutions that enhance user experiences. + +## 11. Edge Computing + +Edge computing is reshaping how data is processed by bringing computation closer to the data source. This trend is particularly relevant for IoT applications and services requiring low latency. With Node.js, developers can easily build lightweight applications that run directly on edge devices or in edge data centers, thus improving performance and user satisfaction. + +## Conclusion + +The landscape of Node.js development in 2024 is dynamic and exciting, marked by advancements that are making application development faster, more efficient, and more secure. As we continue to explore these trends, it's clear that Node.js remains at the forefront of web development innovation, adapting to meet the ever-evolving demands of developers and users alike. + +This exploration touches on some of the most influential trends in Node.js development for 2024. Whether you're building scalable web applications, focusing on security, or embracing new data querying paradigms, staying abreast of these trends will be key to leveraging Node.js effectively in your projects. + +Remember, technology is constantly changing, and what's popular today might be replaced tomorrow. Keeping an open mind and continuously learning are key to staying relevant in this exciting field. diff --git a/src/content/blog/unleasing-the-power-of-astro-js-for-better-web-development.mdx b/src/content/blog/unleasing-the-power-of-astro-js-for-better-web-development.mdx new file mode 100644 index 0000000..be6cb4d --- /dev/null +++ b/src/content/blog/unleasing-the-power-of-astro-js-for-better-web-development.mdx @@ -0,0 +1,43 @@ +--- +title: 'Unleashing the Power of Astro.js' +--- + +Welcome to an exciting exploration of Astro.js, a transformative tool reshaping web development. This blog post takes you through the wonders of Astro.js, showcasing its ability to boost website performance and introduce unparalleled versatility in modern applications. + +Whether you're deep into development or just starting, this guide illuminates Astro.js's potential to refine your web development process. + +## Understanding the Magic Behind Astro.js + +Astro.js stands out by merging static and dynamic content, enabling instant loading with dynamic capabilities. This blend not only optimizes performance but simplifies development, focusing on user interface excellence without sacrificing speed. + +By pre-rendering pages server-side, Astro reduces client-side load, offering swift, responsive websites. Its flexible architecture supports various front-end frameworks, allowing for creative freedom while leveraging Astro.jsโ€™s benefits. + +## Optimizing Website Performance with Astro.js + +Astro.js excels in speeding up loading times by pre-rendering pages and serving static assets. This approach minimizes server load and bandwidth, enhancing user experience. + +Its component-based architecture ensures modularity and reusability, streamlining development and boosting performance. The hybrid rendering model strikes a balance between speed and interactivity, providing users with a seamless browsing experience. + +## Harnessing the Benefits of Astro.js for Web Development + +Astro.js optimizes workflows with its focus on performance. It avoids the pitfalls of heavy JavaScript frameworks, ensuring quick loads and smooth operation across devices. + +Its modular, component-based design encourages reusability and consistency, simplifying maintenance. Astro.js also offers a unified build system, reducing complexity and potential errors from disparate technologies. + +## Exploring the Versatility of Astro.js in Modern Applications + +Astro.js's modular architecture fits various projects and adapts to different use cases, from web applications to mobile apps. Its rich feature set supports a broad range of functionalities, enhanced by a well-documented API and plugin library. + +Performance and optimization are central to Astro.js, ensuring applications are fast, responsive, and lightweight. + +## Pro Tips for Maximizing the Potential of Astro.js + +- **Optimize Your Build Process**: Utilize partial hydration and code splitting for efficient builds. +- **Utilize Static Site Generation**: Leverage static generation for performance optimization in content-heavy sites. +- **Experiment with Component Composition**: Mix components from different libraries to meet project needs. +- **Implement Server-Side Rendering**: Use server-side rendering for SEO and interactive components. +- **Stay Updated with the Latest Features**: Keep abreast of Astro.js updates to fully utilize its capabilities. + +## Conclusion + +Astro.js is a transformative tool for web developers, enhancing performance and offering versatile solutions for modern applications. This exploration has shown how Astro.js can streamline your development process, encouraging you to leverage its full potential for greater project success. diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..ef7a56e --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,12 @@ +import { z, defineCollection } from 'astro:content'; + +const blogCollection = defineCollection({ + type: 'content', + schema: z.object({ + title: z.string(), + }), +}); + +export const collections = { + blog: blogCollection, +}; diff --git a/src/pages/blog.astro b/src/pages/blog.astro new file mode 100644 index 0000000..7fa695b --- /dev/null +++ b/src/pages/blog.astro @@ -0,0 +1,37 @@ +--- +import { getCollection } from 'astro:content'; +import BaseLayout from '@/layouts/BaseLayout.astro'; +import Heading from '@/components/ui/Heading.astro'; +const allBlogposts = await getCollection('blog'); +--- + + +
+
+
+ Blog +
+
+
+ { + allBlogposts.map((post) => ( + + )) + } +
+
+
+ diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro new file mode 100644 index 0000000..6714b35 --- /dev/null +++ b/src/pages/blog/[...slug].astro @@ -0,0 +1,31 @@ +--- +import { getCollection } from 'astro:content'; +import type { CollectionEntry } from 'astro:content'; +import BaseLayout from '@/layouts/BaseLayout.astro'; +import Table from '@/components/blog/Table.astro'; + +export async function getStaticPaths() { + const blogEntries = await getCollection('blog'); + return blogEntries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +interface Props { + entry: CollectionEntry<'blog'>; +} + +const { entry } = Astro.props as Props; +const { Content } = await entry.render(); +const components = { table: Table }; +const { title } = entry.data; +--- + + +
+

{title}

+ +
+ diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 4dab30d..ada469c 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -86,5 +86,5 @@ export default { }, }, }, - plugins: [require('tailwindcss-animate')], + plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')], };