Make a separate website for docs about dripsy HOT 33 CLOSED

As long as you have the babel plugin, and setup the babel transpilation of the source lib (this one), that should work. Even with SSR, it should work, it's just that you won't get the styles inlined in html page, that would produce fouc.

I can create an example if you want

from dripsy.

I think you should use a monorepo in such case and it should work out of the box. So you have any error?

from dripsy.

I know there are a few gatsby themes for documentation. I found this one after a quick search: https://github.com/johno/gatsby-theme-documentation. It was created with MDX and theme-ui.

I'm in agreement using MDX for the components would be the way to go.

I don't have as much experience with Next but don't mind digging in and helping with the site.

from dripsy.

Hey,

The Gatsby plugin works but is a bit hacky (using a duplicate babel loader instead of merging the 2 babel loaders, and some people reported problems recently that I need to check)

The support is probably better for Next, as they perform a real merge of expo and next configs.

I work on docusaurus (as a contractor for Facebook), it's quite similar to Gatsby, but with a focus on docs feature. If you want to focus on content (ie just md files), it would work great. There's a plugin system and you should be able to add the rnw babel plugin easily. But for RNW SSR I think it would be more complicated to integrate (probably need more lifecycles), so it's up to you, if you need to render the RNW stuff server-side or if you can init them on client side in something like a react-live playground.

from dripsy.

I'm still a bit swamped with work so I'm trying to knock out issues that I'm facing in my app, but as Dripsy increases in visibility I'm going to start thinking more about docs.

I think what SWR did for their docs is really clean: https://swr.vercel.app/

Codesandboxes like they have could be cool for more elaborate examples too.

from dripsy.

SWR's docs do look super clean. Do you know if they are using another library/framework to build them?

I've been playing with a few doc examples with Dripsy using Gatsby and Docusaurus.

from dripsy.

@nandorojo Have you already started on this? I don't mind prototyping a few versions from a few different doc generators this weekend in separate PR's.

from dripsy.

Cool, I'll put something together for both of those.

from dripsy.

Another clean design: https://radix-ui.com/primitives/docs/overview/introduction

I'm pretty far along on remaking geist UI using Dripsy by dogfooding in my app, so most of my time has been going towards that, as well as a framer-motion for react native using reanimated 2. I'll be publishing the monorepo of Dripsy asap, then we can set up CI/CD and implement docs.

from dripsy.

Do you think that you'll open-source the dripsy version of geist-ui?

I planned on releasing the component lib I've been building for my app and would much rather put efforts into helping maintain yours and extending mine with yours as a base if needed to reduce duplicate work.

That would also be great if we could build a custom docs site with a component lib that's built-in dripsy. Especially if it's very similar to geist, I think it looks great on doc sites.

from dripsy.

I'm open to open-sourcing it. It's currently a package in my app's monorepo, and since I'm still adding code to it a bit rapidly, getting it into its own repo will be a bit of work. Once I get it like 80% of the way there, I can start moving it into its own package, so I'll keep you updated on that @cmaycumber

from dripsy.

That would be very cool.

These are nice: https://react-hot-toast.com/docs

I might build some sort of toast using that + Dripsy + AnimatePresence in my upcoming animation package.

from dripsy.

Closing until there's movement here.

from dripsy.

@cmaycumber thanks so much! I'll investigate Gatsby vs Next a little bit (I know that theme-ui uses gatsby). My only reservation with Gatsby is that I'm not sure how well the react native web will perform with its mdx, since expo has given more priority to Next.js's integration in general.

However, I know that @slorber has done some amazing work with RNW + Gatsby, including having Expo + MDX in his own blog, so if we could use Gatsby like he did, I'm sure it would work!

from dripsy.

We don't really need to SSR RNW components for docs. We could lazy load them in an MDX playground, if that's possible.

from dripsy.

That would be super helpful if you have the time, thanks so much!

from dripsy.

I can try to take a crack at setting up Docusaurus once we get the fresnel-2 PR merged.

from dripsy.

Looks like SWR is using Nextra: https://github.com/shuding/nextra

from dripsy.

The person maintaining nextra recommended using Dokz https://github.com/remorses/dokz

Docz seems more feature-rich, but I'm not crazy about the design: https://www.docz.site/

from dripsy.

The person maintaining nextra recommended using Dokz https://github.com/remorses/dokz

Docz seems more feature-rich, but I'm not crazy about the design: https://www.docz.site/

If the documentation site they use for docz is the base site I agree the design isn't the best.

It looks like this docz theme might have some promise:

from dripsy.

Not yet. I think that sounds good if you want to start prototyping them. Since this is a design system, I like the idea of sleek docs. Nextra appears to be getting more maintenance now, so it could be a good option.

Theme UI's docs are nice as well. Same goes for Stitches.

from dripsy.

I've started playing around with a few of the doc generators. My favorite so far has been Docusaurus it's pretty feature-heavy and is pretty easy to work with after I set it up the first time.

I'm not sure how you think the style compares to some of the others but the functionality is pretty great so far.

from dripsy.

from dripsy.

@slorber Thanks for the input! I really enjoy the opinionated style of Docusaurus especially because it's a doc only solution and seems to do a great job at what it's built for.

A few quick questions:

1. Is there a way to wrap the entire application in an additional provider (e.i DripsyProvider so we can use component styles in MDX) without ejecting the layout theme component? Does the Layout component wrap the MDX by default?
2. I had some trouble getting the MDX to read the Dripsy package when it was aliased to the root folder when the Docusaurus was a subfolder inside of that. Do you think that this is possible? As a workaround, I just installed the latest version of Dripsy in the project and it worked fine in the MDX so definitely not a deal-breaker.

from dripsy.

Great to know 👍

Is there a way to wrap the entire application in an additional provider (e.i DripsyProvider so we can use component styles in MDX) without ejecting the layout theme component? Does the Layout component wrap the MDX by default?

We can to have a "wrapRoot" lifecycle method for CSS-in-JS libs and declaring providers.
Last alpha66 release split the layout in 3 so it's easier to maintain if you swizzle it in the meantime.
You can still create pages without this theme layout component, but all theme created pages use it.
I'd like to add an extra theme/Root component that is guaranteed to be there everywhere at the very top.

I had some trouble getting the MDX to read the Dripsy package when it was aliased to the root folder when the Docusaurus was a subfolder inside of that. Do you think that this is possible? As a workaround, I just installed the latest version of Dripsy in the project and it worked fine in the MDX so definitely not a deal-breaker.

I don't understand 🤪

from dripsy.

We can to have a "wrapRoot" lifecycle method for CSS-in-JS libs and declaring providers.

This reminds me of something very similar to Gatsby and was where I was originally looking for when trying to implement the provider at the top level.

I'd like to add an extra theme/Root component that is guaranteed to be there everywhere at the very top.

This makes sense to me as well!

I don't understand 🤪

Sorry, let me clarify a little.

The current project structure looks like:

- docs (Docusaruas)
- src
package.json

I'm curious if I can reference the top-level package.json as an alias in Docusaruses MDX.

For example File.mdx in Docusaruas:

import { View } from 'dripsy'; // This dripsy import looks for the package.json in the project root 

I hope that makes better sense. Thanks again for getting back.

from dripsy.

Chakra has nice docs: https://chakra-ui.com/docs/layout/box

from dripsy.

Chakra has nice docs: https://chakra-ui.com/docs/layout/box

I do like their docs a lot. They are extremely extensive.

@nandorojo Do you think that it's better to go with a doc generator or build a more custom solution? I think it would be nice if we can replicate a similar style with docusaurus because it's so easy to use.

from dripsy.

I don't see a problem with using a doc generator technically. My main concern with it is making sure the style can be unique and customized closely.

from dripsy.

Just some inspiration on how to organize docs. I'm pretty impressed by this: https://fullcalendar.io/docs

from dripsy.

https://github.com/gorhom/react-native-base-ui

from dripsy.

Recently just started playing around with react-view. It might be helpful for showcasing the different components, props, and the theming in the dripsy docs.

from dripsy.

I decided to go ahead and make this ahead of my talk at Next.js Conf.

dripsy.xyz

And v3 is also live! I'll be announcing it after my talk...

from dripsy.