push mascots page

primer · Dec 12, 2023 · 493e097 · 493e097
1 parent 3ef8800
commit 493e097
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 0 deletions.
diff --git a/packages/site/pages/content-examples/mascots.mdx b/packages/site/pages/content-examples/mascots.mdx
@@ -0,0 +1,97 @@
+---
+title: Mascots
+description: Mona the Octocat and supporting robot mascots are beloved icons of the open source community, and an intregal part of GitHub's brand. We take protecting her and her robot sidekicks seriously, and have developed the following guidelines to help keep her from going the way of Clippy™. Before slapping a mascot on a piece of content, please consider the following guidelines.
+image: https://github.com/primer/brand/assets/19292210/3999087b-cf06-4c32-8d42-1f03224ff69c
+image-alt: All three GitHub Mascots, Mona the Octocat, Hubot, and Copilot.
+---
+
+import {DoDontContainer, Do, Dont, Caption} from '@primer/doctocat-nextjs'
+import {UnorderedList, Button, River, Heading, Text, Link} from '@primer/react-brand'
+
+## The Octocat
+
+![Mona's head in front and profile](https://github.com/primer/brand/assets/19292210/8865f073-1a37-4130-8b4b-1824f732de98)
+
+Part cat, part octopus, Mona is a pioneer of the Octocat species and is our official mascot. To the average person, Mona is just a cartoon character. But to the developer community, Mona is an icon.
+
+In general, Mona starts to appear the closer that we get to speaking about the open source community.
+
+## Copilot
+
+![Copilot's head in front and profile](https://github.com/primer/brand/assets/19292210/3e1544d0-c9cd-4029-a5e4-824b861203e1)
+
+The newest addition to the Octocat Universe, Copilot represents the latest in AI tech.
+
+In general, Copilot starts to appear the closer we get to talking about the GitHub Copilot product specifically, and AI in general.
+
+## Hubot
+
+![Hubot's head in front and profile](https://github.com/primer/brand/assets/19292210/73ecc3b7-8e2a-4cf5-84aa-476fda3eafb0)
+
+Based on our open source [chat bot](https://hubotio.github.io/hubot/), Hubot is Mona’s robot sidekick and most loyal contributor. He can be programmed to perform any task but is not made with the latest AI and might become a bit snarky if his instructions are not explicit. While Copilot may be the brains, Hubot is the muscle.
+
+In general, Hubot shows up when the surrounding content is regarding automation and productivity.
+
+## Usage Guidelines
+
+> When it comes to using mascots in brand applications, less is more.
+
+Our mascots shouldn't just be space-fillers. Overuse can be distracting and annoying, and underuse can create missed opportunities for surprise and delight. Balance and thoughtful intent are imperative. Preserve the magic of our beloved characters by using them sparingly, and only when the context is appropriate. The following do's and dont's provide some general guidance on what is or is not appropriate context, however all public-facing usage of Mascots must be approved by GitHub’s Brand & Marketing Design team.
+
+<DoDontContainer stacked>
+  <Do>
+    <img src="https://github.com/primer/brand/assets/19292210/4533e7dc-c307-4ef1-a677-d1b69a8109c1" />
+  </Do>
+  <Dont>
+    <img src="https://github.com/primer/brand/assets/19292210/05ea96b2-a1b9-46ab-89dd-98bc4308eb45" />
+  </Dont>
+</DoDontContainer>
+
+## Alternate Octocat Styles
+
+While working with our current brand design system, octocats should be added in the style seen at the top of this page. However, there are a handful of alternate styles that we use for specific use cases.
+
+<div className="custom-component">
+    <River>
+      <River.Visual>
+        <img
+          src="https://github.com/primer/brand/assets/19292210/1393dbe7-c62d-4fcd-aa52-58f10e195110"
+          alt="The original Mona the Octocat illustration"
+        />
+      </River.Visual>
+      <River.Content>
+        <Heading>The Original Octocat</Heading>
+        <Text>The illustration that started it all. This flat graphic style is outdated now, but still has a special place in our hearts—you’ll most likely find this style as vintage GitHub stickers. New work is not produced in this style unless intended to be a throwback.</Text>
+        <Link href="https://octodex.github.com/">Find more octocats in the Octodex</Link>
+      </River.Content>
+    </River>
+
+    <River>
+      <River.Visual>
+        <img
+          src="https://github.com/primer/brand/assets/19292210/f0cdef62-bad5-41ab-9ee3-2faa18e1a2c7"
+          alt="A illustration of Mona the Octocat on a floating island in the Octocat 2.0 style"
+        />
+      </River.Visual>
+      <River.Content>
+        <Heading>The Octocat 2.0 Style</Heading>
+        <Text>Our current Octocat model, used in illustrations, animations, and stickers. This version of Mona is more emotive and functional in 3D space and the style most common for stickers or narrative illustrations.</Text>
+        <Link href="https://myoctocat.com/">Build your own at myoctocat.com</Link>
+      </River.Content>
+    </River>
+
+    <River>
+      <River.Visual>
+        <img
+          src="https://github.com/primer/brand/assets/19292210/59b87bf6-d85b-46d9-baaf-18cbed572dcb"
+          alt="A illustration of Mona the Octocat on a floating island in the Octocat 2.0 style"
+        />
+      </River.Visual>
+      <River.Content>
+        <Heading>Monamoji</Heading>
+        <Text>Monamoji are the Octocat custom emoji set, used for reaction gifs and as custom emoji. These should be reserved for community engagement, and should not be used when speaking as the voice of GitHub.</Text>
+        <Link href="">See animated versions on Giphy</Link>
+      </River.Content>
+    </River>
+
+</div>
diff --git a/packages/theme/components/layout/sidebar/Sidebar.tsx b/packages/theme/components/layout/sidebar/Sidebar.tsx
@@ -64,6 +64,7 @@ export function Sidebar({pageMap}: SidebarProps) {
   const currentRoute = router.pathname
 
   const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
+  console.log(pageMap)
 
   return (
     <NavList className={styles.NavList}>