docs: prettier-related content updates (#62)

src/content/docs/content/openpayments.mdx

@@ -5,12 +5,16 @@ title: Open Payments style guide
 import { Card, Steps } from '@astrojs/starlight/components';
 
 <Card title="Before committing changes" icon="star">
-Run the following command in the `doc` directory:
 
-```
-pnpm format
-```
-[Why tho? ಠ╭╮ಠ](#pnpm-format)
+1. Your PR title must contain the appropriate prefix (`docs:`).
+2. Run the following command in the `doc` directory:
+    ```
+    npx prettier . --write
+    ```
+    You can also try the following. It might work, or you might get an error.
+    ```
+    pnpm format
+    ```
 </Card>
 
 <Card title="After a Starlight upgrade to open-payments" icon="star">
@@ -41,25 +45,4 @@ pnpm start
 
 ### Open Payments
 
-Spell as two words, not one (OpenPayments).
-
-## Pnpm format
-
-Why do we have to run `pnpm format` before we commit our changes?
-
-<Steps>
-1. Because the Open Payments project demands it.
-2. It ensures all outputted code conforms to a consistent style.
-</Steps>
-
-For example, if you're like Melissa and add italics in markdown using single asterisks:
-
-```
-I'm making *this part* italic.
-```
-
-Running `pnpm format` automatically converts the asterisk set to underscores:
-
-```
-I'm making _this part_ italic.
-```
+Spell as two words, not one (OpenPayments).

src/content/docs/shared/linkout.mdx

@@ -6,12 +6,18 @@ import { LinkOut } from "@interledger/docs-design-system";
 
 This component forces external links to open in a new tab, overriding the default Starlight behavior.
 
+:::danger
+Do not use this component at the beginning of a line. Doing so can (but not always) cause GitHub checks to fail. See [below](#at-the-beginning-of-a-line) for more information. 
+:::
+
 The component adds the necessary attributes for external links and an indicator icon to the end of the linked content. The icon can be turned off, if necessary.
 
 To use the component, the page must be in `.mdx` format. Change the format from `.md` to `.mdx` if necessary. All your existing markdown will still be supported without issue.
 
 ## Usage
 
+### General usage
+
 Import the `LinkOut` component like so:
 
 ```jsx
@@ -32,6 +38,24 @@ To disable the indicator icon, set the `withIcon` prop to `false`.
 </LinkOut>
 ```
 
+### At the beginning of a line
+
+In some cases, using this component at the beginning of a line can cause GitHub checks to fail.
+
+```html title="Component at beginning of line" wrap
+<LinkOut href="https://openpayments.dev/">Open Payments</LinkOut> is an open RESTful API and an API standard that enables clients to interface with Open Payments-enabled accounts.
+```
+
+One way around this issue is to add `{/* prettier-ignore */}` above the line. However, we decided as a team that we don't want to take this approach as it's a bit messy and not a great practice. 
+
+As such, we've chosen to circumvent the issue by never starting a line with this component in any project. Instead, work the component into the beginning sentence. All it takes is a single word before the component to prevent failed checks.
+
+```html title="Component within a line" wrap
+The <LinkOut href="https://openpayments.dev/">Open Payments</LinkOut> APIs are open RESTful APIs that enable clients to interface with Open Payments-enabled accounts.
+```
+
+See [Docs Design System Issue #24](https://github.com/interledger/docs-design-system/issues/24) for more information. 
+
 ## Working examples
 
 ### With icon
@@ -40,4 +64,4 @@ Consult the <LinkOut href="https://openpayments.guide/">OpenPayments API</LinkOu
 
 ### Without icon
 
-Consult the <LinkOut href="https://openpayments.guide/" withIcon={false}>OpenPayments API</LinkOut> for more information.
+Consult the <LinkOut href="https://openpayments.guide/" withIcon={false}>OpenPayments API</LinkOut> for more information.