[Style Guide] Move Asides, LastReviewed, Mermaid content (#26899)

* [Style Guide] Move `Asides` content

* Added changes for LastReviewed

* Apply suggestions from code review

* Moved mermaid content

* Apply suggestions from code review

Co-authored-by: Pedro Sousa <[email protected]>

* Addressing Pedro's feedback

* Fixed link

---------

Co-authored-by: Pedro Sousa <[email protected]>

Author: ToriLindsay

public/__redirects

@@ -1355,6 +1355,9 @@
 /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
+/style-guide/components/asides/ /style-guide/formatting/notes-and-other-notation-types/ 301
+/style-guide/components/last-reviewed/ /style-guide/frontmatter/custom-properties/#reviewed 301
+/style-guide/components/mermaid/ /style-guide/documentation-content-strategy/component-attributes/diagrams/#mermaid-diagrams 301
 
 # support
 /support/about-cloudflare/getting-started/troubleshooting-faq-for-new-cloudflare-customers/ /fundamentals/reference/troubleshooting/ 301

src/content/docs/style-guide/components/asides.mdx

@@ -5,7 +5,7 @@ title: Diagrams
 
 ## Definition
 
-Images that depict a process, architecture, or some other form of technology. These should ideally be in an `SVG` format because of scalability issues.
+Visualizations that depict a process, architecture, or some other form of technology. We recommend either using [SVG files](#svg-diagrams) or [Mermaid diagrams](#mermaid-diagrams).
 
 ## Used in
 
@@ -15,27 +15,70 @@ All content types
 
 Diagrams explain complex topics in a compelling way and help users visualize a specific solution, process, or interaction between products.
 
-## Template
+## SVG diagrams
+
+Use SVG files instead of PNG or JPEG because SVG scales well when users want to zoom in. Use clear and straightforward `Alt text` with your SVG for use by screen readers.
+
+We optimize SVG files with a [recurring script](https://github.com/cloudflare/cloudflare-docs/blob/production/scripts/optimize-svgs.ts) in our repo.
+
+### Template
 
 ```md
 ![Alt text](/link/to/image.svg "Caption to go under the image")
 ```
 
-## Example
+### Example
+
+![A simple flow diagram shows interactions between important elements of the design.](~/assets/images/firewall/simple-flow.png "An example flow diagram")
 
+```md
 ![A simple flow diagram shows interactions between important elements of the design.](~/assets/images/firewall/simple-flow.png "An example flow diagram")
+## Mermaid diagrams
 
-## Additional information
+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.
 
-Always try to use SVG images for diagrams. Bitmap formats like PNG and JPEG do not scale well, and often users will zoom into diagrams to explore the details.
+Our Mermaid diagrams are based on [`rehype-mermaid`](https://github.com/remcohaszing/rehype-mermaid/) and [`mermaid`](https://www.npmjs.com/package/mermaid).
 
-The alt (alternative) text on diagrams is used by screen readers and is read out as part of the surrounding content. Ensure the alt text is straightforward and fits in the context of the content.
+## Template
 
-## Optimizations
+```mermaid
+flowchart LR
+accTitle: Tunnels diagram
+accDescr: The example in this diagram has three tunnel routes. Tunnels 1 and 2 have top priority and Tunnel 3 is secondary.
+
+subgraph Cloudflare
+direction LR
+B[Cloudflare <br/> data center]
+C[Cloudflare <br/> data center]
+D[Cloudflare <br/> data center]
+end
+
+A((User)) --> Cloudflare --- E[Anycast IP]
+E[Anycast IP] --> F[/Tunnel 1 / <br/> priority 1/] --> I{{Customer <br/> data center/ <br/> network 1}}
+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}}
+```
 
-When we use SVGs for diagrams, we can also optimize them via a [recurring script](https://github.com/cloudflare/cloudflare-docs/blob/production/scripts/optimize-svgs.ts) in our repo.
+````
+```mermaid
+flowchart LR
+accTitle: Tunnels diagram
+accDescr: The example in this diagram has three tunnel routes. Tunnels 1 and 2 have top priority and Tunnel 3 is secondary.
+
+subgraph Cloudflare
+direction LR
+B[Cloudflare <br/> data center]
+C[Cloudflare <br/> data center]
+D[Cloudflare <br/> data center]
+end
+
+A((User)) --> Cloudflare --- E[Anycast IP]
+E[Anycast IP] --> F[/Tunnel 1 / <br/> priority 1/] --> I{{Customer <br/> data center/ <br/> network 1}}
+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
 
-- [Mermaid diagrams](/style-guide/components/mermaid/)
 - [Screenshots](/style-guide/documentation-content-strategy/component-attributes/screenshots/)

src/content/docs/style-guide/components/last-reviewed.mdx

@@ -22,32 +22,25 @@ A colored info box or aside with content (text, images, lists, code blocks) that
 
 ## Templates
 
-Refer to [Asides](/style-guide/components/asides/) to learn how to build Asides.
+To learn how to format notes, refer to [Notes and other notation types](/style-guide/formatting/notes-and-other-notation-types/).
 
 ## Rendered examples
 
 :::note[Header text]
-This is a "note" aside.
-:::
-
-:::caution[Header text]
-This is a "warning" aside.
+This is a note with a header.
 :::
 
 :::note
-This is a `note` aside without a header.
+This is a note without a header.
 :::
 
-## Additional information
-
-The aside background color depends on the aside type:
-
-* Aside with "note" type — blue
-* Aside with "warning" type — orange
-
-An aside has an optional header displayed at the top (inside the colored box) in **bold**.
+:::caution
+This is a warning.
+:::
 
-The aside can contain a single sentence or additional content (lists, code blocks, images).
+:::tip
+This is a tip.
+:::
 
 ## When should I use a note/warning?
 

src/content/docs/style-guide/components/mermaid.mdx

@@ -9,7 +9,7 @@ We only recommend screenshots in [specific scenarios](#when-to-use), as they hav
 
 ## When to use
 
-Use screenshots sparingly and intentionally. For example, it's appropriate to use a screenshot when the task is simple but often confuses users or is hard to describe with words alone. 
+Use screenshots sparingly and intentionally. For example, it's appropriate to use a screenshot when the task is simple but often confuses users or is hard to describe with words alone.
 
 A canonical example of this would be [Find account and zone ID](/fundamentals/account/find-account-and-zone-ids/) because:
 
@@ -59,4 +59,4 @@ For more details on how we approach this maintenance, refer to [Image maintenanc
 ## Related components
 
 - [Diagrams](/style-guide/documentation-content-strategy/component-attributes/diagrams/)
-- [Mermaid diagrams](/style-guide/components/mermaid/)
+- [Mermaid diagrams](/style-guide/documentation-content-strategy/component-attributes/diagrams/#mermaid-diagrams)

src/content/docs/style-guide/documentation-content-strategy/component-attributes/diagrams.mdx

@@ -49,7 +49,6 @@ For more details, refer to [`pcx_content_type`](/style-guide/frontmatter/custom-
 #### Most used
 
 - [`GitHubCode`](/style-guide/components/github-code/)
-- [`LastReviewed`](/style-guide/components/last-reviewed/)
 - [`ListTutorials`](/style-guide/components/list-tutorials/)
 
 #### Required

src/content/docs/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings.mdx

@@ -4,8 +4,59 @@ title: Notes and other notation types
 
 ---
 
-Use a **warning** to alert a reader to behavior that could impact the security of a users network or break functionality. You can call out product requirements, limitations, and specifications so that users see them loud and clearly.
+When adding a note to a page, always use this special note formatting. There are three types of formatted notes: `note`, `caution`, and `tip`.
 
-Use a **note** to alert a reader to additional useful information that you cannot integrate into the text. You can provide context for a topic that would be a digression if added directly to the discussion at hand.
+Here is some additional information about notes:
+- The color of the note depends on the type of note: `note` is blue, `caution` is yellow, and `tip` is purple.
+- For every note type, the header text is optional.
+- All note types can contain text and additional formatting like lists, code blocks, and images.
 
-Refer to [notes/tips/warnings](/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings/) for details on the Markdown syntax.
+To learn how notes fit into our content strategy, refer to [Notes/tips/warnings](/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings/).
+
+## Note
+
+Use Note for small additions or when you need to provide extra context that is not essential to the main content.
+
+If you do not provide a header, this aside will default to `Note`.
+
+```mdx
+:::note[Header]
+Hello, world!
+:::
+```
+
+:::note[Header]
+Hello, world!
+:::
+
+## Caution/Warning
+
+Use Caution to highlight actions that could cause issues for a user.
+
+If you do not provide a header, this aside will default to `Warning`.
+
+```mdx
+:::caution[Feature conflict]
+If you use feature A and feature B together, your configuration will not work.
+:::
+```
+
+:::caution[Feature conflict]
+If you use feature A and feature B together, your configuration will not work.
+:::
+
+## Tip
+
+Use Tip to share best practices or opinionated use cases that do not fit into the main documentation.
+
+If you do not provide a header, this aside will default to `Tip`.
+
+```mdx
+:::tip[Best practice]
+Cloudflare recommends you use [1.1.1.1](/1.1.1.1/) as your DNS resolver.
+:::
+```
+
+:::tip[Best practice]
+Cloudflare recommends you use [1.1.1.1](/1.1.1.1/) as your DNS resolver.
+:::

src/content/docs/style-guide/documentation-content-strategy/component-attributes/screenshots.mdx

@@ -14,7 +14,6 @@ Though valuable for user understanding, images are difficult to maintain. We hav
 We support a few different types of images in our docs, including:
 
 - [Diagrams](/style-guide/documentation-content-strategy/component-attributes/diagrams/)
-- [Mermaid diagrams](/style-guide/components/mermaid/)
 - [Screenshots](/style-guide/documentation-content-strategy/component-attributes/screenshots/)
 
 Of these, we prefer Mermaid diagrams because they are searchable and easily changeable. The "cost" of updating a Mermaid diagram is much lower than re-taking a screenshot or working with a designer to update a diagram.