prismic開発メモ
Teruhisa - T6ADEVコンテンツの種類にSingle Typeがある。サイト内の文章を全てprismicに押し込めるのは魅力的かも。
Teruhisa - T6ADEV初Repeatable type操作。ドキュメント読まずなんとなく触ってみる。
画像とか色々組み込みたい気持ちを抑えてひとまず少ない項目で。
Add a new tabとあるがよくわからないままSave
Teruhisa - T6ADEVCustom Types作ったらあとはドキュメント書くだけ。簡単。
Teruhisa - T6ADEVNextjsで使うのでここ見てく。
Sliceの機能などは使わずシンプルにコンテンツを引っ張ってきて表示するのを目指す。（Slice使うつもりはそもそもなかったので）
Teruhisa - T6ADEVSliceが目玉らしい？ので推したいんだろうけど。リッチテキストとかゴリゴリ使う場合は確かに便利かも。
No Codeベースで作りたいならいいかも。
コーディングベースだと色々（特にスタイル）いじりたいので扱いが難しそう。特にデザインをライブラリに頼ってる場合は特に。
Teruhisa - T6ADEVシンプルに使う分には、クエリーは簡単そう。
Teruhisa - T6ADEVtypeごとの内容をどう扱えばいいかのドキュメント。
Teruhisa - T6ADEVRichText.asText()でプレーンテキストを得られる。
というか、NextよりまずReactの方を先に見るべきだな。
Teruhisa - T6ADEVリッチテキストをカスタムコンポーネントで扱いたい時はこう。
Teruhisa - T6ADEVうん、Reactに関することはこっちのドキュメント見るべき。
Teruhisa - T6ADEV@prismicio/react
と
prismic-reactjs
は同じものだった。
ドキュメントが追いついてないっぽい。
Teruhisa - T6ADEVということで
$ npm install @prismicio/react @prismicio/client
てっきりシークレットなアクセストークンありきなものかと思ったら。
プライベートにしたいならクライアント側でアクセストークン露出したらあかんやん。なんかガイドが不親切なきが？（詳しく読んでない）
Teruhisa - T6ADEV@prismicio/clientのv5とv6でAPIがまぁまぁ違う。
Teruhisa - T6ADEVNextjsのチュートリアルは古いので参考程度に見て、あとはライブラリ自体の最新版のガイドを見るべし。
Teruhisa - T6ADEVこれでlogに出してみる
getByTypeで出してみようとしたけど1つでも記事をpublishしてないとエラーになった。
Teruhisa - T6ADEVog:titleはサポートされてるけどdescriptionが中途半端。
Teruhisa - T6ADEVRich textは何もしないとピュアなhtmlで表現される。
カスタマイズしたい場合は、こうできる。
<PrismicRichText
field={document.data.myRichTextField}
components={{
heading1: ({ children }) => <Heading>{children}</Heading>,
paragraph: ({ children }) => <p className="paragraph">{children}</p>,
}}
/>
PrismicProviderで一括して変更できるのでこっちが便利か。
const PrismicCustomProvider = ({ children: mainchildren }) => (
<PrismicProvider
richTextComponents={{
paragraph: ({ children }) => <Text>{children}</Text>,
hyperlink: ({ node, children }) => (
<ExternalLink link={node.data.url}>{children}</ExternalLink>
),
}}
>
{mainchildren}
</PrismicProvider>
);
Teruhisa - T6ADEVこっちに書けばよかったか。
Teruhisa - T6ADEVpublish前の記事をローカルだけでいいから見たいなぁ。
preview modeはなんだか用途にあわなさそう。
Teruhisa - T6ADEVpublish前（unpublish）、archivedな物を引っ張ってくるapiはなさそう。
tagsで運用するか・・・
Teruhisa - T6ADEVサーバーサイドで扱うならこうできる
export const getStaticProps = async () => {
const rawContents = await client.getAllByType('...type...');
const contents = rawContents
.filter(({ tags }) => !tags.some((tag) => tag === 'unpublished')) // productionではこうしといて、ローカル開発するときはコメントアウトすればよい
.map((raw) => raw);
return {
props: {
contents,
},
};
};
試したけどName of the Webhookちゃうやん。Type nameやん。まぁいいけど。
type : test-trigger | api-update
masksってのもある。
新規でドキュメントpublishしたらmasks.additionがあるのを目撃。その後出てこない。
Teruhisa - T6ADEVうん、とりあえず細かな情報は得られなさそうだからdocument idで引っ張ってみるしかなさそう。