search

geist-org / geist-ui

A design system for building modern websites and applications.
https://geist-ui.dev
MIT License
4.35k stars 335 forks source link

Support for Astro.build #812

Open shellwhale opened 1 year ago

shellwhale commented 1 year ago

About docs

The docs provide an example to make Geist work with Next.js but not for Astro

Description

I can't figure out how to make Geist work with Astro, there is an example for Next.js but not for Astro.

Page Links (Optional)

https://geist-ui.dev/en-us/guide/installation

diploidal commented 1 year ago

Hey @shellwhale 👋, Have You tried this Astro documentation -> https://docs.astro.build/en/guides/integrations-guide/react/ ?

It looks straight forward but I didn't have time to try it out myself.

voitaraujo commented 1 year ago

Assuming you've already installed astro's react integration; You can create a default layout for your pages that injects the geist css on the server side, like this:

RootLayout.astro

code

You may notice that this example resembles geist's custom server example, the difference being that i use .flushToHTML() method instead of .flush since they are being injected to a astro component not jsx, also to get the styles to the <head> tag you'll have to use the set:html property because the style tags will be on plain string(<head>{styles}<head/> won't work).

note: I tried creating this RootLayout as a .tsx file as well, but I couldn't get it to work correctly despite supposedly making all the necessary adjustments.