Skip to content

Commit 9dd4221

Browse files
dahliadahlia
committed
Merge pull request #387 from 2chanhaeng/main
2 parents 2ae57cf + 2ff7aa0 commit 9dd4221

23 files changed

+1322
-41
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"editor.detectIndentation": false,
55
"editor.indentSize": 2,
66
"editor.insertSpaces": true,
7+
"editor.rulers": [
8+
80
9+
],
710
"files.eol": "\n",
811
"files.insertFinalNewline": true,
912
"files.trimFinalNewlines": true,

‎docs/manual/integration.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,16 @@ Next.js
490490

491491
*This API is available since Fedify 1.9.0.*
492492

493+
> [!TIP]
494+
> You can see the example in the `examples/next-integration` directory in
495+
> the [Fedify repository].
496+
> Or you can just create a Fedify–Next.js app with the following command:
497+
>
498+
> ~~~~ sh
499+
> npx create-next-app -e https://github.com/fedify-dev/fedify \
500+
> --example-path examples/next-integration
501+
> ~~~~
502+
493503
[Next.js] is a React framework that enables you to build server-rendered
494504
and statically generated web applications. Fedify has the `@fedify/next`
495505
module that provides a middleware to integrate Fedify with Next.js. Create
@@ -646,5 +656,6 @@ as [`Request`] and [`Response`] objects. In that case, you need to convert
646656
the request and response objects to the appropriate types that the `Federation`
647657
object can handle.
648658

659+
[Fedify repository]: https://github.com/fedify-dev/fedify
649660
[`Request`]: https://developer.mozilla.org/en-US/docs/Web/API/Request
650661
[`Response`]: https://developer.mozilla.org/en-US/docs/Web/API/Response

‎examples/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ added in the future.[^1]
1717
software](https://github.com/fedify-dev/hollo)
1818
- [Hono integration sample](./hono-sample/)
1919
- [Fedify–Express integration example](./express/)
20+
- [Fedify–Next.js integration example using `@fedify/next`](./next-integration/)
2021
- [Fedify–Next.js 14 integration example](./next14-app-router/)
2122
- [Fedify–Next.js 15 integration example](./next15-app-router/)
2223
- [Fedify on Cloudflare Workers example](./cloudflare-workers/)

‎examples/next-integration/.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎examples/next-integration/README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
Fedify–Next.js integration example
2+
==================================
3+
4+
`create-next-app`
5+
-----------------
6+
7+
If you created Fedify–Next.js app with `create-next-app` and
8+
`-e https://github.com/fedify-dev/fedify --example-path examples/next-integration`
9+
option, you should fix `@fedify/fedify` and `@fedify/next` packages version
10+
to `^1.9.0` from `:workspace` in [`package.json`](./package.json).
11+
12+
Running the Example
13+
-------------------
14+
15+
1. Clone the repository:
16+
17+
~~~~ sh
18+
git clone https://github.com/fedify-dev/fedify.git
19+
cd fedify/examples/next-integration
20+
~~~~
21+
22+
2. Install dependencies:
23+
24+
~~~~ sh
25+
pnpm i
26+
~~~~
27+
28+
3. Start the server:
29+
30+
~~~~ sh
31+
pnpm dev & pnpx @fedify/cli tunnel 3000
32+
~~~~
33+
34+
4. Open your browser tunneled URL and start interacting with the app.
35+
You can see your handle such as
36+
`@[email protected]`.
37+
38+
5. Access https://activitypub.academy/ and search your handle and follow.
39+
40+
6. You can see following list like:
41+
42+
~~~~
43+
This account has the below 1 followers:
44+
https://activitypub.academy/users/beboes_bedoshs
45+
~~~~

‎examples/next-integration/app/globals.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import "tailwindcss";
2+
3+
:root {
4+
--background: #ffffff;
5+
--foreground: #171717;
6+
}
7+
8+
@theme inline {
9+
--color-background: var(--background);
10+
--color-foreground: var(--foreground);
11+
--font-sans: var(--font-geist-sans);
12+
--font-mono: var(--font-geist-mono);
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--background: #0a0a0a;
18+
--foreground: #ededed;
19+
}
20+
}
21+
22+
body {
23+
background: var(--background);
24+
color: var(--foreground);
25+
font-family: Arial, Helvetica, sans-serif;
26+
}

‎examples/next-integration/app/icon.svg

Lines changed: 332 additions & 0 deletions
Loading

‎examples/next-integration/app/layout.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { Metadata } from "next";
2+
import { Geist, Geist_Mono } from "next/font/google";
3+
import "./globals.css";
4+
5+
const geistSans = Geist({
6+
variable: "--font-geist-sans",
7+
subsets: ["latin"],
8+
});
9+
10+
const geistMono = Geist_Mono({
11+
variable: "--font-geist-mono",
12+
subsets: ["latin"],
13+
});
14+
15+
export const metadata: Metadata = {
16+
title: "Fedify Next.js Integration Example",
17+
description: "A demo of Fedify with `@fedify/next`",
18+
};
19+
20+
export default function RootLayout({
21+
children,
22+
}: Readonly<{
23+
children: React.ReactNode;
24+
}>) {
25+
return (
26+
<html lang="en">
27+
<body
28+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29+
>
30+
{children}
31+
</body>
32+
</html>
33+
);
34+
}

‎examples/next-integration/app/page.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { headers } from "next/headers";
2+
import { relationStore } from "@/data/store";
3+
import Link from "next/link";
4+
5+
export default async function Page() {
6+
const forwardedHost = (await headers()).get("x-forwarded-host");
7+
const host = (await headers()).get("host");
8+
return (
9+
<div className="mx-auto max-w-[780px] p-4 my-8 grid gap-4">
10+
<img
11+
src="/fedify-next-logo.svg"
12+
alt="@fedify/next Logo"
13+
className="w-32 h-32 m-auto"
14+
/>
15+
<div className="whitespace-pre font-mono leading-tight">
16+
{bannerText} with{" "}
17+
<Link href="https://nextjs.org/">
18+
<img
19+
src="/next.svg"
20+
alt="Next.js"
21+
className="inline-block w-24 dark:invert"
22+
/>
23+
</Link>
24+
</div>
25+
<p>
26+
This small federated server app is a demo of Fedify. The only one thing
27+
it does is to accept follow requests.
28+
</p>
29+
<p>
30+
You can follow this demo app via the below handle:{" "}
31+
<code className="pre px-2 py-1 text-black bg-gray-100 rounded-md select-all">
32+
@demo@{forwardedHost ?? host}
33+
</code>
34+
</p>
35+
{relationStore.size === 0
36+
? (
37+
<p>
38+
No followers yet. Try to add a follower using{" "}
39+
<a
40+
href="https://activitypub.academy/"
41+
target="_blank"
42+
className="text-blue-600"
43+
>
44+
ActivityPub.Academy
45+
</a>
46+
.
47+
</p>
48+
)
49+
: (
50+
<>
51+
<p>This account has the below {relationStore.size} followers:</p>
52+
<ul className="flex flex-col items-stretch gap-1 w-max">
53+
{Array.from(relationStore.keys()).map((address) => (
54+
<li
55+
key={address}
56+
className="pre px-2 py-1 flex-1 text-black bg-gray-100 rounded-md"
57+
>
58+
{address}
59+
</li>
60+
))}
61+
</ul>
62+
</>
63+
)}
64+
</div>
65+
);
66+
}
67+
68+
const bannerText = `
69+
_______ _______ _______ __ ___________ ____
70+
| ____|| ____|| \\ | | | ____\\ \\ / /
71+
| |__ | |__ | .--. || | | |__ \\ \\/ /
72+
| __| | __| | | | || | | __| \\_ _/
73+
| | | |____ | '--' || | | | | |
74+
|__| |_______||_______/ |__| |__| |__| `;

‎examples/next-integration/data/store.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
declare global {
2+
var keyPairsStore: Map<string, Array<CryptoKeyPair>>;
3+
var relationStore: Map<string, string>;
4+
}
5+
6+
export const keyPairsStore: Map<string, Array<CryptoKeyPair>> =
7+
globalThis.keyPairsStore ?? new Map();
8+
export const relationStore: Map<string, string> = globalThis.relationStore ??
9+
new Map();
10+
11+
// this is just a hack to demo nextjs
12+
// never do this in production, use safe and secure storage
13+
globalThis.keyPairsStore = keyPairsStore;
14+
globalThis.relationStore = relationStore;

0 commit comments

Comments
 (0)