this repo has no description

chore: updated comments

authored by stevedylan.dev and committed by tangled.org 43133da2 9c1c78f8

+112 -15
+111 -15
docs/docs/pages/comments.mdx
··· 1 1 # Comments 2 2 3 - Sequoia has a small UI trick up its sleve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow: 3 + Sequoia has a small UI trick up its sleeve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow: 4 4 5 - 1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`. 6 - 2. When you run `sequoia pubish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post. 7 - 3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component. 5 + 1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`. 6 + 2. When you run `sequoia publish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post. 7 + 3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component. 8 8 9 9 ## Setup 10 10 ··· 14 14 sequoia add sequoia-comments 15 15 ``` 16 16 17 - Then in your HTML or blog post template, import the component with a script tag or module import. 17 + The web component will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies. 18 18 19 - ```html 19 + ::::tip 20 + For more information on the `<link>` tags, check out the [verification guide](/verifying) 21 + :::: 22 + 23 + ## Usage 24 + 25 + Since `sequoia-comments` is a standard Web Component, it works with any framework. Choose your setup below: 26 + 27 + :::code-group 28 + 29 + ```html [HTML] 20 30 <body> 21 31 <h1>Blog Post Title</h1> 22 32 <!--Content--> 23 33 <h2>Comments</h2> 24 - 25 - <sequoia-comments></sequoia-comments> // [!code focus] 26 - <script type="module" src="./src/components/sequoia-comments.js"></script> // [!code focus] 27 - 34 + 35 + <sequoia-comments></sequoia-comments> 36 + <script type="module" src="./src/components/sequoia-comments.js"></script> 28 37 </body> 29 - </html> 38 + ``` 39 + 40 + ```tsx [React] 41 + // Import the component (registers the custom element) 42 + import './components/sequoia-comments.js'; 43 + 44 + function BlogPost() { 45 + return ( 46 + <article> 47 + <h1>Blog Post Title</h1> 48 + {/* Content */} 49 + <h2>Comments</h2> 50 + <sequoia-comments /> 51 + </article> 52 + ); 53 + } 30 54 ``` 31 55 32 - The web components will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies. 56 + ```vue [Vue] 57 + <script setup> 58 + import './components/sequoia-comments.js'; 59 + </script> 33 60 34 - ::::tip 35 - For more information on the `<link>` tags, check out the [verification guide](/verifying) 36 - :::: 61 + <template> 62 + <article> 63 + <h1>Blog Post Title</h1> 64 + <!-- Content --> 65 + <h2>Comments</h2> 66 + <sequoia-comments /> 67 + </article> 68 + </template> 69 + ``` 70 + 71 + ```svelte [Svelte] 72 + <script> 73 + import './components/sequoia-comments.js'; 74 + </script> 75 + 76 + <article> 77 + <h1>Blog Post Title</h1> 78 + <!-- Content --> 79 + <h2>Comments</h2> 80 + <sequoia-comments /> 81 + </article> 82 + ``` 83 + 84 + ```astro [Astro] 85 + <article> 86 + <h1>Blog Post Title</h1> 87 + <!-- Content --> 88 + <h2>Comments</h2> 89 + <sequoia-comments /> 90 + <script> 91 + import './components/sequoia-comments.js'; 92 + </script> 93 + </article> 94 + ``` 95 + 96 + ::: 97 + 98 + ### TypeScript Support 99 + 100 + If you're using TypeScript with React, add this type declaration to avoid JSX errors: 101 + 102 + ```ts [custom-elements.d.ts] 103 + declare namespace JSX { 104 + interface IntrinsicElements { 105 + 'sequoia-comments': React.DetailedHTMLProps< 106 + React.HTMLAttributes<HTMLElement> & { 107 + 'document-uri'?: string; 108 + depth?: string | number; 109 + }, 110 + HTMLElement 111 + >; 112 + } 113 + } 114 + ``` 115 + 116 + ### Vue Configuration 117 + 118 + For Vue, you may need to configure the compiler to recognize custom elements: 119 + 120 + ```ts [vite.config.ts] 121 + export default defineConfig({ 122 + plugins: [ 123 + vue({ 124 + template: { 125 + compilerOptions: { 126 + isCustomElement: (tag) => tag === 'sequoia-comments' 127 + } 128 + } 129 + }) 130 + ] 131 + }); 132 + ``` 37 133 38 134 ## Configuration 39 135
+1
docs/vocs.config.ts
··· 34 34 items: [ 35 35 { text: "Setup", link: "/setup" }, 36 36 { text: "Publishing", link: "/publishing" }, 37 + { text: "Comments", link: "/comments" }, 37 38 { text: "Verifying", link: "/verifying" }, 38 39 { text: "Workflows", link: "/workflows" }, 39 40 ],