Merge pull request #7942 from apollographql/docs/fix-codesandbox-buttons

docs: standardize ButtonLinks

Author: Meschreiber

.github/workflows/docs-publish.yml

@@ -397,12 +397,12 @@ Use `withFilter` to make sure clients get exactly the subscription updates they
 
 An example server is available on [GitHub](https://github.com/apollographql/docs-examples/blob/main/apollo-server/v4/subscriptions-graphql-ws/src/index.ts) and CodeSandbox:
 
-<a href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/subscriptions-graphql-ws?fontsize=14&hidenavigation=1&initialpath=%2Fgraphql&theme=dark">
-  <img
-    alt="Edit server-subscriptions-as4"
-    src="https://codesandbox.io/static/img/play-codesandbox.svg"
-  />
-</a>
+<ButtonLink
+  href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/subscriptions-graphql-ws?fontsize=14&hidenavigation=1&initialpath=%2Fgraphql&theme=dark"
+  size="lg"
+>
+  Edit in CodeSandbox
+</ButtonLink>
 
 The server exposes one subscription (`numberIncremented`) that returns an integer that's incremented on the server every second. Here's an example subscription that you can run against your server:
 

docs/source/data/subscriptions.mdx

@@ -26,8 +26,6 @@ title: Introduction to Apollo Server
 
 #### Ready to try it out?
 
-<div align="center">
-  <ButtonLink href="/apollo-server/getting-started" size="lg">
-    Get started!
-  </ButtonLink>
-</div>
+<ButtonLink href="/apollo-server/getting-started" size="lg">
+  Get started!
+</ButtonLink>

docs/source/index.mdx

@@ -236,14 +236,14 @@ You should see your records appear in the **Response** panel.
 
 ## Complete example
 
-You can view and fork the complete server example on Code Sandbox:
-
-<a href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/mern-stack?fontsize=14&hidenavigation=1&theme=dark">
-  <img
-    alt="Edit server-getting-started"
-    src="https://codesandbox.io/static/img/play-codesandbox.svg"
-  />
-</a>
+You can view and fork the complete server example on CodeSandbox:
+
+<ButtonLink
+  href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/mern-stack?fontsize=14&hidenavigation=1&theme=dark"
+  size="lg"
+>
+  Edit in CodeSandbox
+</ButtonLink>
 
 ## Next steps
 

docs/source/integrations/mern.mdx

@@ -179,10 +179,9 @@ describe('e2e demo', () => {
 
 You can also view and fork this complete example on CodeSandbox:
 
-<a href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/integration-testing?fontsize=14&hidenavigation=1&theme=dark">
-  <img
-    alt="Edit integration-testing"
-    src="https://codesandbox.io/static/img/play-codesandbox.svg"
-  />
-</a>
-<br />
+<ButtonLink
+  href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/integration-testing?fontsize=14&hidenavigation=1&theme=dark"
+  size="lg"
+>
+  Edit in CodeSandbox
+</ButtonLink>

docs/source/testing/testing.mdx

@@ -237,12 +237,11 @@ const resolvers: Resolvers = {
 
 Check out our example using Apollo Server with generated types on CodeSandbox:
 
-<a href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/generated-types?fontsize=14&hidenavigation=1&initialpath=%2Fgraphql&theme=dark">
-  <img
-    alt="Edit server-generated-types-as4"
-    src="https://codesandbox.io/static/img/play-codesandbox.svg"
-  />
-</a>
-<br/>
+<ButtonLink
+  href="https://codesandbox.io/s/github/apollographql/docs-examples/tree/main/apollo-server/v4/generated-types?fontsize=14&hidenavigation=1&initialpath=%2Fgraphql&theme=dark"
+  size="lg"
+>
+  Edit in CodeSandbox
+</ButtonLink>
 
 See [GraphQL Code Generator's docs](https://www.the-guild.dev/graphql/codegen/docs/guides/further-reading) for further guidance on the different features and integrations it supports.