chat を更新

chat.md

@@ -1,111 +1 @@
-
+d
-# frontpage
-
-[restreamer](https://github.com/datarhei/restreamer)のchat systemには`frontpage`を使います。
-
-
-[frontpage](https://github.com/likeandscribe/frontpage)は[atproto](https://github.com/bluesky-social/atproto)を使って投稿の制御を行います。主にpdsの`collection`から検索と`at://`を使います。
-
-[next.js](https://github.com/vercel/next.js)で書かれています。layoutは[tailwindcss](https://github.com/tailwindlabs/tailwindcss)です。
-
-
-<a href="https://git.syui.ai/ai/ue/raw/branch/main/img/wiki-frontpage-0001.png"><img src="https://git.syui.ai/ai/ue/raw/branch/main/img/wiki-frontpage-0001.png" width="500px"></a>
-
-## build & deploy
-
-https://git.syui.ai/ai/ue/src/branch/main/github/frontpage
-
-## tailwindcss
-
-htmlに省略形式でcssを記述します。`tailwind.config.ts`を見てください。
-
-```html
-{params.postAuthor === "syui.ai" && post.status === "live" && post.rkey === "3l7lj463zbo2m" && (
-    <div className="flex py-10 max-h-[700px] md:h-screen">
-         <iframe className="w-full hidden-scrollbar px-0 h-[300px] sm:h-[450px] md:px-0 md:h-[600px] md:px-8" title="stream" src="https://example.com">
-        </iframe>
-
-      <div className="hidden w-64 hidden-scrollbar md:block md:overflow-y-scroll
-      max-h-[600px]
-      [&::-webkit-scrollbar]:w-2
-      [&::-webkit-scrollbar-track]:bg-gray-100
-      [&::-webkit-scrollbar-thumb]:bg-gray-300
-      dark:[&::-webkit-scrollbar-track]:bg-neutral-700
-      dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
-      <LinkAlternateAtUri
-        authority={authorDid}
-        collection={PostCollection}
-        rkey={post.rkey}
-      />
-        <NewComment postRkey={post.rkey} postAuthorDid={authorDid} />
-      {comments.map((comment) => (
-        <Comment
-          key={comment.id}
-          comment={comment}
-          level={0}
-          postAuthorParam={params.postAuthor}
-          postRkey={post.rkey}
-        />
-      ))}
-      </div>
-    </div>
-)}
-```
-
-`@media`を制御する`sm`, `md`などは記述する順序を間違えると動きませんので注意。
-
-### はみ出す
-
-```html
-- w-full
-+ overflow-hidden whitespace-nowrap
-```
-
-## hugo
-
-[hugo](https://github.com/gohugoio/hugo)のcomment systemにも利用できます。
-
-```html
-{{ if .Param "comment" }}
-<div class="comment">
-	<p><a href="https://example.com/post/syui.ai/{{ .Params.comment }}" class="frontpage-button"> @comment </a></p>
-	<iframe class="frontpage" src="https://example.com/post/syui.ai/{{ .Params.comment }}" frameBorder="0" SRC=""></iframe>
-</div>
-{{ end }}
-```
-
-`post.md`に`comment`を追加します。
-
-```html
-+++
-title = "atprotoのfrontpageを触ってみる"
-date = "2024-10-26"
-[params]
-  comment = "3l7lprmoka22r"
-+++
-```
-
-```css
-iframe.frontpage {
-	width:100%;
-	height: 1000px;
-	pointer-events:none;
-}
-
-a.frontpage-button {
-	width:100%;
-	font-size: 15px;
-	background-color: #e80063;
-	/* background-color: #007fff; */
-	color: #fff;
-	border: 2px solid #fff;
-	padding: 10px 30px;
-	border-radius: 5px;
-	text-decoration: none;
-}
-
-a.frontpage-button:hover {
-	/* background-color: #0077ff; */
-	background-color: #e80073;
-}
-```