open-props icon indicating copy to clipboard operation
open-props copied to clipboard

use astro to build docsite

Open argyleink opened this issue 4 years ago • 11 comments

currently using vite and a single html and css file. would be nice to break out sections into astro components, with scoped generated classnames. hosting on firebase with PR actions would be sweet too =)

argyleink avatar Sep 16 '21 18:09 argyleink

super bonus if this site can stop shipping syntax highlighting and do it all at build time

argyleink avatar Sep 16 '21 18:09 argyleink

i'm also curious if it should be a different repo? is it akward maintaining this branch which doesnt really ever intend to sync with main?

argyleink avatar Sep 16 '21 18:09 argyleink

🙋‍♂️!! I got the Firebase and Astro parts!

Also I think dropping the fork is probably best for the sake of clarity.

davideast avatar Sep 16 '21 19:09 davideast

decent POC of latest astro/vite with OP https://salmon-quelea-5shlabcm.ws-us18.gitpod.io/

argyleink avatar Oct 12 '21 22:10 argyleink

Hi Adam. I used Vitepress which very much feels like Docusaurus for https://agnosticui.github.io/agnosticui -- I'm sure you've considered this already using Vite, but thought I'd mention just in case. It's pretty sweet in my opinion. Maybe not flexible enough for what you're after though I dunno. That said, you can add your own custom Vue components pretty much anywhere (and I did for my home page and customized examples in the Docs pages). Pretty painless to my mind.

roblevintennis avatar Dec 02 '21 11:12 roblevintennis

Vitepress is definitely a reasonable path forward too 👍🏻 Vite itself, and the component models it offers, could totally work. Guess it just depends if we want to go astro components or vue components.. not sure the whole tradeoff there.

one of the reasons to go astro is because it prerenders code snippets. on the current site, js is used to parse and tokenize the code snippets so they can be highlighted. so the work is done clientside, where astro would do it build time. do you know of ways for vite to do this?

argyleink avatar Dec 02 '21 17:12 argyleink

Looks like it's available but experimental: https://vitejs.dev/guide/ssr.html#ssr-specific-plugin-logic and I have not in fact done this before. I know Astro is gaining a lot of traction so that would definitely be a viable choice ;-)

roblevintennis avatar Dec 03 '21 11:12 roblevintennis

Astro also uses Vite now hehe

argyleink avatar Dec 04 '21 00:12 argyleink

I think you should consider Svelte(maybe with Astro). With the latest style directive and style props the site can become simpler, smaller and easily maintainable.

An example here: https://svelte.dev/repl/93f01349f0e745409b2e854ccc20bfca?version=3.46.0

Not the best implementations but it is just an example.

sharu725 avatar Jan 12 '22 08:01 sharu725

It might be helpful to set up a workspace a la yarn or npm workspaces 🤔

jasikpark avatar Jan 12 '22 15:01 jasikpark

I love this idea, just talked to Fred on the podcast. I think it adds a lot of flexibility and some good defaults. Would be good for future examples in React, Svelte, Vue also.

brittneypostma avatar Jan 20 '22 14:01 brittneypostma