chore(docs): Switch to Announcement shortcode (#36628)

Author: fk

docs/docs/conceptual/gatsby-for-ecommerce.md

@@ -2,8 +2,6 @@
 title: Using Gatsby For E-commerce
 ---
 
-import { Announcement } from "gatsby-interface"
-
 Businesses selling products online typically need a variety of software to support their experience. At a minimum, their website needs product pages, product catalog navigation, a shopping cart, and checkout.
 
 Most have additional functionality like customer account creation, promotions, discounts, and loyalty, customer reviews, tax calculation, user tracking via analytics, and content personalization.
@@ -42,7 +40,7 @@ E-commerce tends to have a number of specific requirements. When building a Gats
 
 ## Additional resources:
 
-<Announcement style={{ marginBottom: "1.5rem" }}>
+<Announcement>
 
 Check out our [e-commerce demo](https://shopify-demo.gatsbyjs.com/) built with our Shopify Starter, a proof of concept showcasing 10,000 products and 30,000 SKUs (variants).
 Clone our Shopify Starter, host it on Gatsby and connect it to your own Shopify data to develop your own proof of concept in as little as an hour.

docs/docs/conceptual/rendering-options.md

@@ -2,8 +2,6 @@
 title: Rendering Options
 ---
 
-import { Announcement } from "gatsby-interface"
-
 Gatsby is historically known as a static site generator enhanced with [React Hydration][1].
 But starting with Gatsby 4, you can choose alternative rendering options in addition to static site generation (SSG) — on a per-page basis.
 This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.
@@ -14,7 +12,7 @@ A rendering option defines the stage at which your page's user-facing HTML is ge
 (SSG or pre-rendering), during HTTP request (server-side rendering) or locally in the browser
 with Javascript (client-side rendering).
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 For an in-depth explanation of each of those approaches and their trade-offs we
 highly recommend the ["Rendering on the Web"][3] article from the Chrome team.
@@ -35,7 +33,7 @@ How does SSG work?
 
 This mode provides the most pleasant user experience, the highest level of security, and run-time scalability for your site.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Note:** SSG doesn't mean your site is not dynamic. You can still use JavaScript to communicate with any APIs,
 add private sections of your site for authorized users via [client-side rendering][4] and

docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md

@@ -3,8 +3,6 @@ title: "Creating a Source Plugin"
 tableOfContentsDepth: 2
 ---
 
-import { Announcement } from "gatsby-interface"
-
 Source plugins are reusable integrations with content and data backends. There are already [100s of ready-to-use source plugins for popular content APIs](/plugins/?=gatsby-source) like Contentful, Drupal, and WordPress. This tutorial teaches you how to build your own integration.
 
 In this tutorial, you'll create your own source plugin that will gather data from an API. The plugin will source data, optimize remote images, and create foreign key relationships between data sourced by your plugin.
@@ -556,7 +554,7 @@ if (fileNode) {
 
 By using [`createNodeField`](/docs/reference/config-files/actions/#createNodeField) you're extending the existing node and place a new field named `localFile` under the `fields` key.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Note:** Do not mutate the `node` directly and use `createNodeField` instead. Otherwise the change won't be persisted and you might see inconsistent data. This behavior changed with Gatsby 4, read the [migration guide](/docs/reference/release-notes/migrating-from-v3-to-v4/#dont-mutate-nodes-outside-of-expected-apis) to learn more.
 

docs/docs/reference/release-notes/migrating-source-plugin-from-v3-to-v4.md

@@ -2,8 +2,6 @@
 title: Upgrade Your Source Plugins for Gatsby 4
 ---
 
-import { Announcement } from "gatsby-interface"
-
 Gatsby 4 is here! Following on the heels of Gatsby 3, Gatsby 4 further improves build performance and introduces new parallel processing capabilities. In the guide below, we'll walk you through preparing your source plugin for Gatsby 4. You'll find this guide useful if you are a maintainer for a source plugin (as opposed to a consumer using a source plugin in your Gatsby site).
 
 Introducing support for Gatsby 4 in your source plugin can be accomplished by ensuring your code adopts the 4 following changes. Many plugins already had the majority of their code organized the way it needed to be!
@@ -12,7 +10,7 @@ With Gatsby 4, Core APIs are being split into different processes so they're abl
 
 It's time to get into it! The rest of this guide outlines the breaking changes in Gatsby 4 and some quick ways to resolve them. Find something confusing? Let us know in the [GitHub discussion](https://github.com/gatsbyjs/gatsby/discussions/33199) and we'll respond as fast as possible.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Looking for examples of source plugins that support Gatsby 4?** Check out [`gatsby-source-wordpress`](/plugins/gatsby-source-wordpress/) and [`gatsby-source-shopify`](/plugins/gatsby-source-shopify/).
 

docs/docs/tutorial/part-0/index.mdx

@@ -3,7 +3,7 @@ title: "Part 0: Set Up Your Development Environment"
 tableOfContentsDepth: 2
 ---
 
-import { Announcement, LinkButton } from "gatsby-interface"
+import { LinkButton } from "gatsby-interface"
 import Collapsible from "@components/collapsible"
 import { MdArrowForward } from "react-icons/md"
 
@@ -23,7 +23,7 @@ By the end of this part of the Tutorial, you will:
 
 The Tutorial is intended to be as approachable as possible for people who are new to Gatsby and React. With that said, if you are brand new to web development (welcome!), you might find it helpful to learn some fundamentals first.
 
-<Announcement style={{ marginBottom: "1.5rem" }}>
+<Announcement>
   Don't worry, you don't need to be an expert with these! A high-level
   understanding of the basics should be enough. You'll pick up a lot through the
   course of the Tutorial.
@@ -94,7 +94,7 @@ brew -v
 xcode-select --install
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 If that fails, download it [directly from Apple's site](https://developer.apple.com/download/more/), after signing-in with an Apple developer account.
 
@@ -111,7 +111,7 @@ If that fails, download it [directly from Apple's site](https://developer.apple.
 brew install node
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 If you don't want to install it through Homebrew, download the latest Node.js version from [the official Node.js website](https://nodejs.org/en/), double click on the downloaded file and go through the installation process.
 
@@ -133,7 +133,7 @@ Download and install the latest Node.js version from [the official Node.js websi
 
 Install nvm (Node Version Manager) and needed dependencies. nvm is used to manage Node.js and all its associated versions.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 When installing a package, if it asks for confirmation, type `y` and press enter.
 
@@ -145,7 +145,7 @@ Select your distro:
 - [Arch, Manjaro and other pacman based distros](#arch-manjaro-and-other-pacman-based-distros)
 - [Fedora, RedHat, and other dnf based distros](#fedora-redhat-and-other-dnf-based-distros)
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 If the Linux distribution you are using is not listed here, please find instructions on the web.
 
@@ -268,7 +268,7 @@ Install the Gatsby CLI globally by running the command below. (Have an older ver
 npm install -g gatsby-cli
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Note:** When you install Gatsby and run it for the first time, you'll see a short message notifying you about anonymous usage data that is being collected for Gatsby commands. You can read more about how that data is pulled out and used in the [telemetry doc](/docs/telemetry).
 
@@ -288,9 +288,9 @@ gatsby --help
 
 ![Check Gatsby commands in terminal](05-gatsby-help.png)
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
-**Troubleshooting**
+#### Troubleshooting
 
 If you are unable to successfully run the Gatsby CLI due to a permissions issue, you may want to check out the [npm docs on fixing permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions), or [this guide](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md).
 
@@ -315,7 +315,7 @@ In this Tutorial, you will deploy your site using Gatsby Cloud. To use Gatsby Cl
 
 Now that you have all the knowledge and tools you'll need, you're ready for the Tutorial!
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Share Your Feedback!**
 

docs/docs/tutorial/part-1/index.mdx

@@ -2,7 +2,7 @@
 title: "Part 1: Create and Deploy Your First Gatsby Site"
 ---
 
-import { Announcement, LinkButton } from "gatsby-interface"
+import { LinkButton } from "gatsby-interface"
 import Collapsible from "@components/collapsible"
 import { MdArrowForward } from "react-icons/md"
 
@@ -30,7 +30,7 @@ First, you write the code for your Gatsby site from your computer. When you're r
 
 </Collapsible>
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Prefer a video?**
 
@@ -58,7 +58,7 @@ To create your first Gatsby site, you're going to use a command from the Gatsby
 
 ![The welcome message for the interactive "gatsby new" command.](./gatsby-new-cli.png)
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Note:** For this Tutorial, your Gatsby CLI should be v4.8 or newer. To check what version you have installed, run the following command:
 
@@ -88,7 +88,7 @@ cd Desktop
 gatsby new
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Having trouble with `gatsby new`?** If you had trouble globally installing `gatsby-cli` in Part 0, you can also create a new site by running `npm init gatsby` from the command line instead of `gatsby new`.
 
@@ -116,7 +116,7 @@ Will you be using JavaScript or TypeScript?
   TypeScript
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 This tutorial doesn't require any prior TypeScript knowledge as it uses JavaScript. If you're familiar with TypeScript you can read the [Gatsby and TypeScript guide](/docs/how-to/custom-configuration/typescript/) to learn about typings, files, and conventions. If you want to use TypeScript we recommend going through the tutorial first and then only afterwards convert the project to TypeScript.
 
@@ -129,7 +129,7 @@ This tutorial doesn't require any prior TypeScript knowledge as it uses JavaScri
 · No (or I'll add it later)
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 In the future, you can use these options to tell `gatsby new` what features you want to add to your site, and `gatsby new` will automatically configure them for you. It's a much quicker way to set up new projects.
 
@@ -196,7 +196,7 @@ To start up your development server, do the following:
 cd my-first-gatsby-site
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Tip:** Whenever you want to run any commands for your site, you need to be in the context for that site. That is, your command line needs to be pointed at the directory where your site's code lives.
 
@@ -208,7 +208,7 @@ cd my-first-gatsby-site
 gatsby develop
 ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 If you weren't able to install the Gatsby command line interface globally, you can start your development server using the following command instead:
 
@@ -239,7 +239,7 @@ And there it is: your very first Gatsby site! 🎉
 
 You'll be able to visit the site locally at `http://localhost:8000/` for as long as your development server is running. (That's the process you started by running the `gatsby develop` command.) To stop running that process (or to “stop running the development server”), go back to your terminal window, hold down the “control” key, and then hit “c” (`ctrl-c`). To start it again, run `gatsby develop` again!
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Note:** If you are using VM setup like vagrant and/or would like to listen on your local IP address, run `gatsby develop --host=0.0.0.0`. Now, the development server listens on both `http://localhost` and your local IP.
 
@@ -265,7 +265,7 @@ GitHub is a website that many developers use to back up and share their code onl
    git push -u origin main
    ```
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Using GitHub for the first time?**
 
@@ -293,7 +293,7 @@ To connect your code on GitHub to your Gatsby Cloud account, do the following:
 
 1. If this is your first time connecting GitHub to Gatsby Cloud, you'll need to give Gatsby Cloud permission to access your GitHub account.
 
-  <Announcement style={{marginBottom: "1.5rem"}}>
+  <Announcement>
 
     **Note:** If you are part of more than one GitHub organization, you will need to first select the organization with which the repository resides at this step before selecting the repository itself.
 
@@ -323,7 +323,7 @@ You did it! Your Gatsby site is now online! 👏
 
 Every time you push a new change to the main branch of your GitHub repo, Gatsby Cloud will see the changes and automatically start a build for the new version of your site.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Tip:** There will be a unique URL for each build (like `https://build-49535320-b3ae-4761-bbeb-f8f7fa07e0fc.gtsb.io/`), and a URL that always has the latest build (like `my-first-gatsby-site-main.gatsbyjs.io`). You'll mostly want to share the human-readable URL, so that people can always see the most up-to-date version of your site. But in some cases (like when you're trying to debug a specific build of your site) it can be helpful to use the unique build URL.
 
@@ -354,7 +354,7 @@ First, you write the code for your Gatsby site from your computer. When you're r
 - Gatsby Cloud is an infrastructure platform specifically optimized for building, deploying, and hosting Gatsby sites.
   - When you push a new commit to the `main` branch of the GitHub repository for your site, Gatsby Cloud will detect the changes, rebuild a new version of your site, and then redeploy it.
 
-<Announcement style={{marginBottom: "1.5rem"}}>
+<Announcement>
 
 **Share Your Feedback!**