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
1
vote
1 answer
Mixing FirebaseUI CDN with NPM managament
Looking for the best way to mix npm and FirebaseUI with i18n.
I have Firebase libraries in the project and I want to keep its management under npm.
But FirebaseUI is not ready to use npm in other language than English.
So to use different languages,…
angelcervera
- 3,699
- 1
- 40
- 68
1
vote
2 answers
Simple password protected page in Astro
I am building my own portfolio and I was looking for a way that I could have some of my pages(case studies) locked behind a static password like 1234 and then store that in the browser's cookies. how can I do that with Astro…
Dark star
- 5,192
- 9
- 35
- 54
1
vote
2 answers
Astro: triggering typescript / javascript in astro from React form in onSubmit
Im experimenting with Astro and trying to create a login form on my Astro page. I want to use MUI components in React for my form. At the same time when the form in submitted I want to trigger Astro.redirect('/some-page'). I know from the docs…
Graunephar
- 112
- 1
- 9
1
vote
1 answer
Astro/Vue is executing appEntrypoint one time per component
I have few Vue components in an Astro page that are sharing the state via Pinia
I initialised the Pinia plugin as the Astro documentation mentions, via astro.config.mjs:
import {defineConfig} from 'astro/config';
import vue from '@astrojs/vue';
//…
angelcervera
- 3,699
- 1
- 40
- 68
1
vote
2 answers
Astro JS if statement
How could i put a condition in a component astro JS.
for example, how could i display a item if only is "DOG" ?
---
const items = ["Dog", "Cat", "Platypus"];
---
-
{items.map((item) => (
- {item} …
alexyon
- 13
- 1
- 4
1
vote
0 answers
How to create a separate schema for "draft" and "published" posts and how to make TypeScript easily distinguish them (Astro v2 Content Collections)
I am trying to set up the Content Collections for my blog in Astro. I almost immediately ran into problems with draft posts: they were missing some schema fields, and Zod didn't like that.
Digging into Zod's docs, I came up with…
HynekS
- 2,738
- 1
- 19
- 34
1
vote
1 answer
Using Alpine.js x-on events on Astro.js component
I'm trying to build some simple stuff with Astro.js for HTML templates and Alpine.js for interactivity when needed. I stumbled upon problem of trying to use Alpine x-on events on Astro component
Here is sample usage of the Button component:
damycode
- 23
- 1
- 8
1
vote
1 answer
Put some elements from component into head tag
I want that some tags from component to go to head tag.
I want to put in the slot named head.
How could achieve this ?
layout.astro
anaconda
- 1,065
- 10
- 20
1
vote
1 answer
How can I redirect pages in Astro?
I have a presentation on redirects
How can I do this redirect in Astro?
I am using ssr on Astro adapter and node
For example, my presentation is as follows
[
{
"id": 1,
"source":…
arezoo ebrahimi
- 55
- 6
1
vote
1 answer
AstroJS: Can I get a list of all pages withing a folder
I have an astro project with several .astro pages in src/pages/topics/ in my src/pages/index.astro file I would like to have a nav list with a link to each of the topic pages. Is there a way to automatically get a list of all pages within the topic…
jpala
- 83
- 8
1
vote
1 answer
Display data dynamically from component using javascript in astro.js
Astro.js & Javascript
Inside of a component i'm trying to map over some data one time and display different data from each rendered component in another file.
The component responsible for mapping the data
---
const skills = [
{
name:…
Halp_am_stuck
- 199
- 2
- 15
1
vote
1 answer
PostCSS Autoprefixer Setup in an Astro Project
What I'm trying to achieve
Set up automated autoprefixer on npm run build of an Astro project on all global stylesheets and component scoped styling to support other browsers and older browsers (up to about 2016).
My build
Astro v1.9.1
CSS compiled…
Lushawn
- 522
- 1
- 3
- 17
1
vote
2 answers
Build form submission handler using API Route in Astro JS framework
I am trying to Build a form submission handler for JS-free form submission.
But the api is not receiving the data sent by the html form.
I am following this documentation.
The signin.json.js file contains an export async function called post that…
KayD
- 746
- 5
- 15
1
vote
1 answer
Astrojs: How can I get a component to appear as inline text in an MDX file?
Question:
In the screenshot below, I want the first line to appear exactly as the second line. Is there a way to do this in Astrojs?
Here is my full reproduction on Codesandbox.
Here is what the output looks like (see below). Notice how the period…
Jesse Good
- 50,901
- 14
- 124
- 166
1
vote
3 answers
React Query does not work with Astro Framework
I'm trying to use React-Query with Astro to fetch data from my Django Rest Framework backend. Astro has been a great way to organize my react-based frontend but I am worried it might not be compatible with React-Query.
Whenever I try to make a query…
chenard612
- 101
- 2
- 15