bluesky post

bluesky-post

블루스키 게시물과 메타 데이터를 표시하는 웹 구성 요소.

데모 | 맞춤형 템플릿 데모 | 추가 독서

예

일반 사용 예 :

 < script type =" module " src =" bluesky-post.js " > </ script >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

사용자 정의 템플릿 사용 예 :

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < blockquote data-key =" content " > </ blockquote >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

보다 복잡한 사용자 정의 템플릿을 사용하는 예 :

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < strong data-key =" username " > </ strong > on < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post > 

특징

이 웹 구성 요소는 다음을 수행 할 수 있습니다.

• 정기적 인 Bluesky Post 링크를 인용 된 Bluesky Post로 바꾸십시오.
• 포스트와 함께 포스트 메타 데이터를 표면, 예를 들어 회신 수, repost count, count
• data-key="name" 데이터 속성을 사용하여 페이지의 구성 요소의 모든 인스턴스에 대해 사용자 정의 템플릿을 사용하십시오.
• template 속성을 사용하여 특정 인스턴스에 맞춤 템플릿을 사용하십시오.
• data-key 속성 및 일반적인 JavaScript 키 참조 (예 : data-key="record.text" 사용하여 중첩 데이터 검색

설치

몇 가지 옵션이 있습니다 (이 중 하나를 선택하십시오).

1. NPM을 통해 설치하십시오 : npm install @daviddarnes/bluesky-post
2. GitHub에서 프로젝트로 수동으로 소스를 다운로드하십시오.
3. 이 단계를 건너 뛰고 제 3 자 CDN을 통해 직접 스크립트를 사용하십시오 (생산 사용에 권장되지 않음).

용법

프로젝트에 <script> 포함 시키십시오 (이 중 하나를 선택하십시오) :

 <!-- Host yourself -->
< script type =" module " src =" bluesky-post.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/bluesky-post.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

사용자 정의 템플릿을 사용합니다

구성 요소의 기본 템플릿은 다음과 같습니다.

 < figure >
  < blockquote data-key =" record.text " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " > @ < span data-key =" username " > </ span > </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" repostCount " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replyCount " > </ dd >
      < dt > Likes </ dt >
      < dd data-key =" likeCount " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

그러나 페이지의 구성 요소의 모든 인스턴스에 사용되는 bluesky-post-template 의 id 와 함께 <template> 요소를 사용하여 템플릿을 사용자 정의 할 수 있습니다. 다음은 Bluesky Post의 Vanity Metrics를 <dl> 로 노출시키는 예입니다.

 < template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
</ template >

특정 id 사용하여 template 속성을 사용하여 <template> 속성을 사용하여 같은 페이지의 다른 템플릿을 사용할 수도 있습니다.

 < template id =" custom-template " >
  < a data-key =" record.text, url " > </ a >
</ template >

< bluesky-post template =" custom-template " >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

data-key 데이터 속성을 사용하여 데이터가 적용됩니다. 이 속성의 값은 Bluesky Public Post API 응답 내 데이터 포인트에 해당해야합니다. 공식 블루스키 문서에는 여기에 상태 응답의 예가 있습니다.

<a> 및 <img> 요소의 경우 반환되는 문자열이 http 로 시작되면 각각 href 및 src 속성에 적용되는 경우 값이 컨텐츠에 적용되지 않습니다.

사용자 정의 템플릿 데모와 참조 소스 코드를 확인하십시오.

신용 거래

다음 사람들에게 감사합니다.

• 이 웹 구성 요소 Repo 템플릿에 영감을 주신 Zach Leatherman