add home screen widget

app.json

@@ -4,7 +4,10 @@
     "slug": "bacon",
     "scheme": "bacon",
     "privacy": "public",
-    "platforms": ["ios", "web"],
+    "platforms": [
+      "ios",
+      "web"
+    ],
     "version": "1.0.0",
     "orientation": "default",
     "userInterfaceStyle": "dark",
@@ -19,7 +22,9 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "web": {
       "favicon": "./assets/favicon.png",
       "bundler": "metro",
@@ -33,14 +38,21 @@
       "typedRoutes": true
     },
     "ios": {
+      "appleTeamId": "QQ57RJ5UTD",
       "bundleIdentifier": "evanbacon.dev",
       "supportsTablet": false,
+      "entitlements": {
+        "com.apple.security.application-groups": [
+          "group.bacon.data"
+        ]
+      },
       "infoPlist": {
-        "UIViewControllerBasedStatusBarAppearance": true,
+        "UIViewControllerBasedStatusBarAppearance": false,
         "ITSAppUsesNonExemptEncryption": false
       }
     },
     "plugins": [
+      "@bacons/apple-targets",
       [
         "expo-router",
         {
@@ -49,7 +61,8 @@
           "asyncRoutes": true
         }
       ],
-      "expo-quick-actions"
+      "expo-quick-actions",
+      "expo-video"
     ],
     "extra": {
       "eas": {

package.json

@@ -10,44 +10,45 @@
   },
   "dependencies": {
     "@bacons/apple-colors": "^0.0.6",
+    "@bacons/apple-targets": "^0.1.14",
     "@bacons/mdx": "^0.3.7",
     "@expo-google-fonts/inter": "^0.2.3",
     "@expo-google-fonts/source-code-pro": "^0.2.3",
-    "@expo/html-elements": "^0.10.1",
-    "@expo/react-native-action-sheet": "^3.12.0",
+    "@expo/html-elements": "^0.11.0",
+    "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/styleguide-icons": "^1.0.1",
     "@tanstack/react-query": "^5.8.7",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
-    "expo": "52.0.0-preview.10",
+    "expo": "^52",
     "expo-av": "~15.0.1",
     "expo-blur": "~14.0.1",
     "expo-haptics": "~14.0.0",
-    "expo-linking": "~7.0.2",
-    "expo-quick-actions": "^2.0.0",
-    "expo-router": "4.0.0-preview.6",
+    "expo-linking": "~7.0.3",
+    "expo-quick-actions": "^3.0.0",
+    "expo-router": "~4.0.11",
     "expo-sf-symbols": "^1.0.20",
-    "expo-splash-screen": "~0.28.5",
+    "expo-splash-screen": "~0.29.16",
     "expo-status-bar": "~2.0.0",
     "expo-symbols": "~0.2.0",
-    "expo-system-ui": "~4.0.2",
-    "expo-video": "~2.0.0-preview.0",
-    "expo-web-browser": "~14.0.0",
+    "expo-system-ui": "~4.0.5",
+    "expo-video": "~2.0.2",
+    "expo-web-browser": "~14.0.1",
     "postcss-scss": "^4.0.6",
     "prism-react-renderer": "^2.0.6",
     "prismjs": "^1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.1",
+    "react-native": "0.76.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "4.0.0-beta.16",
+    "react-native-screens": "~4.3.0",
     "react-native-svg": "15.8.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-web": "~0.19.13",
     "react-native-web-hooks": "^3.0.2",
-    "react-native-webview": "13.12.2",
+    "react-native-webview": "13.12.5",
     "sass": "^1.63.4",
     "satori": "0.10.4",
     "tailwindcss": "3.3.2",

src/app/(index,blog,games)/blog/index.tsx

@@ -21,7 +21,7 @@ const posts = mdxctx
   .map(key => mdxctx(key));
 
 const POSTS = posts
-  .map(({ title, shortTitle, subtitle, date, slug }) => ({
+  .map(({ title, shortTitle, subtitle, date, slug, featuredImage }) => ({
     title: shortTitle ?? title,
     description: subtitle,
     value: new Date(date).toLocaleDateString('en-US', {
@@ -31,11 +31,70 @@ const POSTS = posts
     }),
     date,
     href: `/blog/${slug}`,
+    slug,
+    img: featuredImage,
   }))
   .sort((a, b) => b.date.localeCompare(a.date));
 
+import { ExtensionStorage } from '@bacons/apple-targets';
+import { useEffect } from 'react';
+import * as Linking from 'expo-linking';
+
+const extStorage = new ExtensionStorage('group.bacon.data');
+
+function updateWidgetData(
+  data: {
+    imageUrl: string;
+    title: string;
+    date: string;
+    href: string;
+  }[]
+) {
+  extStorage.set('articlesData', data);
+  ExtensionStorage.reloadWidget();
+}
+
+function sortRandomly<T>(arr: T[]) {
+  return arr.sort(() => Math.random() - 0.5);
+}
+
+function useLatestPostsInWidget() {
+  useEffect(() => {
+    if (process.env.EXPO_OS === 'ios') {
+      (async () => {
+        try {
+          const posts = await Promise.all(
+            sortRandomly(POSTS.slice(0, 6)).map(
+              async ({ title, img, date, href, slug }) => ({
+                title,
+                date: new Date(date).toISOString(),
+                imageUrl: new URL(
+                  '/blog/' + slug + '.jpg',
+                  window.location.href
+                ).toString(),
+                // imageUrl: !img
+                //   ? 'https://github.com/evanbacon.png'
+                //   : (await Asset.fromModule(img).downloadAsync()).localUri,
+                // imageUrl: 'https://github.com/evanbacon.png',
+                href: Linking.createURL(href.replace(/^\//, '')),
+              })
+            )
+          );
+
+          updateWidgetData(posts);
+        } catch (error) {
+          console.error('error', error);
+        }
+      })();
+    }
+  }, []);
+}
+
 export default function App() {
+  useLatestPostsInWidget();
+
   const paddingBottom = useBottomTabOverflow();
+
   if (process.env.EXPO_OS === 'web') {
     return (
       <div className="flex flex-1 flex-col gap-4 overflow-x-hidden">

src/components/front/masonry.tsx

@@ -2,7 +2,11 @@ import cn from 'classnames';
 import { IS_DOM } from 'expo/dom';
 import { Image } from 'react-native';
 
-const baseUrl = IS_DOM ? process.env.EXPO_DOM_BASE_URL : '';
+const baseUrl = IS_DOM
+  ? __DEV__
+    ? new URL('/', window.location.href).toString()
+    : process.env.EXPO_BASE_URL
+  : '';
 
 const legoImages: [string, string][] = [
   ['/front/lego/stanlee.avif', 'Stan Lee and Evan Bacon in Austin, 2013'],

src/components/showcase/apps-list.tsx

@@ -110,7 +110,11 @@ export function ShowcaseData({
   );
 }
 
-const baseUrl = IS_DOM ? process.env.EXPO_DOM_BASE_URL : '';
+const baseUrl = IS_DOM
+  ? __DEV__
+    ? new URL('/', window.location.href).toString()
+    : process.env.EXPO_BASE_URL
+  : '';
 
 function ShowcaseCategoryRow({
   category,

src/components/universal-links/LinksChart.tsx

@@ -55,7 +55,11 @@ export default function UniversalLinksVisualized({
 }: {
   endpoint: string;
 }) {
-  const baseUrl = IS_DOM ? process.env.EXPO_DOM_BASE_URL : '';
+  const baseUrl = IS_DOM
+    ? __DEV__
+      ? new URL('/', window.location.href).toString()
+      : process.env.EXPO_BASE_URL
+    : '';
 
   const modifiedEndpoint = baseUrl + endpoint;
 

targets/widget/Assets.xcassets/logo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "widget-icon.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

targets/widget/Info.plist

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>NSExtension</key>
+    <dict>
+      <key>NSExtensionPointIdentifier</key>
+      <string>com.apple.widgetkit-extension</string>
+    </dict>
+  </dict>
+</plist>