32 ms·
As someone who has both used Gatsby and written custom static HTML generators, I do feel that Gatsby is far more complex than it needs to be. > there's no way
by lhorie 7y ago
As someone who has both used Gatsby and written custom static HTML generators, I do feel that Gatsby is far more complex than it needs to be.
> there's no way your "couple hundred lines of code" addressed more than a fraction of the real-world use cases addressed by Gatsby
Gatsby on its own doesn't actually do much. There are plugins to do most useful things. Here's an example: https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/ https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/
That is the "blessed" solution for code highlighting. Notice how you have to install 2 different NPM packages, add a bunch of ad-hoc configs (which don't have API docs) then add a bunch of Gatsby specific CSS. Do you see a section about embedding code highlighting in React? No? That's because it doesn't support it (meaning you have to hack it with `dangerouslySetInnerHtml` if you want code highlighting directly in a React subtree, such as a custom layout for a homepage containing a code snippet). The alternative if you were to write a custom script would be to just take 5 minutes to slap prism.js itself in the layout file (which amounts to adding a link tag and a script tag - something a beginner HTML developer can do)
And don't even get me started on migrating from Gatsby 2 to 3 :)
- rymate1234 7y agoThey have some legitimate reasons for the Gatsby specific CSS -- specifically because everything needs to be available at build time, and I assume the prismjs library depends on browser APIs that may not exist at build time. It's also not too surprising to hear that it doesn't support code highlighting out of the box in React given it's a plugin for Gatsby's remark plugin. However, because we added prismjs as a dependency, you can still use it in React without hacking it with `dangerouslySetInnerHtml` so no idea where you got that idea from: https://pathof.dev/blog/code-highlighting-in-react-using-prismjs https://pathof.dev/blog/code-highlighting-in-react-using-pri...
- lhorie 7y agoThe problem is that the way Gatsby uses React is different from the way most people use React. If you just use Prism the way you linked, you'll get an error about the DOM not being there (because with Gatsby, the code is running in Node). You need to use the `Prism.highlight()` API (which takes a string and returns a string) and AFAIK the only reasonable way to consume the output of that from React is through dangerouslySetInnerHtml. I'd be happy if you could point me to a way to use Prism w/ Gatsby that isn't as hacky. The React-on-server aspect actually has a somewhat profound impact on what you can do. For example, if you have a newsletter subscription component in some other project, there's an almost 100% chance that it won't work in Gatsby because it likely relies on some DOM-related API like onSubmit or onClick
- azangru 7y ago> And don't even get me started on migrating from Gatsby 2 to 3 I would actually love to get you started on this point. I have not heard of Gatsby 3. As far as I'm aware, Gatsby v2 is the latest. How do you migrate to 3?
- lhorie 7y agoOops, I meant from 1 to 2. I recalled there being three majors, but got mixed up because the first is the 0.x not 1.x