Migrate to new ImageManipulator API

Add some helper text for custom domains (#7103 )
* Add some helper text for custom domains * endsWith * ope
2024-12-13 23:17:17 +00:00 · 2024-12-13 23:05:53 +00:00 · 2024-12-13 21:38:43 +00:00 · 2024-12-13 21:16:25 +00:00 · 2024-12-13 12:36:00 -06:00 · 2024-12-13 18:20:48 +00:00
630 changed files with 115198 additions and 58456 deletions
@@ -1,7 +1,7 @@
 # Copy this to `.env` and `.env.test` files

+BITDRIFT_API_KEY=
 SENTRY_AUTH_TOKEN=
-EXPO_PUBLIC_ENV=development
 EXPO_PUBLIC_LOG_LEVEL=debug
 EXPO_PUBLIC_LOG_DEBUG=
 EXPO_PUBLIC_BUNDLE_IDENTIFIER=
@@ -1,8 +1,9 @@
 module.exports = {
  root: true,
  extends: [
-    '@react-native-community',
+    '@react-native',
    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
    'plugin:react-native-a11y/ios',
    'prettier',
  ],
@@ -16,9 +17,8 @@ module.exports = {
    'eslint-plugin-react-compiler',
  ],
  rules: {
-    // Temporary until https://github.com/facebook/react-native/pull/43756 gets into a release.
-    'prettier/prettier': 0,
    'react/no-unescaped-entities': 0,
+    'react/prop-types': 0,
    'react-native/no-inline-styles': 0,
    'bsky-internal/avoid-unwrapped-text': [
      'error',
@@ -3,8 +3,6 @@ on:
  push:
    branches:
      - main
-      - bnewbold/embedr
-      - bnewbold/embedr-rebase

 env:
  REGISTRY: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_REGISTRY }}
@@ -16,6 +16,10 @@ jobs:
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v3
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
      - name: Yarn install
        uses: Wandalen/wretry.action@master
        with:
@@ -50,4 +54,4 @@ jobs:
        run: yarn intl:build
      - name: Run tests
        run: |
-          NODE_ENV=test EXPO_PUBLIC_ENV=test yarn test --forceExit
+          NODE_ENV=test yarn test --forceExit
@@ -1 +1 @@
-18
+20
@@ -5,7 +5,7 @@ WORKDIR /usr/src/social-app
 ENV DEBIAN_FRONTEND=noninteractive

 # Node
-ENV NODE_VERSION=18
+ENV NODE_VERSION=20
 ENV NVM_DIR=/usr/share/nvm

 # Go
@@ -17,7 +17,7 @@ ENV GOEXPERIMENT="loopvar"

 # Expo
 ARG EXPO_PUBLIC_BUNDLE_IDENTIFIER
-ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER ${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}
+ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER=${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}

 COPY . .

@@ -5,7 +5,7 @@ WORKDIR /usr/src/social-app
 ENV DEBIAN_FRONTEND=noninteractive

 # Node
-ENV NODE_VERSION=18
+ENV NODE_VERSION=20
 ENV NVM_DIR=/usr/share/nvm

 # Go
@@ -20,7 +20,7 @@ build-web-embed: ## Compile web embed bundle, copy to bskyweb/embedr* directorie

 .PHONY: test
 test: ## Run all tests
-	NODE_ENV=test EXPO_PUBLIC_ENV=test yarn test
+	NODE_ENV=test yarn test

 .PHONY: lint
 lint: ## Run style checks and verify syntax
@@ -17,8 +17,8 @@ appId: xyz.blueskyweb.app
 - inputText: "Post with an image"
 - tapOn:
    id: "openGalleryBtn"
- tapOn:
-    id: "labelsBtn"
+- tapOn: "Content warnings"
+- tapOn: "Content warnings"
 - tapOn: "Porn"
 - tapOn:
    label: "Tap on confirm"
@@ -29,7 +29,6 @@ appId: xyz.blueskyweb.app
 - pressKey: Enter
 - tapOn:
    id: "nextBtn"
- tapOn: "Not now"
 - tapOn:
     id: "handleInput"
 - inputText: "e2e-test"
@@ -23,6 +23,7 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
+- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - tapOn: "About"
@@ -45,6 +46,7 @@ appId: xyz.blueskyweb.app
 - eraseText
 - inputText: "They bad"
 - tapOn: "Save"
+- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - assertVisible: Bad Ppl
@@ -60,6 +62,7 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - eraseText
 - tapOn: "Save"
+- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - assertNotVisible:
@@ -87,6 +90,7 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
+- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - tapOn: "About"
@@ -23,5 +23,4 @@ appId: xyz.blueskyweb.app
    id: "loginPasswordInput"
 - inputText: "hunter2"
 - pressKey: Enter
- tapOn: "Not now"
 - assertVisible: "Following"
@@ -22,6 +22,7 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "Shhh"
 - tapOn: "Save"
+- tapOn: "Save"

 # view modlist
 - assertVisible: "Muted Users"
@@ -13,7 +13,7 @@ appId: xyz.blueskyweb.app
 - tapOn: "Select an avatar"
 - waitForAnimationToEnd
 - tapOn:
-    point: "16%,22%"
+    point: "50%,22%"
 - waitForAnimationToEnd
 - tapOn: "Choose"
 - waitForAnimationToEnd
@@ -1,150 +0,0 @@
-import {deleteAsync} from 'expo-file-system'
-import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
-import RNFetchBlob from 'rn-fetch-blob'
-
-import {
-  downloadAndResize,
-  DownloadAndResizeOpts,
-  getResizedDimensions,
-} from '../../src/lib/media/manip'
-
-const mockResizedImage = {
-  path: 'file://resized-image.jpg',
-  size: 100,
-  width: 100,
-  height: 100,
-  mime: 'image/jpeg',
-}
-
-describe('downloadAndResize', () => {
-  const errorSpy = jest.spyOn(global.console, 'error')
-
-  beforeEach(() => {
-    const mockedCreateResizedImage = manipulateAsync as jest.Mock
-    mockedCreateResizedImage.mockResolvedValue({
-      uri: 'file://resized-image.jpg',
-      ...mockResizedImage,
-    })
-  })
-
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('should return resized image for valid URI and options', async () => {
-    const mockedFetch = RNFetchBlob.fetch as jest.Mock
-    mockedFetch.mockResolvedValueOnce({
-      path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
-      info: jest.fn().mockReturnValue({status: 200}),
-      flush: jest.fn(),
-    })
-
-    const opts: DownloadAndResizeOpts = {
-      uri: 'https://example.com/image.jpg',
-      width: 100,
-      height: 100,
-      maxSize: 500000,
-      mode: 'cover',
-      timeout: 10000,
-    }
-
-    const result = await downloadAndResize(opts)
-    expect(result).toEqual(mockResizedImage)
-    expect(RNFetchBlob.config).toHaveBeenCalledWith({
-      fileCache: true,
-      appendExt: 'jpeg',
-    })
-    expect(RNFetchBlob.fetch).toHaveBeenCalledWith(
-      'GET',
-      'https://example.com/image.jpg',
-    )
-
-    // First time it gets called is to get dimensions
-    expect(manipulateAsync).toHaveBeenCalledWith(expect.any(String), [], {})
-    expect(manipulateAsync).toHaveBeenCalledWith(
-      expect.any(String),
-      [{resize: {height: opts.height, width: opts.width}}],
-      {format: SaveFormat.JPEG, compress: 1.0},
-    )
-    expect(deleteAsync).toHaveBeenCalledWith(expect.any(String), {
-      idempotent: true,
-    })
-  })
-
-  it('should return undefined for invalid URI', async () => {
-    const opts: DownloadAndResizeOpts = {
-      uri: 'invalid-uri',
-      width: 100,
-      height: 100,
-      maxSize: 500000,
-      mode: 'cover',
-      timeout: 10000,
-    }
-
-    const result = await downloadAndResize(opts)
-    expect(errorSpy).toHaveBeenCalled()
-    expect(result).toBeUndefined()
-  })
-
-  it('should return undefined for non-200 response', async () => {
-    const mockedFetch = RNFetchBlob.fetch as jest.Mock
-    mockedFetch.mockResolvedValueOnce({
-      path: jest.fn().mockReturnValue('file://downloaded-image'),
-      info: jest.fn().mockReturnValue({status: 400}),
-      flush: jest.fn(),
-    })
-
-    const opts: DownloadAndResizeOpts = {
-      uri: 'https://example.com/image',
-      width: 100,
-      height: 100,
-      maxSize: 500000,
-      mode: 'cover',
-      timeout: 10000,
-    }
-
-    const result = await downloadAndResize(opts)
-    expect(errorSpy).not.toHaveBeenCalled()
-    expect(result).toBeUndefined()
-  })
-
-  it('should not downsize whenever dimensions are below the max dimensions', () => {
-    const initialDimensionsOne = {
-      width: 1200,
-      height: 1000,
-    }
-    const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne)
-
-    const initialDimensionsTwo = {
-      width: 1000,
-      height: 1200,
-    }
-    const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo)
-
-    expect(resizedDimensionsOne).toEqual(initialDimensionsOne)
-    expect(resizedDimensionsTwo).toEqual(initialDimensionsTwo)
-  })
-
-  it('should resize dimensions and maintain aspect ratio if they are above the max dimensons', () => {
-    const initialDimensionsOne = {
-      width: 3000,
-      height: 1500,
-    }
-    const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne)
-
-    const initialDimensionsTwo = {
-      width: 2000,
-      height: 4000,
-    }
-    const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo)
-
-    expect(resizedDimensionsOne).toEqual({
-      width: 2000,
-      height: 1000,
-    })
-    expect(resizedDimensionsTwo).toEqual({
-      width: 1000,
-      height: 2000,
-    })
-  })
-})
@@ -335,8 +335,10 @@ describe('shortenLinks', () => {
 describe('parseEmbedPlayerFromUrl', () => {
  const inputs = [
    'https://youtu.be/videoId',
+    'https://youtu.be/videoId?t=1s',
    'https://www.youtube.com/watch?v=videoId',
    'https://www.youtube.com/watch?v=videoId&feature=share',
+    'https://www.youtube.com/watch?v=videoId&t=1s',
    'https://youtube.com/watch?v=videoId',
    'https://youtube.com/watch?v=videoId&feature=share',
    'https://youtube.com/shorts/videoId',
@@ -441,6 +443,11 @@ describe('parseEmbedPlayerFromUrl', () => {
      source: 'youtube',
      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=1',
+    },
    {
      type: 'youtube_video',
      source: 'youtube',
@@ -451,6 +458,11 @@ describe('parseEmbedPlayerFromUrl', () => {
      source: 'youtube',
      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
    },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=1',
+    },
    {
      type: 'youtube_video',
      source: 'youtube',
@@ -1,26 +1,6 @@
 const pkg = require('./package.json')

-const SPLASH_CONFIG = {
-  backgroundColor: '#ffffff',
-  image: './assets/splash.png',
-  resizeMode: 'cover',
-}
-const DARK_SPLASH_CONFIG = {
-  backgroundColor: '#001429',
-  image: './assets/splash-dark.png',
-  resizeMode: 'cover',
-}
-
-const SPLASH_CONFIG_ANDROID = {
-  backgroundColor: '#0c7cff',
-  image: './assets/splash.png',
-  resizeMode: 'cover',
-}
-const DARK_SPLASH_CONFIG_ANDROID = {
-  backgroundColor: '#0f141b',
-  image: './assets/splash-dark.png',
-  resizeMode: 'cover',
-}
+const DARK_SPLASH_ANDROID_BACKGROUND = '#0f141b'

 module.exports = function (config) {
  /**
@@ -35,9 +15,9 @@ module.exports = function (config) {
   */
  const PLATFORM = process.env.EAS_BUILD_PLATFORM

-  const IS_DEV = process.env.EXPO_PUBLIC_ENV === 'development'
  const IS_TESTFLIGHT = process.env.EXPO_PUBLIC_ENV === 'testflight'
  const IS_PRODUCTION = process.env.EXPO_PUBLIC_ENV === 'production'
+  const IS_DEV = !IS_TESTFLIGHT || !IS_PRODUCTION

  const ASSOCIATED_DOMAINS = [
    'applinks:bsky.app',
@@ -71,10 +51,8 @@ module.exports = function (config) {
        policy: 'appVersion',
      },
      orientation: 'portrait',
-      icon: './assets/icon.png',
+      icon: './assets/app-icons/ios_icon_default_light.png',
      userInterfaceStyle: 'automatic',
-      splash: SPLASH_CONFIG,
-      // hsl(211, 99%, 53%), same as palette.default.brandText
      primaryColor: '#1083fe',
      ios: {
        supportsTablet: false,
@@ -92,13 +70,41 @@ module.exports = function (config) {
            'Used to save images to your library.',
          NSPhotoLibraryUsageDescription:
            'Used for profile pictures, posts, and other kinds of content',
+          CFBundleSpokenName: 'Blue Sky',
+          CFBundleLocalizations: [
+            'en',
+            'an',
+            'ast',
+            'ca',
+            'de',
+            'es',
+            'fi',
+            'fr',
+            'ga',
+            'gl',
+            'hi',
+            'hu',
+            'id',
+            'it',
+            'ja',
+            'ko',
+            'nl',
+            'pl',
+            'pt-BR',
+            'ru',
+            'th',
+            'tr',
+            'uk',
+            'vi',
+            'yue-Hant',
+            'zh-Hans',
+            'zh-Hant',
+          ],
        },
        associatedDomains: ASSOCIATED_DOMAINS,
-        splash: {
-          ...SPLASH_CONFIG,
-          dark: DARK_SPLASH_CONFIG,
-        },
        entitlements: {
+          'com.apple.developer.kernel.increased-memory-limit': true,
+          'com.apple.developer.kernel.extended-virtual-addressing': true,
          'com.apple.security.application-groups': 'group.app.bsky',
        },
        privacyManifests: {
@@ -132,10 +138,10 @@ module.exports = function (config) {
      // Dark nav bar in light mode is better than light nav bar in dark mode
      androidNavigationBar: {
        barStyle: 'light-content',
-        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
+        backgroundColor: DARK_SPLASH_ANDROID_BACKGROUND,
      },
      android: {
-        icon: './assets/icon.png',
+        icon: './assets/app-icons/android_icon_default_light.png',
        adaptiveIcon: {
          foregroundImage: './assets/icon-android-foreground.png',
          monochromeImage: './assets/icon-android-foreground.png',
@@ -161,10 +167,6 @@ module.exports = function (config) {
            category: ['BROWSABLE', 'DEFAULT'],
          },
        ],
-        splash: {
-          ...SPLASH_CONFIG_ANDROID,
-          dark: DARK_SPLASH_CONFIG_ANDROID,
-        },
      },
      web: {
        favicon: './assets/favicon.png',
@@ -204,10 +206,9 @@ module.exports = function (config) {
              newArchEnabled: false,
            },
            android: {
-              compileSdkVersion: 34,
-              targetSdkVersion: 34,
-              buildToolsVersion: '34.0.0',
-              kotlinVersion: '1.8.0',
+              compileSdkVersion: 35,
+              targetSdkVersion: 35,
+              buildToolsVersion: '35.0.0',
              newArchEnabled: false,
            },
          },
@@ -221,10 +222,10 @@ module.exports = function (config) {
          },
        ],
        'react-native-compressor',
+        '@bitdrift/react-native',
        './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
        './plugins/withAndroidManifestPlugin.js',
        './plugins/withAndroidManifestFCMIconPlugin.js',
-        './plugins/withAndroidStylesWindowBackgroundPlugin.js',
        './plugins/withAndroidStylesAccentColorPlugin.js',
        './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
        './plugins/shareExtension/withShareExtensions.js',
@@ -234,8 +235,8 @@ module.exports = function (config) {
          'expo-font',
          {
            fonts: [
-              './assets/fonts/inter/InterVariable.ttf',
-              './assets/fonts/inter/InterVariable-Italic.ttf',
+              './assets/fonts/inter/InterVariable.woff2',
+              './assets/fonts/inter/InterVariable-Italic.woff2',
              // Android only
              './assets/fonts/inter/Inter-Regular.otf',
              './assets/fonts/inter/Inter-Italic.otf',
@@ -246,6 +247,100 @@ module.exports = function (config) {
            ],
          },
        ],
+        [
+          'expo-splash-screen',
+          {
+            ios: {
+              enableFullScreenImage_legacy: true,
+              backgroundColor: '#ffffff',
+              image: './assets/splash.png',
+              resizeMode: 'cover',
+              dark: {
+                enableFullScreenImage_legacy: true,
+                backgroundColor: '#001429',
+                image: './assets/splash-dark.png',
+                resizeMode: 'cover',
+              },
+            },
+            android: {
+              backgroundColor: '#0c7cff',
+              image: './assets/splash-android-icon.png',
+              imageWidth: 150,
+              dark: {
+                backgroundColor: '#0c2a49',
+                image: './assets/splash-android-icon-dark.png',
+                imageWidth: 150,
+              },
+            },
+          },
+        ],
+        [
+          '@mozzius/expo-dynamic-app-icon',
+          {
+            /**
+             * Default set
+             */
+            default_light: {
+              ios: './assets/app-icons/ios_icon_default_light.png',
+              android: './assets/app-icons/android_icon_default_light.png',
+              prerendered: true,
+            },
+            default_dark: {
+              ios: './assets/app-icons/ios_icon_default_dark.png',
+              android: './assets/app-icons/android_icon_default_dark.png',
+              prerendered: true,
+            },
+
+            /**
+             * Bluesky+ core set
+             */
+            core_aurora: {
+              ios: './assets/app-icons/ios_icon_core_aurora.png',
+              android: './assets/app-icons/android_icon_core_aurora.png',
+              prerendered: true,
+            },
+            core_bonfire: {
+              ios: './assets/app-icons/ios_icon_core_bonfire.png',
+              android: './assets/app-icons/android_icon_core_bonfire.png',
+              prerendered: true,
+            },
+            core_sunrise: {
+              ios: './assets/app-icons/ios_icon_core_sunrise.png',
+              android: './assets/app-icons/android_icon_core_sunrise.png',
+              prerendered: true,
+            },
+            core_sunset: {
+              ios: './assets/app-icons/ios_icon_core_sunset.png',
+              android: './assets/app-icons/android_icon_core_sunset.png',
+              prerendered: true,
+            },
+            core_midnight: {
+              ios: './assets/app-icons/ios_icon_core_midnight.png',
+              android: './assets/app-icons/android_icon_core_midnight.png',
+              prerendered: true,
+            },
+            core_flat_blue: {
+              ios: './assets/app-icons/ios_icon_core_flat_blue.png',
+              android: './assets/app-icons/android_icon_core_flat_blue.png',
+              prerendered: true,
+            },
+            core_flat_white: {
+              ios: './assets/app-icons/ios_icon_core_flat_white.png',
+              android: './assets/app-icons/android_icon_core_flat_white.png',
+              prerendered: true,
+            },
+            core_flat_black: {
+              ios: './assets/app-icons/ios_icon_core_flat_black.png',
+              android: './assets/app-icons/android_icon_core_flat_black.png',
+              prerendered: true,
+            },
+            core_classic: {
+              ios: './assets/app-icons/ios_icon_core_classic.png',
+              android: './assets/app-icons/android_icon_core_classic.png',
+              prerendered: true,
+            },
+          },
+        ],
      ].filter(Boolean),
      extra: {
        eas: {
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m15.604 2.47-.642 1.112a5 5 0 0 1 2.05 4.034H7.005c0-1.658.809-3.123 2.05-4.034L8.41 2.47a.313.313 0 0 1 .542-.313l.627 1.086a5 5 0 0 1 2.428-.63c.882 0 1.709.23 2.428.63l.627-1.085a.31.31 0 0 1 .426-.115.31.31 0 0 1 .115.428ZM9.506 5.114a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Zm3.753 0a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0ZM3.878 8.866a1.251 1.251 0 0 1 2.501 0v5.004a1.252 1.252 0 0 1-2.501 0V8.866Zm13.759 0a1.251 1.251 0 0 1 2.501 0v5.004a1.251 1.251 0 0 1-2.501 0V8.866ZM7.005 17.622h1.25v3.128a1.251 1.251 0 0 0 2.502 0v-3.128h2.502v3.128a1.251 1.251 0 0 0 2.501 0v-3.128h1.25V8.241H7.006v9.381Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M14.57 4.348c.65-.775 1.11-1.85 1.11-2.926 0-.149-.013-.3-.04-.422-1.057.04-2.314.708-3.072 1.592-.595.68-1.15 1.756-1.15 2.846 0 .164.027.327.04.38.066.012.175.027.283.027.948 0 2.14-.638 2.83-1.497Zm4.835 3.847.052-.035c-1.407-2.03-3.546-2.084-4.14-2.084-.911 0-1.726.325-2.411.598-.497.198-.925.368-1.271.368-.383 0-.822-.178-1.311-.377-.618-.25-1.317-.534-2.087-.534C5.64 6.13 3 8.296 3 12.379c0 2.545.975 5.227 2.182 6.954C6.224 20.803 7.13 22 8.43 22c.616 0 1.068-.193 1.543-.395.526-.225 1.082-.462 1.922-.462.849 0 1.356.223 1.845.437.455.2.895.393 1.58.393 1.42 0 2.353-1.292 3.246-2.586 1.003-1.47 1.422-2.913 1.435-2.98-.081-.027-2.802-1.13-2.802-4.246 0-2.51 1.855-3.734 2.207-3.966Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M15.439 3.148a1 1 0 0 1 .41.645l.568 3.22a7 7 0 1 1-6.174 10.97L4.32 19.027a1 1 0 0 1-1.159-.811L1.078 6.398a1 1 0 0 1 .81-1.158l12.803-2.258a1 1 0 0 1 .748.166ZM9.325 16.114A7 7 0 0 1 9 14c0-1.56.51-3 1.372-4.164l-6.456 1.139 1.041 5.909 4.368-.77ZM3.568 9.005l10.833-1.91-.347-1.97L3.22 7.036l.347 1.97ZM16 9a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a1 1 0 0 1 1 1v1.586l1.374 1.374a1 1 0 0 1-1.414 1.414l-1.667-1.667A1 1 0 0 1 15 14v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 6a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.5 2.5a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h13a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 21 7v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm6 15h6v-5H9v5Zm8 0v-6a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6H5V5h2v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5.414l2 2V19h-2ZM15 5H9v2h6V5Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.32 4.32 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-7V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333V7h-2v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7H11v4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.3 4.3 0 0 1 6 4.667ZM11 13H4v7a1 1 0 0 0 1 1h6v-8Zm9 0h-7v8h6a1 1 0 0 0 1-1v-7Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#1185FE" d="M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 14c-2.95 0-5.163 1.733-6.08 4.21a.47.47 0 0 0 .09.493.9.9 0 0 0 .687.297H11a1 1 0 1 1 0 2H6.697a2.9 2.9 0 0 1-2.219-1.011 2.46 2.46 0 0 1-.433-2.473C5.235 14.296 8.168 12 12 12c.787 0 1.54.097 2.252.282a1 1 0 1 1-.504 1.936A7 7 0 0 0 12 14Zm6 0a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M7.5 2a1 1 0 0 0-1 1v3.997a6.25 6.25 0 0 1-1.83 4.42l-.377.376A1 1 0 0 0 4 12.5V15a1 1 0 0 0 1 1h6v5a1 1 0 1 0 2 0v-5h6a1 1 0 0 0 1-1v-2.5a1 1 0 0 0-.293-.707l-.376-.377a6.25 6.25 0 0 1-1.831-4.42V3.001a1 1 0 0 0-1-1h-9Z"/></svg>
@@ -20,6 +20,7 @@ window.addEventListener('message', event => {
    return
  }

+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const id = (event.data as {id: string}).id
  if (!id) {
    return
@@ -33,6 +34,7 @@ window.addEventListener('message', event => {
    return
  }

+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const height = (event.data as {height: number}).height
  if (height) {
    embed.style.height = `${height}px`
@@ -47,7 +49,7 @@ window.addEventListener('message', event => {
 * @returns
 */
 function scan(node = document) {
-  const embeds = node.querySelectorAll('[data-bluesky-uri]')
+  const embeds = node.querySelectorAll<HTMLIFrameElement>('[data-bluesky-uri]')

  for (let i = 0; i < embeds.length; i++) {
    const id = String(Math.random()).slice(2)
@@ -0,0 +1,17 @@
+export function applyTheme(theme: 'light' | 'dark') {
+  document.documentElement.classList.remove('light', 'dark')
+  document.documentElement.classList.add(theme)
+}
+
+export function initColorMode() {
+  applyTheme(
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light',
+  )
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', mql => {
+      applyTheme(mql.matches ? 'dark' : 'light')
+    })
+}
@@ -37,7 +37,7 @@ export function Container({
  return (
    <div
      ref={ref}
-      className="w-full bg-white hover:bg-neutral-50 relative transition-colors max-w-[600px] min-w-[300px] flex border rounded-xl"
+      className="w-full bg-white text-black hover:bg-neutral-50 dark:bg-dimmedBg dark:hover:bg-dimmedBgLighten relative transition-colors max-w-[600px] min-w-[300px] flex border dark:border-slate-600 dark:text-slate-200 rounded-xl"
      onClick={() => {
        if (ref.current && href) {
          // forwardRef requires preact/compat - let's keep it simple
@@ -9,7 +9,6 @@ import {
  AppBskyGraphDefs,
  AppBskyGraphStarterpack,
  AppBskyLabelerDefs,
-  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -79,9 +78,9 @@ export function Embed({
        return (
          <Link
            href={`/profile/${record.author.did}/post/${getRkey(record)}`}
-            className="transition-colors hover:bg-neutral-100 border rounded-lg p-2 gap-1.5 w-full flex flex-col">
+            className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-lg p-2 gap-1.5 w-full flex flex-col">
            <div className="flex gap-1.5 items-center">
-              <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 shrink-0">
+              <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0">
                <img
                  src={record.author.avatar}
                  style={isAuthorLabeled ? {filter: 'blur(1.5px)'} : undefined}
@@ -89,7 +88,7 @@ export function Embed({
              </div>
              <p className="line-clamp-1 text-sm">
                <span className="font-bold">{record.author.displayName}</span>
-                <span className="text-textLight ml-1">
+                <span className="text-textLight dark:text-textDimmed ml-1">
                  @{record.author.handle}
                </span>
              </p>
@@ -210,7 +209,7 @@ function Info({children}: {children: ComponentChildren}) {
  return (
    <div className="w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
      <img src={infoIcon} className="w-4 h-4 shrink-0 mt-0.5" />
-      <p className="text-sm text-textLight">{children}</p>
+      <p className="text-sm text-textLight dark:text-textDimmed">{children}</p>
    </div>
  )
 }
@@ -309,7 +308,7 @@ function ExternalEmbed({
  return (
    <Link
      href={content.external.uri}
-      className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch"
+      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
      disableTracking>
      {content.external.thumb && (
        <img
@@ -318,11 +317,11 @@ function ExternalEmbed({
        />
      )}
      <div className="py-3 px-4">
-        <p className="text-sm text-textLight line-clamp-1">
+        <p className="text-sm text-textLight dark:text-textDimmed line-clamp-1">
          {toNiceDomain(content.external.uri)}
        </p>
        <p className="font-semibold line-clamp-3">{content.external.title}</p>
-        <p className="text-sm text-textLight line-clamp-2 mt-0.5">
+        <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 mt-0.5">
          {content.external.description}
        </p>
      </div>
@@ -346,23 +345,29 @@ function GenericWithImageEmbed({
  return (
    <Link
      href={href}
-      className="w-full rounded-lg border py-2 px-3 flex flex-col gap-2">
+      className="w-full rounded-lg border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
      <div className="flex gap-2.5 items-center">
        {image ? (
          <img
            src={image}
            alt={title}
-            className="w-8 h-8 rounded-md bg-neutral-300 shrink-0"
+            className="w-8 h-8 rounded-md bg-neutral-300 dark:bg-slate-700 shrink-0"
          />
        ) : (
          <div className="w-8 h-8 rounded-md bg-brand shrink-0" />
        )}
        <div className="flex-1">
          <p className="font-bold text-sm">{title}</p>
-          <p className="text-textLight text-sm">{subtitle}</p>
+          <p className="text-textLight dark:text-textDimmed text-sm">
+            {subtitle}
+          </p>
        </div>
      </div>
-      {description && <p className="text-textLight text-sm">{description}</p>}
+      {description && (
+        <p className="text-textLight dark:text-textDimmed text-sm">
+          {description}
+        </p>
+      )}
    </Link>
  )
 }
@@ -407,7 +412,7 @@ function StarterPackEmbed({
  return (
    <Link
      href={starterPackHref}
-      className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch">
+      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
      <img src={imageUri} className="aspect-[1.91/1] object-cover" />
      <div className="py-3 px-4">
        <div className="flex space-x-2 items-center">
@@ -416,7 +421,7 @@ function StarterPackEmbed({
            <p className="font-semibold leading-[21px]">
              {content.record.name}
            </p>
-            <p className="text-sm text-textLight line-clamp-2 leading-[18px]">
+            <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 leading-[18px]">
              Starter pack by{' '}
              {content.creator.displayName || `@${content.creator.handle}`}
            </p>
@@ -426,7 +431,7 @@ function StarterPackEmbed({
          <p className="text-sm mt-1">{content.record.description}</p>
        )}
        {!!content.joinedAllTimeCount && content.joinedAllTimeCount > 50 && (
-          <p className="text-sm font-semibold text-textLight mt-1">
+          <p className="text-sm font-semibold text-textLight dark:text-textDimmed mt-1">
            {content.joinedAllTimeCount} users have joined!
          </p>
        )}
@@ -437,14 +442,14 @@ function StarterPackEmbed({

 // from #/lib/strings/starter-pack.ts
 function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
-  const rkey = new AtUri(starterPack.uri).rkey
+  const rkey = getRkey({uri: starterPack.uri})
  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
 }

 function getStarterPackHref(
  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = new AtUri(starterPack.uri).rkey
+  const rkey = getRkey({uri: starterPack.uri})
  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
  return `/starter-pack/${handleOrDid}/${rkey}`
 }
@@ -38,7 +38,7 @@ export function Post({thread}: Props) {
      <div className="flex-1 flex-col flex gap-2" lang={record?.langs?.[0]}>
        <div className="flex gap-2.5 items-center cursor-pointer">
          <Link href={`/profile/${post.author.did}`} className="rounded-full">
-            <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 shrink-0">
+            <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0">
              <img
                src={post.author.avatar}
                style={isAuthorLabeled ? {filter: 'blur(2.5px)'} : undefined}
@@ -53,7 +53,7 @@ export function Post({thread}: Props) {
            </Link>
            <Link
              href={`/profile/${post.author.did}`}
-              className="text-[15px] text-textLight hover:underline line-clamp-1">
+              className="text-[15px] text-textLight dark:text-textDimmed hover:underline line-clamp-1">
              <p>@{post.author.handle}</p>
            </Link>
          </div>
@@ -69,15 +69,15 @@ export function Post({thread}: Props) {
        <Link href={href}>
          <time
            datetime={new Date(post.indexedAt).toISOString()}
-            className="text-textLight mt-1 text-sm hover:underline">
+            className="text-textLight dark:text-textDimmed mt-1 text-sm hover:underline">
            {niceDate(post.indexedAt)}
          </time>
        </Link>
-        <div className="border-t w-full pt-2.5 flex items-center gap-5 text-sm cursor-pointer">
+        <div className="border-t dark:border-slate-600 w-full pt-2.5 flex items-center gap-5 text-sm cursor-pointer">
          {!!post.likeCount && (
            <div className="flex items-center gap-2 cursor-pointer">
              <img src={likeIcon} className="w-5 h-5" />
-              <p className="font-bold text-neutral-500 mb-px">
+              <p className="font-bold text-neutral-500 dark:text-neutral-300 mb-px">
                {prettyNumber(post.likeCount)}
              </p>
            </div>
@@ -85,17 +85,19 @@ export function Post({thread}: Props) {
          {!!post.repostCount && (
            <div className="flex items-center gap-2 cursor-pointer">
              <img src={repostIcon} className="w-5 h-5" />
-              <p className="font-bold text-neutral-500 mb-px">
+              <p className="font-bold text-neutral-500 dark:text-neutral-300 mb-px">
                {prettyNumber(post.repostCount)}
              </p>
            </div>
          )}
          <div className="flex items-center gap-2 cursor-pointer">
            <img src={replyIcon} className="w-5 h-5" />
-            <p className="font-bold text-neutral-500 mb-px">Reply</p>
+            <p className="font-bold text-neutral-500 dark:text-neutral-300 mb-px">
+              Reply
+            </p>
          </div>
          <div className="flex-1" />
-          <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline">
+          <p className="cursor-pointer text-brand dark:text-brandLighten font-bold hover:underline hidden min-[450px]:inline">
            {post.replyCount
              ? `Read ${prettyNumber(post.replyCount)} ${
                  post.replyCount > 1 ? 'replies' : 'reply'
@@ -5,3 +5,7 @@
 .break-word {
  word-break: break-word;
 }
+
+:root {
+  color-scheme: light dark;
+}
@@ -6,6 +6,7 @@ import {useEffect, useMemo, useRef, useState} from 'preact/hooks'

 import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
+import {initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -21,6 +22,8 @@ export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')

+initColorMode()
+
 const agent = new BskyAgent({
  service: 'https://public.api.bsky.app',
 })
@@ -108,7 +111,7 @@ function LandingPage() {
  }, [uri])

  return (
-    <main className="w-full min-h-screen flex flex-col items-center gap-8 py-14 px-4 md:pt-32">
+    <main className="w-full min-h-screen flex flex-col items-center gap-8 py-14 px-4 md:pt-32 dark:bg-dimmedBgDarken dark:text-slate-200">
      <Link
        href="https://bsky.social/about"
        className="transition-transform hover:scale-110">
@@ -121,20 +124,22 @@ function LandingPage() {
        type="text"
        value={uri}
        onInput={e => setUri(e.currentTarget.value)}
-        className="border rounded-lg py-3 w-full max-w-[600px] px-4"
+        className="border rounded-lg py-3 w-full max-w-[600px] px-4 dark:bg-dimmedBg dark:border-slate-500"
        placeholder={DEFAULT_POST}
      />

-      <img src={arrowBottom} className="w-6" />
+      <img src={arrowBottom} className="w-6 dark:invert" />

      {loading ? (
-        <Skeleton />
+        <div className="w-full max-w-[600px]">
+          <Skeleton />
+        </div>
      ) : (
        <div className="w-full max-w-[600px] gap-8 flex flex-col">
          {!error && thread && uri && <Snippet thread={thread} />}
          {!error && thread && <Post thread={thread} key={thread.post.uri} />}
          {error && (
-            <div className="w-full border border-red-500 bg-red-50 px-4 py-3 rounded-lg">
+            <div className="w-full border border-red-500 bg-red-500/10 px-4 py-3 rounded-lg">
              <p className="text-red-500 text-center">{error}</p>
            </div>
          )}
@@ -149,15 +154,15 @@ function Skeleton() {
    <Container>
      <div className="flex-1 flex-col flex gap-2 pb-8">
        <div className="flex gap-2.5 items-center">
-          <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-100 shrink-0 animate-pulse" />
+          <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-100 dark:bg-slate-700 shrink-0 animate-pulse" />
          <div className="flex-1">
-            <div className="bg-neutral-100 animate-pulse w-64 h-4 rounded" />
-            <div className="bg-neutral-100 animate-pulse w-32 h-3 mt-1 rounded" />
+            <div className="bg-neutral-100 dark:bg-slate-700 animate-pulse w-64 h-4 rounded" />
+            <div className="bg-neutral-100 dark:bg-slate-700 animate-pulse w-32 h-3 mt-1 rounded" />
          </div>
        </div>
-        <div className="w-full h-4 mt-2 bg-neutral-100 rounded animate-pulse" />
-        <div className="w-5/6 h-4 bg-neutral-100 rounded animate-pulse" />
-        <div className="w-3/4 h-4 bg-neutral-100 rounded animate-pulse" />
+        <div className="w-full h-4 mt-2 bg-neutral-100 dark:bg-slate-700 rounded animate-pulse" />
+        <div className="w-5/6 h-4 bg-neutral-100 dark:bg-slate-700 rounded animate-pulse" />
+        <div className="w-3/4 h-4 bg-neutral-100 dark:bg-slate-700 rounded animate-pulse" />
      </div>
    </Container>
  )
@@ -220,7 +225,7 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
        ref={ref}
        type="text"
        value={snippet}
-        className="border rounded-lg py-3 w-full px-4"
+        className="border rounded-lg py-3 w-full px-4 dark:bg-dimmedBg dark:border-slate-500"
        readOnly
        autoFocus
        onFocus={() => {
@@ -228,7 +233,7 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
        }}
      />
      <button
-        className="rounded-lg bg-brand text-white color-white py-3 px-4 whitespace-nowrap min-w-28"
+        className="rounded-lg bg-brand text-white py-3 px-4 whitespace-nowrap min-w-28"
        onClick={() => {
          ref.current?.focus()
          ref.current?.select()
@@ -4,6 +4,7 @@ import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'

 import logo from '../../assets/logo.svg'
+import {initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -21,6 +22,8 @@ if (!uri) {
  throw new Error('No uri in path')
 }

+initColorMode()
+
 agent
  .getPostThread({
    uri,
@@ -55,13 +58,13 @@ function PwiOptOut({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
        <img src={logo} className="h-6" />
      </Link>
      <div className="w-full py-12 gap-4 flex flex-col items-center">
-        <p className="max-w-80 text-center w-full text-textLight">
+        <p className="max-w-80 text-center w-full text-textLight dark:text-textDimmed">
          The author of this post has requested their posts not be displayed on
          external sites.
        </p>
        <Link
          href={href}
-          className="max-w-80 rounded-lg bg-brand text-white color-white text-center py-1 px-4 w-full mx-auto">
+          className="max-w-80 rounded-lg bg-brand text-white text-center py-1 px-4 w-full mx-auto">
          View on Bluesky
        </Link>
      </div>
@@ -77,7 +80,7 @@ function ErrorMessage() {
        className="transition-transform hover:scale-110 absolute top-4 right-4">
        <img src={logo} className="h-6" />
      </Link>
-      <p className="my-16 text-center w-full text-textLight">
+      <p className="my-16 text-center w-full text-textLight dark:text-textDimmed">
        Post not found, it may have been deleted.
      </p>
    </Container>
@@ -1,11 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: ['variant', [
+    '&:is(.dark *):not(:is(.dark .light *))',
+  ]],
  theme: {
    extend: {
      colors: {
        brand: 'rgb(10,122,255)',
+        brandLighten: 'rgb(32,139,254)',
        textLight: 'rgb(66,87,108)',
+        textDimmed: 'rgb(174,187,201)',
+        dimmedBgLighten: 'rgb(30,41,54)',
+        dimmedBg: 'rgb(22,30,39)',
+        dimmedBgDarken: 'rgb(18,25,32)',
      },
    },
  },
@@ -1,4 +1,3 @@
-
 {
  "compilerOptions": {
    "target": "ES5",
@@ -20,5 +19,5 @@
    "jsxFragmentFactory": "Fragment",
    "downlevelIteration": true
  },
-  "include": ["src", "vite.config.ts"]
+  "include": ["src", "snippet", "vite.config.ts"]
 }
@@ -4209,12 +4209,7 @@ yocto-queue@^0.1.0:
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

-zod@^3.21.4:
-  version "3.22.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
-  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
-
-zod@^3.23.8:
+zod@^3.21.4, zod@^3.23.8:
  version "3.23.8"
  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
@@ -257,6 +257,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/privacy-and-security", server.WebGeneric)
 	e.GET("/settings/content-and-media", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
+	e.GET("/settings/app-icon", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
@@ -53,7 +53,8 @@ type OEmbedResponse struct {
 	Version      string `json:"version"`
 	AuthorName   string `json:"author_name,omitempty"`
 	AuthorURL    string `json:"author_url,omitempty"`
-	ProviderName string `json:"provider_url,omitempty"`
+	ProviderName string `json:"provider_name,omitempty"`
+	ProviderURL  string `json:"provider_url,omitempty"`
 	CacheAge     int    `json:"cache_age,omitempty"`
 	Width        *int   `json:"width"`
 	Height       *int   `json:"height"`
@@ -170,6 +171,7 @@ func (srv *Server) WebOEmbed(c echo.Context) error {
 		AuthorName:   "@" + post.Author.Handle,
 		AuthorURL:    fmt.Sprintf("https://bsky.app/profile/%s", post.Author.Handle),
 		ProviderName: "Bluesky Social",
+		ProviderURL:  "https://bsky.app",
 		CacheAge:     86400,
 		Width:        &width,
 		Height:       nil,
@@ -112,8 +112,8 @@ func serve(cctx *cli.Context) error {
 		Skipper: middleware.DefaultSkipper,
 		Store: middleware.NewRateLimiterMemoryStoreWithConfig(
 			middleware.RateLimiterMemoryStoreConfig{
-				Rate:      10,              // requests per second
-				Burst:     30,              // allow bursts
+				Rate:      20,              // requests per second
+				Burst:     150,             // allow bursts
 				ExpiresIn: 3 * time.Minute, // garbage collect entries older than 3 minutes
 			},
 		),
@@ -27,13 +27,21 @@

  let player
  function onYouTubeIframeAPIReady() {
+    let videoId = url.searchParams.get('videoId')
+    videoId = decodeURIComponent(videoId)
+    videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
+    if (videoId.length !== 11) throw new Error("Invalid video ID")
+
+    let start = url.searchParams.get('start')
+    start = start.replace(/[^0-9]/g, "")
+
    player = new YT.Player('player', {
      width: "1000",
      height: "1000",
-      videoId: url.searchParams.get('videoId'),
+      videoId,
      playerVars: {
        autoplay: 1,
-        start: url.searchParams.get('start'),
+        start,
        rel: 0,
        loop: 0,
        playsinline: 1,
@@ -13,8 +13,7 @@

  <!-- Hello Humans! API docs at https://atproto.com -->

-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2">

  <style>
    /**
@@ -26,21 +25,20 @@
     */
    @font-face {
      font-family: 'InterVariable';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'InterVariableItalic';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: italic;
      font-display: swap;
    }
    html {
      background-color: white;
-      scrollbar-gutter: stable both-edges;
    }
    @media (prefers-color-scheme: dark) {
      html {
@@ -76,9 +74,15 @@
      top: 50%;
      transform: translateX(-50%) translateY(-50%) translateY(-50px);
    }
-    /* We need this style to prevent web dropdowns from shifting the display when opening */
+    /**
+     * We need these styles to prevent shifting due to scrollbar show/hide on
+     * OSs that have them enabled by default. This also handles cases where the
+     * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
+     * shift the content, by forcing the page to show a scrollbar.
+     */
    body {
      width: 100%;
+      overflow-y: scroll;
    }
  </style>

@@ -12,14 +12,14 @@
 {# don't include the bundle on non-404 error pages #}
 {% block head_bundle %}
  {% if statusCode == 404 %}
-    {{ super() }}
+    {{ block.Super }}
  {% else %}
  {% endif %}
 {% endblock %}

 {%- block body_all %}
  {% if statusCode == 404 %}
-    {{ super() }}
+    {{ block.Super }}
  {% else %}
    <h1>{{ statusCode }}: Server Error</h1>
    <p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
@@ -87,6 +87,12 @@ However, if you're a part of the Bluesky team and want to enable Sentry, fill in

 If you change `SENTRY_AUTH_TOKEN`, you need to do `yarn prebuild` before running `yarn ios` or `yarn android` again.

+### Adding bitdrift
+
+Adding bitdirft is NOT required. You can keep `BITDRIFT_API_KEY=` in `.env` which will avoid initializing bitdrift during startup.
+
+However, if you're a part of the Bluesky team and want to enable bitdrift, fill in `BITDRIFT_API_KEY` in your `.env` to enable bitdrift.
+
 ### Adding and Updating Locales

 - `yarn intl:build` -> you will also need to run this anytime `./src/locale/{locale}/messages.po` change
@@ -5,9 +5,8 @@ import {LogBox} from 'react-native'
 import {registerRootComponent} from 'expo'

 import App from '#/App'
-import {IS_TEST} from '#/env'

-if (IS_TEST) {
+if (process.env.NODE_ENV === 'test') {
  LogBox.ignoreAllLogs() // suppress all logs in tests
 } else {
  LogBox.ignoreLogs(['Require cycle:']) // suppress require-cycle warnings, it's fine
@@ -18,9 +18,6 @@ jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
  }
 })

-// Silence the warning: Animated: `useNativeDriver` is not supported
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
-
 jest.mock('@fortawesome/react-native-fontawesome', () => ({
  FontAwesomeIcon: '',
 }))
@@ -47,13 +44,6 @@ jest.mock('expo-file-system', () => ({
  deleteAsync: jest.fn(),
 }))

-jest.mock('expo-image-manipulator', () => ({
-  manipulateAsync: jest.fn().mockResolvedValue({
-    uri: 'file://resized-image',
-  }),
-  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
-}))
-
 jest.mock('expo-camera', () => ({
  Camera: {
    useCameraPermissions: jest.fn(() => [true]),
@@ -2,6 +2,8 @@
 module.exports = {
  locales: [
    'en',
+    'an',
+    'ast',
    'ca',
    'de',
    'en-GB',
@@ -9,17 +11,21 @@ module.exports = {
    'fi',
    'fr',
    'ga',
+    'gl',
    'hi',
    'hu',
    'id',
    'it',
    'ja',
    'ko',
+    'nl',
+    'pl',
    'pt-BR',
    'ru',
    'th',
    'tr',
    'uk',
+    'vi',
    'zh-CN',
    'zh-HK',
    'zh-TW',
@@ -9,6 +9,13 @@ cfg.resolver.sourceExts = process.env.RN_SRC_EXT
 if (cfg.resolver.resolveRequest) {
  throw Error('Update this override because it is conflicting now.')
 }
+
+if (process.env.BSKY_PROFILE) {
+  cfg.cacheVersion += ':PROFILE'
+}
+
+cfg.resolver.assetExts = [...cfg.resolver.assetExts, 'woff2']
+
 cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  // HACK: manually resolve a few packages that use `exports` in `package.json`.
  // A proper solution is to enable `unstable_enablePackageExports` but this needs careful testing.
@@ -29,6 +36,15 @@ cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === '@ipld/dag-cbor') {
    return context.resolveRequest(context, '@ipld/dag-cbor/src', platform)
  }
+  if (process.env.BSKY_PROFILE) {
+    if (moduleName.endsWith('ReactNativeRenderer-prod')) {
+      return context.resolveRequest(
+        context,
+        moduleName.replace('-prod', '-profiling'),
+        platform,
+      )
+    }
+  }
  return context.resolveRequest(context, moduleName, platform)
 }

@@ -38,9 +54,10 @@ cfg.transformer.getTransformOptions = async () => ({
    inlineRequires: true,
    nonInlinedRequires: [
      // We can remove this option and rely on the default after
-      // https://github.com/facebook/metro/pull/1126 is released.
+      // https://github.com/facebook/metro/pull/1390 is released.
      'React',
      'react',
+      'react-compiler-runtime',
      'react/jsx-dev-runtime',
      'react/jsx-runtime',
      'react-native',
@@ -64,11 +64,14 @@ class SheetViewController: UIViewController {

  func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) {
    if let sheet = self.sheetPresentationController {
-      sheet.animateChanges {
-        self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
-        if #available(iOS 16.0, *) {
-          sheet.invalidateDetents()
-        }
+      // Capture `self` weakly to prevent retain cycles.
+      // Also, capture `sheet` weakly to avoid potential strong references held by animateChanges.
+      sheet.animateChanges { [weak self, weak sheet] in
+          guard let weakSelf = self, let weakSheet = sheet else { return }
+          weakSelf.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
+          if #available(iOS 16.0, *) {
+              weakSheet.invalidateDetents()
+          }
      }
    }
  }
@@ -1,24 +1 @@
-import React from 'react'
-
-import {BottomSheetViewProps} from './BottomSheet.types'
-import {BottomSheetNativeComponent} from './BottomSheetNativeComponent'
-import {useBottomSheetPortal_INTERNAL} from './BottomSheetPortal'
-
-export const BottomSheet = React.forwardRef<
-  BottomSheetNativeComponent,
-  BottomSheetViewProps
->(function BottomSheet(props, ref) {
-  const Portal = useBottomSheetPortal_INTERNAL()
-
-  if (__DEV__ && !Portal) {
-    throw new Error(
-      'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.',
-    )
-  }
-
-  return (
-    <Portal>
-      <BottomSheetNativeComponent {...props} ref={ref} />
-    </Portal>
-  )
-})
+export {BottomSheetNativeComponent as BottomSheet} from './BottomSheetNativeComponent'
@@ -11,6 +11,7 @@ import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'

 import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
 import {BottomSheetPortalProvider} from './BottomSheetPortal'
+import {Context as PortalContext} from './BottomSheetPortal'

 const screenHeight = Dimensions.get('screen').height

@@ -34,6 +35,8 @@ export class BottomSheetNativeComponent extends React.Component<
 > {
  ref = React.createRef<any>()

+  static contextType = PortalContext
+
  constructor(props: BottomSheetViewProps) {
    super(props)
    this.state = {
@@ -67,6 +70,17 @@ export class BottomSheetNativeComponent extends React.Component<
  }

  render() {
+    const Portal = this.context as React.ContextType<typeof PortalContext>
+    if (!Portal) {
+      throw new Error(
+        'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.',
+      )
+    }
+
+    if (!this.state.open) {
+      return null
+    }
+
    const {children, backgroundColor, ...rest} = this.props
    const cornerRadius = rest.cornerRadius ?? 0

@@ -83,43 +97,41 @@ export class BottomSheetNativeComponent extends React.Component<
      }
    }

-    if (!this.state.open) {
-      return null
-    }
-
    return (
-      <NativeView
-        {...rest}
-        onStateChange={this.onStateChange}
-        ref={this.ref}
-        style={{
-          position: 'absolute',
-          height: screenHeight,
-          width: '100%',
-        }}
-        containerBackgroundColor={backgroundColor}>
-        <View
-          style={[
-            {
-              flex: 1,
-              backgroundColor,
-            },
-            Platform.OS === 'android' && {
-              borderTopLeftRadius: cornerRadius,
-              borderTopRightRadius: cornerRadius,
-            },
-            extraStyles,
-          ]}>
+      <Portal>
+        <NativeView
+          {...rest}
+          onStateChange={this.onStateChange}
+          ref={this.ref}
+          style={{
+            position: 'absolute',
+            height: screenHeight,
+            width: '100%',
+          }}
+          containerBackgroundColor={backgroundColor}>
          <View
-            onLayout={e => {
-              const {height} = e.nativeEvent.layout
-              this.setState({viewHeight: height})
-              this.updateLayout()
-            }}>
-            <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
+            style={[
+              {
+                flex: 1,
+                backgroundColor,
+              },
+              Platform.OS === 'android' && {
+                borderTopLeftRadius: cornerRadius,
+                borderTopRightRadius: cornerRadius,
+              },
+              extraStyles,
+            ]}>
+            <View
+              onLayout={e => {
+                const {height} = e.nativeEvent.layout
+                this.setState({viewHeight: height})
+                this.updateLayout()
+              }}>
+              <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
+            </View>
          </View>
-        </View>
-      </NativeView>
+        </NativeView>
+      </Portal>
    )
  }
 }
@@ -4,7 +4,7 @@ import {createPortalGroup_INTERNAL} from './lib/Portal'

 type PortalContext = React.ElementType<{children: React.ReactNode}>

-const Context = React.createContext({} as PortalContext)
+export const Context = React.createContext({} as PortalContext)

 export const useBottomSheetPortal_INTERNAL = () => React.useContext(Context)

@@ -88,7 +88,7 @@ repositories {

 dependencies {
  implementation 'androidx.appcompat:appcompat:1.6.1'
-    def GLIDE_VERSION = "4.13.2"
+    def GLIDE_VERSION = "4.16.0"

  implementation project(':expo-modules-core')
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m15.604 2.47-.642 1.112a5 5 0 0 1 2.05 4.034H7.005c0-1.658.809-3.123 2.05-4.034L8.41 2.47a.313.313 0 0 1 .542-.313l.627 1.086a5 5 0 0 1 2.428-.63c.882 0 1.709.23 2.428.63l.627-1.085a.31.31 0 0 1 .426-.115.31.31 0 0 1 .115.428ZM9.506 5.114a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Zm3.753 0a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0ZM3.878 8.866a1.251 1.251 0 0 1 2.501 0v5.004a1.252 1.252 0 0 1-2.501 0V8.866Zm13.759 0a1.251 1.251 0 0 1 2.501 0v5.004a1.251 1.251 0 0 1-2.501 0V8.866ZM7.005 17.622h1.25v3.128a1.251 1.251 0 0 0 2.502 0v-3.128h2.502v3.128a1.251 1.251 0 0 0 2.501 0v-3.128h1.25V8.241H7.006v9.381Z" clip-rule="evenodd"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 6a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.5 2.5a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/></svg>`