k-urtica/myblog

My personal blog made with Gatsby💚

Hi there 👋👋👋

I am a software engineer. I started my career as a backend engineer, but now I focus on frontend. I love creating web products. I have made several products in the past. And will continue to do so.

😍 Products

• 🧰 Web ToolBox is a collection of useful tools for developers that can be used in the browser.
• 📄 Diffiy is a powerful and secure text diff tool!
• 🖼 Superb Shot is a tool that transforms a dull screenshot into a stunning, eye-catching image.
• 🎨 Tints and Shades Generator can easily and intuitively generate tints and shades colors from input colors.
• 🗾 日本踏破図 (🌇Sunset) is a web service that allows you to easily share the prefectures of Japan that you have traversed.
• 🔍 QT Visualizer (🌇Sunset) is a web service that aggregates and visualizes over 600,000 articles from the technology sharing platform Qiita.
• 📰 Nuxt × News App is a portal site built with NuxtJS and uses the News API to collect news from around the world.
• 🐈️ k-urtica.github.io is my personal site built with Nuxt.
• 📒 K note is my blog built with Gatsby.

😃 Technology stack

Note: Of course there are more than these!

🧐 Stats

Some interesting statistics about my activities.

🥳 Contact

Want to contact me? Please use the DM on Twitter.

myblog's Issues

ダークモードを追加

ダークモードに対応する

現状機能なし

やること

• ダークモードデザインの実装
• ライト ⇔ ダークモード切替コンポーネントの追加

実装方法

ダークモード自体はtailwindcssがサポートしているのでそれを使う

https://tailwindcss.com/docs/dark-mode

記事シェア用のリンクを追加する

記事シェア用リンクの追加

ひとまず前ブログで実装していた以下のシェア用リンクを追加する

• Twitter（ツイート）
• Facebook（シェア）
• はてぶ
• Pocket

実装方法

前ブログの実装をそのまま流用できる想定だけどreact用の↓のライブラリを発見

https://github.com/nygardk/react-share

ライブラリの機能を調査してライブラリを使うか判断する

【継続的改善】ページ・コンポーネントのリファクタリング

コンポーネントのリファクタリングを行う

ページ、コンポーネント間で冗長な処理やよろしくない設計があるためリファクタリングを行う
（同じような記述、子コンポーネントが親を意識してしまっている等...）

初物技術のreactのコンポーネント設計、スタイルの適用についてベストプラクティスを調査して継続的に改善していく

スタイルについてはtailwindcss（twin.macro）もふまえてより良い実装について考慮が必要🤔

ページネーションの改善

ページネーションを改善する

現状は前のページ、次のページへのリンクしかないので、ページ番号リンクを持たせたページネーションへ改善する

※こういうの（Vuetifyのページネーション）
https://vuetifyjs.com/en/components/paginations/

実装方法

ページネーションを実現するReactのコンポーネントライブラリを使う↓
https://github.com/AdeleD/react-paginate

上記ライブラリを使う際に必要なpropsは今も取得できているのでスタイルを追加すれば実装できそう

記事「Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法」のリダイレクト時にクエリパラメータが消失する

• 記事Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法におきまして、この手法ですとリダイレクト時にクエリパラメータが消失してしまいます。

• myblog/content/2020/nuxt-trailing-slash/index.md

  Line 70 in 3245d22

  redirect(301, route.path + "/");

• 下記の記述にて、クエリパラメータを保持したままリダイレクト可能です。

     redirect(301, route.path + "/", route.query);