Add images to contributing

Author: jpipkin1

docs/contributing/style-guide.md

@@ -894,7 +894,7 @@ Always start with `1.`. Markdown automatically numbers sequentially when buildin
    1. Ordered sub-list.
 1. And another item.
 
-  More content for this entry. And a screenshot:<br/> ![span hover](/img/apm/span-hover-view.png)
+  More content for this entry. And a screenshot:<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="400" />
 
 ```
 </TabItem>
@@ -906,7 +906,7 @@ Always start with `1.`. Markdown automatically numbers sequentially when buildin
 1. Actual numbers do not matter, just that it is a number.
    1. Ordered sub-list.
 1. And another item.
-   * More content for this entry. And a screenshot:<br/> ![span hover](/img/apm/span-hover-view.png)
+   * More content for this entry. And a screenshot:<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="400" />
 
 </TabItem>
 </Tabs>
@@ -1271,10 +1271,6 @@ In the UI, avoid periods for single sentences on their own. Whenever there are t
 
 Our release notes (also known as changelog) are posted to the both the docs site and corresponding RSS feed. Check out the categories [here](/docs/release-notes). Keep your them concise and add links to documentation. If there are updated UI elements, add an image or gif.
 
-### Text only
-
-To add a text-only release note:
-
 1. In the appropriate blog folder ([blog-collector](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-collector), [blog-cse](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-cse), [blog-csoar](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-csoar), [blog-developer](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-developer), [blog-service](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-service)), add a new file that follows the format of the other posts in that folder. For example, for blog-service release notes, the format is `YYYY-MM-DD-<product/feature>`. For Cloud SIEM and SOAR, the format is `YYYY-MM-DD-application-update` or `YYYY-MM-DD-content-update`.<br/><img src={useBaseUrl('img/contributing/release-notes-dropdown-menu.png')} alt="Release notes menu" style={{border: '1px solid gray'}} width="200"/>
 1. Add the following frontmatter, swapping out these example values with your own. Because there's no `image`, we'll use the Sumo Logic logo in its place.
     ```markdown
@@ -1294,29 +1290,10 @@ To add a text-only release note:
     * `hide-table-of-contents`. Hide the TOC on the page, keeping the notes clean and wide on the page.
 1. Document the release notes. Add links, bullets, and images as needed.
 
-#### Long release notes
+### Long release notes
 
 For lengthy release notes, we recommend introducing the notes and adding a truncate line (`<!--truncate-->`), followed by the full set of release notes.
 
-### Text and images
-
-To add release notes with images:
-
-1. In the blog folder, create a new folder with the following name format: `YYYY-MM-DD-product`.
-1. In the new folder, create a markdown file named `index.md`.
-1. Add your release notes with frontmatter:
-    ```markdown
-    ---
-    title: New XYZ Feature
-    hide_table_of_contents: true
-    keywords:
-      - alerts
-    image: https://assets-www.sumologic.com/company-logos/_800x418_crop_center-center_82_none/SumoLogic_Preview_600x600.jpg?mtime=1617040082
-    ---
-    ```
-1. Save the image to this folder and add them to the markdown file: `![alt text](image-name.png)`.
-
-
 ## Reusing content
 
 For repeatable content - an identical section that appears in one or more docs - you can save a lot of time by creating one instance of that content in the `/docs/reuse` folder and then importing that snippet to other docs.
@@ -1386,7 +1363,7 @@ Tables use plain markdown with one header, default left-aligned columns, and mul
 | Started At | 07/27/2020 09:01:04.533 | When the trace started. |
 | Duration | 12.582 ms | The amount of time the trace spans.  |
 | Number of spans | 35 | A trace consists of spans. This number tells you how many spans are in the trace. |
-| Duration Breakdown | ![breakdown](/img/apm/traces/breakdown.png) | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/>![span hover](/img/apm/traces/span-hover-view.png) |
+| Duration Breakdown | <img src={useBaseUrl('img/apm/traces/breakdown.png')} alt="Breakdown" style={{border: '1px solid gray'}} width="200" /> | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="300" /> |
 | Number of errors | 0 | The number of errors in the trace. |
 | Status | 200 | The HTTP status code of the trace. |
 ```
@@ -1421,7 +1398,7 @@ Markdown | Less | Pretty
 | Started At | 07/27/2020 09:01:04.533 | When the trace started. |
 | Duration | 12.582 ms | The amount of time the trace spans.  |
 | Number of spans | 35 | A trace consists of spans. This number tells you how many spans are in the trace. |
-| Duration Breakdown | ![breakdown](/img/apm/traces/breakdown.png) | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/>![span hover](/img/apm/span-hover-view.png) |
+| Duration Breakdown | <img src={useBaseUrl('img/apm/traces/breakdown.png')} alt="Breakdown" style={{border: '1px solid gray'}} width="200" /> | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="300" /> |
 | Number of errors | 0 | The number of errors in the trace. |
 | Status | 200 | The HTTP status code of the trace. |
 

docs/contributing/templates/generic-doc.md

@@ -9,6 +9,8 @@ description: Example template for creating a document in the Sumo Logic guides.
   <meta name="robots" content="noindex" />
 </head>
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <!--Copy this markdown file and replace it with your own documentation. To view the full list of markdown components, see our [Style Guide](/docs/contributing/style-guide).
 
 Replace the title above in the [Frontmatter section](/docs/contributing/style-guide#frontmatter) with yours. This will render as an H1 header. All other header sections should be H2, H3, H4, or H5.-->
@@ -20,7 +22,7 @@ To add an image, save the .png file with a simple name to the `/static/img` fold
 
 Example:
 
-![Sumo Logic logo](/img/reuse/sumo-square.png)
+<img src={useBaseUrl('img/reuse/sumo-square.png')} alt="Sumo Logic logo" style={{border: '1px solid gray'}} width="50" />
 -->
 
 ### Instructions
@@ -31,7 +33,7 @@ Always use `1.` to start your instructions. You do not need to actually number t
 1. Click **Collections**, then **Sources** tab.
 1. Next step, just write it out.
     * Bullet list just tab and use `*` or `1.`.
-    * Next bullet.<br/>![Sumo Logic logo](/img/reuse/sumo-square.png)
+    * Next bullet.<br/><img src={useBaseUrl('img/reuse/sumo-square.png')} alt="Sumo Logic logo" style={{border: '1px solid gray'}} width="50" />
 1. The numbers continue with content indented above!
 
 Here is an example table: