edit documetation page

This commit is contained in:
burnettk 2023-05-19 10:18:14 -04:00
parent d7a9eb237e
commit ec7ecc1706
1 changed files with 39 additions and 31 deletions

View File

@ -2,45 +2,47 @@
This documentation is currently hosted live at [Spiff-Arena's ReadTheDocs](https://spiff-arena.readthedocs.io/en/latest/) This documentation is currently hosted live at [Spiff-Arena's ReadTheDocs](https://spiff-arena.readthedocs.io/en/latest/)
Please set aside a couple of hours to work through this, as getting this setup correctly once is 10,000 times better than having problems every day for the rest of your life. Please set aside a couple of hours to work through this, as getting this setup correctly once is 10,000 times better than having problems every day for the rest of your life.
## Our Methodology ## Our Methodology
The methodology we are following is knowns as ["Docs as Code"](https://www.writethedocs.org/guide/docs-as-code/) The methodology we are following is known as ["Docs as Code"](https://www.writethedocs.org/guide/docs-as-code/).
This means using the same tools and processes that software developers use for writing code to write the documenation for code. This means using the same tools and processes that software developers use for writing code to write the documentation for code.
In following this methodoloy, you will have to pick up some tools you haven't had to use before (Git, Sphinx). In following this methodology, you will have to pick up some tools you haven't had to use before (Git, Sphinx).
Why would a technical writer need to learn these software engineering tools? Why would a technical writer need to learn these software engineering tools?
I'll never make the case as well as an article by [Tom Johnson](https://idratherbewriting.com/trends/trends-to-follow-or-forget-docs-as-code.html). I'll never make the case as well as an article by [Tom Johnson](https://idratherbewriting.com/trends/trends-to-follow-or-forget-docs-as-code.html).
You might notice, when looking at the markdown files, that every sentence starts on a new line. You might notice, when looking at the markdown files, that every sentence starts on a new line.
Like this one. Like this one.
Unless there is a blank line between sentences, Markdown will still render this as a paragraph. Unless there is a blank line between sentences, Markdown will still render this as a paragraph.
This is called [Ventilated Code](https://vanemden.wordpress.com/2009/01/01/ventilated-prose/) and can be very helpful when working in Markdown. This is called [Ventilated Prose](https://vanemden.wordpress.com/2009/01/01/ventilated-prose/) and can be very helpful when working in Markdown.
## Our Tools ## Our Tools
[Markdown](https://www.markdownguide.org/getting-started/) is a "markup language that you can use to add formatting elements to plain text documents. [Markdown](https://www.markdownguide.org/getting-started/) is a "markup language that you can use to add formatting elements to plain text documents."
You won't be writing the documentation in a word processor, but in simple plain text, and using some special syntax that will consistently and professionally format that text. You won't be writing the documentation in a word processor, but in simple plain text, and some special syntax that will consistently and professionally format that text.
The basic Markdown syntax is very simple.
The basic Markdown syntax is very simple. Here are some [quick examples](https://commonmark.org/help/). And here is a great [10 minute tutorial](https://commonmark.org/help/tutorial/). Here are some [quick examples](https://commonmark.org/help/). And here is a great [10 minute tutorial](https://commonmark.org/help/tutorial/).
This will cover a lot of the basics, like bolding text, italics, paragraphs, lists and other common formatting techniques. This will cover a lot of the basics, like bolding text, italics, paragraphs, lists and other common formatting techniques.
![Markdown screenshot](./images/markdown.png "Markdown example") ![Markdown screenshot](./images/markdown.png "Markdown example")
### MyST ### MyST
Markdown doesn't support some really useful things. Markdown doesn't support some really useful things.
You can't add footnotes, or create an "aside" comment or build a table. You can't add footnotes, or create an "aside" comment or build a table.
Because of this there are many extensions typically referened to as Markdown "Flavors". Because of this, there are many extensions, and these are typically referred to as Markdown "Flavors."
The flavor we are using is MyST. The flavor we are using is MyST.
There is [excellent documentation on MyST](https://myst-parser.readthedocs.io/en/v0.13.5/using/syntax.html) that you should definitely review, so you know everthing that is available to you. There is [excellent documentation on MyST](https://myst-parser.readthedocs.io/en/v0.13.5/using/syntax.html) that you should definitely review, so you know everything that is available to you.
### Sphinx ### Sphinx
This is a large documenation effort. Many different Markdown pages will together make up the full website.
This is a large documentation effort.
Many different Markdown pages will together make up the full website.
You will mostly use Sphinx in the background - you won't be aware of it. You will mostly use Sphinx in the background - you won't be aware of it.
But if you decide that you want to alter the theme (the colors, styles, etc...) of the final website, Sphinx controls this and offers [themes](https://sphinx-themes.org/) and the ability to change styles / colors and formatting through the site. But if you decide that you want to alter the theme (the colors, styles, etc...) of the final website, Sphinx controls this and offers [themes](https://sphinx-themes.org/) and the ability to change styles / colors and formatting through the site.
@ -48,10 +50,13 @@ You just need to learn a little CSS to control it.
### GitHub ### GitHub
Our project is managed by a version control system called Git. Our project is managed by a version control system called Git.
You can use GIT to submit changes to the documenation, in the same we use to submit changes to our code. You can use GIT to submit changes to the documentation, in the same we use to submit changes to our code.
It is avilable on GitHub as the [spiff-arena project](https://github.com/sartography/spiff-arena). Git also manages versions of the code, and handles running tests, and causing our documenation to be built and deployed. It is available on GitHub as the [spiff-arena project](https://github.com/sartography/spiff-arena).
It will take a bit to get comfortable with Git, but when you do, you will come to love it (or maybe hate it, but with a lot of respect) GitHub also manages versions of the code and handles running tests.
Readthedocs observes changes in git and manages an automated process that causes our documentation to be built and deployed.
It will take a bit to get comfortable with Git, but when you do, you will come to love it (or maybe hate it, but with a lot of respect).
## Setup ## Setup
@ -60,7 +65,7 @@ But you will find that most of it just works - and that once you get into a regu
### Step 1: Pre-Requisites ### Step 1: Pre-Requisites
Assure you have been granted write access to our repository. Assure you have been granted write access to our git repository.
Make sure you have an account on GitHub and then contact dan@sartography.com and ask him to add you as a contributor. Make sure you have an account on GitHub and then contact dan@sartography.com and ask him to add you as a contributor.
@ -68,32 +73,34 @@ Make sure you have an account on GitHub and then contact dan@sartography.com and
[Download VSCode](https://code.visualstudio.com/) and install it on your computer. [Download VSCode](https://code.visualstudio.com/) and install it on your computer.
### Step 3: Install Python ### Step 3: Install Python
We need python in order to build the website locally so we can really see what our content is going to look like once we publish. It's going to be handy for other reasons as well. We'll want python to be properly set up inside of VS Code. Follow [these directions and brief tutorial](https://code.visualstudio.com/docs/python/python-tutorial We need python in order to build the website locally so we can really see what our content is going to look like once we publish.
) to assure this is set up. It's going to be handy for other reasons as well.
We'll want python to be properly set up inside of VS Code.
Follow [these directions and brief tutorial](https://code.visualstudio.com/docs/python/python-tutorial) to assure this is set up.
### Step 3: Connect VSCode to Git ### Step 3: Connect VSCode to Git
VSCode comes with Git built in. VSCode comes with Git built in.
So you can use VSCode to "pull" changes from others down to your local computer and "push" changes back up to share with others (and to cause our docs site to rebuild) So you can use VSCode to "pull" changes from others down to your local computer and "push" changes back up to share with others (and to cause our docs site to rebuild).
Here are directions for how to [clone Spiff-Arena](https://learn.microsoft.com/en-us/azure/developer/javascript/how-to/with-visual-studio-code/clone-github-repository?tabs=create-repo-command-palette%2Cinitialize-repo-activity-bar%2Ccreate-branch-command-palette%2Ccommit-changes-command-palette%2Cpush-command-palette#clone-repository). **IMPORTANT**: Follow those directions, but be sure to checkout https://github.com/sartography/spiff-arena instead of the project they are using! Here are directions for how to [clone Spiff-Arena](https://learn.microsoft.com/en-us/azure/developer/javascript/how-to/with-visual-studio-code/clone-github-repository?tabs=create-repo-command-palette%2Cinitialize-repo-activity-bar%2Ccreate-branch-command-palette%2Ccommit-changes-command-palette%2Cpush-command-palette#clone-repository).
**IMPORTANT**: Follow those directions, but be sure to checkout https://github.com/sartography/spiff-arena instead of the project they are using!
You can save the project to any directory on your computer. You can save the project to any directory on your computer.
We strongly suggest you create a sub-folder called "projects" in your "home" or "Desktop" folder and checkout the code into this directory. We strongly suggest you create a sub-folder called "projects" in your "home" or "Desktop" folder and checkout the code into this directory.
### Step 4: Open just the Docs Folder ### Step 4: Open just the Docs Folder
We've checked out the whole spiff-arena project, but we are only going to be working inside of the docs directory. So let's open just that folder in VSCode. We've checked out the whole spiff-arena project, but we are only going to be working inside of the docs directory.
So let's open just that folder in VSCode.
* Go to File -> Open Folder * Go to File -> Open Folder
* Select the "docs" folder inside of spiff-arena. * Select the "docs" folder inside of spiff-arena.
Now clikc on the two pieces of paper at the top corner of your screen, and you should see a project that looks like this: Now clikc on the two pieces of paper at the top corner of your screen, and you should see a project that looks like this without all the rest of the code in your way:
![Docs Directory](./images/docs_dir.png "Docs Directory") ![Docs Directory](./images/docs_dir.png "Docs Directory")
Without all the rest of the code in your way.
### Step 4: Add some extensions ### Step 4: Add some extensions
* Inside VSCode, go to File -> Preferences -> Extensions * Inside VSCode, go to File -> Preferences -> Extensions
@ -105,7 +112,9 @@ Without all the rest of the code in your way.
### Step 5: Install Python Dependencies ### Step 5: Install Python Dependencies
This project requires a few Python dependencies to work correctly. We are going to set up a Virtual Evironment for Python to keep us sane later on. You can do that by following these steps: This project requires a few Python dependencies to work correctly.
We are going to set up a Virtual Environment for Python to keep us sane later on.
You can do that by following these steps:
1. Open the Command Palette (Ctrl+Shift+P), start typing the **Python: Create Environment** command to search, and then select the command. 1. Open the Command Palette (Ctrl+Shift+P), start typing the **Python: Create Environment** command to search, and then select the command.
1. Select **Venv** 1. Select **Venv**
@ -114,18 +123,17 @@ This project requires a few Python dependencies to work correctly. We are goin
1. Click OK. 1. Click OK.
### Step 6: Fire up the website ### Step 6: Fire up the website
1. Go to Terminial -> New Terminal 1. Go to Terminal -> New Terminal
1. type: **sphinx-autobuild . _build/html** at the prompt and hit enter. 1. type: **sphinx-autobuild . _build/html** at the prompt and hit enter.
1. Open your browser and go to http://127.0.0.1:8000 1. Open your browser and go to http://127.0.0.1:8000
### Step 7: Make a chance ### Step 7: Make a change
1. Open up a markdown file, and make a change. 1. Open up a markdown file, and make a change.
### Step 8: Commit your changes and push them up for everyone. ### Step 8: Commit your changes and push them up for everyone.
1. Select the "git" button on the left hand side of the toolbar (cricles with lines between them) ![Git button](./images/git.png "Git button") 1. Select the "git" button on the left hand side of the toolbar (circles with lines between them) ![Git button](./images/git.png "Git button")
2. Press the blue "Commit" button. 2. Press the blue "Commit" button.
3. Any changes you pushed up, should be live on our website within 5 to 10 minutes. 3. Any changes you pushed up should be live on our website within 5 to 10 minutes.