Fix React Rules violations, enable strict lint

.env.example

@@ -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=

.eslintrc.js

@@ -1,9 +1,10 @@
+const reactCompilerConfig = require('./react-compiler.config.js')
+
 module.exports = {
   root: true,
   extends: [
-    '@react-native',
+    '@react-native-community',
     'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
     'plugin:react-native-a11y/ios',
     'prettier',
   ],
@@ -17,8 +18,9 @@ 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',
@@ -79,7 +81,7 @@ module.exports = {
       },
     ],
     'simple-import-sort/exports': 'error',
-    'react-compiler/react-compiler': 'warn',
+    'react-compiler/react-compiler': ['error', reactCompilerConfig],
     'no-restricted-imports': [
       'error',
       {

.github/workflows/build-submit-android.yml

@@ -64,7 +64,6 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
           echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
-          echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ EAS Build

.github/workflows/build-submit-ios.yml

@@ -76,7 +76,6 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
           echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
-          echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
       - name: 🏗️ EAS Build

.github/workflows/bundle-deploy-eas-update.yml

@@ -69,9 +69,6 @@ jobs:
       - name: Lint check
         run: yarn lint
 
-      - name: Lint lockfile
-        run: yarn lockfile-lint
-
       - name: Prettier check
         run: yarn prettier --check .
 
@@ -104,7 +101,6 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
           echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
-          echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ Create Bundle
@@ -200,7 +196,6 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
           echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
-          echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
       - name: 🏗️ EAS Build
@@ -227,7 +222,7 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}-build-android
       cancel-in-progress: false
-    needs: [bundleDeploy]
+    needs: [ bundleDeploy ]
     # Gotta check if its NOT '[]' because any md5 hash in the outputs is detected as a possible secret and won't be
     # available here
     if: ${{ inputs.channel != 'production' && needs.bundleDeploy.outputs.changes-detected }}
@@ -278,7 +273,6 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
           echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
-          echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ EAS Build

.github/workflows/golang-test-lint.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Go tooling
         uses: actions/setup-go@v3
         with:
-          go-version: '1.23'
+          go-version: '1.22'
       - name: Dummy Static Files
         run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt
       - name: Check
@@ -36,7 +36,7 @@ jobs:
       - name: Set up Go tooling
         uses: actions/setup-go@v3
         with:
-          go-version: '1.23'
+          go-version: '1.22'
       - name: Dummy Static Files
         run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt
       - name: Lint

.github/workflows/lint.yml

@@ -28,8 +28,6 @@ jobs:
           attempt_delay: 2000
       - name: Lint check
         run: yarn lint
-      - name: Lint lockfile
-        run: yarn lockfile-lint
       - name: Prettier check
         run: yarn prettier --check .
       - name: Check & compile i18n
@@ -56,4 +54,4 @@ jobs:
         run: yarn intl:build
       - name: Run tests
         run: |
-          NODE_ENV=test yarn test --forceExit
+          NODE_ENV=test EXPO_PUBLIC_ENV=test yarn test --forceExit

.github/workflows/verify-yarn-lock.yml

@@ -1,46 +0,0 @@
-name: Lockfile
-
-on:
-  pull_request:
-concurrency:
-  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
-  cancel-in-progress: true
-
-jobs:
-  verify-yarn-lock:
-    name: No manual yarn.lock edits
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out PR HEAD
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Fetch base branch
-        run: git fetch origin ${{ github.base_ref }} --depth=1
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-
-      - name: Reset yarn.lock to base
-        run: git show "origin/${{ github.base_ref }}:yarn.lock" > yarn.lock
-
-      - name: Yarn install
-        uses: Wandalen/wretry.action@master
-        with:
-          # Fine to skip scripts since we don't run any code
-          command: yarn install --ignore-scripts
-          attempt_limit: 3
-          attempt_delay: 2000
-
-      - name: Verify yarn.lock
-        run: |
-          git diff --quiet --exit-code || {
-            echo '::error::`yarn.lock` does not match what Yarn would generate given the base `yarn.lock` and the head `package.json`.'
-            echo '::error:: - If this is intentional, you can ignore this check.'
-            echo '::error:: - If this is unintentional, apply the following diff:'
-            git --no-pager diff
-            exit 1
-          }

Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.23-bullseye AS build-env
+FROM golang:1.22-bullseye AS build-env
 
 WORKDIR /usr/src/social-app
 

Dockerfile.embedr

@@ -1,4 +1,4 @@
-FROM golang:1.23-bullseye AS build-env
+FROM golang:1.22-bullseye AS build-env
 
 WORKDIR /usr/src/social-app
 

Makefile

@@ -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 yarn test
+	NODE_ENV=test EXPO_PUBLIC_ENV=test yarn test
 
 .PHONY: lint
 lint: ## Run style checks and verify syntax

__e2e__/flows/curate-lists.yml

@@ -26,7 +26,7 @@ appId: xyz.blueskyweb.app
 - tapOn: "Save"
 - assertNotVisible:
     id: "createOrEditListModal"
-- tapOn: "People"
+- tapOn: "About"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"
 
@@ -74,6 +74,7 @@ appId: xyz.blueskyweb.app
 - tapOn: "Delete List"
 - tapOn:
     id: "confirmBtn"
+- assertVisible: "This list is empty!"
 
 - tapOn:
     label: "Create a new curatelist"
@@ -92,12 +93,14 @@ appId: xyz.blueskyweb.app
 - tapOn: "Save"
 - assertNotVisible:
     id: "createOrEditListModal"
-- tapOn: "People"
+- tapOn: "About"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"
-- tapOn: "People"
+- tapOn: "About"
 
-- tapOn: "Start adding people"
+- tapOn:
+    label: "Adds users on curatelists from the list"
+    id: "addUserBtn"
 - assertVisible:
     id: "listAddUserModal"
 - tapOn:
@@ -142,7 +145,7 @@ appId: xyz.blueskyweb.app
     id: "e2eGotoLists"
 - tapOn: "Good Ppl"
 
-- tapOn: "People"
+- tapOn: "About"
 - assertVisible:
     label: "Removes users on curatelists from the list"
     id: "user-bob.test"

__e2e__/flows/feed-reorder.yml

@@ -11,8 +11,10 @@ appId: xyz.blueskyweb.app
 
 # Pin alice's feed
 - extendedWaitUntil:
-    visible: "Open drawer menu"
-- tapOn: "Open drawer menu"
+    visible:
+        id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "profileCardButton"
 - tapOn:
@@ -30,7 +32,8 @@ appId: xyz.blueskyweb.app
     text: "alice-favs"
 
 # Set alice-favs first
-- tapOn: "Open drawer menu"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
 - tapOn:
@@ -41,7 +44,8 @@ appId: xyz.blueskyweb.app
 - tapOn:
       label: "Save button"
       id: "saveChangesBtn"
-- tapOn: "Go back"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "alice-favs"
@@ -50,7 +54,8 @@ appId: xyz.blueskyweb.app
     text: "Following"
 
 # Set following first
-- tapOn: "Open drawer menu"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
 - tapOn:
@@ -61,7 +66,8 @@ appId: xyz.blueskyweb.app
 - tapOn:
     label: "Save button"
     id: "saveChangesBtn"
-- tapOn: "Go back"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "Following"
@@ -70,7 +76,8 @@ appId: xyz.blueskyweb.app
     text: "alice-favs"
 
 # Remove following
-- tapOn: "Open drawer menu"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
 - tapOn:
@@ -81,7 +88,8 @@ appId: xyz.blueskyweb.app
 - tapOn:
       label: "Save button"
       id: "saveChangesBtn"
-- tapOn: "Go back"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "alice-favs"

__e2e__/flows/home-screen.yml

@@ -27,9 +27,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "bottomBarHomeBtn"
 - tapOn:
-    id: "bottomBarHomeBtn"
-- tapOn:
-    id: "bottomBarHomeBtn"
+    id: "viewHeaderDrawerBtn"
 - assertNotVisible: "Feeds ✨"
 
 - tapOn:

__e2e__/flows/mod-lists.yml

@@ -14,7 +14,7 @@ appId: xyz.blueskyweb.app
     id: "e2eGotoModeration"
 - tapOn:
     id: "moderationlistsBtn"
-- tapOn: "New list"
+- tapOn: "New"
 - tapOn:
     id: "editNameInput"
 - inputText: "Muted Users"

__e2e__/setupApp.yml

@@ -6,8 +6,6 @@ appId: xyz.blueskyweb.app
 - waitForAnimationToEnd
 - tapOn: "http://localhost:8081"
 - waitForAnimationToEnd
-- extendedWaitUntil:
-    visible: "Continue"
 - swipe:
    from: "Bluesky"
    direction: DOWN

app.config.js

@@ -1,6 +1,26 @@
 const pkg = require('./package.json')
 
-const DARK_SPLASH_ANDROID_BACKGROUND = '#0f141b'
+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',
+}
 
 module.exports = function (config) {
   /**
@@ -15,9 +35,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',
@@ -50,8 +70,11 @@ module.exports = function (config) {
       runtimeVersion: {
         policy: 'appVersion',
       },
-      icon: './assets/app-icons/ios_icon_default_light.png',
+      orientation: 'portrait',
+      icon: './assets/icon.png',
       userInterfaceStyle: 'automatic',
+      splash: SPLASH_CONFIG,
+      // hsl(211, 99%, 53%), same as palette.default.brandText
       primaryColor: '#1083fe',
       ios: {
         supportsTablet: false,
@@ -69,42 +92,12 @@ 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',
-            'el',
-            'es',
-            'fi',
-            'fr',
-            'ga',
-            'gl',
-            'hi',
-            'hu',
-            'id',
-            'it',
-            'ja',
-            'km',
-            'ko',
-            'ne',
-            'nl',
-            'pl',
-            'pt-BR',
-            'ro',
-            '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,
@@ -141,10 +134,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_ANDROID_BACKGROUND,
+        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
       },
       android: {
-        icon: './assets/app-icons/android_icon_default_light.png',
+        icon: './assets/icon.png',
         adaptiveIcon: {
           foregroundImage: './assets/icon-android-foreground.png',
           monochromeImage: './assets/icon-android-foreground.png',
@@ -170,6 +163,10 @@ module.exports = function (config) {
             category: ['BROWSABLE', 'DEFAULT'],
           },
         ],
+        splash: {
+          ...SPLASH_CONFIG_ANDROID,
+          dark: DARK_SPLASH_CONFIG_ANDROID,
+        },
       },
       web: {
         favicon: './assets/favicon.png',
@@ -209,9 +206,10 @@ module.exports = function (config) {
               newArchEnabled: false,
             },
             android: {
-              compileSdkVersion: 35,
-              targetSdkVersion: 35,
-              buildToolsVersion: '35.0.0',
+              compileSdkVersion: 34,
+              targetSdkVersion: 34,
+              buildToolsVersion: '34.0.0',
+              kotlinVersion: '1.8.0',
               newArchEnabled: false,
             },
           },
@@ -225,14 +223,12 @@ module.exports = function (config) {
           },
         ],
         'react-native-compressor',
-        // TODO: Reenable when the build issue is fixed.
-        // '@bitdrift/react-native',
         './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
+        './plugins/withAndroidStylesWindowBackgroundPlugin.js',
         './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
-        './plugins/withAndroidNoJitpackPlugin.js',
         './plugins/shareExtension/withShareExtensions.js',
         './plugins/notificationsExtension/withNotificationsExtension.js',
         './plugins/withAppDelegateReferrer.js',
@@ -240,8 +236,8 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              './assets/fonts/inter/InterVariable.woff2',
-              './assets/fonts/inter/InterVariable-Italic.woff2',
+              './assets/fonts/inter/InterVariable.ttf',
+              './assets/fonts/inter/InterVariable-Italic.ttf',
               // Android only
               './assets/fonts/inter/Inter-Regular.otf',
               './assets/fonts/inter/Inter-Italic.otf',
@@ -252,101 +248,6 @@ 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,
-            },
-          },
-        ],
-        ['expo-screen-orientation', {initialOrientation: 'PORTRAIT_UP'}],
       ].filter(Boolean),
       extra: {
         eas: {

assets/icons/android_logo.svg

@@ -1 +0,0 @@
-<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>

assets/icons/apple_logo.svg

@@ -1 +0,0 @@
-<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>

assets/icons/clock_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<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>

assets/icons/floppyDisk_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<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>

assets/icons/gift1_filled_corner0_rounded.svg

@@ -1 +0,0 @@
-<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>

assets/icons/logomark.svg

@@ -1 +0,0 @@
-<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>

assets/icons/pin_filled_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<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>

assets/icons/ticket_stroke2_corner0_rounded.svg

@@ -1 +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 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" stroke="#000" stroke-linejoin="round" d="M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.5 3.5 0 0 1 5.5 12a3.5 3.5 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.5 3.5 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z"/></svg>

babel.config.js

@@ -1,3 +1,5 @@
+const reactCompilerConfig = require('./react-compiler.config.js')
+
 module.exports = function (api) {
   api.cache(true)
   const isTestEnv = process.env.NODE_ENV === 'test'
@@ -17,7 +19,7 @@ module.exports = function (api) {
     ],
     plugins: [
       'macros',
-      ['babel-plugin-react-compiler', {target: '18'}],
+      ['babel-plugin-react-compiler', reactCompilerConfig],
       [
         'module:react-native-dotenv',
         {

bskyembed/index.html

@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bluesky Embed</title>
-  <link rel="preconnect" href="https://public.api.bsky.app">
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">

bskyembed/post.html

@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bluesky Embed</title>
-  <link rel="preconnect" href="https://public.api.bsky.app">
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">

bskyembed/snippet/embed.ts

@@ -20,7 +20,6 @@ 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
@@ -34,7 +33,6 @@ 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`
@@ -49,7 +47,7 @@ window.addEventListener('message', event => {
  * @returns
  */
 function scan(node = document) {
-  const embeds = node.querySelectorAll<HTMLIFrameElement>('[data-bluesky-uri]')
+  const embeds = node.querySelectorAll('[data-bluesky-uri]')
 
   for (let i = 0; i < embeds.length; i++) {
     const id = String(Math.random()).slice(2)

bskyembed/src/color-mode.ts

@@ -1,17 +0,0 @@
-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')
-    })
-}

bskyembed/src/components/container.tsx

@@ -37,7 +37,7 @@ export function Container({
   return (
     <div
       ref={ref}
-      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"
+      className="w-full bg-white hover:bg-neutral-50 relative transition-colors max-w-[600px] min-w-[300px] flex border rounded-xl"
       onClick={() => {
         if (ref.current && href) {
           // forwardRef requires preact/compat - let's keep it simple

bskyembed/src/components/embed.tsx

@@ -9,6 +9,7 @@ import {
   AppBskyGraphDefs,
   AppBskyGraphStarterpack,
   AppBskyLabelerDefs,
+  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -78,9 +79,9 @@ export function Embed({
         return (
           <Link
             href={`/profile/${record.author.did}/post/${getRkey(record)}`}
-            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">
+            className="transition-colors hover:bg-neutral-100 border 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 dark:bg-slate-700 shrink-0">
+              <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 shrink-0">
                 <img
                   src={record.author.avatar}
                   style={isAuthorLabeled ? {filter: 'blur(1.5px)'} : undefined}
@@ -88,7 +89,7 @@ export function Embed({
               </div>
               <p className="line-clamp-1 text-sm">
                 <span className="font-bold">{record.author.displayName}</span>
-                <span className="text-textLight dark:text-textDimmed ml-1">
+                <span className="text-textLight ml-1">
                   @{record.author.handle}
                 </span>
               </p>
@@ -209,7 +210,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 dark:text-textDimmed">{children}</p>
+      <p className="text-sm text-textLight">{children}</p>
     </div>
   )
 }
@@ -308,7 +309,7 @@ function ExternalEmbed({
   return (
     <Link
       href={content.external.uri}
-      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
+      className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch"
       disableTracking>
       {content.external.thumb && (
         <img
@@ -317,11 +318,11 @@ function ExternalEmbed({
         />
       )}
       <div className="py-3 px-4">
-        <p className="text-sm text-textLight dark:text-textDimmed line-clamp-1">
+        <p className="text-sm text-textLight 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 dark:text-textDimmed line-clamp-2 mt-0.5">
+        <p className="text-sm text-textLight line-clamp-2 mt-0.5">
           {content.external.description}
         </p>
       </div>
@@ -345,29 +346,23 @@ function GenericWithImageEmbed({
   return (
     <Link
       href={href}
-      className="w-full rounded-lg border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
+      className="w-full rounded-lg border 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 dark:bg-slate-700 shrink-0"
+            className="w-8 h-8 rounded-md bg-neutral-300 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 dark:text-textDimmed text-sm">
-            {subtitle}
-          </p>
+          <p className="text-textLight text-sm">{subtitle}</p>
         </div>
       </div>
-      {description && (
-        <p className="text-textLight dark:text-textDimmed text-sm">
-          {description}
-        </p>
-      )}
+      {description && <p className="text-textLight text-sm">{description}</p>}
     </Link>
   )
 }
@@ -412,7 +407,7 @@ function StarterPackEmbed({
   return (
     <Link
       href={starterPackHref}
-      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
+      className="w-full rounded-lg overflow-hidden border 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">
@@ -421,7 +416,7 @@ function StarterPackEmbed({
             <p className="font-semibold leading-[21px]">
               {content.record.name}
             </p>
-            <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 leading-[18px]">
+            <p className="text-sm text-textLight line-clamp-2 leading-[18px]">
               Starter pack by{' '}
               {content.creator.displayName || `@${content.creator.handle}`}
             </p>
@@ -431,7 +426,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 dark:text-textDimmed mt-1">
+          <p className="text-sm font-semibold text-textLight mt-1">
             {content.joinedAllTimeCount} users have joined!
           </p>
         )}
@@ -442,14 +437,14 @@ function StarterPackEmbed({
 
 // from #/lib/strings/starter-pack.ts
 function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
-  const rkey = getRkey({uri: starterPack.uri})
+  const rkey = new AtUri(starterPack.uri).rkey
   return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
 }
 
 function getStarterPackHref(
   starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = getRkey({uri: starterPack.uri})
+  const rkey = new AtUri(starterPack.uri).rkey
   const handleOrDid = starterPack.creator.handle || starterPack.creator.did
   return `/starter-pack/${handleOrDid}/${rkey}`
 }

bskyembed/src/components/post.tsx

@@ -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 dark:bg-slate-700 shrink-0">
+            <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 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 dark:text-textDimmed hover:underline line-clamp-1">
+              className="text-[15px] text-textLight 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 dark:text-textDimmed mt-1 text-sm hover:underline">
+            className="text-textLight mt-1 text-sm hover:underline">
             {niceDate(post.indexedAt)}
           </time>
         </Link>
-        <div className="border-t dark:border-slate-600 w-full pt-2.5 flex items-center gap-5 text-sm cursor-pointer">
+        <div className="border-t 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 dark:text-neutral-300 mb-px">
+              <p className="font-bold text-neutral-500 mb-px">
                 {prettyNumber(post.likeCount)}
               </p>
             </div>
@@ -85,19 +85,17 @@ 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 dark:text-neutral-300 mb-px">
+              <p className="font-bold text-neutral-500 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 dark:text-neutral-300 mb-px">
-              Reply
-            </p>
+            <p className="font-bold text-neutral-500 mb-px">Reply</p>
           </div>
           <div className="flex-1" />
-          <p className="cursor-pointer text-brand dark:text-brandLighten font-bold hover:underline hidden min-[450px]:inline">
+          <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline">
             {post.replyCount
               ? `Read ${prettyNumber(post.replyCount)} ${
                   post.replyCount > 1 ? 'replies' : 'reply'

bskyembed/src/index.css

@@ -5,7 +5,3 @@
 .break-word {
   word-break: break-word;
 }
-
-:root {
-  color-scheme: light dark;
-}

bskyembed/src/screens/landing.tsx

@@ -6,7 +6,6 @@ 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'
@@ -22,8 +21,6 @@ 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',
 })
@@ -111,7 +108,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 dark:bg-dimmedBgDarken dark:text-slate-200">
+    <main className="w-full min-h-screen flex flex-col items-center gap-8 py-14 px-4 md:pt-32">
       <Link
         href="https://bsky.social/about"
         className="transition-transform hover:scale-110">
@@ -124,22 +121,20 @@ 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 dark:bg-dimmedBg dark:border-slate-500"
+        className="border rounded-lg py-3 w-full max-w-[600px] px-4"
         placeholder={DEFAULT_POST}
       />
 
-      <img src={arrowBottom} className="w-6 dark:invert" />
+      <img src={arrowBottom} className="w-6" />
 
       {loading ? (
-        <div className="w-full max-w-[600px]">
-          <Skeleton />
-        </div>
+        <Skeleton />
       ) : (
         <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-500/10 px-4 py-3 rounded-lg">
+            <div className="w-full border border-red-500 bg-red-50 px-4 py-3 rounded-lg">
               <p className="text-red-500 text-center">{error}</p>
             </div>
           )}
@@ -154,15 +149,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 dark:bg-slate-700 shrink-0 animate-pulse" />
+          <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-100 shrink-0 animate-pulse" />
           <div className="flex-1">
-            <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 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>
         </div>
-        <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 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>
     </Container>
   )
@@ -225,7 +220,7 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
         ref={ref}
         type="text"
         value={snippet}
-        className="border rounded-lg py-3 w-full px-4 dark:bg-dimmedBg dark:border-slate-500"
+        className="border rounded-lg py-3 w-full px-4"
         readOnly
         autoFocus
         onFocus={() => {
@@ -233,7 +228,7 @@ function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
         }}
       />
       <button
-        className="rounded-lg bg-brand text-white py-3 px-4 whitespace-nowrap min-w-28"
+        className="rounded-lg bg-brand text-white color-white py-3 px-4 whitespace-nowrap min-w-28"
         onClick={() => {
           ref.current?.focus()
           ref.current?.select()

bskyembed/src/screens/post.tsx

@@ -4,7 +4,6 @@ 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'
@@ -22,8 +21,6 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
-initColorMode()
-
 agent
   .getPostThread({
     uri,
@@ -58,13 +55,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 dark:text-textDimmed">
+        <p className="max-w-80 text-center w-full text-textLight">
           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 text-center py-1 px-4 w-full mx-auto">
+          className="max-w-80 rounded-lg bg-brand text-white color-white text-center py-1 px-4 w-full mx-auto">
           View on Bluesky
         </Link>
       </div>
@@ -80,7 +77,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 dark:text-textDimmed">
+      <p className="my-16 text-center w-full text-textLight">
         Post not found, it may have been deleted.
       </p>
     </Container>

bskyembed/tailwind.config.cjs

@@ -1,19 +1,11 @@
 /** @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)',
       },
     },
   },

bskyembed/tsconfig.json

@@ -1,3 +1,4 @@
+
 {
   "compilerOptions": {
     "target": "ES5",
@@ -19,5 +20,5 @@
     "jsxFragmentFactory": "Fragment",
     "downlevelIteration": true
   },
-  "include": ["src", "snippet", "vite.config.ts"]
+  "include": ["src", "vite.config.ts"]
 }

bskyembed/yarn.lock

@@ -4209,7 +4209,12 @@ 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, zod@^3.23.8:
+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:
   version "3.23.8"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
   integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==

bskyweb/README.md

@@ -24,7 +24,7 @@ Then build and copy over the big 'ol `bundle.web.js` file:
 
 ### Golang Daemon
 
-Install golang. We generally develop against the current stable release of the language, as declared in `go.mod`.
+Install golang. We are generally using v1.22+.
 
 In this directory (`bskyweb/`):
 

bskyweb/cmd/bskyweb/server.go

@@ -235,7 +235,6 @@ func serve(cctx *cli.Context) error {
 
 	// generic routes
 	e.GET("/hashtag/:tag", server.WebGeneric)
-	e.GET("/topic/:topic", server.WebGeneric)
 	e.GET("/search", server.WebGeneric)
 	e.GET("/feeds", server.WebGeneric)
 	e.GET("/notifications", server.WebGeneric)
@@ -258,7 +257,6 @@ 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)

bskyweb/cmd/embedr/handlers.go

@@ -53,8 +53,7 @@ type OEmbedResponse struct {
 	Version      string `json:"version"`
 	AuthorName   string `json:"author_name,omitempty"`
 	AuthorURL    string `json:"author_url,omitempty"`
-	ProviderName string `json:"provider_name,omitempty"`
-	ProviderURL  string `json:"provider_url,omitempty"`
+	ProviderName string `json:"provider_url,omitempty"`
 	CacheAge     int    `json:"cache_age,omitempty"`
 	Width        *int   `json:"width"`
 	Height       *int   `json:"height"`
@@ -171,7 +170,6 @@ 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,

bskyweb/go.mod

@@ -1,8 +1,8 @@
 module github.com/bluesky-social/social-app/bskyweb
 
-go 1.23
+go 1.22
 
-toolchain go1.23.4
+toolchain go1.22.4
 
 require (
 	github.com/bluesky-social/indigo v0.0.0-20240624223826-fd66f93ce141

bskyweb/static/iframe/youtube.html

@@ -27,21 +27,13 @@
 
   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,
+      videoId: url.searchParams.get('videoId'),
       playerVars: {
         autoplay: 1,
-        start,
+        start: url.searchParams.get('start'),
         rel: 0,
         loop: 0,
         playsinline: 1,

bskyweb/templates/base.html

@@ -13,7 +13,8 @@
 
   <!-- Hello Humans! API docs at https://atproto.com -->
 
-  <link rel="preload" as="font" type="font/woff2" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
+  <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">
 
   <style>
     /**
@@ -25,20 +26,21 @@
      */
     @font-face {
       font-family: 'InterVariable';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf") format('truetype');
       font-weight: 300 1000;
       font-style: normal;
       font-display: swap;
     }
     @font-face {
       font-family: 'InterVariableItalic';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf") format('truetype');
       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 {
@@ -74,15 +76,9 @@
       top: 50%;
       transform: translateX(-50%) translateY(-50%) translateY(-50px);
     }
-    /**
-     * 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.
-     */
+    /* We need this style to prevent web dropdowns from shifting the display when opening */
     body {
       width: 100%;
-      overflow-y: scroll;
     }
   </style>
 

bskyweb/templates/error.html

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

docs/build.md

@@ -87,12 +87,6 @@ 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

index.js

@@ -5,8 +5,9 @@ import {LogBox} from 'react-native'
 import {registerRootComponent} from 'expo'
 
 import App from '#/App'
+import {IS_TEST} from '#/env'
 
-if (process.env.NODE_ENV === 'test') {
+if (IS_TEST) {
   LogBox.ignoreAllLogs() // suppress all logs in tests
 } else {
   LogBox.ignoreLogs(['Require cycle:']) // suppress require-cycle warnings, it's fine

jest/jestSetup.js

@@ -18,6 +18,9 @@ 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: '',
 }))
@@ -48,9 +51,7 @@ jest.mock('expo-image-manipulator', () => ({
   manipulateAsync: jest.fn().mockResolvedValue({
     uri: 'file://resized-image',
   }),
-  SaveFormat: {
-    JPEG: 'jpeg',
-  },
+  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
 }))
 
 jest.mock('expo-camera', () => ({
@@ -105,19 +106,3 @@ jest.mock('expo-modules-core', () => ({
     return () => null
   }),
 }))
-
-jest.mock('expo-localization', () => ({
-  getLocales: () => [],
-}))
-
-jest.mock('statsig-react-native-expo', () => ({
-  Statsig: {
-    initialize() {},
-    initializeCalled() {
-      return false
-    },
-  },
-}))
-
-jest.mock('../src/lib/bitdrift', () => ({}))
-jest.mock('../src/lib/statsig/statsig', () => ({}))

lingui.config.js

@@ -2,34 +2,24 @@
 module.exports = {
   locales: [
     'en',
-    'an',
-    'ast',
     'ca',
     'de',
-    'el',
     'en-GB',
     'es',
     'fi',
     'fr',
     'ga',
-    'gl',
     'hi',
     'hu',
     'id',
     'it',
     'ja',
-    'km',
     'ko',
-    'ne',
-    'nl',
-    'pl',
     'pt-BR',
-    'ro',
     'ru',
     'th',
     'tr',
     'uk',
-    'vi',
     'zh-CN',
     'zh-HK',
     'zh-TW',

metro.config.js

@@ -9,13 +9,6 @@ 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.
@@ -36,15 +29,6 @@ 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)
 }
 

modules/expo-bluesky-gif-view/android/build.gradle

@@ -88,7 +88,7 @@ repositories {
 
 dependencies {
   implementation 'androidx.appcompat:appcompat:1.6.1'
-    def GLIDE_VERSION = "4.16.0"
+    def GLIDE_VERSION = "4.13.2"
 
   implementation project(':expo-modules-core')
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/GifView.kt

@@ -5,7 +5,6 @@ import android.graphics.Color
 import android.graphics.drawable.Animatable
 import android.graphics.drawable.Drawable
 import com.bumptech.glide.Glide
-import com.bumptech.glide.load.DataSource
 import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.load.engine.GlideException
 import com.bumptech.glide.request.RequestListener
@@ -16,8 +15,8 @@ import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 
 class GifView(
-        context: Context,
-        appContext: AppContext,
+  context: Context,
+  appContext: AppContext,
 ) : ExpoView(context, appContext) {
   // Events
   private val onPlayerStateChange by EventDispatcher()
@@ -82,65 +81,66 @@ class GifView(
     }
 
     this.webpRequest =
-            glide.load(source)
-                    .diskCacheStrategy(DiskCacheStrategy.DATA)
-                    .skipMemoryCache(false)
-                    .listener(
-                            object : RequestListener<Drawable> {
-                              override fun onResourceReady(
-                                      resource: Drawable,
-                                      model: Any,
-                                      target: Target<Drawable>?,
-                                      dataSource: DataSource,
-                                      isFirstResource: Boolean
-                              ): Boolean {
-                                placeholderRequest?.let { glide.clear(it) }
-                                return false
-                              }
+      glide
+        .load(source)
+        .diskCacheStrategy(DiskCacheStrategy.DATA)
+        .skipMemoryCache(false)
+        .listener(
+          object : RequestListener<Drawable> {
+            override fun onResourceReady(
+              resource: Drawable?,
+              model: Any?,
+              target: Target<Drawable>?,
+              dataSource: com.bumptech.glide.load.DataSource?,
+              isFirstResource: Boolean,
+            ): Boolean {
+              if (placeholderRequest != null) {
+                glide.clear(placeholderRequest)
+              }
+              return false
+            }
 
-                              override fun onLoadFailed(
-                                      e: GlideException?,
-                                      model: Any?,
-                                      target: Target<Drawable>,
-                                      isFirstResource: Boolean
-                              ): Boolean = true
-                            }
-                    )
-                    .into(this.imageView)
+            override fun onLoadFailed(
+              e: GlideException?,
+              model: Any?,
+              target: Target<Drawable>?,
+              isFirstResource: Boolean,
+            ): Boolean = true
+          },
+        ).into(this.imageView)
 
     if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
       this.placeholderRequest =
-              glide.load(placeholderSource)
-                      .diskCacheStrategy(DiskCacheStrategy.DATA)
-                      // Let's not bloat the memory cache with placeholders
-                      .skipMemoryCache(true)
-                      .listener(
-                              object : RequestListener<Drawable> {
-                                override fun onResourceReady(
-                                        resource: Drawable,
-                                        model: Any,
-                                        target: Target<Drawable>?,
-                                        dataSource: DataSource,
-                                        isFirstResource: Boolean
-                                ): Boolean {
-                                  // Incase this request finishes after the webp, let's just not set
-                                  // the drawable. This shouldn't happen because the request should
-                                  // get cancelled
-                                  if (imageView.drawable == null) {
-                                    imageView.setImageDrawable(resource)
-                                  }
-                                  return true
-                                }
+        glide
+          .load(placeholderSource)
+          .diskCacheStrategy(DiskCacheStrategy.DATA)
+          // Let's not bloat the memory cache with placeholders
+          .skipMemoryCache(true)
+          .listener(
+            object : RequestListener<Drawable> {
+              override fun onResourceReady(
+                resource: Drawable?,
+                model: Any?,
+                target: Target<Drawable>?,
+                dataSource: com.bumptech.glide.load.DataSource?,
+                isFirstResource: Boolean,
+              ): Boolean {
+                // Incase this request finishes after the webp, let's just not set
+                // the drawable. This shouldn't happen because the request should get cancelled
+                if (imageView.drawable == null) {
+                  imageView.setImageDrawable(resource)
+                }
+                return true
+              }
 
-                                override fun onLoadFailed(
-                                        e: GlideException?,
-                                        model: Any?,
-                                        target: Target<Drawable>,
-                                        isFirstResource: Boolean
-                                ): Boolean = true
-                              },
-                      )
-                      .submit()
+              override fun onLoadFailed(
+                e: GlideException?,
+                model: Any?,
+                target: Target<Drawable>?,
+                isFirstResource: Boolean,
+              ): Boolean = true
+            },
+          ).submit()
     }
   }
 
@@ -174,10 +174,10 @@ class GifView(
 
   fun firePlayerStateChange() {
     onPlayerStateChange(
-            mapOf(
-                    "isPlaying" to this.isPlaying,
-                    "isLoaded" to this.isLoaded,
-            ),
+      mapOf(
+        "isPlaying" to this.isPlaying,
+        "isLoaded" to this.isLoaded,
+      ),
     )
   }