TECH-STACK

tech-stack

Blog

共通で利用している開発環境とs-hirano-ist’s blogの構成。

flowchart LR

subgraph Vercel
  Astro["Astro (Vercel Edge Networks)"]-->VSI{{"Vercel Speed Insights"}}
end
subgraph Google
  GAL{{"Google Analytics"}}
  GSC{{"Google Search Console"}}
  PSI{{"Google PageSpeed Insights"}}
end
subgraph GMO
  onamae{{"お名前.com"}}
end
subgraph GitHub
  GH{{"GitHub"}}-->GA
  RV{{"Renovate"}}-->GA
  DA{{"Dependabot Alerts"}}-->GA
  GC{{"GitHub Copilot"}}
  subgraph GA["GitHub actions"]
    Prettier
    ESLint
    Styleint
    secretlint
    markdownlint-cli2
    Playwright["Playwright test"]
    Nu["Nu Html Checker"]
    lighthouse["Lighthouse CI"]
  end
end
subgraph PC
  subgraph VSCode
    Huskey
    Git
    JS["Node.js 20 + pnpm"]
    Python["Python 3.12"]
    Docker
  end
end

VSCode-->|commit|GH
VSCode-->GC
Astro-->GAL
Astro-->GSC
GMO-->Astro
GA-->Astro
User((User))-->GMO

Experimental

Deployment of frontend-experimental, rss-dumper, and rss-dumper-graphql

flowchart BT

subgraph Vercel
  subgraph Next["frontend-experimental (Next.js with Vercel Edge Networks)"]
    Prisma
    Auth.js
    Apollo["Yoga/Apollo client"]
  end
  blob[("Vercel Blob")]
  vPSQL["PostgreSQL"]
end
Apollo-->vPSQL
Prisma-->vPSQL

Next-->GAL
Next-->blob
Next-->|with openapi2aspida or untyped fetch|rss-dumper
Next-->|with GraphQL codegen or untyped fetch|rss-dumper-graphql
Auth.js-->|restrict user access|OAuth

subgraph Render
  subgraph rss-dumper["rss-dumper (Express)"]
    rPrisma["Prisma"]
    Passport
    SW["Swagger UI + tsoa"]
  end
  subgraph rss-dumper-graphql["rss-dumper-graphql (Apollo Server)"]
    Nexus
    gPrisma["Prisma"]
    GSH["GraphQL Shield + GraphQL middleware"]
  end
end

subgraph Supabase
  psql1["PostgreSQL 1"]
  psql2["PostgreSQL 2"]
end
rPrisma-->psql1
gPrisma-->psql2

User((User))-->GMO
subgraph GMO
  onamae{{"お名前.com"}}
end

GMO-->Next

subgraph GitHub
  GH{{"GitHub"}}-->|on code push|GA
  RV{{"Renovate"}}-->|weekly schedule|GA
  DA{{"Dependabot Alerts"}}-->|weekly schedule|GA
  subgraph GA["GitHub actions"]
    formatter
    linter
    test
  end
  VercelBot{{"Vercel Bot"}}
  OAuth{{"OAuth"}}
end
GA-->VercelBot

VercelBot-->|deploy|Next
VercelBot-->|deploy|rss-dumper
VercelBot-->|deploy|rss-dumper-graphql

subgraph Google
  GAL{{"Google Analytics"}}
end

Application

personal deployment tech stack

Amazon Web Service

personal deployment tech stack

Infrastructure

personal deployment tech stack
Github stars of s-hirano-ist
glances

Glances an Eye on your system. A top/htop alternative for GNU/Linux, BSD, Mac OS and Windows operating systems.

DOMPurify

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

isomorphic-dompurify

Use DOMPurify on server and client in the same way

html-react-parser

📝 HTML to React parser.

ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

release-please

generate release PRs based on the conventionalcommits.org spec

cli

GitHub’s official command line tool

tailwindcss-animated

Extended animation utilities for Tailwind CSS

theia

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

animata

Bring your site to life with easy to use animation & interaction code. Copy. Paste. Animate.

tsx

⚡️ TypeScript Execute | The easiest way to run TypeScript in Node.js

vaul

An unstyled drawer component for React.

diodon

Aiming to be the best integrated clipboard manager for the Unity desktop

mise

dev tools, env vars, task runner

next-view-transitions

Use CSS View Transitions API in Next.js App Router.

act

Run your GitHub Actions locally 🚀

react-dropzone

Simple HTML5 drag-drop zone with React.js.

biome

A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.

nvm-windows

A node.js version management utility for Windows. Ironically written in Go.

cz-cli

The commitizen command line utility. #BlackLivesMatter

mermarpidsome

Mermaid integration with Marp, with Fontawesome icons!

ecschedule

ecschedule is a tool to manage ECS Scheduled Tasks.

auth0-deploy-cli

The Auth0 Deploy CLI is a tool that helps you manage your Auth0 tenant configuration. It integrates into your development workflows as a standalone CLI or as a node module.

material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

language-tools

Language tools for Astro

rehype

HTML processor powered by plugins part of the @unifiedjs collective

react

The library for web and native user interfaces.

apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.

alertmanager

Prometheus Alertmanager

next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

markdownlint-cli2

A fast, flexible, configuration-based command-line interface for linting Markdown/CommonMark files with the markdownlint library

mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

pagefind

Static low-bandwidth search at scale

eslint-plugin-import

ESLint plugin with rules that help validate proper imports.

recheck

The trustworthy ReDoS checker

secretlint

Pluggable linting tool to prevent committing credential.

prettier

Prettier is an opinionated code formatter.

better-typescript-lib

Better TypeScript standard library

rimraf

A `rm -rf` util for nodejs

shields-with-icon

Enjoy https://shields.io

standard-version

:trophy: Automate versioning and CHANGELOG generation, with semver.org and conventionalcommits.org

git-cz

Semantic Git commits

vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.

openapi-generator

OpenAPI Generator allows generation of API client libraries (SDK generation), server stubs, documentation and configuration automatically given an OpenAPI Spec (v2, v3)

express-openapi-validator

🦋 Auto-validates api requests, responses, and securities using ExpressJS and an OpenAPI 3.x specification

openapi2aspida

Convert OpenAPI 3.0 or Swagger 2.0 definitions into aspida

rehype-autolink-headings

plugin to add links to headings in HTML

taos

A simple and small (600 bytes) library to help animate elements while scrolling using responsive Tailwind CSS JIT utility classes.

theme-change

Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage

github-readme-stats

:zap: Dynamically generated stats for your github readmes

daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library

concurrently

Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better.

node-csv

Full featured CSV parser with simple api and tested against large datasets.

markdownlint

A Node.js style checker and lint tool for Markdown/CommonMark files.

pyenv

Simple Python version management

apollo-client-nextjs

Apollo Client support for the Next.js App Router

apollo-server

🌍  Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.

openapi-typescript

Generate TypeScript types from OpenAPI 3 specs

ts-node

TypeScript execution and REPL for node.js

github

A higher-level wrapper around the Github API. Intended for the browser.

astro

The web framework for content-driven websites. ⭐️ Star to support our work!

feTS

🗹 TypeScript HTTP Framework focusing on e2e type-safety, easy setup, performance & great developer experience

PyGithub

Typed interactions with the GitHub API v3

export-stars

Export (your) GitHub stars to a CSV file

growi

:anchor: GROWI - Team collaboration software using markdown

lenis

How smooth scroll should be

lighthouse-ci

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

lighthouse-ci-action

Audit URLs using Lighthouse and test performance with Lighthouse CI.

shuwa-frontend-book-app

秀和システム「フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装 」書籍内で利用するサンプルアプリケーションです。

license

Command line license text generator.

gibo

🤫 Easy access to gitignore boilerplates

astro-eslint-parser

Astro component parser for ESLint

PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent

type-graphql

Create GraphQL schema and resolvers with TypeScript, using classes and decorators!

graphql-yoga

🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.

apollo-server-integration-next

An Apollo Server integration for use with Next.js

examples-next-prisma-starter

🚀 tRPC starter repo with E2E-testing

innovationgraph

GitHub Innovation Graph

action-setup

Install pnpm package manager

create-t3-app

The best way to start a full-stack, typesafe Next.js app

ts-rest

RPC-like client, contract, and server implementation for a pure REST API

trpc-openapi

OpenAPI support for tRPC 🧩

aspida

TypeScript friendly HTTP client wrapper for the browser and node.js.

tsoa

Build OpenAPI-compliant REST APIs using TypeScript and Node

next-auth

Authentication for the Web.

Fuse

Lightweight fuzzy-search, in JavaScript

sanitize-html

Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes on a per-element basis. Built on htmlparser2 for speed and tolerance

adminjs

AdminJS is an admin panel for apps written in node.js

express-validator

An express.js middleware for validator.js.

operating-system-in-1000-lines

Writing an OS in 1,000 lines.

jsdom

A JavaScript implementation of various web standards, for use with Node.js

graphql-mesh

🕸️ GraphQL Federation Framework for any API services such as REST, OpenAPI, Swagger, SOAP, gRPC and more...

node-express-boilerplate

A boilerplate for building production-ready RESTful APIs using Node.js, Express, and Mongoose

express-rest-boilerplate

⌛️ Express starter for building RESTful APIs

prisma-examples

🚀 Ready-to-run Prisma example projects

sharp

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

resvg-js

A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.

encoding.js

Convert and detect character encoding in JavaScript

axios

Promise based HTTP client for the browser and node.js

jesth

Human-readable versatile data format

phpdotenv

Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.

plugin-php

Prettier PHP Plugin

panda

🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

latex-docker

Docker image for build tex source

nitrogql

GraphQL + TypeScript toolchain

validator

Nu Html Checker – Helps you catch problems in your HTML/CSS/SVG

mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

prettier-plugin-astro-organize-imports

A Prettier plugin for formatting imports in Astro files

maplibregljs-turf-starter

Start Turf.js easily.[Turf.js, MapLibre GL JS, Vite]

system-design-primer

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Win10_BrightnessSlider

this app puts a Monitor Brightness icon on Taskbar Tray. for win 7, 8, 10

astro-paper

A minimal, accessible and SEO-friendly Astro blog theme

extract-bookmarks

Exports and extracts bookmarks from Windows browsers into a folder that can be easily archived by launchers like Windows Search, Cortana, Launchy, Wox, Everything and PowerToys Run.

PowerToys

Windows system utilities to maximize productivity

hono

Web framework built on Web Standards

van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.

Wox.Plugin.WindowSwitcher

switch window in windows and a wox python plugin

hadolint

Dockerfile linter, validate inline bash, written in Haskell

Wox

A cross-platform launcher that simply works

chrome-bookmarks-alfred-workflow

Chrome/Canary/Chromium/Microsoft Edge bookmarks search workflow for Alfred

WiPiCap

WiPiCap: DIg into Wi-Fi Beamforming Report

blog-template

Next.js + markdown Blog Template

SwiftLint

A tool to enforce Swift style and conventions.

docker-mailserver

Production-ready fullstack but simple mail server (SMTP, IMAP, LDAP, Antispam, Antivirus, etc.) running inside a container.

homebrew-rmtree

Remove a formula and its unused dependencies