load records for notification context

atproto-notifications/src/components/Notification.css

···
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
+  gap: 0.5rem;
 }
 a.notification {
   font: inherit;
···
   margin: 0;
 }
 
+.notification-info {
+  display: flex;
+  align-items: baseline;
+}
+
 .handle {
   color: skyblue;
+}
+
+.notification-context {
+  font-size: 0.8rem;
+  opacity: 0.667;
+  margin: 0.25rem 0 0;
+  max-width: 48em;
 }
 
 .notification-when {

atproto-notifications/src/components/Notification.tsx

···
 import { useState, useEffect } from 'react';
 import ReactTimeAgo from 'react-time-ago';
 import psl from 'psl';
-import { default as lexicons, getLink } from 'lexicons';
+import { default as lexicons, getLink, getContext } from 'lexicons';
 import { resolveDid } from '../atproto/resolve';
 import { Fetch } from './Fetch';
 
···
 
 export function Notification({ app, group, source, source_record, source_did, subject, timestamp }) {
   const [resolvedLink, setResolvedLink] = useState(null);
+  const [resolvedContext, setResolvedContext] = useState([]);
 
   useEffect(() => {
     (async () => {
       const link = await getLink(source, source_record, subject);
       if (link) setResolvedLink(link);
+    })();
+    (async() => {
+      const context = await getContext(source, source_record, subject);
+      setResolvedContext(context);
     })();
   }, [source, source_record, subject]);
 
···
   }
   link = resolvedLink ?? directLink ?? link;
 
+  let contextClipped = resolvedContext.join(' ');
+  if (contextClipped.length > 240) {
+    contextClipped = contextClipped.slice(0, 239) + '…';
+  }
+
   const contents = (
     <>
       <div className="notification-info">
         {icon && (
           <img className="app-icon" src={icon} title={appName ?? app} alt="" />
         )}
-        {title} from
-        {' '}
-        {source_did ? (
-          <Fetch
-            using={resolveDid}
-            args={[source_did]}
-            ok={handle => <span className="handle">@{handle}</span>}
-          />
-        ) : (
-          source_record
-        )}
+        <div>
+          {title} from
+          {' '}
+          {source_did ? (
+            <Fetch
+              using={resolveDid}
+              args={[source_did]}
+              ok={handle => <span className="handle">@{handle}</span>}
+            />
+          ) : (
+            source_record
+          )}
+          {contextClipped.length > 0 && (
+            <p className="notification-context">{contextClipped}</p>
+          )}
+        </div>
       </div>
       {timestamp && (
         <div className="notification-when">

lexicons/bits.js

···
   return [appSource, defs[appPrefix]];
 }
 
-export async function getContext(source, source_record, subject) {
-}
-
 const uriBits = async uri => {
   const bits = uri.slice('at://'.length).split('/');
   // TODO: identifier might be a handle
···
         const sub = JSONPath({
           path: `$.${match.groups.path}`,
           json: subjectRecord,
-        })[0];
+        })[0]; // TODO: array result?
 
         link = link.replaceAll(match[0], sub);
       }
···
   // 2.b TODO: source record lookups if needed
   return link;
 }
+
+export async function getContext(source, source_record, subject) {
+  const [appSource, appDefs] = getAppDefs(source);
+  const contexts = appDefs?.known_sources?.[appSource]?.context ?? [];
+  const linkType = subject.startsWith('did:') ? 'did' : 'at_uri';
+
+  let loaded = [];
+  for (const ctx of contexts) {
+    const [o, ...pathstuff] = ctx.split(':');
+    if (o !== '@subject') {
+      throw new Error('only @subject is implemented for context loading so far');
+    }
+    if (linkType !== 'at_uri') {
+      throw new Error('only at_uris can be used for @subject loading so far');
+    }
+    const path = pathstuff.join(':');
+    const subjectRecord = await getAtUri(subject);
+    // using json path is temporary -- need recordpath convention defined
+    const found = JSONPath({
+      path,
+      json: subjectRecord,
+    });
+    loaded = loaded.concat(found); // TODO: think about array handling
+  }
+
+  return loaded;
+}

lexicons/defs.js

···
       },
       'feed.like:subject.uri': {
         name: 'Like',
+        context: ['@subject:text'],
       },
       'feed.like:via.uri': {
         name: 'Repost like',
···
         main: 'https://tangled.sh',
         direct_links: {
           'at_uri:feed.star:subject': 'https://tangled.sh/{subject.did}/{@subject:name}',
+          'did:graph.follow:subject': 'https://tangled.sh/{source_record.did}',
         },
       }
     ],
     known_sources: {
       'feed.star:subject': {
         name: 'Star',
+        context: ['@subject:name'],
       },
       'feed.reaction:subject': {
         name: 'Reaction',