New infra from clayui.com with Gatsbyjs

[matuzalemsteles]

This is the new infra of the Clay website using Gatsbyjs.

New

We've added some news to improve the developer experience with the website:

• Adding the Algolia DocSearch smart search system
  • They make run the crawler every 24 hours so that the new contents appear in the search.
• New Try page - Developers can try Clay with a real time editor

Maintenance of documentation

• We can feed examples to the Try page inside the clayui.com/examples folder, the file name will be reflected in the Sidebar of the page.
• Documentations are fed into the clayui.com/content folder, but are not automatically reflected in the Sidebar, you need to add it inside the src/data/sidebars/doc-links.yaml file.

Disclaimer

• Code blocks do not yet support row numbering. But it is in progress at Add line numbers to prismjs plugin gatsbyjs/gatsby#5821.
• Gatsby does not work very well, yet, with a monorepo, but it's something they're working on in version 2.0, which is coming out of the oven.
  • I'm moving the package from clayui.com to the root folder, so we can continue working with it.
• The new documentations written in Adds new documentation to clayui.com #1013 are already here, with the changes.

Ideas

• We can enhance the interaction with the Try page and the documentation by adding a Try button on each code snippet to be redirected to the Try page...

Thanks @diegonvs for the help!

[coveralls]

Pull Request Test Coverage Report for Build 1000

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 80.754%

---

Totals
Change from base Build 986:	0.0%
Covered Lines:	5112
Relevant Lines:	5499

---

💛 - Coveralls

[jbalsas]

Hey @matuzalemsteles, @diegonvs, great work, this is looking great! @carloslancha, @julien, mind taking a look tomorrow to see what you think?

I'm a bit confused by the live editor... having to show an App component and a final Component.render... snippet is a bit confusing, don't you think? What type of demos can we add there?

Also, now that the cdn links are working, I think it should be fine to remove tha specific page and just add the copy/pasteable snippet in the Introduction page where is more visible.

Finally, can you explain the algolia search a bit more? Where's the API key coming from? What are their usage limitations? When developing, results will go straight to the published site, is there a way to test that locally?

Looking great, I'm really excited about this!! 👏

[jbalsas]

/cc @zenorocha, what do you think about this?

[matuzalemsteles]

hey @jbalsas, Thanks! 🎉

Finally, can you explain the algolia search a bit more? Where's the API key coming from? What are their usage limitations? When developing, results will go straight to the published site, is there a way to test that locally?

Yes, we can test locally but the data is from the live site, they index our site and have provided a key for us. You can see its implementation here a57b996. It searches for key words we type in the content of the site and also separates them by categories according to our Sidebar and offers suggestions of other similar pages (The settings can be seen here https://github.com/algolia/docsearch-configs/blob/master/configs/clay.json), the developer can click and he will be redirected to Clay website in the part he chose.

More information on how they do internally can be seen on the site.

DocSearch is being actively used by the community, some examples can be seen at site. 🙂

I'm a bit confused by the live editor... having to show an App component and a final Component.render... snippet is a bit confusing, don't you think? What type of demos can we add there?

Yes I thought of removing this too, but we have a point in favor of this, developers can create more complex interactions in Live Editor, like adding click events and interactions with more than one component. This gives many possibilities for developers to experiment with Try.

I can go with just the developer typing in the markup of the component and then joining it with an App "under the table" so I can render. But by doing this we can limit the possibilities 🙂.

We can go with both possibilities, the user type only the markup of the component we make the approach "under the table" and if it passes a class and Component.render we will go with them.

Also, now that the cdn links are working, I think it should be fine to remove tha specific page and just add the copy/pasteable snippet in the Introduction page where is more visible.

Oh yes, we can. It makes sense, I only care if people will easily find the link. Maybe... I'll go with that.

[zenorocha]

Looks promising!

[julien]

Hey @matuzalemsteles good work!

I checked it out and here are my comments

• I like the live editor in the "Try" section, I think it can be useful for testing things out, but I agree with @jbalsas about the Component.render call being a bit confusing.

• Concerning line numbers in code blocks, as far as I'm concerned it's not really a problem

• I understand that Gatsbyjs doesn't work very well in a monorepo: after all it's not a standard npm feature and other tools have the same issue, just as the missing line numbers it may be fixed in future releases.

• I think Algolia DocSearch will come in handy for our users

[matuzalemsteles]

hey @julien Thanks for feedback!

I made the changes based on your feedbacks, thanks guys!

[carloslancha]

Just started reviewing :)

Sent from GH.

[marcoscv-work]

Just started reviewing :)

Sent from GH.

[jbalsas]

I'm merging so we can publish this ahead of the official release tomorrow and have the site ready.

Site looks great, we should be able to work on top of this from now on :)

Great job @matuzalemsteles, @diegonvs!

[zenorocha]

I'm glad to see this merged! What are the possibilities to have this for other sites?

[jbalsas]

We will be working on the others under our control in the next months. Not sure what we can do with the existing electric user-base, though... 🤔