A list of what I have been discovering in my Astro Journey
Keep reading if you want to take the interesting pill so that Astro components are not a secret anymore
Spinning World Map
- Found it at theme: https://github.com/Ladvace/astro-bento-portfolio
- MIT ❤️
Extra nerdy details - Get your world Map for Astro 👇
You need the d3
and the solid-js
package. Dont forget to add it to astro.config.mjs
as integration.
import solidJs from "@astrojs/solid-js";
export default defineConfig({
integrations: [solidJs(),],
site: "https://yourwebsite.com",
});
"d3": "^7.9.0",
"@astrojs/solid-js": "^3.0.2",
"solid-js": "^1.8.7"
{
"name": "astro-bento-portfolio",
"type": "module",
"version": "0.0.2",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/netlify": "^3.1.1",
"@astrojs/rss": "^4.0.1",
"@astrojs/sitemap": "^3.0.3",
"@astrojs/solid-js": "^3.0.2",
"astro": "^4.0.5",
"astro-icon": "^0.8.2",
"astro-robots-txt": "^1.0.0",
"mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0",
"solid-js": "^1.8.7",
"d3": "^7.9.0"
},
"devDependencies": {
"motion": "^10.16.4",
"autoprefixer": "^10.4.16",
"@unocss/astro": "^0.58.0",
"@unocss/postcss": "^0.58.0",
"@unocss/preset-uno": "^0.58.0",
"@unocss/reset": "^0.58.0",
"markdown-it": "^14.0.0",
"sanitize-html": "^2.11.0",
"unocss": "^0.58.0"
}
}
FAQ with AlpineJS and TailwindCSS
Get a cool FAQ for Astro 👇
SSG Search
- FuseJS - https://www.fusejs.io/
Also works with HUGO!
- PageFind - https://github.com/cloudcannon/pagefind
Pagefind runs after Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, or any other website framework!
COnvert the Images to WebP
Interesting Post Slider with React
https://github.com/gio-del/Astro-Theme-Astroway https://github.com/gio-del/Astro-Theme-Astroway?tab=MIT-1-ov-file#readme
FAQ
How can I try an Astro Project? ⏬
npm install
npm run dev
npm run build
npm run preview
#npm run astro --help
ASTRO SEO PACKAGES
-
robots.txt - https://www.npmjs.com/package/astro-robots-txt#why-astro-robots-txt` (MIT Licensed ❤️)
-
rss
-
Image Optimization
Astro Cookies
https://docs.astro.build/en/reference/api-reference/#astrocookies