[#97] Link previews for posts

Changelog: enhancement

Author: pfuto21454

.gitlab/ci/build_services.yml

@@ -200,3 +200,63 @@ push-notifications-image:
   rules:
     - !reference [.push-notifications-workflow, rules]
     - !reference [.release-workflow, rules]
+
+########################################################################
+# scraper (Node/TypeScript)
+########################################################################
+
+.scraper-workflow:
+  image: gitlab.futo.org:5050/devops/manifest-repo/library/docker:latest
+  rules:
+    - if: $CI_COMMIT_TAG =~ /^scraper-/
+      when: always
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+      changes:
+        - pnpm-lock.yaml
+        - pnpm-workspace.yaml
+        - package.json
+        - tools/**/*
+        - patches/**/*
+        - services/scraper/**/*
+        - .gitlab/ci/build_services.yml
+        - .gitlab/ci/deploy_services.yml
+    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
+      when: never
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      changes:
+        - pnpm-lock.yaml
+        - pnpm-workspace.yaml
+        - package.json
+        - tools/**/*
+        - patches/**/*
+        - services/scraper/**/*
+        - .gitlab/ci/build_services.yml
+        - .gitlab/ci/deploy_services.yml
+  variables:
+    SERVICE_NAME: scraper
+    SERVICE_DIR: scraper
+
+# Fast-feedback typecheck. The scraper's `build` script is `tsc -p .`; the image
+# build also compiles, so this just surfaces type errors before the heavier
+# image job. PUPPETEER_SKIP_DOWNLOAD stops `pnpm install` from fetching Chromium
+# (the runtime image provides a system one).
+scraper-typecheck:
+  extends: .scraper-workflow
+  image: node:24-slim
+  stage: check
+  variables:
+    PUPPETEER_SKIP_DOWNLOAD: '1'
+  before_script:
+    - npm install -g pnpm@10
+    - pnpm config set @polycentric:registry https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/
+    - pnpm install
+  script:
+    - pnpm --filter @polycentric/scraper build
+
+scraper-image:
+  extends:
+    - .scraper-workflow
+    - .service-image
+  rules:
+    - !reference [.scraper-workflow, rules]
+    - !reference [.release-workflow, rules]

.gitlab/ci/deploy_services.yml

@@ -162,4 +162,55 @@ push-notifications-deploy-manifest-production:
   variables:
     MANIFEST_QUICK_TARGETS: inventory/polycentric-east/notifications.yml:polycentriceast
   needs:
-    - push-notifications-deploy-image-production
+    - push-notifications-deploy-image-production
+
+########################################################################
+# scraper
+#
+# Runtime needs (NET_ADMIN, --init, internal-only networking) must be set in
+# the production manifest (inventory/.../scraper.yml in devops/manifest), not
+# here — compose.yml only covers local dev.
+########################################################################
+
+.scraper-deploy-workflow:
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      changes:
+        - pnpm-lock.yaml
+        - pnpm-workspace.yaml
+        - package.json
+        - tools/**/*
+        - patches/**/*
+        - services/scraper/**/*
+        - .gitlab/ci/build_services.yml
+        - .gitlab/ci/deploy_services.yml
+  variables:
+    SERVICE_NAME: scraper
+
+########################################
+# Tag the image with environment label #
+########################################
+
+scraper-deploy-image-production:
+  extends:
+    - .scraper-deploy-workflow
+    - .service-deploy-image
+  when: manual
+  environment:
+    name: production/scraper
+  needs:
+    - job: scraper-image
+      artifacts: false
+
+###############################
+# Rolling restart on Manifest #
+###############################
+
+scraper-deploy-manifest-production:
+  extends:
+    - .scraper-deploy-workflow
+    - .service-deploy-manifest
+  variables:
+    MANIFEST_QUICK_TARGETS: inventory/polycentric-east/scraper.yml:polycentriceast
+  needs:
+    - scraper-deploy-image-production

Cargo.lock

@@ -1,3 +1,4 @@
+import { LinkPreviewsProvider } from '@/src/common/link-previews';
 import { PolycentricProvider } from '@/src/common/lib/polycentric-hooks';
 import { Atoms, ThemeProvider, useTheme } from '@/src/common/theme';
 import { isWeb } from '@/src/common/util/platform';
@@ -90,12 +91,14 @@ export default function RootLayout() {
     <GestureHandlerRootView style={Atoms.flex_1}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <ThemeProvider>
-          <PolycentricProvider onInitialized={onInitialized}>
-            <TrueSheetProvider>
-              <RootStack />
-              <PortalHost />
-            </TrueSheetProvider>
-          </PolycentricProvider>
+          <LinkPreviewsProvider>
+            <PolycentricProvider onInitialized={onInitialized}>
+              <TrueSheetProvider>
+                <RootStack />
+                <PortalHost />
+              </TrueSheetProvider>
+            </PolycentricProvider>
+          </LinkPreviewsProvider>
         </ThemeProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>

apps/polycentric/app/_layout.tsx

@@ -4,4 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
   },
+  // Appends to (does not replace) the preset's setupFiles, which jest-expo uses
+  // for native setup. setupFilesAfterEnv is undefined in the preset.
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 };

apps/polycentric/jest.config.js

@@ -0,0 +1,10 @@
+// Global test setup. jest-expo's preset owns `setupFiles` (React Native + Expo
+// native setup), so project-wide additions live here via `setupFilesAfterEnv`
+// to avoid clobbering that array.
+
+// AsyncStorage has no native module under Jest; use the package's official mock
+// so anything that persists settings (theme, link-preview toggle, …) works in
+// tests instead of throwing "NativeModule: AsyncStorage is null".
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
+);

apps/polycentric/jest.setup.js

@@ -27,6 +27,9 @@ export type PostData = {
   /** Attached image sets, in author-provided order. */
   images: v2.ImageSet[];
 
+  /** Attached link previews (Open Graph metadata), in author-provided order. */
+  links: v2.Link[];
+
   /** Set when the underlying `v2.Post` carried a `reply`. */
   reply?: {
     /** Hex of the root post's EventKey — same encoding as `PostData.id`. */
@@ -149,6 +152,7 @@ export function decodePostBundle(bundle: v2.EventBundle): PostData | null {
       content: post.text,
       createdAt: Number(event.createdAt ?? 0),
       images: post.images,
+      links: post.links,
       reply,
       quoteId,
       signedEvent: v2.SignedEvent.create({

apps/polycentric/src/common/lib/polycentric-hooks/helpers.ts

@@ -0,0 +1,6 @@
+export {
+  Context,
+  LinkPreviewsProvider,
+  useLinkPreviews,
+} from './provider';
+export type { LinkPreviewsContextValue } from './provider';

apps/polycentric/src/common/link-previews/index.ts

@@ -0,0 +1,59 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as React from 'react';
+import { act } from 'react';
+import TestRenderer from 'react-test-renderer';
+import { LinkPreviewsProvider, useLinkPreviews } from './';
+
+const KEY = 'polycentric:generate-link-previews-enabled';
+
+type Api = ReturnType<typeof useLinkPreviews>;
+
+/** Render the hook under the provider; `result.current` tracks the latest value. */
+function renderHook() {
+  const result: { current: Api } = { current: null as never };
+  function Probe() {
+    result.current = useLinkPreviews();
+    return null;
+  }
+  act(() => {
+    TestRenderer.create(
+      <LinkPreviewsProvider>
+        <Probe />
+      </LinkPreviewsProvider>,
+    );
+  });
+  return { result };
+}
+
+/** Flush the load effect's pending microtasks. */
+const flush = () => act(async () => {});
+
+beforeEach(async () => {
+  await AsyncStorage.clear();
+});
+
+describe('LinkPreviewsProvider', () => {
+  it('defaults to enabled when nothing is stored', async () => {
+    const { result } = renderHook();
+    await flush();
+    expect(result.current.enabled).toBe(true);
+  });
+
+  it('hydrates the stored value', async () => {
+    await AsyncStorage.setItem(KEY, 'false');
+    const { result } = renderHook();
+    await flush();
+    expect(result.current.enabled).toBe(false);
+  });
+
+  it('updates and persists when toggled', async () => {
+    const { result } = renderHook();
+    await flush();
+
+    act(() => result.current.setEnabled(false));
+    expect(result.current.enabled).toBe(false);
+
+    await flush();
+    expect(await AsyncStorage.getItem(KEY)).toBe('false');
+  });
+});

apps/polycentric/src/common/link-previews/provider.test.tsx

@@ -0,0 +1,54 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { loadLinkPreviewsEnabled, saveLinkPreviewsEnabled } from './storage';
+
+export type LinkPreviewsContextValue = {
+  /** Whether to generate a link preview for URLs in the user's own posts. */
+  enabled: boolean;
+  setEnabled: (enabled: boolean) => void;
+};
+
+export const Context = createContext<LinkPreviewsContextValue | undefined>(
+  undefined,
+);
+Context.displayName = 'PolycentricLinkPreviewsContext';
+
+export function LinkPreviewsProvider({ children }: PropsWithChildren) {
+  // Default on: matches the prior always-generate behavior. Unlike the theme
+  // provider we don't block render until the stored value loads — a brief
+  // default-on before hydration is harmless (it only affects composing a post,
+  // not the initial paint).
+  const [enabled, setEnabledState] = useState(true);
+
+  useEffect(() => {
+    void loadLinkPreviewsEnabled().then((stored) => {
+      if (stored !== undefined) {
+        setEnabledState(stored);
+      }
+    });
+  }, []);
+
+  const setEnabled = useCallback((next: boolean) => {
+    setEnabledState(next);
+    void saveLinkPreviewsEnabled(next);
+  }, []);
+
+  const value = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useLinkPreviews() {
+  const ctx = useContext(Context);
+  if (!ctx) {
+    throw new Error('useLinkPreviews must be used within LinkPreviewsProvider');
+  }
+  return ctx;
+}