[Website] Add page for example GraphQL API

website/src/components/layout/site/header.tsx

@@ -17,7 +17,12 @@ import {
   WorkshopNdcOsloImage,
   WorkshopOnlineImage,
 } from "@/components/images";
-import { IconContainer, Link, SearchModal } from "@/components/misc";
+import {
+  IconContainer,
+  Link,
+  LinkButton,
+  SearchModal,
+} from "@/components/misc";
 import { Icon, Logo } from "@/components/sprites";
 import { GitHubStarButton } from "@/components/widgets";
 import {
@@ -502,7 +507,10 @@ const PlatformNavItem: FC<PlatformNavItemProps> = ({
                 <Icon {...LollipopIconSvg} />
               </IconContainer>
               <SubNavLinkTextGroup>
-                <div className="title">Nitro (<abbr title="Formerly Known As">fka</abbr> Banana Cake Pop)</div>
+                <div className="title">
+                  Nitro (<abbr title="Formerly Known As">fka</abbr> Banana Cake
+                  Pop)
+                </div>
                 <div className="desc">GraphQL IDE / API Cockpit</div>
               </SubNavLinkTextGroup>
             </SubNavLinkWithDescription>
@@ -689,10 +697,11 @@ const DeveloperNavItem: FC<DeveloperNavItemProps> = ({
             {products.map((product, index) => (
               <SubNavLink
                 key={index}
-                to={`/docs/${product!.path!}${product?.latestStableVersion
-                  ? "/" + product?.latestStableVersion
-                  : ""
-                  }`}
+                to={`/docs/${product!.path!}${
+                  product?.latestStableVersion
+                    ? "/" + product?.latestStableVersion
+                    : ""
+                }`}
                 onClick={hideTopAndSubNav}
               >
                 <IconContainer $size={16}>
@@ -927,7 +936,7 @@ const DemoAndLaunch: FC<DemoAndLaunchProps> = ({ tools }) => {
       >
         Request a Demo
       </RequestDemoLink>
-      <LaunchLink to={tools!.nitro!}>Launch</LaunchLink>
+      <LinkButton to={tools!.nitro!}>Launch</LinkButton>
     </>
   );
 };
@@ -1179,9 +1188,9 @@ const SubNav = styled.div.attrs({
     overflow-y: initial;
 
     ${ApplyBackdropBlur(
-  48,
-  `background-color: ${THEME_COLORS.backgroundMenu};`
-)}
+      48,
+      `background-color: ${THEME_COLORS.backgroundMenu};`
+    )}
   }
 `;
 
@@ -1528,31 +1537,6 @@ const Tools = styled.div`
   }
 `;
 
-const LaunchLink = styled(Link)`
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: var(--button-border-radius);
-  height: 38px;
-  padding: 0 30px;
-  border: 2px solid ${THEME_COLORS.primaryButtonBorder};
-  color: ${THEME_COLORS.primaryButtonText};
-  background-color: ${THEME_COLORS.primaryButton};
-  font-family: ${FONT_FAMILY_HEADING};
-  font-size: 0.875rem;
-  text-decoration: none;
-  font-weight: 500;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
-
-  :hover {
-    border-color: ${THEME_COLORS.primaryButtonBorder};
-    color: ${THEME_COLORS.primaryButtonHoverText};
-    background-color: ${THEME_COLORS.primaryButtonHover};
-  }
-`;
-
 const RequestDemoLink = styled(Link)`
   display: flex;
   flex: 0 0 auto;

website/src/components/mdx/code-block.tsx

@@ -3,17 +3,22 @@ import Prism from "prismjs";
 import React, { FC } from "react";
 import styled, { css } from "styled-components";
 
+import { Play } from "@/components/mdx/play";
 import { FONT_FAMILY_CODE, THEME_COLORS } from "@/style";
 import { Copy } from "./copy";
 
 export interface CodeBlockProps {
   readonly children: any;
   readonly language?: Language;
+  readonly hideLanguageIndicator?: boolean;
+  readonly playUrl?: string;
 }
 
 export const CodeBlock: FC<CodeBlockProps> = ({
   children,
   language: fallbackLanguage,
+  hideLanguageIndicator,
+  playUrl,
 }) => {
   const language =
     (children.props?.className?.replace(/language-/, "") as Language) ||
@@ -24,10 +29,16 @@ export const CodeBlock: FC<CodeBlockProps> = ({
 
   return (
     <Container className={`gatsby-highlight code-${language}`}>
-      <CodeIndicator language={language} />
-      <CopyPosition>
-        <Copy content={code} />
-      </CopyPosition>
+      {!hideLanguageIndicator && language ? (
+        <CodeIndicator language={language} />
+      ) : null}
+
+      <ActionsContainer>
+        {playUrl ? <StyledPlay content={code} url={playUrl} /> : null}
+
+        <StyledCopy content={code} />
+      </ActionsContainer>
+
       <Highlight
         Prism={Prism as any}
         code={code}
@@ -164,7 +175,6 @@ const Pre = styled.pre`
   }
 
   @media only screen and (min-width: 700px) {
-    max-width: 660px;
     border-radius: var(--box-border-radius) !important;
   }
 `;
@@ -196,6 +206,8 @@ const Container = styled.div`
   font-size: 1rem !important;
   padding-right: 0 !important;
   padding-left: 0 !important;
+  width: 100%;
+  overflow: visible;
 
   * {
     font-family: ${FONT_FAMILY_CODE};
@@ -204,13 +216,57 @@ const Container = styled.div`
 
   > pre[class*="language-"] {
     margin: 0;
-    padding: 30px 20px;
+    padding: 40px 30px;
+    width: 100%;
+    overflow: visible;
+  }
+
+  @media only screen and (min-width: 700px) {
+    > pre[class*="language-"] {
+      padding: 40px 40px;
+    }
   }
 `;
 
-const CopyPosition = styled.div`
+const ActionsContainer = styled.div`
   position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
+  z-index: 2;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const sharedButtonStyles = css`
+  border-radius: var(--button-border-radius) !important;
+  border: 1px solid ${THEME_COLORS.boxBorder} !important;
+  padding: 10px !important;
+  background-color: ${THEME_COLORS.background} !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
+  transition: all 0.2s ease-in-out !important;
+
+  svg {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  > div {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  &:hover {
+    background-color: ${THEME_COLORS.backgroundAlt} !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
+  }
+`;
+
+const StyledCopy = styled(Copy)`
+  ${sharedButtonStyles}
+`;
+
+const StyledPlay = styled(Play)`
+  ${sharedButtonStyles}
 `;

website/src/components/mdx/copy.tsx

@@ -22,27 +22,34 @@ function copyToClipboard(content: string): void {
 
 export interface CopyProps {
   readonly content: string;
+  readonly hideToast?: boolean;
+  readonly className?: string;
 }
 
-export const Copy: FC<CopyProps> = ({ content }) => {
+export const Copy: FC<CopyProps> = ({ content, hideToast, className }) => {
   const [showToast, setShowToast] = useState(false);
 
   return (
     <>
       <CopyIconButton
+        className={className}
+        title="Copy to clipboard"
         onClick={() => {
           copyToClipboard(content);
 
-          setShowToast(true);
-          setTimeout(() => {
-            setShowToast(false);
-          }, 3000);
+          if (!hideToast) {
+            setShowToast(true);
+            setTimeout(() => {
+              setShowToast(false);
+            }, 3000);
+          }
         }}
       >
         <IconContainer $size={20}>
           <Icon {...CopyIconSvg} />
         </IconContainer>
       </CopyIconButton>
+
       {showToast && <CopySuccessToast />}
     </>
   );

website/src/components/mdx/play.tsx

@@ -0,0 +1,47 @@
+import { IconContainer } from "@/components/misc";
+import { Icon } from "@/components/sprites";
+import { THEME_COLORS } from "@/style";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+// Icons
+import PlayIconSvg from "@/images/icons/debug-start.svg";
+
+export interface PlayProps {
+  readonly content: string;
+  readonly url: string;
+  readonly className?: string;
+}
+
+export const Play: FC<PlayProps> = ({ content, url, className }) => {
+  return (
+    <PlayIconButton
+      className={className}
+      title="Open in Nitro"
+      onClick={() => {
+        // TODO: Open Nitro with url and content
+
+        alert(`Open '${content}' in Nitro with URL '${url}'`);
+      }}
+    >
+      <IconContainer $size={20}>
+        <Icon {...PlayIconSvg} />
+      </IconContainer>
+    </PlayIconButton>
+  );
+};
+
+const PlayIconButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 var(--box-border-radius) 0 var(--button-border-radius);
+  border: 1px solid ${THEME_COLORS.boxBorder};
+  border-top: 0 none;
+  border-right: 0 none;
+  padding: 6px;
+
+  svg {
+    fill: #eb64b9;
+  }
+`;

website/src/components/widgets/community-section.tsx

@@ -32,19 +32,19 @@ export const CommunityVisualization: FC = () => {
       </Graph>
       <Numbers>
         <Number>
-          <NumberTitle>6k</NumberTitle>
+          <NumberTitle>7.1k</NumberTitle>
           <NumberText>Slack Users</NumberText>
         </Number>
         <Number>
           <NumberTitle>465m</NumberTitle>
           <NumberText>Package Downloads</NumberText>
         </Number>
         <Number>
-          <NumberTitle>5k</NumberTitle>
+          <NumberTitle>5.6k</NumberTitle>
           <NumberText>GitHub Stars</NumberText>
         </Number>
         <Number>
-          <NumberTitle>3.2k</NumberTitle>
+          <NumberTitle>4.6k</NumberTitle>
           <NumberText>Pull Requests</NumberText>
         </Number>
       </Numbers>