Add GitHub Gist embed support

src/alf/fonts.ts

@@ -38,6 +38,10 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
  * Unused fonts are commented out, but the files are there if we need them.
  */
 export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
+  if (style.fontFamily === 'monospace') {
+    return
+  }
+
   if (fontFamily === 'theme') {
     if (isAndroid) {
       style.fontFamily =

src/lib/strings/embed-player.ts

@@ -25,6 +25,7 @@ export const embedPlayerSources = [
   'giphy',
   'tenor',
   'flickr',
+  'github',
 ] as const
 
 export type EmbedPlayerSource = (typeof embedPlayerSources)[number]
@@ -45,6 +46,7 @@ export type EmbedPlayerType =
   | 'giphy_gif'
   | 'tenor_gif'
   | 'flickr_album'
+  | 'github_gist'
 
 export const externalEmbedLabels: Record<EmbedPlayerSource, string> = {
   youtube: 'YouTube',
@@ -57,6 +59,7 @@ export const externalEmbedLabels: Record<EmbedPlayerSource, string> = {
   appleMusic: 'Apple Music',
   soundcloud: 'SoundCloud',
   flickr: 'Flickr',
+  github: 'GitHub',
 }
 
 export interface EmbedPlayerParams {
@@ -448,6 +451,15 @@ export function parseEmbedPlayerFromUrl(
         return undefined
     }
   }
+
+  if (urlp.hostname === 'gist.github.com') {
+    const id = urlp.pathname.replace(/^\//, '').split('/')[1]
+    return {
+      type: 'github_gist',
+      source: 'github',
+      playerUri: id,
+    }
+  }
 }
 
 export function getPlayerAspect({

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -14,6 +14,7 @@ import {useExternalEmbedsPrefs} from '#/state/preferences'
 import {ExternalGifEmbed} from '#/view/com/util/post-embeds/ExternalGifEmbed'
 import {ExternalPlayer} from '#/view/com/util/post-embeds/ExternalPlayerEmbed'
 import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed'
+import {GithubGist} from '#/view/com/util/post-embeds/GithubGist'
 import {atoms as a, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
@@ -66,6 +67,17 @@ export const ExternalLinkEmbed = ({
     )
   }
 
+  if (
+    embedPlayerParams?.source === 'github' &&
+    embedPlayerParams?.type === 'github_gist'
+  ) {
+    return (
+      <View style={style}>
+        <GithubGist info={link} id={embedPlayerParams.playerUri} />
+      </View>
+    )
+  }
+
   return (
     <Link
       label={link.title || _(msg`Open link to ${niceUrl}`)}

src/view/com/util/post-embeds/GithubGist.tsx

@@ -0,0 +1,154 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyEmbedExternal} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useQuery} from '@tanstack/react-query'
+
+import {shareUrl} from '#/lib/sharing'
+import {toNiceDomain} from '#/lib/strings/url-helpers'
+import {isNative} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Divider} from '#/components/Divider'
+import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {Link} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function GithubGist({
+  info,
+  id,
+}: {
+  info: AppBskyEmbedExternal.ViewExternal
+  id: string
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const {data: files, isLoading} = useQuery({
+    queryKey: ['gist', id],
+    async queryFn() {
+      const url = `https://api.github.com/gists/${id}`
+      const gist = await fetch(url).then(res => res.json())
+      const files = Object.values(gist.files) as {
+        filename: string
+        type: 'text/markdown' | string
+        language: 'Markdown' | string
+        raw_url: string
+        size: number
+        truncated: boolean
+        content: string
+      }[]
+      return files
+    },
+  })
+
+  const onShareExternal = React.useCallback(() => {
+    if (info.uri && isNative) {
+      shareUrl(info.uri)
+    }
+  }, [info.uri])
+
+  return (
+    <Link
+      label={info.title || _(msg`Open this Gist`)}
+      to={info.uri}
+      onLongPress={onShareExternal}>
+      {({hovered}) => (
+        <View
+          style={[
+            a.transition_color,
+            a.flex_col,
+            a.rounded_md,
+            a.overflow_hidden,
+            a.w_full,
+            a.border,
+            hovered
+              ? t.atoms.border_contrast_high
+              : t.atoms.border_contrast_low,
+          ]}>
+          <View style={[a.p_lg, t.atoms.bg_contrast_25]}>
+            {isLoading || !files ? (
+              <Loader />
+            ) : (
+              <View>
+                <Text
+                  style={[
+                    a.text_sm,
+                    a.italic,
+                    t.atoms.text_contrast_low,
+                    a.pb_sm,
+                  ]}>
+                  {files[0].filename}
+                </Text>
+                <Text
+                  style={[
+                    {
+                      fontFamily: 'monospace',
+                    },
+                  ]}>
+                  {files[0].content}
+                </Text>
+              </View>
+            )}
+          </View>
+
+          <View
+            style={[
+              a.flex_1,
+              a.pt_sm,
+              {gap: 3},
+              a.border_t,
+              hovered
+                ? t.atoms.border_contrast_high
+                : t.atoms.border_contrast_low,
+            ]}>
+            <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
+              <Text
+                emoji
+                numberOfLines={3}
+                style={[a.text_md, a.font_bold, a.leading_snug]}>
+                {info.title || info.uri}
+              </Text>
+            </View>
+            <View style={[a.px_md]}>
+              <Divider />
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.gap_2xs,
+                  a.pb_sm,
+                  {
+                    paddingTop: 6, // off menu
+                  },
+                ]}>
+                <Globe
+                  size="xs"
+                  style={[
+                    a.transition_color,
+                    hovered
+                      ? t.atoms.text_contrast_medium
+                      : t.atoms.text_contrast_low,
+                  ]}
+                />
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    a.transition_color,
+                    a.text_xs,
+                    a.leading_tight,
+                    hovered
+                      ? t.atoms.text_contrast_high
+                      : t.atoms.text_contrast_medium,
+                  ]}>
+                  {toNiceDomain(info.uri)}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </Link>
+  )
+}