Docs: make Add To Your Site into pages

[privatemaker]

Starting on #7051 I split up the four sections on add-to-your-site.md

In the process of this, I realized some related things:

The Platform Guides Overview page seems like it belongs better as the Overview for Add To Your Site group, as it really gives a more general overview vs. specific to static site generators.

In fact, that page does not say anything about SSGs so it is odd that it is down there.

[netlify]

❌ Deploy Preview for decap-www failed.

Name	Link
🔨 Latest commit	154f75e
🔍 Latest deploy log	https://app.netlify.com/sites/decap-www/deploys/65bd028c1f9a7d00080090a3

[martinjagodic]

Great point @privatemaker. Can you please merge the 2 overviews? The platform guide doesn't need an overview page IMO.

On a side note, it's a bit confusing that we have several pages named Overview. We could solve this by adding the section name to the title, like Account Settings Overview. Your opinion?

[privatemaker]

I'm glad you agree with my instincts 🥳 I also found multiple Overview pages to be undesirable.

I've pushed a change with the first in Add To Your Site group now:

• Basic Steps

Additionally, there are some parts in Intro section that could probably be trimmed and worked into this section instead.

[privatemaker]

Also, this should have a redirect from /docs/add-to-your-site to the new /docs/basic-steps/ path. I just pushed that.

[privatemaker]

@martinjagodic what is your thoughts on these changes? Anything else you'd like me to do?

[martinjagodic]

@privatemaker sorry to keep you waiting. This is way better, but I miss a step navigation now. Either on the bottom or by the side or whatever, just to make the user feel that this is one tutorial. I want to discuss this with the team internally before merging. I will get back to you next week on this.

If you have any ideas please share 😊

[privatemaker]

@martinjagodic re: missing "a step navigation now." I see what you mean. There is actually some confusion on this as the terms in my Basic Steps page and the actual corresponding pages is not lining up semantically now. While a user is on the Basic Steps page it shows the 1. 2. 3. 4. steps in the sidebar, and the almost same named pages below that.

Here is what I propose:

• Decrease <h2> tags on Basic Steps so they don't generate the navigation tree
• Rename new page App File Structure to 1. Install Decap CMS
• Place numbers in front those of the pages on the sidebar
• Add link at bottom of each page Go to Step 2: Choosing a Backend

I think that will give it more of a walk through experience, which as you point out (and I agree) is very much needed.

If this sounds good, I can get to this later in the week.

[martinjagodic]

@privatemaker this is very similar to what I had in mind, so I agree with all your proposals. Please, go ahead.

[privatemaker]

Ok cool. These changes are now done.

Note: I think buttons would be nicer than text links at the bottom of the page, but I'm not sure how easy that is in this site's Gatsby setup.

[martinjagodic]

I agree about the buttons. The site does not support MDX, so components can't be used. But you can use HTML and we can work with that. In src/global-styles.js you can define CSS classes. The button already exists, so you can use that.

In essence, this will work:
<a href="/docs/install-decap-cms/" class="button">1. Install Decap CMS</a>

[privatemaker]

This looks ok, I added a few more classes to that file src/global-styles.js and the result is:

Feel free to adjust or discard this.

[martinjagodic]

I agree, this could look better, but we have to work with what we have here. As mentioned in another discussion I will move the website to its own repo, and we can work on improving that there.

@privatemaker your batch of contributions to the docs are a major improvement, I thank you on behalf of the community. 🙏

[privatemaker]

@martinjagodic I'm really glad to have helped out. It will also make my work time referencing the docs easier... 😄