765 questions
1
vote
0
answers
43
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
2
votes
0
answers
48
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
43
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
154
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
1
vote
0
answers
81
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 ...
- 974
1
vote
2
answers
199
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
121
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
1
answer
69
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
1
vote
0
answers
34
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
67
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.1k
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 ...
-3
votes
1
answer
391
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
0
answers
223
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
1
answer
125
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
0
answers
86
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"...
- 45
0
votes
1
answer
257
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 ...
1
vote
1
answer
92
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
0
answers
157
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
63
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
0
answers
66
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
113
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
1
vote
1
answer
277
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
0
votes
0
answers
170
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
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
0
answers
60
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