search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.67k stars 191 forks source link

use astro to build docsite #3

Open argyleink opened 3 years ago

argyleink commented 3 years ago

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 commented 3 years ago

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

argyleink commented 3 years ago

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?

davideast commented 3 years ago

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

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

argyleink commented 2 years ago

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

roblevintennis commented 2 years ago

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.

argyleink commented 2 years ago

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?

roblevintennis commented 2 years ago

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 ;-)

argyleink commented 2 years ago

Astro also uses Vite now hehe

sharu725 commented 2 years ago

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.

jasikpark commented 2 years ago

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

brittneypostma commented 2 years ago

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.