Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dc7290/microcms-richedit-processer

microCMSのリッチエディタから取得した値を加工したり、目次リストを作成します。
https://github.com/dc7290/microcms-richedit-processer

microcms typescript

Last synced: 20 days ago
JSON representation

microCMSのリッチエディタから取得した値を加工したり、目次リストを作成します。

Host: GitHub
URL: https://github.com/dc7290/microcms-richedit-processer
Owner: dc7290
License: mit
Created: 2021-06-29T11:52:18.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-09-27T18:17:10.000Z (about 2 months ago)
Last Synced: 2024-10-14T00:29:10.590Z (about 1 month ago)
Topics: microcms, typescript
Language: TypeScript
Homepage:
Size: 946 KB
Stars: 23
Watchers: 0
Forks: 1
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        # microcms-richedit-processer

[![npm version](https://img.shields.io/npm/v/microcms-richedit-processer)](https://www.npmjs.com/package/microcms-richedit-processer) [![license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/dc7290/microcms-richedit-processer/blob/master/LICENSE) [![downloads](https://img.shields.io/npm/dt/microcms-richedit-processer)](https://www.npmjs.com/package/microcms-richedit-processer)



microCMSのリッチエディタから取得できるHTMLデータを自動処理します。

# Feature

## HTML データの加工機能について

- img タグ

  - 遅延読み込み(現在、遅延読み込みライブラリの`lazysizes`のクラス名をサポート)

  - レスポンシブ画像のサポート(srcSet, sizes 属性によってウインドウ幅に合わせて最適な画像を配信する技術)

  - placeholder 画像の設定

  - imgix パラメータの追加

  - width, height 属性の自動設定

- iframe タグ

  - 遅延読み込み(現在、遅延読み込みライブラリの`lazysizes`のクラス名をサポート)

  - レスポンシブ対応

- pre タグ内の code タグ

  - シンタックスハイライトのためにクラス名の追加(現在、`highlight.js`をサポート)

- 共通

  - クラス名の追加

  - 任意の属性値の追加

## HTML データから別データの自動作成機能について

- 目次リストの作成

# Usage

```bash

npm i microcms-richedit-processer

# yarn add microcms-richedit-processer

```

Next.jsの場合

```typescript

import { GetStaticProps, NextPage } from "next";

import { createTableOfContents, processer } from "microcms-richedit-processer";

type Props = {

  body: string;

  toc: {

    id: string;

    text: string;

    name: string;

  }[];

};

export const getStaticProps: GetStaticProps = async () => {

  const { contents } = await fetch(

    "https://{サービスID}.microcms.io/api/v1/{エンドポイント}",

    {

      headers: {

        "X-API-KEY": "{APIキー}",

      },

    }

  ).then((res) => res.json());

  // contents.bodyにHTMLデータが取得できる想定です。

  return {

    props: {

      body: await processer(contents.body),

      // オプションを渡す場合

      // body: processer(contents.body, {}),

      toc: createTableOfContents(contents.body),

      // オプションを渡す場合

      // toc: createTableOfContents(contents.body, {}),

    },

  };

};

```

詳しい使い方はZennの記事に書いています！

https://zenn.dev/d_suke/articles/e18352797bbe00bdabb6