A static site building framework giving high speed performance and a modernized development flow. Astro converts your website source code to static HTML during the building process, resulting in an almost fully static website with minimal JavaScript leftover. This results in maximized speed for loading content from the web browser.
Questions tagged [astrojs]
196 questions
3
votes
2 answers
Can the Astro Static Site Generator framework be used to create pages on the fly from data fetched from an API?
A project in our company was built using Astro and Svelte. In this project, API calls have to be made to a CMS to create blog posts dynamically. I would like a way for my clients to write blog posts, update the CMS(GraphCMS) and see that the website…
Aryan3212
- 121
- 2
- 9
2
votes
1 answer
Using markdown wiki-links in Astro framework
I'm building a website using the Astro framework, and I want to use Markdown wiki-links (links formatted like this [[link to post]] from Obsidian to link to other pages on my site. For example, I want to be able to write [[Page Name]] in my Markdown…
PHearst
- 751
- 6
- 29
2
votes
1 answer
Bundle code as a separate js file in Astro (astro.build, astrojs)
I was wondering if there was way to have a src/somescript.ts to participate in bundling but to be output as a separate file in the build dist/somescript.ts not referenced by a page.
When building a browser extension we can reference a…
stormwild
- 2,855
- 2
- 31
- 38
2
votes
1 answer
Astro.js dynamic routing
I am trying to create dynamic routes using astro.js. I managed to display the data, however when I am trying to access each object of the data and see some details, I get this error:
A `getStaticPaths()` route pattern was matched, but no matching…
Maria
- 21
- 2
2
votes
1 answer
Accept general HTML element props in TypeScript Astro component
Using Astro with TypeScript, I'm creating a reusable UI component. The component is just a wrapper for the HTML tag. The problem is I would have to define the interface Props with all the general HTML properties for element by myself (href,…
Sang
- 490
- 2
- 5
- 14
2
votes
0 answers
Using Astro.js with Preact and React hook forms
I have a problem with setting up Preact to work with library https://react-hook-form.com
When i try to use it i get Cannot read properties of undefined (reading 'useForm')
Is it even possible to use this library with Preact and Astro
Here is my…
IvonaK
- 119
- 10
2
votes
2 answers
Dynamically import all images from a folder in Astro
I am working with Astro. The project uses quite a few images, and I want to simplify the way I currently add new images. My routes are like:
example.com/pictures/[collection]
( "[" and "]" stands for a dynamic route )
Allowing for…
Genaro Bonavita
- 41
- 3
2
votes
2 answers
For Astro.js, how do I inject page content (seo meta tags) into section of an Astro layout?
I've got an Astro.js layout file with a header, footer, and all the other things I want to appear on every page on my site. There are two areas (names slots) that I want to put page content into. One area in the and one in the (between the header…
Costa Michailidis
- 7,691
- 15
- 72
- 124
2
votes
2 answers
What's the best way to pass markdown to an Astro component as a prop
What I'm trying to do
A simple way to render the content of a markdown file when it's passed as a string to another component using .compiledContent (or even using .rawContnent)? Or even a better way than this as obviously usually in Astro we can…
Lushawn
- 522
- 1
- 3
- 17
2
votes
1 answer
How to fix the "Unexpected &" while creating a custom react astro component?
I integrated react with an astro site. I am creating a custom input component with astro, react, and mui to reuse. I am trying to have extra custom props, but I am getting the error, as shown in the screenshot.
It works when I don't give any custom…
Sara Lufi
- 95
- 1
- 6
2
votes
2 answers
Astro js server-side rendering custom error page
I've seen the custom 404.astro page. But how does this translate to server-side rendering? (Using the node.js adapter if that matters.)
Looking at the Response docs, I thought about writing something like:
---
import { render } from…
mb21
- 34,845
- 8
- 116
- 142
2
votes
1 answer
How to toggle display state of a component in Astro
I have a Astro component defined. It has a menu button which should show/hide a component based on the click of this button. This is how I have defined my component:
---
let menuHidden = true;
---
Prashant
- 4,775
- 3
- 28
- 47
2
votes
2 answers
How to self reference Astro component
I have this component Astro component (located at "src/components/Menu.astro");
---
export interface MenuItem {
name: string;
link: string;
items?: MenuItem[];
}
export interface Props {
items: MenuItem[];
depth: number;
}
const { items,…
ozanmuyes
- 721
- 12
- 26
2
votes
1 answer
Why is my Docker Image so large for AstroJS app?
I'm working on a webpage built with Astrojs. I'm fairly newbie as a frontend developer, and definitely not a full expert in Docker, but my current working folder is 270MB in size, dependencies included, yet when i build the docker image it gets to…
RabidTunes
- 775
- 1
- 8
- 21
2
votes
1 answer
Hide or show div according data json in Astro's component
I have site.json in my project with a lot of strings of data.
How can I read the json file and hide or show specific div according to JSON data?
Since my projects, for which I create components, do not all contain references to githab or have a…
Sergo
- 93
- 3
- 10