Style guide best practices (#23516)

* structure

* Image maintenance

* Add page on screenshots

* Finish screenshot guidelines

* migrated over info on redirects

* structure for metadata page

* Add in code examples for metadata

* Added scripts and links to redirects

* Finish adding in links

* Denise feedback

* Apply suggestions from code review

Co-authored-by: Caley Burton <[email protected]>

* Tweaks from Caley

* Small update

---------

Co-authored-by: Caley Burton <[email protected]>

Author: kodster28

public/__redirects

@@ -1312,6 +1312,14 @@
 /stream/platform/ /stream/changelog/ 301
 /stream/reference/ /stream/faq/ 301
 
+# style guide
+
+/docs-guide/manage-content/redirects/ /style-guide/how-we-docs/redirects/ 301
+/docs-guide/manage-content/redirects/best-practices/ /style-guide/how-we-docs/redirects/ 301
+/docs-guide/manage-content/redirects/process/ /style-guide/how-we-docs/redirects/ 301
+/docs-guide/manage-content/metadata/ /style-guide/how-we-docs/metadata/ 301
+/docs-guide/manage-content/metadata/process/ /style-guide/how-we-docs/metadata/ 301
+
 # support
 
 /support/about-cloudflare/getting-started/troubleshooting-faq-for-new-cloudflare-customers/ /fundamentals/reference/troubleshooting/ 301

src/assets/images/style-guide/how-we-docs/intellisense.png

@@ -1,18 +1,17 @@
 ---
 pcx_content_type: concept
-title: API content strategy
+title: API docs content strategy
 sidebar:
   order: 5
-
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
-The API content strategy aims to:
+The API docs content strategy aims to:
 
-* Reduce internal and external user frustration
-* Align with industry standards in terms of naming conventions and descriptions
-* Create world-class content that is just as good, or better, than very popular API documentation
+- Reduce internal and external user frustration
+- Align with industry standards in terms of naming conventions and descriptions
+- Create world-class content that is just as good, or better, than very popular API documentation
 
 By ensuring Cloudflare's API content is straightforward, easy to navigate, and consistent, we can create world-class API content that eliminates user frustration and serves as an example of good API documentation.
 

src/assets/images/style-guide/how-we-docs/redirects-github.png

@@ -4,6 +4,12 @@ title: Mermaid
 
 Mermaid diagrams are added with [`remark-mermaid`](https://github.com/remcohaszing/rehype-mermaid/) and [`mermaid`](https://www.npmjs.com/package/mermaid).
 
+## Guidelines
+
+Use Mermaid diagrams to illustrate product or process flows. If they work for your use case, Mermaid diagrams are preferable to other [diagrams](/style-guide/documentation-content-strategy/component-attributes/diagrams/) because they are more easily searchable and changeable.
+
+## Usage
+
 ```mermaid
 flowchart LR
 accTitle: Tunnels diagram
@@ -40,4 +46,9 @@ E[Anycast IP] --> F[/Tunnel 1 / <br/> priority 1/] --> I{{Customer <br/> data ce
 E[Anycast IP] --> G[/Tunnel 2 / <br/> priority 1/] --> J{{Customer <br/> data center/ <br/> network 2}}
 E[Anycast IP] --> H[/Tunnel 3 / <br/> priority 2/] --> K{{Customer <br/> data center/ <br/> network 3}}
 ```
-````
+````
+
+## Related components
+
+- [Diagrams](/style-guide/documentation-content-strategy/component-attributes/diagrams/)
+- [Screenshots](/style-guide/documentation-content-strategy/component-attributes/screenshots/)