[ { "path": ".eslintrc.json", "content": "{\n\t\"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# custom\nsrc/data/ens.js\n" }, { "path": "LICENSE", "content": "Copyright (c) Miguel Piedrafita\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is furnished\nto do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "# A Next.js-powered frontend for your Mirror blog\n\n> This project mimics the [Mirror](https://mirror.xyz) publication design and pulls data from their APIs, allowing you to self-host your Mirror blog on a custom domain.\n\nYou can view a demo of this project by visiting [m1guelpf.blog](https://m1guelpf.blog), which hosts the [my Mirror publication](https://miguel.mirror.xyz).\n\n## Features\n\n- [x] Article list\n- [x] Article page\n- [x] Code highlighting (using VSCode's rendering engine, allows for custom themes. Currently using `github-light` and `github-dark`, depending on the publication's theme)\n- [x] Dark mode (when enabled on Mirror)\n- [x] Patience page (when no articles exist)\n- [x] Static generation (all pages should load instantly once deployed)\n- [x] Static re-generation (new articles should appear without re-deploying)\n- [x] Embeds\n - [x] Tweet embeds\n - [x] YouTube embeds\n - [x] Additional embeds (CodePen, JSBin, Gists, etc., not sure if supported by Mirror already)\n - [x] NFT embeds\n - [x] Bookmark cards (Open Graph)\n- [x] Email list support (when enabled on Mirror)\n- [x] Pull content from Arweave\n- [x] Write Mirror entry about this project\n\n## Development\n\n- Clone this repo in a local directory\n- Install dependencies (`pnpm install`)\n- Copy the `.env.example` file to `.env.local`, and fill in your mirror subdomain and an RPC URL\n- Start the server! (`pnpm dev`)\n\n## Deploying to Vercel\n\nYou can deploy this project to Vercel (and load your own publication!) by clicking the button below:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fm1guelpf%2Fmirror-next&env=NEXT_PUBLIC_AUTHOR_ENS,NEXT_PUBLIC_RPC_URL&envDescription=The%20ENS%20for%20the%20publication%20you%20want%20to%20load%2C%20and%20an%20RPC%20URL.&project-name=mirror-next&repo-name=mirror-next)\n\nOnce it's ready, you should be able to attach your custom domain from the Vercel settings page.\n\n## FAQ\n\n**Is this decentralized?**\n\nKind of. While I'm pulling the entry listing and contents from the Arweave chain directly, the publication details come from Mirror's APIs.\n\n**Why did you make this?**\n\nI like playing with stuff :). I really like Mirror's design, so I decided to create a [Ghost](https://ghost.org) theme \"inspired\" by their design. Once that was finished, I decided to turn that theme into something slightly more useful.\n\n**Who are you?**\n\n:wave: Hi! I'm [Miguel Piedrafita](https://twitter.com/m1guelpf), an 22-year-old maker. You can follow my journey and all the little things I make on the way [on Twitter](https://twitter.com/m1guelpf).\n\n**I have another question**\n\nRead [Building apps with Mirror](https://m1guelpf.blog/post/building-apps-with-mirror), an entry I wrote in my own Mirror publication explaining how this project works, and how you can build your own Mirror apps. If you still have questions after that, [drop me a line on Twitter](https://twitter.com/m1guelpf).\n\n## License\n\nThis project is open-sourced software licensed under the MIT license. See the [License file](LICENSE.md) for more information.\n" }, { "path": "next-env.d.ts", "content": "/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n" }, { "path": "next.config.js", "content": "import resolveEns from './scripts/resolve-ens.js'\n\nexport default () => {\n\tresolveEns()\n\n\treturn {\n\t\timages: {\n\t\t\tremotePatterns: [{ hostname: 'images.mirror-media.xyz' }],\n\t\t},\n\t}\n}\n" }, { "path": "package.json", "content": "{\n\t\"name\": \"mirror-next\",\n\t\"version\": \"0.1.0\",\n\t\"private\": true,\n\t\"type\": \"module\",\n\t\"scripts\": {\n\t\t\"dev\": \"next dev\",\n\t\t\"build\": \"next build\",\n\t\t\"start\": \"next start\"\n\t},\n\t\"dependencies\": {\n\t\t\"@apollo/client\": \"^3.10.4\",\n\t\t\"@heroicons/react\": \"^2.1.3\",\n\t\t\"@tailwindcss/typography\": \"^0.5.13\",\n\t\t\"arweave\": \"^1.15.1\",\n\t\t\"autoprefixer\": \"^10.4.19\",\n\t\t\"fs\": \"^0.0.1-security\",\n\t\t\"graphql\": \"^16.8.1\",\n\t\t\"image-size\": \"^1.1.1\",\n\t\t\"metascraper\": \"^5.45.8\",\n\t\t\"metascraper-author\": \"^5.45.7\",\n\t\t\"metascraper-clearbit\": \"^5.45.7\",\n\t\t\"metascraper-date\": \"^5.45.7\",\n\t\t\"metascraper-description\": \"^5.45.7\",\n\t\t\"metascraper-image\": \"^5.45.7\",\n\t\t\"metascraper-lang\": \"^5.45.7\",\n\t\t\"metascraper-logo\": \"^5.45.7\",\n\t\t\"metascraper-logo-favicon\": \"^5.45.7\",\n\t\t\"metascraper-publisher\": \"^5.45.7\",\n\t\t\"metascraper-title\": \"^5.45.7\",\n\t\t\"metascraper-url\": \"^5.45.7\",\n\t\t\"net\": \"^1.0.2\",\n\t\t\"next\": \"^14.2.3\",\n\t\t\"postcss\": \"^8.4.38\",\n\t\t\"react\": \"18.3.1\",\n\t\t\"react-dom\": \"18.3.1\",\n\t\t\"react-embed\": \"^3.7.0\",\n\t\t\"react-markdown\": \"^9.0.1\",\n\t\t\"react-medium-image-zoom\": \"^4.3.1\",\n\t\t\"rehype-raw\": \"^7.0.0\",\n\t\t\"rehype-sanitize\": \"^6.0.0\",\n\t\t\"rehype-stringify\": \"^10.0.0\",\n\t\t\"remark-parse\": \"^11.0.0\",\n\t\t\"remark-rehype\": \"^11.1.0\",\n\t\t\"remark-stringify\": \"^11.0.0\",\n\t\t\"rss\": \"^1.2.2\",\n\t\t\"shiki\": \"^1.6.0\",\n\t\t\"slug\": \"^9.0.0\",\n\t\t\"strip-markdown\": \"^6.0.0\",\n\t\t\"swr\": \"^2.2.5\",\n\t\t\"tailwindcss\": \"^3.4.3\",\n\t\t\"timeago.js\": \"^4.0.2\",\n\t\t\"tls\": \"^0.0.1\",\n\t\t\"unified\": \"^11.0.4\",\n\t\t\"unist-util-visit\": \"^5.0.0\",\n\t\t\"viem\": \"^2.11.1\"\n\t},\n\t\"devDependencies\": {\n\t\t\"eslint\": \"^9.3.0\",\n\t\t\"prettier\": \"^2.2.1\",\n\t\t\"prettier-plugin-sort-imports-desc\": \"^1.0.0\",\n\t\t\"typescript\": \"5.4.5\"\n\t},\n\t\"prettier\": {\n\t\t\"semi\": false,\n\t\t\"tabWidth\": 4,\n\t\t\"useTabs\": true,\n\t\t\"printWidth\": 120,\n\t\t\"singleQuote\": true,\n\t\t\"arrowParens\": \"avoid\",\n\t\t\"trailingComma\": \"es5\",\n\t\t\"bracketSpacing\": true,\n\t\t\"plugins\": [\n\t\t\t\"prettier-plugin-sort-imports-desc\"\n\t\t]\n\t},\n\t\"pnpm\": {\n\t\t\"patchedDependencies\": {\n\t\t\t\"re2@1.20.11\": \"patches/re2@1.20.11.patch\"\n\t\t}\n\t}\n}\n" }, { "path": "patches/re2@1.20.11.patch", "content": "diff --git a/package.json b/package.json\nindex c3bc354aa66946406f62bd7805fc88182039b081..b53fb74d1410881b38b0fcbac2f7ad49a12fe778 100644\n--- a/package.json\n+++ b/package.json\n@@ -28,7 +28,8 @@\n \"test\": \"node tests/tests.js\",\n \"ts-test\": \"tsc\",\n \"save-to-github\": \"save-to-github-cache --artifact build/Release/re2.node\",\n- \"install\": \"install-from-cache --artifact build/Release/re2.node --host-var RE2_DOWNLOAD_MIRROR --skip-path-var RE2_DOWNLOAD_SKIP_PATH --skip-ver-var RE2_DOWNLOAD_SKIP_VER || node-gyp rebuild\",\n+ \"original-install\": \"install-from-cache --artifact build/Release/re2.node --host-var RE2_DOWNLOAD_MIRROR --skip-path-var RE2_DOWNLOAD_SKIP_PATH --skip-ver-var RE2_DOWNLOAD_SKIP_VER || node-gyp rebuild\",\n+ \"install\": \"echo 'Skipping re2 installation.'\",\n \"verify-build\": \"node scripts/verify-build.js\",\n \"rebuild\": \"node-gyp rebuild\"\n },\ndiff --git a/re2.js b/re2.js\nindex 3f32be925d96464242e503c03855c37ac5b354af..fdecf3f1a46d9f36a81b211fd5dbba9426b4bceb 100644\n--- a/re2.js\n+++ b/re2.js\n@@ -1,38 +1,3 @@\n 'use strict';\n \n-const RE2 = require('./build/Release/re2.node');\n-\n-if (typeof Symbol != 'undefined') {\n- Symbol.match &&\n- (RE2.prototype[Symbol.match] = function (str) {\n- return this.match(str);\n- });\n- Symbol.search &&\n- (RE2.prototype[Symbol.search] = function (str) {\n- return this.search(str);\n- });\n- Symbol.replace &&\n- (RE2.prototype[Symbol.replace] = function (str, repl) {\n- return this.replace(str, repl);\n- });\n- Symbol.split &&\n- (RE2.prototype[Symbol.split] = function (str, limit) {\n- return this.split(str, limit);\n- });\n- Symbol.matchAll &&\n- (RE2.prototype[Symbol.matchAll] = function* (str) {\n- if (!this.global) {\n- throw TypeError('String.prototype.matchAll called with a non-global RE2 argument');\n- }\n- const re = new RE2(this);\n- re.lastIndex = this.lastIndex;\n- for (;;) {\n- const result = re.exec(str);\n- if (!result) break;\n- if (result[0] === '') ++re.lastIndex;\n- yield result;\n- }\n- });\n-}\n-\n-module.exports = RE2;\n+module.exports = RegExp;\n" }, { "path": "postcss.config.js", "content": "export default {\n\tplugins: {\n\t\ttailwindcss: {},\n\t\tautoprefixer: {},\n\t},\n}\n" }, { "path": "scripts/resolve-ens.js", "content": "import fs from 'fs'\nimport { normalize } from 'viem/ens'\nimport { mainnet } from 'viem/chains'\nimport { createPublicClient, http } from 'viem'\n\nexport default async () => {\n\tif (!process.env.NEXT_PUBLIC_AUTHOR_ENS) {\n\t\tconsole.error('NEXT_PUBLIC_AUTHOR_ENS is not set')\n\t}\n\n\tif (fs.existsSync('./src/data/ens.ts')) {\n\t\t// If the author ENS wasn't set on the first run, we might have an invalid publication address.\n\t\t// This makes sure invalid addresses are re-calculated on every run instead of just the first one.\n\t\tif (!String(fs.readFileSync('./src/data/ens.ts')).includes(\"'null'\")) return\n\t}\n\n\tconst client = createPublicClient({ chain: mainnet, transport: http(process.env.NEXT_PUBLIC_RPC_URL) })\n\n\tconst publicationAddress = await client.getEnsAddress({ name: normalize(process.env.NEXT_PUBLIC_AUTHOR_ENS) })\n\n\tfs.writeFileSync('./src/data/ens.ts', `export const contributorAddresses = ['${publicationAddress}']\\n`)\n}\n" }, { "path": "src/app/[digest]/page.tsx", "content": "import { unified } from 'unified'\nimport rehypeRaw from 'rehype-raw'\nimport strip from 'strip-markdown'\nimport remarkParse from 'remark-parse'\nimport { getEntry } from '@/data/entries'\nimport { notFound } from 'next/navigation'\nimport { uriTransformer } from '@/utils/url'\nimport { format as timeago } from 'timeago.js'\nimport remarkStringify from 'remark-stringify'\nimport { formatAddress } from '@/utils/address'\nimport getPublication from '@/data/publication'\nimport { SetImageSizes } from '@/context/image_sizes'\nimport highlightCode from '@/utils/highlightMarkdown'\nimport type { Metadata, ResolvingMetadata } from 'next'\nimport ReactMarkdown, { Components } from 'react-markdown'\nimport { Image, LinkOrEmbed, BlockQuote, Block } from '@/utils/markdown'\n\nexport const revalidate = 1 * 60 * 60 // refresh article contents every hour\n\nconst components: Components = {\n\timg: Image,\n\ta: LinkOrEmbed,\n\tblockquote: BlockQuote,\n\tp: Block,\n}\n\ntype Props = {\n\tparams: { digest: string }\n}\n\nexport async function generateMetadata({ params: { digest } }: Props, parent: ResolvingMetadata): Promise {\n\tconst [publication, entry] = await Promise.all([getPublication(), getEntry(digest)])\n\tif (!entry) return notFound()\n\n\t// If there's an image we want to use the second paragraph as the description instead of the first one.\n\t// We'll also strip the markdown from the description (to avoid things like links showing up) and trim the newline at the end\n\tconst description = String(\n\t\tawait unified()\n\t\t\t.use(remarkParse)\n\t\t\t.use(strip)\n\t\t\t.use(remarkStringify)\n\t\t\t.process(entry.body.split('\\n\\n')[entry.cover_image ? 1 : 0])\n\t).slice(0, -1)\n\n\treturn {\n\t\tdescription,\n\t\ttitle: `${entry.title} — Mirror`,\n\t\topenGraph: {\n\t\t\tdescription,\n\t\t\ttitle: `${entry.title} — Mirror`,\n\t\t\timages: entry.cover_image ? [{ url: entry.cover_image }] : [],\n\t\t},\n\t\ttwitter: {\n\t\t\tdescription,\n\t\t\tcard: 'summary_large_image',\n\t\t\ttitle: `${entry.title} — Mirror`,\n\t\t\timages: entry.cover_image ? [{ url: entry.cover_image }] : [],\n\t\t},\n\t}\n}\n\nconst Article = async ({ params: { digest } }: Props) => {\n\tconst [publication, entry] = await Promise.all([getPublication(), getEntry(digest)])\n\tif (!entry) return notFound()\n\n\tconst body = String(\n\t\tawait unified()\n\t\t\t.use(remarkParse) // Parse markdown\n\t\t\t.use(highlightCode, { theme: publication.theme.colorMode == 'DARK' ? 'dark' : 'light' }) // Highlight code\n\t\t\t.use(remarkStringify) // Serialize markdown\n\t\t\t.process(entry.body)\n\t)\n\n\treturn (\n\t\t
\n\t\t\t
\n\t\t\t\t

{entry.title}

\n\t\t\t\t
\n\t\t\t\t\t{publication.members.map(contributor => (\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

{contributor.displayName}

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{formatAddress(contributor.address)}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t))}\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{timeago(entry.timestamp * 1000)}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{body}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t{publication.mailingListURL && (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tSubscribe\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t)}\n\n\t\t\t
\n\t\t\t\t{entry.transaction && (\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Arweave TX

\n\t\t\t\t\t\t\t

→

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

{formatAddress(entry.transaction)}

\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

Ethereum Address

\n\t\t\t\t\t\t

→

\n\t\t\t\t\t
\n\t\t\t\t\t

{formatAddress(entry.contributor)}

\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t

Content Digest

\n\t\t\t\t\t

{formatAddress(entry.digest)}

\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t)\n}\n\nexport default Article\n" }, { "path": "src/app/api/link-preview/route.ts", "content": "import metascraper from 'metascraper'\nimport urlFetcher from 'metascraper-url'\nimport langFetcher from 'metascraper-lang'\nimport dateFetcher from 'metascraper-date'\nimport logoFetcher from 'metascraper-logo'\nimport titleFetcher from 'metascraper-title'\nimport imageFetcher from 'metascraper-image'\nimport authorFetcher from 'metascraper-author'\nimport { Metadata } from '@/types/link-preview'\nimport clearbitFetcher from 'metascraper-clearbit'\nimport { calculateImageSize } from '@/utils/images'\nimport publisherFetcher from 'metascraper-publisher'\nimport faviconFetcher from 'metascraper-logo-favicon'\nimport { NextRequest, NextResponse } from 'next/server'\nimport descriptionFetcher from 'metascraper-description'\n\nconst scraper = metascraper([\n\ttitleFetcher(),\n\tdescriptionFetcher(),\n\tlangFetcher(),\n\tauthorFetcher(),\n\tpublisherFetcher(),\n\timageFetcher(),\n\tdateFetcher(),\n\turlFetcher(),\n\tlogoFetcher(),\n\tclearbitFetcher(),\n\tfaviconFetcher(),\n])\n\nexport async function GET(request: NextRequest): Promise {\n\tconst url = request.nextUrl.searchParams.get('url')\n\n\tif (!url) return NextResponse.json({ error: 'Missing url parameter' }, { status: 422 })\n\n\treturn NextResponse.json(await getMeta(url))\n}\n\nconst getMeta = async (url: string): Promise => {\n\tconst html = await fetch(url).then(res => res.text())\n\tconst meta = await scraper({ html, url })\n\n\tawait Promise.all(\n\t\t['image', 'logo'].map(async key => {\n\t\t\tif (!meta[key]) return\n\n\t\t\t// @ts-ignore\n\t\t\tmeta[key] = {\n\t\t\t\turl: meta[key],\n\t\t\t\t...(await calculateImageSize(meta[key]!)),\n\t\t\t}\n\t\t})\n\t)\n\n\treturn meta as Metadata\n}\n" }, { "path": "src/app/api/nft-data/route.ts", "content": "import ERC721 from '@/data/ERC721'\nimport { NextRequest, NextResponse } from 'next/server'\nimport { mainnet, base, optimism, zora, polygon } from 'viem/chains'\nimport { createPublicClient, http, getContract, extractChain } from 'viem'\n\nexport async function GET(request: NextRequest): Promise {\n\tconst chainId = request.nextUrl.searchParams.get('chain')\n\tconst tokenId = request.nextUrl.searchParams.get('tokenId') as bigint | null\n\tconst contractAddress = request.nextUrl.searchParams.get('contract') as `0x${string}` | null\n\n\tif (!chainId || !contractAddress || !tokenId) {\n\t\treturn NextResponse.json({ error: 'Missing chain, contract or tokendId parameters' }, { status: 400 })\n\t}\n\n\tconst chain = extractChain({\n\t\t// @ts-ignore\n\t\tid: parseInt(chainId),\n\t\tchains: [mainnet, base, optimism, zora, polygon],\n\t})\n\n\tconst contract = getContract({\n\t\tabi: ERC721,\n\t\taddress: contractAddress,\n\t\tclient: createPublicClient({ chain, transport: http() }),\n\t})\n\n\tconst token = await fetch(buildURL(await contract.read.tokenURI([tokenId]))).then(res => res.json())\n\n\treturn NextResponse.json({\n\t\t...token,\n\t\ttokenId,\n\t\tcontractAddress,\n\t\timage: buildURL(token.image),\n\t\tmimeType: await getMimeType(buildURL(token.image)),\n\t})\n}\n\nconst buildURL = (rawURL: string): string => {\n\tconst url = new URL(rawURL)\n\n\tswitch (url.protocol) {\n\t\tcase 'ipfs:':\n\t\t\treturn `https://ipfs.io/ipfs/${url.hostname}${url.pathname}`\n\t\tcase 'ar:':\n\t\tcase 'arweave:':\n\t\t\treturn `https://arweave.net/${url.hostname}${url.pathname}`\n\n\t\tdefault:\n\t\t\treturn rawURL\n\t}\n}\n\nconst getMimeType = async (url: string): Promise => {\n\treturn fetch(url, { method: 'HEAD' }).then(res => res.headers.get('Content-Type'))\n}\n" }, { "path": "src/app/error.tsx", "content": "'use client'\n\nimport Link from 'next/link'\nimport { FC, useEffect } from 'react'\n\nconst InternalError: FC = ({ error }: { error: Error & { digest?: string } }) => {\n\tuseEffect(() => {\n\t\tconsole.error(error)\n\t}, [error])\n\n\treturn (\n\t\t
\n\t\t\t

Internal Error

\n\t\t\t\n\t\t\t\tReturn Home\n\t\t\t\n\t\t
\n\t)\n}\n\nexport default InternalError\n" }, { "path": "src/app/feed.xml/route.ts", "content": "import RSS from 'rss'\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport getEntries from '@/data/entries'\nimport remark2rehype from 'remark-rehype'\nimport rehypeStringify from 'rehype-stringify'\nimport getPublication from '@/data/publication'\nimport { NextRequest, NextResponse } from 'next/server'\nimport highlightMarkdown from '@/utils/highlightMarkdown'\n\nexport async function GET(request: NextRequest): Promise {\n\tconst host = request.headers.get('host')\n\n\tlet [publication, entries] = await Promise.all([getPublication(), getEntries()])\n\n\tconst markdownRenderer = unified()\n\t\t.use(remarkParse) // Parse markdown\n\t\t.use(highlightMarkdown, { theme: 'light' }) // Highlight code, doesn't work on production yet\n\t\t.use(remark2rehype, { allowDangerousHtml: true }) // Convert to HTML\n\t\t.use(rehypeStringify) // Serialize HTML\n\n\tconst feed = new RSS({\n\t\ttitle: publication.displayName,\n\t\tdescription: publication.description || 'A Mirror publication',\n\t\timage_url: publication?.headerImage?.url,\n\t\tmanagingEditor: publication.members.length == 1 ? publication.members[0].displayName : publication.displayName,\n\t\twebMaster: 'MirrorXYZ',\n\t\tttl: 1 * 60, // cache for an hour\n\t\tsite_url: `https://${host}/`,\n\t\tgenerator: 'RSS for Mirror, by Miguel Piedrafita',\n\t\tfeed_url: `https://${host}/feed.xml`,\n\t})\n\n\tawait Promise.all(\n\t\tentries.map(async entry => {\n\t\t\tconst body = String(await markdownRenderer.process(entry.body))\n\n\t\t\tfeed.item({\n\t\t\t\ttitle: entry.title,\n\t\t\t\tguid: entry.digest,\n\t\t\t\turl: `https://${host}/${entry.digest}`,\n\t\t\t\tdate: new Date(entry.timestamp * 1000).toISOString(),\n\t\t\t\tdescription: body,\n\t\t\t})\n\t\t})\n\t)\n\n\treturn new NextResponse(feed.xml({ indent: true }), {\n\t\theaders: {\n\t\t\t'Content-Type': 'application/rss+xml',\n\t\t},\n\t})\n}\n" }, { "path": "src/app/layout.tsx", "content": "import '@/styles/style.css'\nimport Link from 'next/link'\nimport { Metadata } from 'next'\nimport { Inter } from 'next/font/google'\nimport { SetTheme } from '@/context/theme'\nimport getPublication from '@/data/publication'\n\nconst inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' })\n\nexport async function generateMetadata(): Promise {\n\tconst publication = await getPublication()\n\n\treturn {\n\t\ttitle: `${publication.displayName} — Mirror`,\n\t\tdescription: publication.description,\n\t\topenGraph: {\n\t\t\ttitle: `${publication.displayName} — Mirror`,\n\t\t\tdescription: publication.description,\n\t\t\timages: [{ url: publication.avatarURL }],\n\t\t},\n\t\ttwitter: {\n\t\t\tcard: 'summary',\n\t\t\tdescription: publication.description,\n\t\t\timages: [{ url: publication.avatarURL }],\n\t\t\ttitle: `${publication.displayName} — Mirror`,\n\t\t},\n\t\talternates: {\n\t\t\ttypes: {\n\t\t\t\t'application/rss+xml': '/feed.xml',\n\t\t\t},\n\t\t},\n\t}\n}\n\nconst RootLayout = async ({ children }: { children: React.ReactNode }) => {\n\tconst publication = await getPublication()\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

{publication.displayName}

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tENS\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

{publication.ens}

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t{children}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t)\n}\n\nexport default RootLayout\n" }, { "path": "src/app/not-found.tsx", "content": "import { FC } from 'react'\nimport getPublication from '@/data/publication'\nimport LinkButton from '@/components/LinkButton'\n\nconst PageNotFound: FC = async () => {\n\tconst publication = await getPublication()\n\n\treturn (\n\t\t
\n\t\t\t

Page Not Found

\n\t\t\t\n\t\t\t\tReturn Home\n\t\t\t\n\t\t
\n\t)\n}\n\nexport default PageNotFound\n" }, { "path": "src/app/page.tsx", "content": "import Link from 'next/link'\nimport getEntries from '@/data/entries'\nimport { getExcerpt } from '@/utils/excerpt'\nimport { format as timeago } from 'timeago.js'\nimport getPublication from '@/data/publication'\nimport LinkButton from '@/components/LinkButton'\nimport { SetImageSizes } from '@/context/image_sizes'\nimport ReactMarkdown, { Components } from 'react-markdown'\nimport { BlockQuote, LinkOrEmbed, Block, Image } from '@/utils/markdown'\n\nexport const revalidate = 5 * 60 // refresh page index every 5 minutes\n\nconst components: Components = {\n\timg: Image,\n\ta: LinkOrEmbed,\n\tblockquote: BlockQuote,\n\tp: Block,\n}\n\nconst Index = async () => {\n\tconst [publication, entries] = await Promise.all([getPublication(), getEntries()])\n\n\treturn (\n\t\t
\n\t\t\t{entries.map(entry => (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t{entry.title}\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t{publication.members.map(contributor => (\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t

{contributor.displayName}

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{contributor.address.substr(0, 6)}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{timeago(entry.timestamp * 1000)}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{getExcerpt(entry.body)}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t{entry.body.split('\\n\\n').length > 4 && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tContinue Reading\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t
\n\t\t\t))}\n\t\t\t{entries.length === 0 && (\n\t\t\t\t
\n\t\t\t\t\t

Patience

\n\t\t\t\t
\n\t\t\t)}\n\t\t
\n\t)\n}\n\nexport default Index\n" }, { "path": "src/app/post/[slug]/route.ts", "content": "import getEntries from '@/data/entries'\nimport { notFound, redirect } from 'next/navigation'\nimport { NextRequest, NextResponse } from 'next/server'\n\nexport async function GET(\n\trequest: NextRequest,\n\t{ params: { slug } }: { params: { slug: string } }\n): Promise {\n\tconst entry = (await getEntries()).filter(entry => entry.slug === slug)?.[0]\n\n\tif (!entry) return notFound()\n\treturn redirect(`/${entry.digest}`)\n}\n" }, { "path": "src/app/posts.json/route.ts", "content": "import getEntries from '@/data/entries'\nimport { NextRequest, NextResponse } from 'next/server'\n\nexport async function GET(request: NextRequest): Promise {\n\tconst host = request.headers.get('host')\n\tconst entries = (await getEntries()).map(entry => ({ ...entry, url: `https://${host}/post/${entry.slug}` }))\n\n\treturn NextResponse.json(entries)\n}\n" }, { "path": "src/components/EntryLink.tsx", "content": "'use client'\n\nimport Link from 'next/link'\nimport { useTheme } from '@/context/theme'\nimport { FC, PropsWithChildren } from 'react'\n\ntype Props = PropsWithChildren<{ href: string; className?: string }>\n\nconst EntryLink: FC = ({ href, children, className }) => {\n\tconst { accent } = useTheme()\n\tclassName = className ? className : getClass(accent)\n\n\tif (href.startsWith('/') || (typeof window !== 'undefined' && href.startsWith(window.location.origin))) {\n\t\treturn (\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\n\t\t)\n\t}\n\n\treturn (\n\t\t// eslint-disable-next-line react/jsx-no-target-blank\n\t\t\n\t\t\t{children}\n\t\t\n\t)\n}\n\nconst getClass = (accentColor: string): string => {\n\tswitch (accentColor.toLowerCase()) {\n\t\tcase 'purple':\n\t\t\treturn '!text-fuchsia-400'\n\t\tcase 'pink':\n\t\t\treturn '!text-red-500'\n\t\tcase 'red':\n\t\t\treturn '!text-red-500'\n\t\tcase 'orange':\n\t\t\treturn '!text-orange-400'\n\t\tcase 'yellow':\n\t\t\treturn '!text-yellow-400'\n\t\tcase 'teal':\n\t\t\treturn '!text-cyan-400'\n\t\tcase 'blue':\n\t\t\treturn '!text-blue-500'\n\t\tcase 'indigo':\n\t\t\treturn '!text-indigo-400'\n\t\tcase 'green':\n\t\t\treturn '!text-emerald-400'\n\t\tcase 'foreground':\n\t\t\treturn '!text-white'\n\n\t\tdefault:\n\t\t\treturn '!text-blue-400'\n\t}\n}\n\nexport default EntryLink\n" }, { "path": "src/components/LinkButton.tsx", "content": "import Link, { LinkProps } from 'next/link'\nimport { FC, PropsWithChildren } from 'react'\n\ntype Props = {\n\taccentColor: string\n} & LinkProps\n\nconst LinkButton: FC> = ({ href, children, accentColor, ...props }) => {\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t)\n}\n\nconst getClasses = (accentColor: string): string => {\n\tswitch (accentColor.toLowerCase()) {\n\t\tcase 'yellow':\n\t\t\treturn 'bg-yellow-100 dark:bg-yellow-400 text-yellow-500 dark:text-yellow-300 ring-yellow-100 dark:ring-yellow-400'\n\t\tcase 'purple':\n\t\t\treturn 'bg-fuchsia-100 dark:bg-fuchsia-400 text-fuchsia-500 dark:text-fuchsia-300 ring-fuchsia-100 dark:ring-fuchsia-400'\n\t\tcase 'pink':\n\t\tcase 'red':\n\t\t\treturn 'bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-300 ring-red-100 dark:ring-red-400'\n\t\tcase 'orange':\n\t\t\treturn 'bg-orange-100 dark:bg-orange-400 text-orange-500 dark:text-orange-300 ring-orange-100 dark:ring-orange-400'\n\t\tcase 'teal':\n\t\t\treturn 'bg-cyan-100 dark:bg-cyan-400 text-cyan-500 dark:text-cyan-300 ring-cyan-100 dark:ring-cyan-400'\n\t\tcase 'indigo':\n\t\t\treturn 'bg-indigo-100 dark:bg-indigo-400 text-indigo-500 dark:text-indigo-300 ring-indigo-100 dark:ring-indigo-400'\n\t\tcase 'green':\n\t\t\treturn 'bg-emerald-100 dark:bg-emerald-400 text-emerald-500 dark:text-emerald-300 ring-emerald-100 dark:ring-emerald-400'\n\t\tcase 'foreground':\n\t\t\treturn 'bg-white text-white ring-white'\n\n\t\tcase 'blue':\n\t\tdefault:\n\t\t\treturn 'bg-blue-100 dark:bg-blue-400 text-blue-500 dark:text-blue-300 ring-blue-100 dark:ring-blue-400'\n\t}\n}\n\nexport default LinkButton\n" }, { "path": "src/components/NFT.tsx", "content": "'use client'\n\nimport useSWR from 'swr'\nimport { useEffect, useRef, useState } from 'react'\n\nconst NFT = ({ data: { name, image, contractAddress, tokenId, mimeType } }) => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t

{name}

\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t{image && mimeType && (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t)}\n\t\t\n\t)\n}\n\nconst Loading = () => (\n\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t
\n)\n\nconst TextMedia = ({ media }) => {\n\tconst [content, setContent] = useState(null)\n\n\tuseEffect(() => {\n\t\tfetch(media)\n\t\t\t.then(r => r.text())\n\t\t\t.then(r => setContent(r))\n\t}, [])\n\n\treturn
{content}
\n}\n\nconst VideoMedia = ({ media }) => {\n\tconst videoRef = useRef(null)\n\tconst [isMuted, setMuted] = useState(true)\n\n\tuseEffect(() => {\n\t\tif (!videoRef.current) return\n\n\t\tvideoRef.current.muted = isMuted\n\t}, [isMuted])\n\n\treturn (\n\t\t
\n\t\t\t\n\t\t\t setMuted(state => !state)}\n\t\t\t\tclassName=\"absolute bottom-2 right-2 bg-white bg-opacity-10 !rounded-full p-2 text-white/30 transition group-hover:text-white/80 focus:outline-none\"\n\t\t\t\tstyle={{ backdropFilter: 'blur(2px) brightness(1.3)' }}\n\t\t\t>\n\t\t\t\t\n\t\t\t\t\t{isMuted ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t
\n\t)\n}\n\nconst AudioMedia = ({ media }) =>