feat: Add icon to Platform

getsentry · Sep 19, 2023 · 4bdf911 · 4bdf911
1 parent 8eea1f3
commit 4bdf911
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "js-cookie": "^3.0.5",
     "js-yaml": "^3.0.0",
     "jsdom": "^22.1.0",
-    "platformicons": "^5.6.0",
+    "platformicons": "^5.6.4",
     "prism-sentry": "^1.0.2",
     "prismjs": "^1.27.0",
     "query-string": "^6.13.1",

diff --git a/src/components/guideGrid.tsx b/src/components/guideGrid.tsx
@@ -26,7 +26,7 @@ export function GuideGrid({platform, className}: Props) {
         <li key={guide.key}>
           <SmartLink to={guide.url}>
             <PlatformIcon
-              platform={guide.key}
+              platform={guide.icon ?? guide.key}
               style={{marginRight: '0.5rem', border: 0, boxShadow: 'none'}}
               format="sm"
             />

diff --git a/src/components/hooks/usePlatform.tsx b/src/components/hooks/usePlatform.tsx
@@ -17,6 +17,7 @@ const query = graphql`
         title
         url
         sdk
+        icon
         caseStyle
         supportLevel
         fallbackPlatform
@@ -26,6 +27,7 @@ const query = graphql`
           name
           title
           url
+          icon
           sdk
           caseStyle
           supportLevel

diff --git a/src/components/navbarPlatformDropdown.tsx b/src/components/navbarPlatformDropdown.tsx
@@ -14,7 +14,7 @@ export function NavbarPlatformDropdown() {
         currentPlatform ? (
           <Fragment>
             <PlatformIcon
-              platform={currentPlatform.key}
+              platform={currentPlatform.icon ?? currentPlatform.key}
               size={16}
               style={{marginRight: '0.5rem'}}
               format="sm"
@@ -36,7 +36,7 @@ export function NavbarPlatformDropdown() {
           to={platform.url}
         >
           <PlatformIcon
-            platform={platform.key}
+            platform={platform.icon ?? platform.key}
             size={16}
             style={{marginRight: '0.5rem'}}
             format="sm"

diff --git a/src/components/platformGrid.tsx b/src/components/platformGrid.tsx
@@ -76,7 +76,7 @@ export function PlatformGrid({noGuides = false}: Props) {
                   <SmartLink to={platform.url}>
                     <PlatformIcon
                       size={82}
-                      platform={platform.key}
+                      platform={platform.icon ?? platform.key}
                       format="lg"
                       style={{maxWidth: 'none', border: 0, boxShadow: 'none'}}
                     />

diff --git a/src/components/platformLinkWithLogo.tsx b/src/components/platformLinkWithLogo.tsx
@@ -21,7 +21,7 @@ export function PlatformLinkWithLogo({platform, label, url}: Props) {
     <SmartLink to={url}>
       <PlatformIcon
         size={20}
-        platform={currentPlatform.key}
+        platform={currentPlatform.icon ?? currentPlatform.key}
         style={{
           marginRight: '0.5rem',
           marginTop: '0.2rem',

diff --git a/src/gatsby/createSchemaCustomization/platformSchema.ts b/src/gatsby/createSchemaCustomization/platformSchema.ts
@@ -31,6 +31,7 @@ export const getPlatformTypeDefs = () => {
       categories: [PlatformCategory!]
       url: String!
       fallbackPlatform: String!
+      icon: String
     }
 
     type Platform implements Node {
@@ -44,6 +45,7 @@ export const getPlatformTypeDefs = () => {
       categories: [PlatformCategory!]
       url: String!
       fallbackPlatform: String
+      icon: String
     }
     `,
   ];

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -128,7 +128,11 @@ function IndexPage() {
             {visiblePlatforms.map(platform => (
               <SmartLink to={platform.url} className="hover-card-link" key={platform.key}>
                 <div className="image-frame">
-                  <PlatformIcon size={48} platform={platform.key} format="lg" />
+                  <PlatformIcon
+                    size={48}
+                    platform={platform.icon ?? platform.key}
+                    format="lg"
+                  />
                 </div>
                 {platform.title}
               </SmartLink>

diff --git a/src/pages/platform-redirect.tsx b/src/pages/platform-redirect.tsx
@@ -29,7 +29,7 @@ function BasePlatformRedirect({path = '/'}: Props) {
             <SmartLink to={`/platforms/${platform.key}${path}`}>
               <PlatformIcon
                 size={16}
-                platform={platform.key}
+                platform={platform.icon ?? platform.key}
                 style={{marginRight: '0.5rem'}}
                 format="sm"
               />

diff --git a/src/platforms/javascript/guides/bun/config.yml b/src/platforms/javascript/guides/bun/config.yml
@@ -3,6 +3,7 @@ sdk: sentry.javascript.bun
 fallbackPlatform: javascript
 caseStyle: camelCase
 supportLevel: production
+icon: bun
 categories:
   - browser
   - server
diff --git a/src/types/platform.tsx b/src/types/platform.tsx
@@ -96,6 +96,10 @@ export interface PlatformConfig {
    * inherit configuration values from the parent platform.
    */
   fallbackPlatform?: string;
+  /**
+   * The icon to use for this platform. This is the name of the icon as defined
+   */
+  icon?: string;
   /**
    * Keywords used for search etc.
    */

diff --git a/yarn.lock b/yarn.lock
@@ -12162,10 +12162,10 @@ platform@^1.3.6:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-platformicons@^5.6.0:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-5.6.2.tgz#24d109e56c3dcedbac513f5b8fa73335e0eddd1e"
-  integrity sha512-2X/cWYohEqVAMQiz/MCVjgJaFEX/jiSXncqcgnMztPcsCSL5JpLn4d8CBeSBjpMIDTlCvGF90p0vM0oc7yGTpA==
+platformicons@^5.6.4:
+  version "5.6.4"
+  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-5.6.4.tgz#1c5b5aa410ea3f4a5113214863c08b7a5d7e5fc8"
+  integrity sha512-Mx6EEBC0XuwY7RU8Qa7YCdjhXj0QV7aFx1gYyBH8iEzz7uCLQmP7gj9WLfEu1WGo69AeJlkTjX6ViiEfTbUZOQ==
   dependencies:
     "@types/node" "*"
     "@types/react" "*"