Merge pull request #129 from nash1111/blog-post-part1-deps-less-ui

feat: add blog post

app/lib/posts.ts

@@ -11,6 +11,7 @@ import * as postOouiPart1 from "~/routes/blog.ooui_part1.mdx";
 import * as postGhExtensionPart1 from "~/routes/blog.ghextension_part1.mdx";
 import * as postStopTooMuchReview from "~/routes/blog.stoptoomuchreview.mdx";
 import * as postOouiPart2 from "~/routes/blog.ooui_part2.mdx";
+import * as depsLessUiPart1 from "~/routes/blog.depslessui_part1.mdx";
 
 export const posts = [
   { path: "/blog/nexttoremix", data: postFirst },
@@ -26,6 +27,7 @@ export const posts = [
   { path: "/blog/ghextension_part1", data: postGhExtensionPart1 },
   { path: "/blog/stoptoomuchreview", data: postStopTooMuchReview },
   { path: "/blog/ooui_part2", data: postOouiPart2 },
+  { path: "/blog/depslessui_part1", data: depsLessUiPart1 },
 ];
 export function getPostDataByPath(path: string) {
   const post = posts.find((post) => post.path === path);

app/routes/blog.depslessui_part1.mdx

@@ -0,0 +1,44 @@
+---
+title: UIライブラリ作り始めました
+description: UIライブラリ作り始めました
+published: 2024-08-29
+tags: ["Design", "Frontend"]
+thumbnail: /blogthumbnails/17.jpg
+---
+
+## 作っているもの
+[deps-less-ui](https://github.com/nash1111/deps-less-ui)  
+[storybook](https://nash1111.github.io/deps-less-ui)
+
+## 特徴
+- 依存関係がない  
+参照 [package.json](https://github.com/nash1111/deps-less-ui/blob/master/package.json)
+
+
+## 方針
+- 依存関係がない状態を保つ
+  - storybookが壊れた時に対処したくないため
+  - CSSの実装力を高めるため
+- 個人のプロジェクトで必要となったコンポーネントだけを実装する
+
+## 直近のTODO
+- chromatic導入
+- アルファリリースに対応する
+  - 現在はmasterがリリース可能なら常に自動リリースする
+- BlogCardを並べる用のコンポーネント
+- BlogCardとは別に、EnhancedBlogCardコンポーネントを作る
+  - 現在のBlogCardは、全体をLink要素で包んでおり、例えばタグなどだけをクリックしたい場合に対応できていない
+  - これに対応するために、コンポーネントを受け取るコンポーネントとする
+
+## 動機
+- 新規で作るには、どうせなら自分の好みのUIにしたいため
+- Storybookを使ってみたかったため
+- shadcn/uiに頼り切りになってしまい、CSSの実装力が落ちていっているのを体感しているため
+- 一つのプロダクトに一つはUIライブラリはあるべきと思い始めたため
+  - UIライブラリが存在しない場合
+    - フロントの実装にコストが生じてしまい、「せっかく実装したから...」というサンクコストも発生してしまう
+    - サンクコストに囚われて、プロダクトの価値について考える時間が奪われてしまう可能性がある
+    - デザインの統一感がなくなってしまう
+
+## 現状の使いみち
+- とりあえず、BlogCardを生やしてshadcn/uiのカードを置き換えました

public/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://nash1111rgba.com</id>
     <title>nash1111 techblog</title>
-    <updated>2024-08-28T10:12:57.928Z</updated>
+    <updated>2024-08-29T10:09:39.785Z</updated>
     <generator>Feed for Node.js</generator>
     <author>
         <name>nash1111</name>
@@ -13,6 +13,20 @@
     <logo>https://nash1111rgba.com/default_ogp.png</logo>
     <icon>https://nash1111rgba.com/favicon.ico</icon>
     <rights>All rights reserved 2023, nash1111</rights>
+    <entry>
+        <title type="html"><![CDATA[UIライブラリ作り始めました]]></title>
+        <id>https://nash1111rgba.com/blog/depslessui_part1</id>
+        <link href="https://nash1111rgba.com/blog/depslessui_part1"/>
+        <updated>2024-08-29T00:00:00.000Z</updated>
+        <summary type="html"><![CDATA[UIライブラリ作り始めました]]></summary>
+        <content type="html"><![CDATA[<p>Design</p><p>Frontend</p>]]></content>
+        <author>
+            <name>nash1111</name>
+            <uri>https://nash1111rgba.com/nash1111</uri>
+        </author>
+        <category label="Design"/>
+        <category label="Frontend"/>
+    </entry>
     <entry>
         <title type="html"><![CDATA[このブログのレポジトリにpr-agent入れてみました]]></title>
         <id>https://nash1111rgba.com/blog/pragent</id>

public/feed.json

@@ -9,6 +9,22 @@
         "name": "nash1111"
     },
     "items": [
+        {
+            "id": "https://nash1111rgba.com/blog/depslessui_part1",
+            "content_html": "<p>Design</p><p>Frontend</p>",
+            "url": "https://nash1111rgba.com/blog/depslessui_part1",
+            "title": "UIライブラリ作り始めました",
+            "summary": "UIライブラリ作り始めました",
+            "date_modified": "2024-08-29T00:00:00.000Z",
+            "author": {
+                "name": "nash1111",
+                "url": "https://nash1111rgba.com/nash1111"
+            },
+            "tags": [
+                "Design",
+                "Frontend"
+            ]
+        },
         {
             "id": "https://nash1111rgba.com/blog/pragent",
             "content_html": "<p>AI</p><p>GitHubActions</p>",

public/lastUpdated.ts

@@ -1 +1 @@
-export const lastUpdated = "2024-08-29T08:07:38";
+export const lastUpdated = "2024-08-29T10:10:46";

public/rss.xml

@@ -4,7 +4,7 @@
         <title>nash1111 techblog</title>
         <link>https://nash1111rgba.com</link>
         <description>techblog, about Web Development</description>
-        <lastBuildDate>Wed, 28 Aug 2024 10:12:57 GMT</lastBuildDate>
+        <lastBuildDate>Thu, 29 Aug 2024 10:09:39 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>Feed for Node.js</generator>
         <language>jp</language>
@@ -14,6 +14,16 @@
             <link>https://nash1111rgba.com</link>
         </image>
         <copyright>All rights reserved 2023, nash1111</copyright>
+        <item>
+            <title><![CDATA[UIライブラリ作り始めました]]></title>
+            <link>https://nash1111rgba.com/blog/depslessui_part1</link>
+            <guid>https://nash1111rgba.com/blog/depslessui_part1</guid>
+            <pubDate>Thu, 29 Aug 2024 00:00:00 GMT</pubDate>
+            <description><![CDATA[UIライブラリ作り始めました]]></description>
+            <content:encoded><![CDATA[<p>Design</p><p>Frontend</p>]]></content:encoded>
+            <category>Design</category>
+            <category>Frontend</category>
+        </item>
         <item>
             <title><![CDATA[このブログのレポジトリにpr-agent入れてみました]]></title>
             <link>https://nash1111rgba.com/blog/pragent</link>