Activity pub outbox

apps/admin-x-activitypub/src/App.tsx

@@ -1,4 +1,4 @@
-import ListIndex from './components/ListIndex';
+import ActivityPubComponent from './components/ListIndex';
 import {DesignSystemApp, DesignSystemAppProps} from '@tryghost/admin-x-design-system';
 import {FrameworkProvider, TopLevelFrameworkProps} from '@tryghost/admin-x-framework';
 import {RoutingProvider} from '@tryghost/admin-x-framework/routing';
@@ -8,12 +8,19 @@ interface AppProps {
     designSystem: DesignSystemAppProps;
 }
 
+const modals = {
+    paths: {
+        'follow-site': 'FollowSite'
+    },
+    load: async () => import('./components/modals')
+};
+
 const App: React.FC<AppProps> = ({framework, designSystem}) => {
     return (
         <FrameworkProvider {...framework}>
-            <RoutingProvider basePath='activitypub'>
+            <RoutingProvider basePath='activitypub' modals={modals}>
                 <DesignSystemApp className='admin-x-activitypub' {...designSystem}>
-                    <ListIndex />
+                    <ActivityPubComponent />
                 </DesignSystemApp>
             </RoutingProvider>
         </FrameworkProvider>

apps/admin-x-activitypub/src/components/FollowSite.tsx

@@ -0,0 +1,72 @@
+import NiceModal from '@ebay/nice-modal-react';
+import {Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {useFollow} from '@tryghost/admin-x-framework/api/activitypub';
+import {useRouting} from '@tryghost/admin-x-framework/routing';
+import {useState} from 'react';
+
+const FollowSite = NiceModal.create(() => {
+    const {updateRoute} = useRouting();
+    const modal = NiceModal.useModal();
+    const mutation = useFollow();
+
+    // mutation.isPending
+    // mutation.isError
+    // mutation.isSuccess
+    // mutation.mutate({username: '@index@site.com'})
+    // mutation.reset();
+
+    // State to manage the text field value
+    const [profileName, setProfileName] = useState('');
+    // const [success, setSuccess] = useState(false);
+    const [errorMessage, setError] = useState(null);
+
+    const handleFollow = async () => {
+        try {
+            // Perform the mutation
+            await mutation.mutateAsync({username: profileName});
+            // If successful, set the success state to true
+            // setSuccess(true);
+            showToast({
+                message: 'Site followed',
+                type: 'success'
+            });
+            modal.remove();
+        } catch (error) {
+            // If there's an error, set the error state
+            setError(errorMessage);
+        }
+    };
+
+    return (
+        <Modal
+            afterClose={() => {
+                mutation.reset();
+                updateRoute('');
+            }}
+            cancelLabel='Cancel'
+            okLabel='Follow'
+            size='sm'
+            title='Follow a Ghost site'
+            onOk={handleFollow}
+            // onOk={() => {
+            //     mutation.mutate({username: profileName});
+            //     updateRoute('');
+            //     modal.remove();
+            // }}
+        >
+            <div className='mt-3 flex flex-col gap-4'>
+                <TextField
+                    autoFocus={true}
+                    error={Boolean(errorMessage)}
+                    hint={errorMessage}
+                    placeholder='@username@hostname'
+                    title='Profile name'
+                    value={profileName}
+                    onChange={e => setProfileName(e.target.value)}
+                />
+            </div>
+        </Modal>
+    );
+});
+
+export default FollowSite;

apps/admin-x-activitypub/src/components/ListIndex.tsx

@@ -1,26 +1,185 @@
-const ListIndex = () => {
+import React, {useEffect, useState} from 'react';
+import {Heading, Icon, Page, ViewContainer} from '@tryghost/admin-x-design-system';
+import {SiteData, useBrowseSite} from '@tryghost/admin-x-framework/api/site';
+import {useRouting} from '@tryghost/admin-x-framework/routing';
+
+interface Activity {
+    id: string;
+    type: string;
+    summary: string;
+    actor: string;
+    object: string;
+    siteData: SiteData;
+}
+
+type Following = {
+    id: string;
+    username?: string;
+}
+
+interface ObjectContent {
+  type: string;
+  name: string;
+  content: string;
+  url: string;
+}
+
+const ActivityPubComponent: React.FC = () => {
+    const [activities, setActivities] = useState<Activity[]>([]);
+    const [following, setFollowing] = useState<Following[]>([]);
+    const site = useBrowseSite();
+    const siteData = site.data?.site;
+    const {updateRoute} = useRouting();
+
+    useEffect(() => {
+        const fetchActivities = async () => {
+            try {
+                const response = await fetch(`${siteData?.url.replace(/\/$/, '')}/activitypub/outbox/deadbeefdeadbeefdeadbeef`);
+                // console.log('Fetching activities from:', siteData?.url.replace(/\/$/, '') + '/activitypub/outbox/deadbeefdeadbeefdeadbeef');
+
+                if (response.ok) {
+                    const data = await response.json();
+                    setActivities(data.orderedItems);
+                } else {
+                    throw new Error('Failed to fetch activities');
+                }
+            } catch (error) {
+                // console.error('Error fetching activities:', error);
+            }
+        };
+
+        fetchActivities();
+
+        // Clean up function if needed
+        return () => {
+            // Any clean-up code here
+        };
+    }, [siteData]);
+
+    useEffect(() => {
+        const fetchFollowing = async () => {
+            try {
+                const response = await fetch(`${siteData?.url.replace(/\/$/, '')}/activitypub/following/deadbeefdeadbeefdeadbeef`);
+                // console.log('Fetching activities from:', siteData?.url.replace(/\/$/, '') + '/activitypub/outbox/deadbeefdeadbeefdeadbeef');
+
+                if (response.ok) {
+                    const data = await response.json();
+                    setFollowing(data);
+                } else {
+                    throw new Error('Failed to fetch following');
+                }
+            } catch (error) {
+                // console.error('Error fetching activities:', error);
+            }
+        };
+
+        fetchFollowing();
+
+        // Clean up function if needed
+        return () => {
+            // Any clean-up code here
+        };
+    }, [siteData]);
+
     return (
-        <div className='mx-auto my-0 w-full max-w-3xl p-12'>
-            <h1 className='mb-6 text-black'>ActivityPub Demo</h1>
-            <div className='flex flex-col'>
-                <div className='mb-4 flex flex-col'>
-                    <h2 className='mb-2 text-2xl text-black'>This is a post title</h2>
-                    <p className='mb-2 text-lg text-grey-950'>This is some very short post content</p>
-                    <p className='text-md text-grey-700'>Publish McPublisher</p>
-                </div>
-                <div className='mb-4 flex flex-col'>
-                    <h2 className='mb-2 text-2xl text-black'>This is a post title</h2>
-                    <p className='mb-2 text-lg text-grey-950'>This is some very short post content</p>
-                    <p className='text-md text-grey-700'>Publish McPublisher</p>
-                </div>
-                <div className='mb-4 flex flex-col'>
-                    <h2 className='mb-2 text-2xl text-black'>This is a post title</h2>
-                    <p className='mb-2 text-lg text-grey-950'>This is some very short post content</p>
-                    <p className='text-md text-grey-700'>Publish McPublisher</p>
+        <Page>
+            <ViewContainer
+                // actions={dummyActions}
+                primaryAction={{
+                    title: 'Follow',
+                    onClick: () => {
+                        updateRoute('follow-site');
+                    },
+                    icon: 'add'
+                }}
+                title='Outbox'
+                toolbarBorder={false}
+                type='page'
+            >
+                <div className='grid grid-cols-6 items-start gap-6'>
+                    <ul className='col-span-4 flex flex-col'>
+                        {activities.slice().reverse().map(activity => (
+                            <li key={activity.id}>
+                                {/* <p className='text-grey-700'>Activity Type: {activity.type}</p>
+                                <p className='text-grey-700'>Summary: {activity.summary}</p>
+                                <p className='text-grey-700'>Actor: {activity.actor}</p> */}
+                                <ObjectContentDisplay actor={activity.actor} objectUrl={activity.object} />
+                            </li>
+                        ))}
+                    </ul>
+                    <div className='col-span-2 rounded-xl bg-grey-50 p-5'>
+                        <Heading className='mb-3' level={5}>Following</Heading>
+                        <ul>
+                            {following.slice().map(({username}) => {
+                                return (<li className='mb-4'>
+                                    <span className='mb-2 text-md font-medium text-grey-800'>{username}</span>
+                                </li>);
+                            })}
+                        </ul>
+                    </div>
                 </div>
-            </div>
+            </ViewContainer>
+        </Page>
+    );
+};
+
+const ArticleBody: React.FC<{html: string}> = ({html}) => {
+    const dangerouslySetInnerHTML = {__html: html};
+    return (
+        <div className="mt mb-2 flex flex-row items-center gap-4 pr-4">
+            <p dangerouslySetInnerHTML={dangerouslySetInnerHTML} className="gh-comment-content text-neutral-900 font-sans text-[16px] leading-normal [overflow-wrap:anywhere] dark:text-[rgba(255,255,255,0.85)]" data-testid="comment-content"/>
         </div>
     );
 };
 
-export default ListIndex;
+const ObjectContentDisplay: React.FC<{actor: string, objectUrl: string }> = ({actor, objectUrl}) => {
+    const [objectContent, setObjectContent] = useState<ObjectContent | null>(null);
+
+    useEffect(() => {
+        const fetchObjectContent = async () => {
+            try {
+                const response = await fetch(objectUrl);
+                if (response.ok) {
+                    const data = await response.json();
+                    setObjectContent(data);
+                } else {
+                    throw new Error('Failed to fetch object content');
+                }
+            } catch (error) {
+                // console.error('Error fetching object content:', error);
+            }
+        };
+
+        fetchObjectContent();
+
+        // Clean up function if needed
+        return () => {
+            // Any clean-up code here
+        };
+    }, [objectUrl]);
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(objectContent?.content || '', 'text/html');
+
+    const plainTextContent = doc.body.textContent;
+
+    return (
+        <>
+            {objectContent && (
+                <a className='border-1 group/article flex flex-col items-start justify-between border-b border-b-grey-200 py-5' href={`${objectContent.url}`} rel="noopener noreferrer" target="_blank">
+                    {/* <p className='mb-2 text-grey-700'>Object Type: {objectContent.type}</p> */}
+                    <div className='flex w-full justify-between gap-4'>
+                        <Heading className='mb-2' level={5}>{objectContent.name}</Heading>
+                        <Icon className='mb-2 opacity-0 transition-opacity group-hover/article:opacity-100' colorClass='text-grey-500' name='arrow-top-right' size='sm' />
+                    </div>
+                    <ArticleBody html={objectContent?.content} />
+                    <p className='mb-6 line-clamp-2 max-w-prose text-md text-grey-800'>{plainTextContent}</p>
+                    {/* <p className='mb-2 text-grey-950'>{objectContent.url}</p> */}
+                    <p className='text-md font-medium text-grey-800'>{actor}</p>
+                </a>
+            )}
+        </>
+    );
+};
+
+export default ActivityPubComponent;

apps/admin-x-activitypub/src/components/modals.tsx

@@ -0,0 +1,9 @@
+import FollowSite from './FollowSite';
+import {ModalComponent} from '@tryghost/admin-x-framework/routing';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const modals = {FollowSite} satisfies {[key: string]: ModalComponent<any>};
+
+export default modals;
+
+export type ModalName = keyof typeof modals;

apps/admin-x-activitypub/src/styles/index.css

@@ -1 +1,5 @@
 @import '@tryghost/admin-x-design-system/styles.css';
+
+.admin-x-base.admin-x-activitypub {
+    animation-name: none;
+}

apps/admin-x-activitypub/test/unit/ListIndex.test.tsx

@@ -5,6 +5,6 @@ describe('Demo', function () {
     it('renders a component', async function () {
         render(<ListIndex/>);
 
-        expect(screen.getAllByRole('heading')[0].textContent).toEqual('ActivityPub Demo');
+        expect(screen.getAllByRole('heading')[0].textContent).toEqual('Outbox');
     });
 });

apps/admin-x-framework/src/api/activitypub.ts

@@ -0,0 +1,10 @@
+import {createMutation} from '../utils/api/hooks';
+
+type FollowData = {
+    username: string
+};
+
+export const useFollow = createMutation<unknown, FollowData>({
+    method: 'POST',
+    path: data => `/activitypub/follow/${data.username}`
+});

ghost/core/core/frontend/web/site.js

@@ -22,6 +22,7 @@ const shared = require('../../server/web/shared');
 const errorHandler = require('@tryghost/mw-error-handler');
 const mw = require('./middleware');
 const labs = require('../../shared/labs');
+const bodyParser = require('body-parser');
 
 const STATIC_IMAGE_URL_PREFIX = `/${urlUtils.STATIC_IMAGE_URL_PREFIX}`;
 const STATIC_MEDIA_URL_PREFIX = `/${constants.STATIC_MEDIA_URL_PREFIX}`;
@@ -50,6 +51,21 @@ module.exports = function setupSiteApp(routerConfig) {
     // enable CORS headers (allows admin client to hit front-end when configured on separate URLs)
     siteApp.use(mw.cors);
 
+    const jsonParser = bodyParser.json({
+        type: ['application/activity+json', 'application/ld+json', 'application/ld+json; profile="https://www.w3.org/ns/activitystreams"'],
+        // TODO: The @RawBody decorator in nest isn't working without this atm...
+        verify: function (req, res, buf) {
+            req.rawBody = buf;
+        }
+    });
+    siteApp.use(async function nestBodyParser(req, res, next) {
+        if (labs.isSet('NestPlayground') || labs.isSet('ActivityPub')) {
+            jsonParser(req, res, next);
+            return;
+        }
+        return next();
+    });
+
     siteApp.use(async function nestApp(req, res, next) {
         if (labs.isSet('NestPlayground') || labs.isSet('ActivityPub')) {
             const originalExpressApp = req.app;

ghost/ghost/package.json

@@ -25,7 +25,7 @@
     "@types/sinon": "^17.0.3",
     "c8": "8.0.1",
     "mocha": "10.2.0",
-    "reflect-metadata": "0.1.13",
+    "reflect-metadata": "^0.1.14",
     "sinon": "^17.0.1",
     "ts-node": "10.9.2",
     "typescript": "5.4.5"

ghost/ghost/src/common/types/settings-cache.type.ts

@@ -1,7 +1,7 @@
 export type Settings = {
     ghost_public_key: string;
     ghost_private_key: string;
-    testing: boolean;
+    title: string;
 };
 
 export interface SettingsCache {