ohtodev

Bash & dev tools explorers — interactive concept guides for bash, regex, grep, sed/awk, git, and GitLab CI with code samples and live demos. Built with Vite, React, TypeScript, and Tailwind CSS, deployable to GitHub Pages.

Quick start

npm install
npm run dev

Open http://localhost:5173. Use the home page to jump to any explorer.

Scripts

Command	Description
npm run dev	Start dev server (HMR)
npm run build	Production build → dist/
npm run preview	Preview production build
npm run deploy	Build and publish to GitHub Pages (gh-pages branch)

Deploy to GitHub Pages

The app uses a relative base (base: './') so the same build works at the site root or under a subpath (e.g. https://user.github.io/ohtodev/). The router detects the base path at load time.

1. Build and deploy
   Run npm run build, then deploy the dist/ folder (e.g. push to the gh-pages branch or use GitHub Actions).

2. One-command deploy (if gh-pages is installed):

   npm run deploy

   This builds and pushes dist/ to the gh-pages branch. In the repo: Settings → Pages → Source: Deploy from a branch → Branch: gh-pages, / (root).

3. 404 handling
   The build copies index.html to 404.html so direct URLs and refreshes on client-side routes work on GitHub Pages.

Tech stack

• Vite + React + TypeScript + Tailwind CSS + React Router
• Home and layout use Tailwind; explorer pages keep inline design tokens for their dense UIs
• Best practices: strict TypeScript, path alias @/, custom hooks and constants, React Router v7 future flag, deploy-friendly base path

Project structure

├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── tsconfig.json
├── src/
│   ├── main.tsx              # Entry, StrictMode
│   ├── App.tsx               # Router, routes, basename
│   ├── index.css              # Tailwind + base styles
│   ├── vite-env.d.ts
│   ├── constants/
│   │   ├── routes.ts          # ROUTE_PATHS for basename detection
│   │   └── explorers.ts       # EXPLORERS list + ExplorerItem type
│   ├── hooks/
│   │   └── useBasename.ts     # Router basename (root vs subpath)
│   ├── types/
│   │   └── index.ts           # Re-exports shared types
│   └── pages/
│       ├── Home.tsx
│       ├── BashExplorer.tsx
│       ├── RegexExplorer.tsx
│       ├── GrepExplorer.tsx
│       ├── GitExplorer.tsx
│       ├── GitlabCIExplorer.tsx
│       └── SedAwkExplorer.tsx

Routes: /, /bash, /regex, /grep, /git, /gitlab-ci, /sed-awk.