at を更新

at.md

@@ -39,3 +39,113 @@ https://at.syu.is/at/did:plc:uqzpqmrjnptsxezjx4xuh2mn/ai.syui.o.post/
 ただし、この場合、liveするたびにurlが変更されますので、配信時には新しいurlを作って共有する必要があります。
 
 [追記] frontpageの慣例から`ai.unravel.syui`というcollectionを使用していましたが、変更されたので`ai.syui.o`に変更しました。 [discussions#197](https://github.com/likeandscribe/frontpage/discussions/197)
+
+# frontpage
+
+[restreamer](https://github.com/datarhei/restreamer)のat(oauth)には`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;
+}
+```