764 questions
1
vote
0
answers
46
views
How to keep the background animation running smoothly when transitioning between pages using Astro.js?
I have this background animation running and the code looks something like this:
body {
background-image:
url("../assets/asset1.webp"), url("../assets/asset2.webp"),
url(&...
- 11
0
votes
0
answers
44
views
How to run an Astro web application as a sub-application into a micro-app?
I currently have an application developed using Vite + Vue3 + micro-app, and I need to integrate an application developed using Astro + React as a sub-application.
I tried use <micro-app name='test'...
- 9
2
votes
0
answers
55
views
How to pass multi-line code strings with proper indentation to a jsx component in Astro MDX?
I'm building a static site with Astro and trying to create a custom code block component that allows users to switch between different programming languages.
Current Implementation
CodeBlock.jsx:
...
- 178
0
votes
0
answers
127
views
Tailwindcss v4 preflight overrides almost all layers coming afterwards
I'm using tailwindcss v4, and NO tailwind.config.js anymore, so basically CSS first rule.
I use Astro with vite config, and the way I am trying to structure the layers of tailwindcss is failing ...
- 2,457
0
votes
0
answers
45
views
Astrojs static vs SSR when dealing with pages calling endpoints
I've noticed that with Astrojs it appears that the page setting is dominate when it comes to executing a request as static or SSR.
What I mean by this is:
If page is marked static and endpoint is ...
1
vote
1
answer
131
views
Migrating from vanilla html to Astro: keep route name legacy
I built a site manually, without the help of any framework.
Each page is a html file, so the routes end with html, such as https://example.com/location.html
I am currently migrating it to Astro. But ...
- 128
1
vote
1
answer
172
views
Dark/light mode transition causes custom text colors to flicker after transition ends
I’m building a personal blog with Astro + Tailwind CSS and I successfully implemented a dark/light theme toggle.
After that, I wanted to add smooth transition animations between themes. To avoid ...
- 13
0
votes
1
answer
73
views
Build error in Astro 5 when using image collections with the <Image /> component
The issue is reproducible in this minimal example repository.
I have a build error in Astro 5 when using Vite’s import glob to create a collection of images (int src/content.config.ts) and referencing ...
- 534
1
vote
0
answers
83
views
Infer types from zod schema in TSX React Components in Astro to avoid code duplication
I use React components in an Astro application that defines its data schema using Zod.
How can I infer the schema instead of duplicating 90% of its in a TypeScript interface?
Zod:
// content.config.ts ...
- 976
1
vote
0
answers
61
views
Control state of React component from click events on an Astro component (external button)?
Is it possible to have some kind of setup like below, where clicking button will trigger some state change or re-render in MyReactComponent?
In an .astro file:
<AstroComponent>
<...
- 11
1
vote
2
answers
220
views
TailwindCSS v4 styles not showing after Vite/Astro build on Vercel deploy
I am trying to deploy an Astro.js site on Vercel that utilizes TailwindCSS v4:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
purge: ["./src/pages/**/*.{js,ts,...
- 23
0
votes
1
answer
55
views
Cannot find module 'canvas' using Konva in Astro
Following the getting started example, I created a new component components/Main.tsx and added:
import { Stage, Layer, Rect, Circle, Text } from 'react-konva';
export default function Main() {
...
- 9,444
0
votes
1
answer
133
views
how client:load and client:only="react" differs in SSG and SSR of astro?
I understand the SSG and SSR mode in astro and when to use them. We use SSG where dealing with static pages and SSG offers faster speed due just serving prerendered code. We will use SSR when we are ...
0
votes
0
answers
69
views
How do I retrieve form values when using the PRG pattern in the Astro docs?
I'm developing a server-side generated (SSG) app in Astro and am using actions to handle form posts. The docs details a middleware which allows you implement the Post-Redirect-Get pattern so you can ...
- 19.6k
0
votes
1
answer
79
views
How to toggle tsparticles theme between dark and light mode on Astro JS?
I am using tsparticles for my website and I have two json files that are for light and dark mode, the dark mode version is provided below:
{
"fullScreen": {
"enable": true,
...
- 23
0
votes
1
answer
80
views
Astro build keeps a copy of the image and video assets in the root of the dist directory
On build, yarn build, I end up with a /dist/_astro directory with everything as expected--css, js, img, mp4, etc. However, I also have all the images and videos for my site in the main /dist directory....
- 6,204
1
vote
0
answers
35
views
UnknownAction error in production (Vercel SSR with Astro)
I'm building an Astro site using auth-astro with Google as a provider. Everything works perfectly in local development, including sign-in and callback flows. However, in production (Vercel SSR), when ...
- 131
0
votes
0
answers
45
views
Astro render component in pages/[...path].ts
For historic reasons, options specified in the url path dynamically influence page contents. I want to handle both GET and POST, where GET sometimes returns a rendered Astro component, and sometimes ...
- 9,444
0
votes
0
answers
69
views
How to get optimized images in Astro without altering their primary URLs to Astro-specific locations?
I'm evaluating Astro as a SSG, and while trying to port a site, I've hit an issue, that it seems to not be possible in Astro to achieve both simultaneously:
stable and non-astro-specific image URL in ...
- 11.2k
0
votes
1
answer
280
views
Animations between View Transitions looking weird on Chrome but fine in Firefox/Safari
I'm crafting a personal portfolio website with Astro.
I got View Transitions enabled, and GSAP animations tied to my persistent header on the pages.
The header's animation should close the navigation (...
0
votes
0
answers
24
views
Tailwind styling broken when components in monorepo package [duplicate]
I am trying to create a monorepo using astrojs, styled with tailwind.
Example file structure is
/root
./apps/main-site
./packages/site-1-components
My tailwind config was in the main-site and does ...
0
votes
0
answers
237
views
Astro with Node Standalone Adapater for API - CORS issues
I'm working on a small Astro test project that uses the Node standalone adapter for an API endpoint.
Then I'm using a Svelte form to POST to that endpoint like in this tutorial.
I'm running the Node ...
- 671
-3
votes
1
answer
403
views
Astro server side rendering (SSR mode) and render some parts of the page client side
I'm using Astro in SSR mode. Now I have a certain page with certain blocks (and their graphql requests to collect it's data) that are deep in the page below the fold. I thought it would be better for ...
- 4,888
0
votes
1
answer
53
views
Traversing and Transforming Children of preact components
I've recently had a problem with needing to traverse and transform some DOM children from a Parent Preact component:
import {isElevated} from "../stores/UserStateStore.ts";
import type {...
- 23
0
votes
0
answers
231
views
Astro cloudflare adapter ignores wrangler.jsonc astro workflow ignores wrangler.jsonc and tries to bind to "USER_WORKFLOW" (??)
trying out CF pages with astro and a workflow
> [email protected] dev
> astro dev
22:32:33 [@astrojs/cloudflare] Enabling sessions with filesystem storage. Be sure to define a KV ...
- 9,620
0
votes
0
answers
48
views
Content showing on localhost but not on deployment page
I'm working on a project that I am building with astro framework.
I worked fine but when I deploying it today the content of two pages are empty.
when I inspect the deployment page - every code ...
- 13
0
votes
1
answer
130
views
is possible deploy a Astro project on firebase Hosting
How can I deploy my astro page application into firebase hosting, is there any way to do it? I
'm using Astro page with Vue for client side, it's working great but in a deployment it's not even ...
- 11
1
vote
2
answers
265
views
How to use a variable from a script tag in Astro component in the HTML of the same Astro component
In my Astro project I need a dynamic height for a certain html element.
I have this <script> tag in my Astro component:
<script>
let height = 0;
if (typeof document !== 'undefined') {
...
- 4,888
2
votes
0
answers
89
views
Astro + S3 + CloudFront: Clicking navigation link causes redirect to wrong path (/WEBSITE/pricing)
I'm deploying an Astro static site to S3 and serving it via CloudFront. Here's my deploy script:
"deploy": "npm run build && aws s3 sync dist s3://mybucket/WEBSITE --delete"...
- 55
0
votes
0
answers
69
views
Astro component missing styles when deployed to Vercel
I'm building a website using Astro and deploying it to Vercel. One of my components, Footer.astro, is missing all of its styles only in production. It works fine locally. Also all other components ...
0
votes
1
answer
266
views
How to make external scripts work with hash-based CSP without allowlists in Astro?
I'm using a strict CSP without allowlists on my statically generated Astro website. I have no access to nonce-based CSP, only hash-based.
Do I need to add permitted domains to a CSP allowlist if I'm ...
0
votes
0
answers
124
views
Handling dynamic forms in Astro
I got a form tha contains an extendable array of elements:
<CustomInput title="Ingredient" name="ingredient[0].name" /> // or ingredient[0][name]
<CustomInput title="...
- 777
1
vote
1
answer
96
views
How can I allow non-standard attributes on a tag in Astro/TypeScript?
I'm in the process of porting my website across to Astro - it is mostly working fine, but there is one TypeScript error that I cannot figure out a proper fix for.
My website uses Utterances for ...
- 36.1k
0
votes
1
answer
91
views
`rehype-external-links` plugin breaks `expressive-code` syntax highlighting in .mdx
In Astro project I get external links opened in new tab, but in process it breaks existing expresive-code syntax highlighting for code blocks.
https://github.com/nemanjam/nemanjam.github.io/blob/...
- 417
0
votes
0
answers
159
views
How do you make static assets accessible under vitest?
I am writing vitest tests that need http access to files in the public folder, which will be under the base url at production. What is a good way to accomplish this? I was hoping to find a plugin ...
- 15.8k
0
votes
0
answers
70
views
Render specific content from mdx on astro layout
I'm working with Astro and I'm very new to it.
This is my CityPageLayout.astro
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
...
- 1
0
votes
0
answers
67
views
How to connect a HTML form input field to a Cloudflare D1 database via a Cloudflare worker using Astro?
A website build using Astro includes a HTML form to capture name, email and message - the website is to be deployed via Cloudflare and should use only the CLoudflare D1 database connected via a ...
0
votes
1
answer
121
views
Use dynamic import for SCSS in ASTRO
I need to import "desktop.scss" or "mobile.scss" in my astro "MainComponent".
So, based on ternary I have string "Desktop" or "Mobile" but when I try ...
- 45
0
votes
0
answers
68
views
Client-only component within `client:load` React component
Inside *.astro page I have a React component, that has client:load directive.
Inside the component I have another component that must be loaded only on client. How can I do it?
// pages/index.astro
...
- 3,926
0
votes
0
answers
141
views
How to save remote images to local build in astroJS when generate build?
Example
I have AppImage.astro component as below
---
import { Image } from 'astro:assets';
---
<Image src="https://example.com/remote-bird.jpg" alt="A bird." inferSize />
Now ...
- 1
0
votes
0
answers
122
views
Astro + Svelte: Imported Svelte Components Have No Type Checking in VSCode
I'm using VSCode, and I've noticed that when I import Svelte components into my Astro components, they are typed as any, and TypeScript does not type-check the props.
I have set up my project running:
...
- 93
0
votes
0
answers
124
views
Astro actions and avoid _action query param to avid brower resend form
I'm working with Astro and I love it, but there is something that I don't know if I'm doing in the right way or not.
I just created a form with a POST method and an action
<form method="POST&...
- 336
1
vote
1
answer
288
views
Astro configuration with vite on the env
I'm working through a course and need help adapting the following code for my Astro project configuration.
The original code I'm trying to replicate is:
// @ts-check
import { defineConfig, envField } ...
- 11
1
vote
1
answer
95
views
React: Images not rendering when using rich text from Contentful
I’m using React, Astro and Contenful. I need to render rich text with images.
I tried to use documentToReactComponents function from @Contentful/rich-text-react-renderer package to render rich text. ...
0
votes
0
answers
179
views
Astro.js v5 - Is there any way to staticaly render some pages and server side render others on the same dynamic route?
I have 20k posts, I want to prerender 2k of them on build-time, the others should be served on demand. I am using the Vercel server adapter with the server output.
https://docs.astro.build/en/guides/...
- 330
0
votes
0
answers
73
views
Strapi: Grant missing session or misconfigured provider
After logging in with React's Google OAuth library, I am being redirected to my front end again with the following link. Why is this happening and how can I fix the issue?
https://website.com/?error=...
- 1
0
votes
0
answers
32
views
Persistent nanostore with multiple engines
I would like to use persistent nanostore in my astro application for multiple use-cases. However the different use-cases can't all work with localStorage or sessionStorage exclusively as the engine.
...
- 92
0
votes
2
answers
894
views
Astro to Tailwind v4 migration - The configuration file at ./tailwind.config.ts could not be automatically migrated
npx @tailwindcss/upgrade@next wont work for ./tailwind.config.ts which makes this tool not much useful, migrates just a few trivial classes.
Here is my config:
https://github.com/nemanjam/nemanjam....
- 417
0
votes
0
answers
61
views
Cannot read property of null reading Image Astro
I'm trying to fetch a simple endpoint like so
export const prerender = false;
const params = Astro.params;
const id = params.id;
let data = null;
let error = null;
try {
const response = await ...
- 433
0
votes
0
answers
112
views
Cant customise Astrowind template
I'm much more accustomed to React rather than Astro and Nextjs. I'm trying to develop a blog subdomain using Astrojs and i would like to use a template rather than build something from scratch. I'm ...
- 597