764 questions
0
votes
0
answers
338
views
How to inline astro components in a markdown page
I'm looking for a way to "inject" some generated content in the middle of a markdown file in Astro.
I have been extensively reading the docs, and I can't find the primitives I was expecting ...
- 7,301
2
votes
1
answer
591
views
Astro server mode - run tasks on start
I have a Astro on server mode with the node SRR adapter and using standalone mode and I would like do perform some tasks during the server start e.g. checking if environment variables has been ...
- 986
0
votes
0
answers
474
views
ASTRO framework POST METHOD is not working
i am using astro framework here is my code in src/components/test.astro
and form is displaying properly.
<form id="contact-form">
<label for="first-name">First Name:&...
- 103
2
votes
2
answers
73
views
Type created with keyof cannot be used to index type it was created from
I'm trying to write a utility function in my TypeScript project to sort/filter objects in a fairly predictable data model (I'm using Astro for this site). The objects keep all the data useful for ...
- 23
3
votes
1
answer
91
views
How can I fetch data from server inside a .tsx component?
Working on a Astro 5 (beta10) application.
The astro is configured with "output": "server".
I have a .tsx component in which I want to fetch data from an API. (Strapi, a CMS).
...
- 825
0
votes
1
answer
151
views
How do I log out of the Shopify API at the same time as my Astro app?
I am trying to implement user auth using the Shopify Headless customer account API in an Astro app with auth-astro. I have set up my Shopify store with the Headless app properly, I can log in, ...
- 891
0
votes
0
answers
116
views
WebStorm 2024.3 - Dev Server not updating on Edit (AstroJS)
I'm currently working on a site using AstroJS in WebStorm. When I run a dev server npm run dev / npx astro dev, changes I make to page content in files don't update the localhost in my browser (Google ...
- 296
0
votes
0
answers
57
views
How to render components exported from mdx in Astrojs?
I got a mdx file like this and I want to render the foo component in somewhere else.
---
title: Hi, World!
---
export const title = 'My first MDX post'
export const foo = <h1>adsf</h1>
# ...
- 1
3
votes
0
answers
293
views
How do I disable Astro from adding scripts and styles in a layout?
I'm adding an email template page to my Astro site that needs it's own very specific styles (and no scripts) but Astro is injecting the site styles and scripts into this layout.
/pages/email/[...slug....
- 15.9k
1
vote
1
answer
559
views
React component within Astro is not working, can't access env variables
I have recently begun using Astro and am a little confused about how to properly use react components within the framework. I'm sure my error is likely a silly one, I am not a professional developer ...
- 25
1
vote
0
answers
234
views
Passing image path from mdx file to Picture component in Astro.js
I'm writing a web in Astro.js.
My folder structure is like this:
src
|-assets
| |-images
| |-blog
| |-image1.jpg
|-components
| |-BlogPost.astro
|-content
| |-blog
| | |-my-first-...
- 1,931
0
votes
1
answer
355
views
Serverside Astro JS global variable
I have a project on Serverside rendered Astro JS. I 'm try pass variable between .astro files on runtime.
For this I use {...}.ts import/exports to share variable between files.
a.ts
export const data ...
- 103
0
votes
1
answer
34
views
HOC image hover component not targeting pseudo element with Tailwind CSS
I am using Astro and Tailwind CSS.
Why is the following not working?
I have this HOC HoverScale.astro component:
// HoverScale.astro
<span class="[&>img]:group-hover:scale-105 group [&...
- 4,888
2
votes
1
answer
152
views
How does Astro Close Database Connections?
I am not sure on how or if Astro closes database connections upon retrieval of data. Is it that the packages themselves take care of this or the connections "just" drop and it is up to the ...
- 2,848
2
votes
0
answers
114
views
Changing default Flowbite-React color
I'm currently working on a project in Astro, using the Flowbite Tailwind component library along with Flowbite React. My question is: how can I change the default cyan-500 color in Flowbite React to ...
- 43
0
votes
2
answers
268
views
import string into Astro MDX
I need to import a simple string into an astro starlight MDX file to show the latest version number. My code is basically
---
title Version Test
desc Show version
---
import VERSION from "/src/...
- 13.2k
1
vote
1
answer
2k
views
TypeScript Cannot Find Module astro:content
I've upgraded my astro blog to the latest versions and got a problem using the content module of astro. My GitHub Actions CI jobs are failing due to a TypeScript error indicating that the module astro:...
- 844
0
votes
1
answer
67
views
Handle returning null from map method
I'm trying to handle a map method that get all my fields from a JSON query. Some of the fields I'm getting are empty which is fine, but when calling them I get an error saying "Cannot read ...
- 55
0
votes
0
answers
101
views
Dynamic routes based on ID with multiple optional sub sections
I am implementing dynamic routing in Astro SSR mode, based on the id.
I can have different routes, with the id on various place like:
foo/bar/12345/my-path
foo/bar/section/12345/my-path
bar/foo/...
- 4,888
0
votes
1
answer
397
views
Astro Project Renders Blank Page on Cloudflare with No Console Errors
Problem Description
I've completed my Astro project and it works fine locally in both development and build modes. However, when I deploy it to Cloudflare, I'm getting a blank page with no console ...
- 35
0
votes
1
answer
147
views
Is there a way to add a page in Astro with docs style rendering of content
I am totally new to UI and Astro project. I am using astrowind (astro framework) theme to modify the website.
I am looking to develop a site which will have pages of content about the site/product and ...
-1
votes
1
answer
302
views
Cannot deploy to firebase hosting with CI: No OAuth tokens found
I tried to deploy my astro project into firebase hosting but i'm unable to deploy them with CI, but able to deploy them in my own machine. here is the log for the CI
[2024-10-21T08:50:57.760Z] > ...
- 113
1
vote
1
answer
265
views
Alpine can't access variable set with data()
I'm using Astro with the Alpine integration, rendering set to static.
I am trying to fetch data and based on the response render some html client side.
stats.ts
const FUNCTIONS_BASE_URL = import.meta....
- 182
1
vote
2
answers
575
views
Accessing Astro global object in MDX pages or in an Astro component
I have a TypeScript library that, under given conditions, should redirect to an error page.
One way would be using the internal Astro global object, like with Astro.redirect('/404'). Unfortunately, ...
- 11.2k
0
votes
1
answer
312
views
Override external css class added by external script in Astro and Tailwind
I am using Astro and Tailwind CSS.
From an Astro component an external script is added which create some HTML dom elements (and its styling).
// MyComponent.astro
<script is:inline src={import.meta....
- 4,888
1
vote
1
answer
186
views
Astro site on Cloudflare Pages intermittent ReferenceError
I have a hybrid site built with Astro and deployed to Cloudflare pages. I have two API endpoints, one for a newsletter signup and one for a contact form - both interact with the SendGrid API. Both ...
- 685
1
vote
1
answer
210
views
Astro.js: Create a navigation structure per folder
I have an Astro website like follows:
Different department folders foo, bar, etc.
For each folder, there is a different navigation menu, used by the pages inside.
There are some common shared MDX ...
- 11.2k
1
vote
0
answers
43
views
Should i use the .0.mts file in Astro for typing client-side JS?
I'm querying for a web-component defined in a separate Astro component file as set out by this pattern.
I'd like typing and so I tried exporting the web-component name in the client-side JS. VSCode ...
- 19.6k
1
vote
1
answer
920
views
Multi-Tenant Setup in Astro
I am starting to play around with Astro(https://astro.build/) and I am super happy so far.
I am trying to build a multi-tenant website with 80+ different designs for one site. Markup should be mostly ...
- 23
0
votes
1
answer
344
views
Pass frontmatter variables to scripts using data-attribute and use in JavaScript Class
I have the following Astro component:
---
type Props = {
uuid: string;
};
const { uuid } = Astro.props;
---
<div class="my-feature" data-uuid={uuid} ...
- 4,888
1
vote
1
answer
751
views
Attaching click event handlers in Astro pages
In the component template section of an Astro page, I am adding the following script:
// src/pages/foo.astro
<script>
document.addEventListener('DOMContentLoaded', function() {
const ...
- 11.2k
0
votes
0
answers
124
views
How can I serve assets from an NPM module in an Astro project?
I'm looking for an automated way - not manually copying files into /public to serve assets that are inside an NPM module. This is quite a common pattern so I would have thought it would be ...
- 19.6k
-1
votes
1
answer
593
views
error while building astro on cloudflare pages
When i tried to build my simple astro blog, Cloudflare was unable to build it and gave this error
Cannot bundle Node.js built-in "stream"
the:
2024-10-04T08:47:14.977982Z [commonjs--resolver]...
2
votes
2
answers
1k
views
Changing the name of the _astro dist folder
I'm using Astro JS to build a google chrome extension, and I have a problem when using tailwind.
Apparently Astro adds the CSS files to an _astro folder in the dist but this causes conflicts with ...
- 33
0
votes
1
answer
173
views
Tailwind creating custom plugin but cannot get background color to show
Wanting to create a custom plugin for my project but I cannot get the theme colors to work. Any help would be appreciated.
Have tried adding the color manually which works but is not ideal to trying ...
-1
votes
1
answer
155
views
How can i avoid boilerplate code with Astro.currentLocale?
Here is an example of how i am using the Astro.currentLocale for translations in Astro.
---
import { getRelativeLocaleUrl } from "astro:i18n"
// Components
// imports ...
// i18n
import { ...
- 374
-2
votes
1
answer
143
views
How use an npm package in astro component
In my package.json I have the following package:
"dependencies": {
"@company/my-package": "0.1.2024.0.1",
}
I created an astro component MyPackage.astro.
Do i ...
- 4,888
0
votes
0
answers
107
views
How can I separate blog content from astro blog-site-code using Git
I have a prototype astro SSR blog. I want to separate the content from the site code so that I can version them independently and allow content collaboration without exposing site code to ...
- 87
0
votes
1
answer
193
views
Astro and Spline
I have a Spline animation that I want to add in Astro but I am not sure how. I don't want to integrate React in order for me to use it. There is a Vanilla JS example but I have a problem importing the ...
- 335
0
votes
1
answer
250
views
If Astro.js fetch failed - discard component
Lets say I have very simple Astro component which is fetching some data.
const data = await fetch("path-to-data.json").then((response) => response.json());
data.map(item => <h2>{...
- 45
1
vote
0
answers
574
views
Understand implementation difference between Astro dev, preview, and @astro/node standalone server
Using AstroJS: What are the differences between
dev
preview
@astro/node standalone server
What I have already, perhaps erroneously, learned:
I understand the dev server is Vite under the covers, ...
- 87
1
vote
1
answer
173
views
Error import markdown files in Astro using Astro.glob()
I was trying to import some markdown files in Astro in order to make a "dynamic" blog. I used Astro.glob(). I already had it functioning perfectly. However, since a recent update it stopped ...
- 11
0
votes
0
answers
475
views
How to use Astro's Image in a Vue.JS component?
I would be able to use Astro's image in my Vue.JS component so I can import them from assets folder and benefit from performance improvements of it's rendering.
Before using Vue.JS I was doing ...
- 4,497
0
votes
0
answers
302
views
Problems with Workers, Cloudflare and Keystatic
I'm currently developing a platform for open and free education with keystatic and Astro, ideal
We created a collection for each major in the university, each of them can create a semester and the ...
0
votes
0
answers
244
views
Dynamic Astro.js Link with data from api
We have a page where we are going to call some data from API, and use one of these data to create a variable link.
Our page code includes the following which calls 3 variables from API. I plan to use {...
0
votes
1
answer
574
views
Error while preparing request formData with AstroJS API
I am working on an endpoint with AstroJS. The aim here is to have a rest api endpoint that contains the handlers of the submitted forms.
In short, the endpoints that I will make requests with the POST ...
user12352274
0
votes
1
answer
224
views
Inserting AdSense in Markdown Content
I'm using Astro to make a blog page and I have several posts. I use MDX for the content management. I'd like to insert AdSense units randomly between paragraphs throughout the content. How to to this?
...
- 13
1
vote
1
answer
940
views
No binding to D1 in Astro and Cloudflare on build
I have Astro app with connection to D1 database using Cloudflare and wrangler.
According to this tutorial (but using Framework starter - Astro):
I created database, added d1 binding in wrangler.toml, ...
- 415
0
votes
1
answer
44
views
Weird Space Between Image and Card
I'm making a website, and I'm pretty much done with it, except for one thing. See, I have an InfoComponent (or card for the sake of simplicity), and on the the 1st and 3rd cards, the images are on the ...
2
votes
1
answer
79
views
prettier change multi line into single line despite not crossing print width
VS Code 1.92.1
Ubuntu 24.04
Astro based project
Prettier extension installed and set formatter for code-snippets extension as below
.prettierrc file content
printWidth: 140,
semi: true,
...
- 54.2k