feat: create microcms-rich-parser npm library with modern blog styling and dark mode support

design/microcms-rich-editor-modern-parser.md

@@ -0,0 +1,17 @@
+# MicroCMS で返却される HTML 形式のレスポンスを現代風のブログの見た目になるようにレイアウトを編集するライブラリの作成
+
+## 作業概要
+
+- microcms で返却される HTML 形式のリッチエディタのレスポンスをパースするライブラリを作成する。
+- ライブラリ名は microcms-rich-parser とする。
+- デザインはダークモードでも見やすいようにする。
+- npm でインストールして組み込めるようにする（local でも可能）
+- npm でのインストール方法をドキュメントにまとめる。
+
+
+## 参考資料
+
+レスポンスで返される HTML は以下。
+
+```html
+<p>Twitter にかくと炎上しそうなネタでもあるので、割と時流のホットなコンテンツは最近 Bluesky に自分の意見やスタンスを書いていることが多い。</p><p>タイトルの通り WFH か RTO かという話はコロナ禍から時間が経って、欧米圏では一定の解答が出つつあり、国内でもある程度企業ごとの方針は固まってきていると思っていたけど、そういった先行してスタンスを取る企業に遅れて最近になってスタンスを変更する企業の話もまたポツポツ聞くようになってきた。</p><p>身近でもそういった話を聞いたので Bluesky にこういった一連の投稿をしてみた。</p><blockquote><p>RTO 云々はだいぶ落ち着いたと思ってたけどまだポツポツ話は聞くな。自分はもうRTOになって久しいし、出社も悪くないと思ってるし、なにより出社にこだわらない方がキャリアの選択肢広がってポジティブな側面もあるので、世間の RTOの風潮に対して思うところはないんだけど、まぁRTO かかった時に現場レベルであれこれ画策するのはまぁ無駄かなとは思う。RTO は会社のスタンスの表明であり、選択できるのは乗るか反るかの二択。 また、現場と経営では話してるプロトコルやそもそも見てるところが異なるので現場の意見を組むみたいなことはまずない。 なので納得いかなければ辞める他ない、という類のものなんだよね。</p></blockquote><p>[emahiro (@<a href="http://emahiro.bsky.social">emahiro.bsky.social</a>)](<a href="https://bsky.app/profile/emahiro.bsky.social/post/3l4bungcwtr2e">https://bsky.app/profile/emahiro.bsky.social/post/3l4bungcwtr2e</a>)</p><p>僕自身は現職が WFH -&gt; RTO に移行して１年以上経過した上で、出社も悪くはないなと思っている。やはりオフラインの持つ圧倒的なレイテンシの低さはオンラインでは代替できない。この「生身」感こそがプロダクト開発にいい影響があるということを否定することは今の自分にはできない。</p><p>一方で仕事においては上記のようなスタンスでいるが、プライベートに目を向けると自分の私生活において今最も大きなイシューである「育児」とRTOが食い合わせが悪いことも重々承知している。</p><blockquote><p>育児とRTOの相性の悪さもよく目にするし自分も当事者なので、わかると思うところも多いが、だからと言ってスタンスがブレることは多分ないので、音楽性の合うところに身を移す方が正直賢明だと思う。 あと思うに WFH にプライベートな生活をフリーライドさせるのは個人的にもどうかな？とは思うようになってきたので、やはり働けないと思うなら辞めるしかないと思う(繰り返し)</p></blockquote><p>[emahiro (@<a href="http://emahiro.bsky.social">emahiro.bsky.social</a>)](<a href="https://bsky.app/profile/emahiro.bsky.social/post/3l4bvhn4peu2u">https://bsky.app/profile/emahiro.bsky.social/post/3l4bvhn4peu2u</a>)</p><p>正直 WFH 派にも言い分はあるしそれは間違っておらず、一方で RTO にする理由もまぁわからなくもない、という感じを受けている。実際 RTO するまで RTO なんかありえんと思っていた側でもあったものの、やってみると便益も一定ある（その便益を享受するために何処かに負荷が偏っているのでそのケアは欠かせないが）</p><hr><p>ちょうどタイムリーに Amazon が RTO を週5にするというニュースが界隈をだいぶ賑やかにさせた。</p><p>[Update from Amazon CEO Andy Jassy on return-to-office plans and manager team ratio](<a href="https://www.aboutamazon.com/news/company-news/ceo-andy-jassy-latest-update-on-amazon-return-to-office-manager-team-ratio">https://www.aboutamazon.com/news/company-news/ceo-andy-jassy-latest-update-on-amazon-return-to-office-manager-team-ratio</a>)</p><p>これについてはこんなコメントをした。</p><blockquote><p>文化の維持という側面はあるにせよ、コロナ禍の雇い過ぎからのゆり戻しをまだ続けてる、というふうに見えないこともない。</p></blockquote><p>[emahiro (@<a href="http://emahiro.bsky.social">emahiro.bsky.social</a>)](<a href="https://bsky.app/profile/emahiro.bsky.social/post/3l4ehumw2xv2a">https://bsky.app/profile/emahiro.bsky.social/post/3l4ehumw2xv2a</a>)</p><p>欧米、特に北米のテック企業はコロナ特需で肥大化した従業員の削減をここ数年徹底して進めている。一時期 GAFA のレイオフの話題が国内でもあったが、GAFA はじめとした北米の大企業は未だにこのレイオフもしくは Work Force Adjustment を継続している。以下のようなタレコミもあったけど Amazon のこの動きはブログに書いてあるようなナラティブもあるのだろうけど、個人的には従業員の整理をしている印象が強い。</p><p>タレコミ投稿は以下。</p><p>&lt;<a href="https://x.com/johncodezzz/status/1836205682539786345?s=46&amp;t=6t3beFenTzsAglgkZj3OAg">https://x.com/johncodezzz/status/1836205682539786345?s=46&amp;t=6t3beFenTzsAglgkZj3OAg</a>&gt;</p><p>当たり前だが数万人という従業金を有する大企業が RTO すれば街に賑わいが戻るし、地方自治体も潤う。コロナ禍でほぼ WFH になったらサンフランシスコのベイエリアが荒廃したなんてニュースを見たことがあったけど、それがシアトルにも当てはまっていた、ということなんだろう。</p><p>僕個人としては RTO にするうえで出てくる「組織全体の生産性の向上」「人と交わることで生まれるクリエイティビティ」「組織文化の維持・強化」といった側面よりもこういう現実的な話をちゃんと伝えてもらったほうがいいように思う（この話を Amazon は公表していないが、状況証拠を並べると信憑性は十分に有り得る話なんじゃないかと思っている）</p><hr><p>話は少し逸れてしまったが、１個人として見ると WFH ほど良いものはないが、それは個人最適の話であって全体最適で見るとまた話は違ってくるのだろうと思う。</p><p>個人最適が全体最適にならないのは常なので、もし全体最適的な意思決定におて個人最適が脅かされ、それが嫌だというのなら、その環境を変えようとするより、自分自身の居場所を変えたほうがいいように思う。</p><p>特にプライベートにおける全体最適に対する負荷の閾値は個々人、家庭ごとに異なってくる。我が家の場合はたまたまちょっとだけ高いだけだと思っているし、プライベートを犠牲にしてまで仕事したいか、という一人ひとりの人生観にも関わってくるところでもあるので、自分を大切に生きるために最善を選択するべき。</p><p>それがたまたま「反る」ことになってもそれは仕方のない話だと割り切る方が良いように思う。</p><p>WFH/RTO の二元論については自分はそういう考えを持っている。</p><p></p>```

microcms-rich-parser/.npmignore

@@ -0,0 +1,8 @@
+src/
+tsconfig.json
+*.tsbuildinfo
+node_modules/
+.git/
+.gitignore
+README.md
+examples/

microcms-rich-parser/README.md

@@ -0,0 +1,245 @@
+# MicroCMS Rich Parser
+
+A TypeScript library to parse MicroCMS rich editor HTML responses into modern, styled blog layouts with dark mode support.
+
+## Features
+
+- 🎨 Modern blog-style layout with professional typography
+- 🌙 Dark mode support
+- 📱 Responsive design
+- 🔗 Enhanced link styling with hover effects
+- 💬 Styled blockquotes with visual indicators
+- ✨ Clean horizontal dividers
+- 🎯 TypeScript support
+
+## Installation
+
+### NPM
+
+```bash
+npm install microcms-rich-parser
+```
+
+### Local Installation
+
+```bash
+# Clone or download the library
+cd path/to/microcms-rich-parser
+npm install
+npm run build
+
+# In your project
+npm install path/to/microcms-rich-parser
+```
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { parseMicroCMSHTML } from 'microcms-rich-parser';
+
+const htmlContent = `
+<p>Twitter にかくと炎上しそうなネタでもあるので、割と時流のホットなコンテンツは最近 Bluesky に自分の意見やスタンスを書いていることが多い。</p>
+<blockquote><p>RTO 云々はだいぶ落ち着いたと思ってたけどまだポツポツ話は聞くな。</p></blockquote>
+<hr>
+<p>話は少し逸れてしまったが、１個人として見ると WFH ほど良いものはないが、それは個人最適の話であって全体最適で見るとまた話は違ってくるのだろうと思う。</p>
+`;
+
+const styledHTML = parseMicroCMSHTML(htmlContent);
+document.getElementById('content').innerHTML = styledHTML;
+```
+
+### With Dark Mode
+
+```typescript
+import { parseMicroCMSHTML } from 'microcms-rich-parser';
+
+const styledHTML = parseMicroCMSHTML(htmlContent, {
+  darkMode: true
+});
+```
+
+### Using the Class
+
+```typescript
+import { MicroCMSRichParser } from 'microcms-rich-parser';
+
+const parser = new MicroCMSRichParser({
+  darkMode: true,
+  className: 'my-custom-content'
+});
+
+const styledHTML = parser.parse(htmlContent);
+```
+
+## API
+
+### `parseMicroCMSHTML(htmlContent, options?)`
+
+Convenience function to quickly parse HTML content.
+
+- `htmlContent` (string): The HTML content from MicroCMS rich editor
+- `options` (ParseOptions, optional): Configuration options
+
+### `MicroCMSRichParser`
+
+Main parser class for more control.
+
+#### Constructor Options
+
+```typescript
+interface ParseOptions {
+  darkMode?: boolean;    // Enable dark mode styling (default: false)
+  className?: string;    // CSS class name for wrapper (default: 'microcms-rich-content')
+}
+```
+
+#### Methods
+
+- `parse(htmlContent: string): string` - Parse HTML and return styled HTML
+
+## Styling
+
+The library includes built-in CSS that provides:
+
+- **Typography**: Clean, readable font stack with proper line height
+- **Paragraphs**: Optimized spacing and font sizing
+- **Blockquotes**: Styled with left border, background, and quote marks
+- **Links**: Enhanced with hover effects and proper contrast
+- **Horizontal Rules**: Gradient-based dividers
+- **Dark Mode**: Comprehensive dark theme support
+- **Responsive**: Mobile-optimized layout
+
+### Custom Styling
+
+You can override the default styles by targeting the generated CSS classes:
+
+```css
+.microcms-rich-content {
+  /* Your custom styles */
+}
+
+.microcms-rich-content.dark-mode {
+  /* Your custom dark mode styles */
+}
+```
+
+## Browser Support
+
+- Modern browsers with ES2020 support
+- Node.js environments with jsdom
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Development mode
+npm run dev
+```
+
+## Publishing to NPM
+
+### 1. Prepare for Publishing
+
+```bash
+# Build the project
+npm run build
+
+# Test the build
+npm pack --dry-run
+```
+
+### 2. Set NPM Registry and Login
+
+```bash
+# Set registry to npmjs.com (if not already set)
+npm config set registry https://registry.npmjs.org/
+
+# Login to your NPM account
+npm login
+```
+
+### 3. Update Package Information
+
+Edit `package.json` to include your information:
+
+```json
+{
+  "name": "microcms-rich-parser",
+  "author": "Your Name <your.email@example.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/microcms-rich-parser.git"
+  },
+  "homepage": "https://github.com/yourusername/microcms-rich-parser#readme",
+  "bugs": {
+    "url": "https://github.com/yourusername/microcms-rich-parser/issues"
+  }
+}
+```
+
+### 4. Version Management
+
+```bash
+# For patch version (1.0.1)
+npm version patch
+
+# For minor version (1.1.0)
+npm version minor
+
+# For major version (2.0.0)
+npm version major
+```
+
+### 5. Publish to NPM
+
+```bash
+# Publish the package
+npm publish
+
+# For scoped packages (optional)
+npm publish --access public
+```
+
+### 6. Verify Publication
+
+```bash
+# Check if package is available
+npm view microcms-rich-parser
+
+# Install and test in another project
+npm install microcms-rich-parser
+```
+
+### 7. Update Package
+
+When making updates:
+
+```bash
+# Make your changes
+# Build the project
+npm run build
+
+# Update version
+npm version patch  # or minor/major
+
+# Publish update
+npm publish
+```
+
+### Notes
+
+- Ensure your package name is unique on NPM
+- Add a `.npmignore` file to exclude unnecessary files
+- Test your package locally before publishing
+- Consider using `npm pack` to preview what will be published
+
+## License
+
+MIT

microcms-rich-parser/dist/index.d.ts

@@ -0,0 +1,18 @@
+export interface ParseOptions {
+    darkMode?: boolean;
+    className?: string;
+}
+export declare class MicroCMSRichParser {
+    private options;
+    constructor(options?: ParseOptions);
+    parse(htmlContent: string): string;
+    private processElement;
+    private processParagraph;
+    private processBlockquote;
+    private processHorizontalRule;
+    private processLink;
+    private generateCSS;
+}
+export declare function parseMicroCMSHTML(htmlContent: string, options?: ParseOptions): string;
+export default MicroCMSRichParser;
+//# sourceMappingURL=index.d.ts.map