8 |
10 | {props.children}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/components/PostError/index.tsx:
--------------------------------------------------------------------------------
1 | import { classNames } from "../../utils";
2 | import s from "./post-error.module.css";
3 | import "../../theme.css";
4 |
5 | export type PostError = {
6 | error: string;
7 | };
8 |
9 | export function PostError(props: PostError) {
10 | return (
11 |
12 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/packages/core/src/components/PostError/post-error.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | border-radius: 0.5rem;
4 | border: var(--post-error-border);
5 | background-color: var(--post-error-bg-color);
6 | padding-left: 1rem;
7 | padding-right: 1rem;
8 | padding-top: 0.75rem;
9 | padding-bottom: 0.625rem;
10 | user-select: none;
11 | }
12 |
13 | .text {
14 | text-align: center;
15 | color: var(--post-error-font-color);
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "core",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "packages/core/src",
5 | "projectType": "library",
6 | "tags": [],
7 | "// targets": "to see all targets run: nx show project core --web",
8 | "targets": {
9 | "nx-release-publish": {
10 | "options": {
11 | "packageRoot": "dist/{projectRoot}"
12 | }
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/apps/docs/app/playground/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import type { PropsWithChildren } from "react";
3 | import { ShikiProvider } from "../../providers";
4 |
5 | export const metadata: Metadata = {
6 | title: "Playground",
7 | description: "Try out the bsky-react-post library.",
8 | };
9 |
10 | export default function PlaygroundLayout(props: PropsWithChildren) {
11 | return {props.error}
13 |
9 |
22 |
10 |
11 |
16 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 | Post not found, it may have been deleted.
26 |{richText}
; 62 | } 63 | -------------------------------------------------------------------------------- /packages/core/src/components/Container/index.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { type PropsWithChildren, useEffect, useRef } from "react"; 3 | import { classNames, eventHandler } from "../../utils"; 4 | import { Link } from "../Link"; 5 | import "../../theme.css"; 6 | import s from "./container.module.css"; 7 | 8 | export type Container = PropsWithChildren<{ 9 | href?: string; 10 | }>; 11 | 12 | export function Container({ children, href }: Container) { 13 | const ref = useRef
56 | {href && }
57 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/packages/core/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 0.1.6 (2024-11-27)
2 |
3 | This was a version bump only for core to align it with other projects, there were no code changes.
4 |
5 | ## 0.1.5 (2024-11-27)
6 |
7 | This was a version bump only for core to align it with other projects, there were no code changes.
8 |
9 | ## 0.1.4 (2024-11-27)
10 |
11 | ### 🩹 Fixes
12 |
13 | - minor changes ([396a70a](https://github.com/rhinobase/react-bluesky/commit/396a70a))
14 |
15 | ## 0.1.3 (2024-11-14)
16 |
17 | This was a version bump only for core to align it with other projects, there were no code changes.
18 |
19 | ## 0.1.2 (2024-11-14)
20 |
21 | ### 🩹 Fixes
22 |
23 | - **core:** updated build config ([3584a68](https://github.com/rhinobase/react-bluesky/commit/3584a68))
24 |
25 | ## 0.1.1 (2024-11-14)
26 |
27 | ### 🚀 Features
28 |
29 | - **docs:** completed ([d020518](https://github.com/rhinobase/react-bluesky/commit/d020518))
30 |
31 | ### 🩹 Fixes
32 |
33 | - minor changes ([4beb1cc](https://github.com/rhinobase/react-bluesky/commit/4beb1cc))
34 |
35 | ## 0.1.0 (2024-11-14)
36 |
37 | ### 🚀 Features
38 |
39 | - **core:** completed ui part for post ([2192ed7](https://github.com/rhinobase/react-bluesky/commit/2192ed7))
40 |
41 | - **core:** replaced all tailwind classes with core css properties in all components ([68ac766](https://github.com/rhinobase/react-bluesky/commit/68ac766))
42 |
43 | - **core:** improvements ([fc15921](https://github.com/rhinobase/react-bluesky/commit/fc15921))
44 |
45 | - **core:** added embed component ([263b196](https://github.com/rhinobase/react-bluesky/commit/263b196))
46 |
47 | ### 🩹 Fixes
48 |
49 | - restructuring components ([def08ae](https://github.com/rhinobase/react-bluesky/commit/def08ae))
50 |
51 | - **core:** corrected the components ([d7a0709](https://github.com/rhinobase/react-bluesky/commit/d7a0709))
52 |
53 | - **core:** improved package size ([54be92a](https://github.com/rhinobase/react-bluesky/commit/54be92a))
54 |
--------------------------------------------------------------------------------
/packages/core/src/api.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | AppBskyFeedDefs,
3 | AppBskyFeedGetPostThread,
4 | ComAtprotoIdentityResolveHandle,
5 | } from "@atproto/api";
6 | import type { PostHandleProps } from "./types";
7 |
8 | const BASE_PATH = "https://public.api.bsky.app/xrpc";
9 |
10 | export async function fetchPost(
11 | config: PostHandleProps,
12 | fetchOptions?: RequestInit,
13 | ) {
14 | let atUri: string;
15 |
16 | if ("handle" in config && config.handle) {
17 | try {
18 | const resolution = await fetch(
19 | `${BASE_PATH}/com.atproto.identity.resolveHandle?handle=${config.handle}`,
20 | fetchOptions,
21 | ).then(
22 | (res) =>
23 | res.json() as Promise{children}
58 |
23 |
27 |
37 |
42 |
28 |
36 |
29 |
30 | bsky-react-post
31 |
32 |
33 |
38 | {children}
39 |
40 |
41 |
46 |
48 | ```
49 |
50 | Alternatively, a parent with the class `light` or `dark` will also work:
51 |
52 | ```tsx
53 |
54 |
56 | ```
57 |
58 | ### Updating the theme
59 |
60 | In CSS Modules, you can use the `:global` selector to update the CSS variables used by themes:
61 |
62 | ```css
63 | .my-class :global(.bsky-react-post-theme) {
64 | --post-body-font-size: 1rem;
65 | }
66 | ```
67 |
68 | For Global CSS the usage of `:global` is not necessary.
69 |
70 | ## Enabling cache for the Bluesky API
71 |
72 | Rendering posts requires making a call to Bluesky's syndication API. Getting rate limited by that API is very hard but it's possible if you're relying only on the endpoint we provide for SWR (`bsky-react-post.rhinobase.io/api/post`) as the IPs of the server are making many requests to the syndication API. This also applies to RSC where the API endpoint is not required but the server is still making the request from the same IP.
73 |
74 | To prevent this, you can use a db like Redis to cache the posts. If you're using Next.js then using [`unstable_cache`](/next#enabling-cache) works too.
75 |
--------------------------------------------------------------------------------
/apps/docs/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
3 | import { Button } from "@rafty/ui";
4 | import Link from "next/link";
5 | import { usePathname } from "next/navigation";
6 | import { NAVIGATION } from "./Navigation";
7 |
8 | type PageLink = {
9 | label: string;
10 | page: { href: string; title: string };
11 | previous?: boolean;
12 | };
13 |
14 | function PageLink({ label, page, previous = false }: PageLink) {
15 | return (
16 | <>
17 |
18 |
25 | ) : undefined
26 | }
27 | rightIcon={
28 | !previous ? (
29 |
66 | {previousPage && (
67 |
77 | );
78 | }
79 |
80 | export function Footer() {
81 | return (
82 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/packages/core/src/components/PostContent/utils.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | AppBskyRichtextFacet,
3 | Facet,
4 | FacetLink,
5 | FacetMention,
6 | FacetTag,
7 | RichTextProps,
8 | } from "@atproto/api";
9 | import { hasProp, isObj } from "../../utils";
10 | import { UnicodeString } from "./unicode";
11 |
12 | class RichTextSegment {
13 | constructor(
14 | public text: string,
15 | public facet?: Facet,
16 | ) {}
17 |
18 | get link(): FacetLink | undefined {
19 | return this.facet?.features.find(isLink);
20 | }
21 |
22 | get mention(): FacetMention | undefined {
23 | return this.facet?.features.find(isMention);
24 | }
25 |
26 | get tag(): FacetTag | undefined {
27 | return this.facet?.features.find(isTag);
28 | }
29 | }
30 |
31 | export function* rtSegments(props: Pick
68 |
70 | )}
71 | {nextPage && (
72 |
73 |
75 | )}
76 |
69 | {SOCIALS.map(({ name, icon: Icon, link }) => (
70 |
77 |
85 | );
86 | }
87 |
88 | export function useIsInsideMobileNavigation() {
89 | return useContext(IsInsideMobileNavigationContext);
90 | }
91 |
92 | export function MobileNavigation() {
93 | const { setOpen } = useDrawerDialog();
94 |
95 | return (
96 | {name}
82 | 83 | ))} 84 |
26 |
33 | );
34 | }
35 |
36 | export function Row({ children }: PropsWithChildren) {
37 | return (
38 |
27 |
29 |
30 | {children}
31 |
32 |
39 | {children}
40 |
41 | );
42 | }
43 |
44 | export function Col({
45 | children,
46 | sticky = false,
47 | }: PropsWithChildren<{
48 | sticky?: boolean;
49 | }>) {
50 | return (
51 | :first-child]:mt-0 [&>:last-child]:mb-0",
54 | sticky && "xl:sticky xl:top-24",
55 | )}
56 | >
57 | {children}
58 |
59 | );
60 | }
61 |
62 | export function Properties({ children }: PropsWithChildren) {
63 | return (
64 |
65 |
69 | );
70 | }
71 |
72 | export function Property({
73 | name,
74 | children,
75 | type,
76 | }: PropsWithChildren<{
77 | name: string;
78 | type?: string;
79 | }>) {
80 | return (
81 | -
66 | {children}
67 |
-
83 |
- Name 84 |
-
85 |
{name}86 |
87 | {type && (
88 | <>
89 | - Type 90 |
- 91 | {type} 92 | 93 | 94 | )} 95 |
- Description 96 |
- 97 | {children} 98 | 99 |
24 | {tag && {tag} }
25 | {tag && label && (
26 |
27 | )}
28 | {label && (
29 |
30 | {label}
31 |
32 | )}
33 |
34 | );
35 | }
36 |
37 | type Anchor = PropsWithChildren<{
38 | id: string;
39 | inView: boolean;
40 | }>;
41 |
42 | function Anchor({ id, inView, children }: Anchor) {
43 | return (
44 |
48 | {inView && (
49 |
50 |
54 | )}
55 | {children}
56 |
57 | );
58 | }
59 |
60 | export type Heading
51 |
53 |
78 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/apps/docs/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import { classNames } from "@rafty/ui";
2 | import { motion, useScroll, useTransform } from "framer-motion";
3 | import Link from "next/link";
4 | import { type HTMLAttributes, type PropsWithChildren, forwardRef } from "react";
5 | import {
6 | MobileNavigation,
7 | SOCIALS,
8 | useIsInsideMobileNavigation,
9 | } from "./MobileNavigation";
10 | import { MobileSearch, Search } from "./Search";
11 | import { ThemeToggle } from "./ThemeToggle";
12 | import { useDrawerDialog } from "./store";
13 |
14 | type TopLevelNavItem = PropsWithChildren<{
15 | href: string;
16 | }>;
17 |
18 | function TopLevelNavItem({ href, children }: TopLevelNavItem) {
19 | return (
20 |
79 |
108 | 90 | Embed a Bluesky Post in React 91 |
92 |
100 |
105 | )}
106 | {error == null ?
101 |
103 |
72 |
77 |
78 | bsky-react-post
79 |
80 |
81 |
86 |
87 |
94 |
88 |
93 |
101 | {SOCIALS.map(({ name, icon: Icon, link }) => (
102 |
109 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/apps/docs/mdx/search.mjs:
--------------------------------------------------------------------------------
1 | import * as fs from "node:fs";
2 | import * as path from "node:path";
3 | import * as url from "node:url";
4 | import { slugifyWithCounter } from "@sindresorhus/slugify";
5 | import glob from "fast-glob";
6 | import { toString as _toString } from "mdast-util-to-string";
7 | import { remark } from "remark";
8 | import remarkMdx from "remark-mdx";
9 | import { createLoader } from "simple-functional-loader";
10 | import { filter } from "unist-util-filter";
11 | import { SKIP, visit } from "unist-util-visit";
12 |
13 | const __filename = url.fileURLToPath(import.meta.url);
14 | const processor = remark().use(remarkMdx).use(extractSections);
15 | const slugify = slugifyWithCounter();
16 |
17 | function isObjectExpression(node) {
18 | return (
19 | node.type === "mdxTextExpression" &&
20 | node.data?.estree?.body?.[0]?.expression?.type === "ObjectExpression"
21 | );
22 | }
23 |
24 | function excludeObjectExpressions(tree) {
25 | return filter(tree, (node) => !isObjectExpression(node));
26 | }
27 |
28 | function extractSections() {
29 | return (tree, { sections }) => {
30 | slugify.reset();
31 |
32 | visit(tree, (node) => {
33 | if (node.type === "heading" || node.type === "paragraph") {
34 | const content = _toString(excludeObjectExpressions(node));
35 | if (node.type === "heading" && node.depth <= 2) {
36 | const hash = node.depth === 1 ? null : slugify(content);
37 | sections.push([content, hash, []]);
38 | } else {
39 | sections.at(-1)?.[2].push(content);
40 | }
41 | return SKIP;
42 | }
43 | });
44 | };
45 | }
46 |
47 | export default function A(nextConfig = {}) {
48 | const cache = new Map();
49 |
50 | return Object.assign({}, nextConfig, {
51 | webpack(config, options) {
52 | config.module.rules.push({
53 | test: __filename,
54 | use: [
55 | createLoader(function () {
56 | const appDir = path.resolve("./app/(docs)");
57 | this.addContextDependency(appDir);
58 |
59 | const files = glob.sync("**/*.mdx", { cwd: appDir });
60 | const data = files.map((file) => {
61 | const url = `/${file.replace(/(^|\/)page\.mdx$/, "")}`;
62 | const mdx = fs.readFileSync(path.join(appDir, file), "utf8");
63 |
64 | let sections = [];
65 |
66 | if (cache.get(file)?.[0] === mdx) {
67 | sections = cache.get(file)[1];
68 | } else {
69 | const vfile = { value: mdx, sections };
70 | processor.runSync(processor.parse(vfile), vfile);
71 | cache.set(file, [mdx, sections]);
72 | }
73 |
74 | return { url, sections };
75 | });
76 |
77 | // When this file is imported within the application
78 | // the following module is loaded:
79 | return `
80 | import FlexSearch from 'flexsearch'
81 |
82 | let sectionIndex = new FlexSearch.Document({
83 | tokenize: 'full',
84 | document: {
85 | id: 'url',
86 | index: 'content',
87 | store: ['title', 'pageTitle'],
88 | },
89 | context: {
90 | resolution: 9,
91 | depth: 2,
92 | bidirectional: true
93 | }
94 | })
95 |
96 | let data = ${JSON.stringify(data)}
97 |
98 | for (let { url, sections } of data) {
99 | for (let [title, hash, content] of sections) {
100 | sectionIndex.add({
101 | url: url + (hash ? ('#' + hash) : ''),
102 | title,
103 | content: [title, ...content].join('\\n'),
104 | pageTitle: hash ? sections[0][0] : undefined,
105 | })
106 | }
107 | }
108 |
109 | export function search(query, options = {}) {
110 | let result = sectionIndex.search(query, {
111 | ...options,
112 | enrich: true,
113 | })
114 | if (result.length === 0) {
115 | return []
116 | }
117 | return result[0].result.map((item) => ({
118 | url: item.id,
119 | title: item.doc.title,
120 | pageTitle: item.doc.pageTitle,
121 | }))
122 | }
123 | `;
124 | }),
125 | ],
126 | });
127 |
128 | if (typeof nextConfig.webpack === "function") {
129 | return nextConfig.webpack(config, options);
130 | }
131 |
132 | return config;
133 | },
134 | });
135 | }
136 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Thanks for showing interest in contributing to React Bluesky 💖, you rock!
4 |
5 | When it comes to open source, you can contribute in different ways, all of which are valuable. Here are a few guidelines that should help you prepare your contribution.
6 |
7 | ## Setup the Project
8 |
9 | The following steps will get you up and running to contribute to React Bluesky:
10 |
11 | 1. Fork the repo (click the `Fork` button at the top right of [this page](https://github.com/rhinobase/react-bluesky))
12 |
13 | 2. Clone your fork locally
14 |
15 | ```sh
16 | git clone https://github.com/
37 |
47 |
63 |
64 |
96 | );
97 | }
98 |
99 | type CreatedAt = {
100 | indexedAt: string;
101 | href: string;
102 | };
103 |
104 | function CreatedAt({ indexedAt, href }: CreatedAt) {
105 | return (
106 |
107 |
113 |
114 | );
115 | }
116 |
117 | type Actions = {
118 | likeCount: number | undefined;
119 | repostCount: number | undefined;
120 | replyCount: number | undefined;
121 | };
122 |
123 | function Actions({ likeCount, replyCount, repostCount }: Actions) {
124 | return (
125 |
65 | 
70 |
71 |
72 |
73 |
74 |
80 |
81 |
82 |
94 |
95 | {author.displayName}
75 | 76 | 77 |@{author.handle}
78 | 79 |
126 | {!!likeCount && (
127 |
187 | );
188 | }
189 |
--------------------------------------------------------------------------------
/packages/core/src/components/Embed/embed.module.css:
--------------------------------------------------------------------------------
1 | .record {
2 | width: 100%;
3 | border: var(--post-border);
4 | border-radius: 0.5rem;
5 | padding: 0.5rem;
6 | transition-property: color, background-color, border-color,
7 | text-decoration-color, fill, stroke;
8 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9 | transition-duration: 150ms;
10 | display: flex;
11 | flex-direction: column;
12 | gap: 0.375rem;
13 | background-color: var(--post-bg-color);
14 | }
15 | .record:hover {
16 | background-color: var(--post-bg-color-hover);
17 | }
18 |
19 | .recordHeader {
20 | width: 100%;
21 | display: flex;
22 | align-items: center;
23 | gap: 0.375rem;
24 | }
25 |
26 | .recordAvatar {
27 | width: 1rem;
28 | height: 1rem;
29 | min-width: 1rem;
30 | min-height: 1rem;
31 | overflow: hidden;
32 | border-radius: 9999px;
33 | flex-shrink: 0;
34 | background-color: var(--post-bg-color-hover);
35 | }
36 |
37 | .recordAvatarImg {
38 | filter: blur(0.094rem);
39 | }
40 |
41 | .recordAuthor {
42 | font-size: 0.875rem;
43 | line-height: 1.25rem;
44 | overflow: hidden;
45 | display: -webkit-box;
46 | -webkit-box-orient: vertical;
47 | -webkit-line-clamp: 1;
48 | }
49 |
50 | .recordAuthorDisplayName {
51 | font-weight: 700;
52 | }
53 |
54 | .recordAuthorHandle {
55 | color: var(--post-font-color-secondary);
56 | margin-left: 0.25rem;
57 | }
58 |
59 | .recordText {
60 | font-size: 0.875rem;
61 | line-height: 1.25rem;
62 | }
63 |
64 | .recordMedia {
65 | display: flex;
66 | flex-direction: column;
67 | gap: 0.5rem;
68 | }
69 |
70 | .info {
71 | width: 100%;
72 | border-radius: 0.5rem;
73 | border: var(--post-border);
74 | padding-top: 0.5rem;
75 | padding-bottom: 0.5rem;
76 | padding-left: 0.625rem;
77 | padding-right: 0.625rem;
78 | display: flex;
79 | gap: 0.5rem;
80 | background-color: var(--post-bg-color-hover);
81 | }
82 |
83 | .infoIcon {
84 | width: 1rem;
85 | height: 1rem;
86 | min-width: 1rem;
87 | min-height: 1rem;
88 | flex-shrink: 0;
89 | margin-top: 0.125rem;
90 | fill: var(--post-font-color);
91 | }
92 |
93 | .infoText {
94 | font-size: 0.875rem;
95 | line-height: 1.25rem;
96 | color: var(--post-font-color-secondary);
97 | }
98 |
99 | .singleImage {
100 | width: 100%;
101 | border-radius: 0.5rem;
102 | overflow: hidden;
103 | object-fit: cover;
104 | height: auto;
105 | max-height: 1000px;
106 | }
107 |
108 | .imagesContainer {
109 | width: 100%;
110 | aspect-ratio: 2/1;
111 | border-radius: 0.5rem;
112 | display: flex;
113 | gap: 0.25rem;
114 | overflow: hidden;
115 | }
116 |
117 | .doubleImagesImg {
118 | width: 50%;
119 | height: 100%;
120 | object-fit: cover;
121 | border-radius: 0.125rem;
122 | }
123 |
124 | .threeImagesLargeImg {
125 | flex: 3;
126 | object-fit: cover;
127 | border-radius: 0.125rem;
128 | }
129 |
130 | .threeImagesRemainingImagesContainer {
131 | flex: 2;
132 | display: flex;
133 | flex-direction: column;
134 | gap: 0.25rem;
135 | }
136 |
137 | .threeImagesRemainingImages {
138 | width: 100%;
139 | height: 100%;
140 | object-fit: cover;
141 | border-radius: 0.125rem;
142 | }
143 |
144 | .fourImagesContainer {
145 | width: 100%;
146 | display: grid;
147 | grid-template-columns: repeat(2, minmax(0, 1fr));
148 | gap: 0.25rem;
149 | border-radius: 0.5rem;
150 | overflow: hidden;
151 | }
152 |
153 | .fourImagesImg {
154 | aspect-ratio: 1 / 1;
155 | width: 100%;
156 | object-fit: cover;
157 | border-radius: 0.125rem;
158 | }
159 |
160 | .external {
161 | width: 100%;
162 | border-radius: 0.5rem;
163 | overflow: hidden;
164 | border: var(--post-border);
165 | display: flex;
166 | flex-direction: column;
167 | align-items: stretch;
168 | }
169 |
170 | .externalThumbnail {
171 | aspect-ratio: 1.91 / 1;
172 | object-fit: cover;
173 | }
174 |
175 | .externalContent {
176 | padding-top: 0.75rem;
177 | padding-bottom: 0.75rem;
178 | padding-left: 1rem;
179 | padding-right: 1rem;
180 | }
181 |
182 | .externalDomain {
183 | font-size: 0.875rem;
184 | line-height: 1.25rem;
185 | color: var(--post-font-color-secondary);
186 | overflow: hidden;
187 | display: -webkit-box;
188 | -webkit-box-orient: vertical;
189 | -webkit-line-clamp: 1;
190 | }
191 |
192 | .externalTitle {
193 | font-weight: 600;
194 | overflow: hidden;
195 | display: -webkit-box;
196 | -webkit-box-orient: vertical;
197 | -webkit-line-clamp: 3;
198 | }
199 |
200 | .externalDescription {
201 | font-size: 0.875rem;
202 | line-height: 1.25rem;
203 | color: var(--post-font-color-secondary);
204 | overflow: hidden;
205 | display: -webkit-box;
206 | -webkit-box-orient: vertical;
207 | -webkit-line-clamp: 2;
208 | margin-top: 0.125rem;
209 | }
210 |
211 | .generic {
212 | width: 100%;
213 | border-radius: 0.5rem;
214 | border: var(--post-border);
215 | padding-top: 0.5rem;
216 | padding-bottom: 0.5rem;
217 | padding-left: 0.75rem;
218 | padding-right: 0.75rem;
219 | display: flex;
220 | flex-direction: column;
221 | gap: 0.5rem;
222 | }
223 |
224 | .genericHeader {
225 | display: flex;
226 | gap: 0.625rem;
227 | align-items: center;
228 | }
229 |
230 | .genericImage {
231 | width: 2rem;
232 | height: 2rem;
233 | min-width: 2rem;
234 | min-height: 2rem;
235 | border-radius: 0.375rem;
236 | flex-shrink: 0;
237 | }
238 |
239 | .genericImageImg {
240 | background-color: var(--post-bg-color-hover);
241 | }
242 |
243 | .genericImagePlaceholder {
244 | background-color: var(--post-color-blue-primary);
245 | }
246 |
247 | .genericTitleAndDescription {
248 | flex: 1 1 0%;
249 | font-size: 0.875rem;
250 | line-height: 1.25rem;
251 | }
252 |
253 | .genericTitle {
254 | font-weight: 700;
255 | }
256 |
257 | .genericDescription {
258 | color: var(--post-font-color-secondary);
259 | }
260 |
261 | .genericText {
262 | color: var(--post-font-color-secondary);
263 | font-size: 0.875rem;
264 | line-height: 1.25rem;
265 | }
266 |
267 | .videoEmbed {
268 | width: 100%;
269 | overflow: hidden;
270 | border-radius: 0.5rem;
271 | aspect-ratio: 1 / 1;
272 | position: relative;
273 | }
274 |
275 | .videoEmbedThumbnail {
276 | object-fit: cover;
277 | width: 100%;
278 | height: 100%;
279 | }
280 |
281 | .videoEmbedIconBg {
282 | width: 6rem;
283 | height: 6rem;
284 | position: absolute;
285 | top: 50%;
286 | left: 50%;
287 | --tw-translate-x: -50%;
288 | --tw-translate-y: -50%;
289 | transform: translate(var(--tw-translate-x), var(--tw-translate-y))
290 | rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
291 | scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
292 | border-radius: 9999px;
293 | background-color: rgb(0 0 0 / 0.5);
294 | display: flex;
295 | align-items: center;
296 | justify-content: center;
297 | }
298 |
299 | .videoEmbedIcon {
300 | object-fit: cover;
301 | width: 60%;
302 | height: 60%;
303 | }
304 |
305 | .starterPack {
306 | width: 100%;
307 | border-radius: 0.5rem;
308 | overflow: hidden;
309 | border: var(--post-border);
310 | display: flex;
311 | flex-direction: column;
312 | align-items: stretch;
313 | }
314 |
315 | .starterPackImage {
316 | aspect-ratio: 1.91 / 1;
317 | object-fit: cover;
318 | }
319 |
320 | .starterPackContent {
321 | padding-top: 0.75rem;
322 | padding-bottom: 0.75rem;
323 | padding-left: 1rem;
324 | padding-right: 1rem;
325 | }
326 |
327 | .starterPackContentHeader {
328 | display: flex;
329 | gap: 0.5rem;
330 | align-items: center;
331 | }
332 |
333 | .starterPackIcon {
334 | width: 2.5rem;
335 | height: 2.5rem;
336 | min-width: 2.5rem;
337 | min-height: 2.5rem;
338 | }
339 |
340 | .starterPackName {
341 | font-size: 1rem;
342 | line-height: 1.313rem;
343 | font-weight: 600;
344 | }
345 |
346 | .starterPackAuthor {
347 | font-size: 0.875rem;
348 | line-height: 1.125rem;
349 | color: var(--post-font-color-secondary);
350 | overflow: hidden;
351 | display: -webkit-box;
352 | -webkit-box-orient: vertical;
353 | -webkit-line-clamp: 2;
354 | }
355 |
356 | .starterPackDescription {
357 | font-size: 0.875rem;
358 | line-height: 1.25rem;
359 | margin-top: 0.25rem;
360 | }
361 |
362 | .starterPackJoined {
363 | font-size: 0.875rem;
364 | line-height: 1.25rem;
365 | font-weight: 600;
366 | color: var(--post-font-color-secondary);
367 | margin-top: 0.25rem;
368 | }
369 |
--------------------------------------------------------------------------------
/apps/docs/components/Navigation.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { classNames } from "@rafty/ui";
3 | import { AnimatePresence, motion, useIsPresent } from "framer-motion";
4 | import Link from "next/link";
5 | import { usePathname } from "next/navigation";
6 | import {
7 | type HTMLAttributes,
8 | type LiHTMLAttributes,
9 | type PropsWithChildren,
10 | useRef,
11 | } from "react";
12 | import { useIsInsideMobileNavigation } from "../components/MobileNavigation";
13 | import { useSectionStore } from "../components/SectionProvider";
14 | import { Tag } from "../components/Tag";
15 | import { remToPx } from "../lib/remToPx";
16 |
17 | type NavGroupType = {
18 | title: string;
19 | links: {
20 | title: string;
21 | href: string;
22 | }[];
23 | };
24 |
25 | function useInitialValue
128 |
140 |
142 | )}
143 | {!!repostCount && (
144 | {prettyNumber(likeCount)}
141 |
145 |
157 |
159 | )}
160 | {prettyNumber(repostCount)}
158 |
161 |
173 |
175 |
176 | Reply
174 |177 | {replyCount 178 | ? `Read ${prettyNumber(replyCount)} ${ 179 | replyCount > 1 ? "replies" : "reply" 180 | } on Bluesky` 181 | : "View on Bluesky"} 182 |
183 |184 | View on Bluesky 185 |
186 |
177 |
178 | {isActiveGroup && (
179 |
182 |
187 | {isActiveGroup && (
188 |
191 |
230 | -
192 | {group.links.map((link) => (
193 |
-
214 |
219 | {section.title} 220 | 221 |
222 | ))}
223 |
68 |
95 |
96 | );
97 | }
98 |
99 | type CodePanelHeader = { tag?: string; label?: string };
100 |
101 | function CodePanelHeader({ tag, label }: CodePanelHeader) {
102 | if (!tag && !label) {
103 | return null;
104 | }
105 |
106 | return (
107 |
108 | {tag && (
109 |
122 | );
123 | }
124 |
125 | type CodePanel = PropsWithChildren<{
126 | tag?: string;
127 | label?: string;
128 | code?: string;
129 | }>;
130 |
131 | function CodePanel({ children, tag, label, code }: CodePanel) {
132 | const child = Children.only(children);
133 |
134 | if (isValidElement(child)) {
135 | tag = child.props.tag ?? tag;
136 | label = child.props.label ?? label;
137 | code = child.props.code ?? code;
138 | }
139 |
140 | if (!code) {
141 | throw new Error(
142 | "`CodePanel` requires a `code` prop, or a child with a `code` prop.",
143 | );
144 | }
145 |
146 | return (
147 |
110 | {tag}
111 |
112 | )}
113 | {tag && label && (
114 |
115 | )}
116 | {label && (
117 |
118 | {label}
119 |
120 | )}
121 |
148 |
156 | );
157 | }
158 |
159 | type CodeGroupHeader = PropsWithChildren<{
160 | title: string;
161 | }>;
162 |
163 | function CodeGroupHeader({ title, children }: CodeGroupHeader) {
164 | const hasTabs = Children.count(children) > 1;
165 |
166 | if (!title && !hasTabs) {
167 | return null;
168 | }
169 |
170 | return (
171 |
150 |
155 |
151 | {children}
152 |
153 |
172 | {title && (
173 |
184 | {Children.map(children, (child) => (
185 |
189 | {isValidElement(child)
190 | ? getPanelTitle(child.props || {})
191 | : getPanelTitle({})}
192 |
193 | ))}
194 |
195 | )}
196 |
197 | );
198 | }
199 |
200 | type CodeGroupPanels = CodePanel;
201 |
202 | function CodeGroupPanels({ children, ...props }: CodeGroupPanels) {
203 | const hasTabs = Children.count(children) > 1;
204 |
205 | if (hasTabs) {
206 | return (
207 | <>
208 | {Children.map(children, (child) => (
209 | 179 | {title} 180 |
181 | )} 182 | {hasTabs && ( 183 |
331 | {header}
332 | {panels}
333 |
334 | )}
335 | {children};
355 | }
356 |
357 | export type Pre = CodeGroup;
358 |
359 | export function Pre({ children, ...props }: Pre) {
360 | const isGrouped = useContext(CodeGroupContext);
361 |
362 | if (isGrouped) {
363 | return children;
364 | }
365 |
366 | return
243 |
252 | );
253 | }
254 |
255 | return (
256 | 245 | Nothing found for{" "} 246 | 247 | ‘{query}’ 248 | 249 | . Please try again. 250 |
251 |-
257 | {collection.items.map((result, resultIndex) => (
258 |
283 | {
293 | if (
294 | event.key === "Escape" &&
295 | !autocompleteState.isOpen &&
296 | autocompleteState.query === ""
297 | ) {
298 | if (document.activeElement instanceof HTMLElement) {
299 | document.activeElement.blur();
300 | }
301 |
302 | onClose();
303 | } else {
304 | inputProps.onKeyDown(event);
305 | }
306 | }}
307 | />
308 | {autocompleteState.status === "stalled" && (
309 |
314 | );
315 | },
316 | );
317 | SearchInput.displayName = "SearchInput";
318 |
319 | export function SearchDialog() {
320 | const formRef = useRef
310 |
312 | )}
313 |
406 |
419 |
420 | );
421 | }
422 |
423 | export function MobileSearch() {
424 | const setOpen = useSearchDialog((state) => state.setOpen);
425 |
426 | return (
427 |
428 |
437 |
438 | );
439 | }
440 |
--------------------------------------------------------------------------------
/apps/docs/typography.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | typographyStyles: ({ theme }) => {
3 | return {
4 | DEFAULT: {
5 | css: {
6 | "--tw-prose-body": theme("colors.secondary.700"),
7 | "--tw-prose-headings": theme("colors.secondary.900"),
8 | "--tw-prose-links": theme("colors.primary.500"),
9 | "--tw-prose-links-hover": theme("colors.primary.600"),
10 | "--tw-prose-links-underline": theme("colors.primary.600"),
11 | "--tw-prose-bold": theme("colors.secondary.900"),
12 | "--tw-prose-counters": theme("colors.secondary.500"),
13 | "--tw-prose-bullets": theme("colors.secondary.300"),
14 | "--tw-prose-hr": theme("colors.secondary.900 / 0.05"),
15 | "--tw-prose-quotes": theme("colors.secondary.900"),
16 | "--tw-prose-quote-borders": theme("colors.secondary.200"),
17 | "--tw-prose-captions": theme("colors.secondary.500"),
18 | "--tw-prose-code": theme("colors.secondary.900"),
19 | "--tw-prose-code-bg": theme("colors.secondary.100"),
20 | "--tw-prose-code-ring": theme("colors.secondary.300"),
21 | "--tw-prose-th-borders": theme("colors.secondary.300"),
22 | "--tw-prose-td-borders": theme("colors.secondary.200"),
23 |
24 | "--tw-prose-invert-body": theme("colors.secondary.400"),
25 | "--tw-prose-invert-headings": theme("colors.white"),
26 | "--tw-prose-invert-links": theme("colors.primary.400"),
27 | "--tw-prose-invert-links-hover": theme("colors.primary.300"),
28 | "--tw-prose-invert-links-underline": theme(
29 | "colors.primary.300 / 0.3",
30 | ),
31 | "--tw-prose-invert-bold": theme("colors.white"),
32 | "--tw-prose-invert-counters": theme("colors.secondary.400"),
33 | "--tw-prose-invert-bullets": theme("colors.secondary.600"),
34 | "--tw-prose-invert-hr": theme("colors.white / 0.05"),
35 | "--tw-prose-invert-quotes": theme("colors.secondary.100"),
36 | "--tw-prose-invert-quote-borders": theme("colors.secondary.700"),
37 | "--tw-prose-invert-captions": theme("colors.secondary.400"),
38 | "--tw-prose-invert-code": theme("colors.white"),
39 | "--tw-prose-invert-code-bg": theme("colors.secondary.700 / 0.15"),
40 | "--tw-prose-invert-code-ring": theme("colors.white / 0.1"),
41 | "--tw-prose-invert-th-borders": theme("colors.secondary.600"),
42 | "--tw-prose-invert-td-borders": theme("colors.secondary.700"),
43 |
44 | // Base
45 | color: "var(--tw-prose-body)",
46 | fontSize: theme("fontSize.sm")[0],
47 | lineHeight: theme("lineHeight.7"),
48 |
49 | // Layout
50 | "> *": {
51 | maxWidth: theme("maxWidth.2xl"),
52 | marginLeft: "auto",
53 | marginRight: "auto",
54 | "@screen lg": {
55 | maxWidth: theme("maxWidth.3xl"),
56 | marginLeft: `calc(50% - min(50%, ${theme("maxWidth.lg")}))`,
57 | marginRight: `calc(50% - min(50%, ${theme("maxWidth.lg")}))`,
58 | },
59 | },
60 |
61 | // Text
62 | p: {
63 | marginTop: theme("spacing.6"),
64 | marginBottom: theme("spacing.6"),
65 | },
66 | '[class~="lead"]': {
67 | fontSize: theme("fontSize.base")[0],
68 | ...theme("fontSize.base")[1],
69 | },
70 |
71 | // Lists
72 | ol: {
73 | listStyleType: "decimal",
74 | marginTop: theme("spacing.5"),
75 | marginBottom: theme("spacing.5"),
76 | paddingLeft: "1.625rem",
77 | },
78 | 'ol[type="A"]': {
79 | listStyleType: "upper-alpha",
80 | },
81 | 'ol[type="a"]': {
82 | listStyleType: "lower-alpha",
83 | },
84 | 'ol[type="A" s]': {
85 | listStyleType: "upper-alpha",
86 | },
87 | 'ol[type="a" s]': {
88 | listStyleType: "lower-alpha",
89 | },
90 | 'ol[type="I"]': {
91 | listStyleType: "upper-roman",
92 | },
93 | 'ol[type="i"]': {
94 | listStyleType: "lower-roman",
95 | },
96 | 'ol[type="I" s]': {
97 | listStyleType: "upper-roman",
98 | },
99 | 'ol[type="i" s]': {
100 | listStyleType: "lower-roman",
101 | },
102 | 'ol[type="1"]': {
103 | listStyleType: "decimal",
104 | },
105 | ul: {
106 | listStyleType: "disc",
107 | marginTop: theme("spacing.5"),
108 | marginBottom: theme("spacing.5"),
109 | paddingLeft: "1.625rem",
110 | },
111 | li: {
112 | marginTop: theme("spacing.2"),
113 | marginBottom: theme("spacing.2"),
114 | },
115 | ":is(ol, ul) > li": {
116 | paddingLeft: theme("spacing[1.5]"),
117 | },
118 | "ol > li::marker": {
119 | fontWeight: "400",
120 | color: "var(--tw-prose-counters)",
121 | },
122 | "ul > li::marker": {
123 | color: "var(--tw-prose-bullets)",
124 | },
125 | "> ul > li p": {
126 | marginTop: theme("spacing.3"),
127 | marginBottom: theme("spacing.3"),
128 | },
129 | "> ul > li > *:first-child": {
130 | marginTop: theme("spacing.5"),
131 | },
132 | "> ul > li > *:last-child": {
133 | marginBottom: theme("spacing.5"),
134 | },
135 | "> ol > li > *:first-child": {
136 | marginTop: theme("spacing.5"),
137 | },
138 | "> ol > li > *:last-child": {
139 | marginBottom: theme("spacing.5"),
140 | },
141 | "ul ul, ul ol, ol ul, ol ol": {
142 | marginTop: theme("spacing.3"),
143 | marginBottom: theme("spacing.3"),
144 | },
145 |
146 | // Horizontal rules
147 | hr: {
148 | borderColor: "var(--tw-prose-hr)",
149 | borderTopWidth: 1,
150 | marginTop: theme("spacing.16"),
151 | marginBottom: theme("spacing.16"),
152 | maxWidth: "none",
153 | marginLeft: `calc(-1 * ${theme("spacing.4")})`,
154 | marginRight: `calc(-1 * ${theme("spacing.4")})`,
155 | "@screen sm": {
156 | marginLeft: `calc(-1 * ${theme("spacing.6")})`,
157 | marginRight: `calc(-1 * ${theme("spacing.6")})`,
158 | },
159 | "@screen lg": {
160 | marginLeft: `calc(-1 * ${theme("spacing.8")})`,
161 | marginRight: `calc(-1 * ${theme("spacing.8")})`,
162 | },
163 | },
164 |
165 | // Quotes
166 | blockquote: {
167 | fontWeight: "500",
168 | fontStyle: "italic",
169 | color: "var(--tw-prose-quotes)",
170 | borderLeftWidth: "0.25rem",
171 | borderLeftColor: "var(--tw-prose-quote-borders)",
172 | quotes: '"\\201C""\\201D""\\2018""\\2019"',
173 | marginTop: theme("spacing.8"),
174 | marginBottom: theme("spacing.8"),
175 | paddingLeft: theme("spacing.5"),
176 | },
177 | "blockquote p:first-of-type::before": {
178 | content: "open-quote",
179 | },
180 | "blockquote p:last-of-type::after": {
181 | content: "close-quote",
182 | },
183 |
184 | // Headings
185 | h1: {
186 | color: "var(--tw-prose-headings)",
187 | fontWeight: "700",
188 | fontSize: theme("fontSize.2xl")[0],
189 | ...theme("fontSize.2xl")[1],
190 | marginBottom: theme("spacing.2"),
191 | },
192 | h2: {
193 | color: "var(--tw-prose-headings)",
194 | fontWeight: "600",
195 | fontSize: theme("fontSize.lg")[0],
196 | ...theme("fontSize.lg")[1],
197 | marginTop: theme("spacing.16"),
198 | marginBottom: theme("spacing.2"),
199 | },
200 | h3: {
201 | color: "var(--tw-prose-headings)",
202 | fontSize: theme("fontSize.base")[0],
203 | ...theme("fontSize.base")[1],
204 | fontWeight: "600",
205 | marginTop: theme("spacing.10"),
206 | marginBottom: theme("spacing.2"),
207 | },
208 |
209 | // Media
210 | "img, video, figure": {
211 | marginTop: theme("spacing.8"),
212 | marginBottom: theme("spacing.8"),
213 | },
214 | "figure > *": {
215 | marginTop: "0",
216 | marginBottom: "0",
217 | },
218 | figcaption: {
219 | color: "var(--tw-prose-captions)",
220 | fontSize: theme("fontSize.xs")[0],
221 | ...theme("fontSize.xs")[1],
222 | marginTop: theme("spacing.2"),
223 | },
224 |
225 | // Tables
226 | table: {
227 | width: "100%",
228 | tableLayout: "auto",
229 | textAlign: "left",
230 | marginTop: theme("spacing.8"),
231 | marginBottom: theme("spacing.8"),
232 | lineHeight: theme("lineHeight.6"),
233 | },
234 | thead: {
235 | borderBottomWidth: "1px",
236 | borderBottomColor: "var(--tw-prose-th-borders)",
237 | },
238 | "thead th": {
239 | color: "var(--tw-prose-headings)",
240 | fontWeight: "600",
241 | verticalAlign: "bottom",
242 | paddingRight: theme("spacing.2"),
243 | paddingBottom: theme("spacing.2"),
244 | paddingLeft: theme("spacing.2"),
245 | },
246 | "thead th:first-child": {
247 | paddingLeft: "0",
248 | },
249 | "thead th:last-child": {
250 | paddingRight: "0",
251 | },
252 | "tbody tr": {
253 | borderBottomWidth: "1px",
254 | borderBottomColor: "var(--tw-prose-td-borders)",
255 | },
256 | "tbody tr:last-child": {
257 | borderBottomWidth: "0",
258 | },
259 | "tbody td": {
260 | verticalAlign: "baseline",
261 | },
262 | tfoot: {
263 | borderTopWidth: "1px",
264 | borderTopColor: "var(--tw-prose-th-borders)",
265 | },
266 | "tfoot td": {
267 | verticalAlign: "top",
268 | },
269 | ":is(tbody, tfoot) td": {
270 | paddingTop: theme("spacing.2"),
271 | paddingRight: theme("spacing.2"),
272 | paddingBottom: theme("spacing.2"),
273 | paddingLeft: theme("spacing.2"),
274 | },
275 | ":is(tbody, tfoot) td:first-child": {
276 | paddingLeft: "0",
277 | },
278 | ":is(tbody, tfoot) td:last-child": {
279 | paddingRight: "0",
280 | },
281 |
282 | // Inline elements
283 | a: {
284 | color: "var(--tw-prose-links)",
285 | textDecoration: "underline transparent",
286 | fontWeight: "500",
287 | transitionProperty: "color, text-decoration-color",
288 | transitionDuration: theme("transitionDuration.DEFAULT"),
289 | transitionTimingFunction: theme("transitionTimingFunction.DEFAULT"),
290 | "&:hover": {
291 | color: "var(--tw-prose-links-hover)",
292 | textDecorationColor: "var(--tw-prose-links-underline)",
293 | },
294 | },
295 | ":is(h1, h2, h3) a": {
296 | fontWeight: "inherit",
297 | },
298 | strong: {
299 | color: "var(--tw-prose-bold)",
300 | fontWeight: "600",
301 | },
302 | ":is(a, blockquote, thead th) strong": {
303 | color: "inherit",
304 | },
305 | code: {
306 | color: "var(--tw-prose-code)",
307 | borderRadius: theme("borderRadius.lg"),
308 | paddingTop: theme("padding.1"),
309 | paddingRight: theme("padding[1.5]"),
310 | paddingBottom: theme("padding.1"),
311 | paddingLeft: theme("padding[1.5]"),
312 | boxShadow: "inset 0 0 0 1px var(--tw-prose-code-ring)",
313 | backgroundColor: "var(--tw-prose-code-bg)",
314 | fontSize: theme("fontSize.2xs"),
315 | },
316 | ":is(a, h1, h2, h3, blockquote, thead th) code": {
317 | color: "inherit",
318 | },
319 | "h2 code": {
320 | fontSize: theme("fontSize.base")[0],
321 | fontWeight: "inherit",
322 | },
323 | "h3 code": {
324 | fontSize: theme("fontSize.sm")[0],
325 | fontWeight: "inherit",
326 | },
327 |
328 | // Overrides
329 | ":is(h1, h2, h3) + *": {
330 | marginTop: "0",
331 | },
332 | "> :first-child": {
333 | marginTop: "0 !important",
334 | },
335 | "> :last-child": {
336 | marginBottom: "0 !important",
337 | },
338 | },
339 | },
340 | invert: {
341 | css: {
342 | "--tw-prose-body": "var(--tw-prose-invert-body)",
343 | "--tw-prose-headings": "var(--tw-prose-invert-headings)",
344 | "--tw-prose-links": "var(--tw-prose-invert-links)",
345 | "--tw-prose-links-hover": "var(--tw-prose-invert-links-hover)",
346 | "--tw-prose-links-underline":
347 | "var(--tw-prose-invert-links-underline)",
348 | "--tw-prose-bold": "var(--tw-prose-invert-bold)",
349 | "--tw-prose-counters": "var(--tw-prose-invert-counters)",
350 | "--tw-prose-bullets": "var(--tw-prose-invert-bullets)",
351 | "--tw-prose-hr": "var(--tw-prose-invert-hr)",
352 | "--tw-prose-quotes": "var(--tw-prose-invert-quotes)",
353 | "--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)",
354 | "--tw-prose-captions": "var(--tw-prose-invert-captions)",
355 | "--tw-prose-code": "var(--tw-prose-invert-code)",
356 | "--tw-prose-code-bg": "var(--tw-prose-invert-code-bg)",
357 | "--tw-prose-code-ring": "var(--tw-prose-invert-code-ring)",
358 | "--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)",
359 | "--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)",
360 | },
361 | },
362 | };
363 | },
364 | };
365 |
--------------------------------------------------------------------------------
/packages/core/src/components/Embed/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import type {
3 | AppBskyEmbedExternal,
4 | AppBskyEmbedImages,
5 | AppBskyEmbedVideo,
6 | AppBskyFeedDefs,
7 | AppBskyGraphDefs,
8 | } from "@atproto/api";
9 | import { type PropsWithChildren, useMemo } from "react";
10 | import { CONTENT_LABELS, classNames, labelsToInfo } from "../../utils";
11 | import { getRkey } from "../../utils";
12 | import { Link } from "../Link";
13 | import { isRecord } from "../Post/utils";
14 | import s from "./embed.module.css";
15 | import {
16 | isEmbedExternalView,
17 | isEmbedRecordView,
18 | isEmbedRecordWithMediaView,
19 | isEmbedViewBlocked,
20 | isEmbedViewDetached,
21 | isEmbedViewNotFound,
22 | isEmbedViewRecord,
23 | isFeedGeneratorView,
24 | isGraphListView,
25 | isImageView,
26 | isLabelerView,
27 | isStarterPackViewBasic,
28 | isStarterpackRecord,
29 | isVideoView,
30 | } from "./utils";
31 |
32 | export type Embed = {
33 | content: AppBskyFeedDefs.PostView["embed"];
34 | labels: AppBskyFeedDefs.PostView["labels"];
35 | hideRecord?: boolean;
36 | };
37 |
38 | export function Embed({ content, labels, hideRecord }: Embed) {
39 | const labelInfo = useMemo(() => labelsToInfo(labels), [labels]);
40 |
41 | if (!content) return null;
42 |
43 | try {
44 | // Case 1: Image
45 | if (isImageView(content)) {
46 | return
91 |
107 | {text &&
92 | 
97 |
98 | 99 | 100 | {record.author.displayName} 101 | 102 | 103 | @{record.author.handle} 104 | 105 |
106 |{text}
} 108 | {record.embeds?.map((embed) => ( 109 | 115 | ))} 116 | 117 | ); 118 | } 119 | 120 | // Case 3.2: List 121 | if (isGraphListView(record)) { 122 | return ( 123 |
193 |
198 |
206 |
207 | );
208 | }
209 |
210 | // Unknown embed type
211 | return null;
212 | } catch (err) {
213 | return (
214 |
222 |
228 |
230 | );
231 | }
232 |
233 | type ImageEmbed = {
234 | content: AppBskyEmbedImages.View;
235 | labelInfo?: string;
236 | };
237 |
238 | function ImageEmbed({ content, labelInfo }: ImageEmbed) {
239 | if (labelInfo) {
240 | return {children}
229 |
255 | {content.images.map((image, i) => (
256 | 
262 | ))}
263 |
264 | );
265 | case 3:
266 | return (
267 |
268 | ![{content.images[0].alt}]({content.images[0].thumb})
273 |
284 | );
285 | case 4:
286 | return (
287 |
274 | {content.images.slice(1).map((image, i) => (
275 |
281 | ))}
282 |
283 |
288 | {content.images.map((image, i) => (
289 |
295 | ))}
296 |
297 | );
298 | default:
299 | return null;
300 | }
301 | }
302 |
303 | type ExternalEmbed = {
304 | content: AppBskyEmbedExternal.View;
305 | labelInfo?: string;
306 | };
307 |
308 | function ExternalEmbed({ content, labelInfo }: ExternalEmbed) {
309 | function toNiceDomain(url: string): string {
310 | try {
311 | const urlp = new URL(url);
312 | return urlp.host ? urlp.host : url;
313 | } catch (e) {
314 | return url;
315 | }
316 | }
317 |
318 | if (labelInfo) {
319 | return
332 |
336 |
337 | );
338 | }
339 |
340 | type GenericWithImageEmbed = {
341 | title: string;
342 | subtitle: string;
343 | href: string;
344 | image?: string;
345 | description?: string;
346 | };
347 |
348 | function GenericWithImageEmbed({
349 | title,
350 | subtitle,
351 | href,
352 | image,
353 | description,
354 | }: GenericWithImageEmbed) {
355 | return (
356 |
357 | {toNiceDomain(content.external.uri)}
333 |{content.external.title}
334 |{content.external.description}
335 |
358 | {image ? (
359 | 
364 | ) : (
365 |
368 | )}
369 |
374 | {description &&
370 |
373 | {title}
371 |{subtitle}
372 |{description}
} 375 | 376 | ); 377 | } 378 | 379 | type VideoEmbed = { content: AppBskyEmbedVideo.View }; 380 | 381 | function VideoEmbed({ content }: VideoEmbed) { 382 | let aspectRatio = 1; 383 | 384 | if (content.aspectRatio) { 385 | const { width, height } = content.aspectRatio; 386 | aspectRatio = clamp(width / height, 1 / 1, 3 / 1); 387 | } 388 | 389 | return ( 390 |
391 | 
396 |
411 | );
412 | }
413 |
414 | type StarterPackEmbed = {
415 | content: AppBskyGraphDefs.StarterPackViewBasic;
416 | };
417 |
418 | function StarterPackEmbed({ content }: StarterPackEmbed) {
419 | if (!isStarterpackRecord(content.record)) {
420 | return null;
421 | }
422 |
423 | const starterPackHref = getStarterPackHref(content);
424 | const imageUri = getStarterPackImage(content);
425 |
426 | return (
427 |
428 |
397 |
409 |
410 |
434 |
487 |
488 | );
489 | }
490 |
491 | function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
492 | const rkey = getRkey(starterPack);
493 | return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`;
494 | }
495 |
496 | function getStarterPackHref(
497 | starterPack: AppBskyGraphDefs.StarterPackViewBasic,
498 | ) {
499 | const rkey = getRkey(starterPack);
500 | const handleOrDid = starterPack.creator.handle || starterPack.creator.did;
501 | return `/starter-pack/${handleOrDid}/${rkey}`;
502 | }
503 |
504 | function clamp(num: number, min: number, max: number) {
505 | return Math.max(min, Math.min(num, max));
506 | }
507 |
--------------------------------------------------------------------------------
435 |
468 |
476 | {content.record.description && (
477 |
469 |
475 | {content.record.name}
470 |471 | Starter pack by{" "} 472 | {content.creator.displayName || `@${content.creator.handle}`} 473 |
474 |478 | {content.record.description} 479 |
480 | )} 481 | {!!content.joinedAllTimeCount && content.joinedAllTimeCount > 50 && ( 482 |483 | {content.joinedAllTimeCount} users have joined! 484 |
485 | )} 486 |