Update containerization and documentation

Author: alinnert

Dockerfile

@@ -1,9 +1,26 @@
-FROM node:14
+FROM node:lts-alpine AS build
+WORKDIR /app
 COPY package.json .
 COPY package-lock.json .
 RUN npm ci
 COPY . .
 RUN npm run build
 
-FROM nginx:1.19-alpine
-COPY --from=0 ./build /usr/share/nginx/html
+FROM nginx:1.27.2-alpine AS prod
+COPY --from=build /app/dist /usr/share/nginx/html
+
+FROM node:lts AS dev
+ARG ls_improvement=false
+ARG rm_cp_mv_interactive=false
+ARG warp=false
+WORKDIR /app
+EXPOSE 5173
+RUN if [ "$ls_improvement" = "true" ]; then \
+  sed -i '/^# export LS_OPTIONS=\|^# alias ls=\|^# alias ll=\|^# alias l=/s/^# //g' ~/.bashrc; \
+fi
+RUN if [ "$rm_cp_mv_interactive" = "true" ]; then \
+  sed -i '/^# alias rm=\|^#alias cp=\|^# alias mv=/s/^# //g' ~/.bashrc; \
+fi
+RUN if [ "$warp" = "true" ]; then \
+  echo "printf '\eP\$f{\"hook\": \"SourcedRcFileForWarp\", \"value\": { \"shell\": \"bash\" }}\x9c'" >> ~/.bashrc; \
+fi

README.md

@@ -1,60 +1,112 @@
-# <WebdevHome />
+# WebdevHome
 
-![Build and deploy website](https://github.com/webdevhome/webdevhome.github.io/workflows/Build%20and%20deploy%20website/badge.svg)
+This is a collection of links I, as a web developer, use very frequently. Maybe you will find them useful, too.
 
-[webdevhome.github.io](https://webdevhome.github.io)
+[Open WebdevHome](https://webdevhome.github.io)
 
-This is a collection of links I, as a web developer, use very frequently. Maybe you will find them useful, too.
+## How to use
 
-## Credits
+### Search links
 
-[TypeScript](https://github.com/microsoft/TypeScript)
-• [React](https://github.com/facebook/react)
-• [farzher/fuzzysort](https://github.com/farzher/fuzzysort)
-• [TailwindCSS](https://tailwindcss.com/)
-• [Simple Icons](https://github.com/simple-icons/simple-icons)
-• [Material Design Icons](https://github.com/Templarian/MaterialDesign)
+By just typing in the name of a website the links get filtered automatically.
 
-## Development
+E.g. typing `gh` » `Return` opens GitHub.
 
-To start WebdevHome locally run:
+### Search on other websites
 
-```shell
-npm ci
-```
+By clicking the magnifier icon next to a link, or by pressing `Tab` while on the search page you can enter a search term
+that gets sent to that website.
+
+E.g. typing `npm` » `Tab` » `react` » `Return` starts a search for "react" on npm.com.
+
+### Link info
+
+Hover over a link and a tooltip will appear with more details about the linked website.
+
+### Customize links
+
+By clicking on "Options" and then "Customize links" you can hide some links that you don't want to see or use less
+frequently.
+
+You can still access them by clicking "Show x hidden links" or by using the search. Hidden links will be sorted to the
+bottom while using the search.
+
+**Caveat:** If you hide all links inside a group the group is hidden entirely. So, there's no "Show x hidden links"
+button. You can still find them in the search though.
+
+### Theme
+
+You can choose between "Light", "Dark", and "System". The "System" theme will apply the light or dark theme depending on
+your operating system or browser settings.
 
-and then:
+## Run development
+
+### Using Node.js
 
 ```shell
+# Install dependencies
+npm ci
+
+# Start dev server
 npm run dev
 ```
 
-This starts a watcher that builds the project every time you make some changes. Also, the local version of your app (running on localhost:3000) gets opened in your default browser automatically.
+The app is now running on http://localhost:5173.
+
+End the dev server by pressing `[Ctrl]` + `[C]` in your terminal.
+
+### Using Docker
 
-End the watcher script by pressing `[Ctrl]` + `[C]` in your terminal.
+```shell
+# Build image
+docker build . --target dev --tag webdevhome-dev --build-arg warp=true --build-arg ls_improvement=true --build-arg rm_cp_mv_interactive=true
 
-## Run in a Docker environment
+# Create and run container
+docker run --name webdevhome-dev --publish 5173:5173 --detach --tty webdevhome-dev
+```
 
-If you want to run this app in your own Docker environment run the following commands from inside the project root directory:
+### Using Docker compose
 
 ```shell
-docker-compose build
+docker compose up --build --detach --remove-orphans dev
 ```
 
-and then:
+### Build args
+
+| Arg                  | Values          | Default | Description                                                                     |
+|:---------------------|:----------------|:--------|:--------------------------------------------------------------------------------|
+| ls_improvement       | `true`, `false` | `false` | Enable colors for `ls` command and enable aliases `ls`, `ll`, and `l`.          |
+| rm_cp_mv_interactive | `true`, `false` | `false` | Enable aliases for `rm`, `cp`, and `mv` to automatically include the `-i` flag. |
+| warp                 | `true`, `false` | `false` | Enable Warp support for console.                                                |
+
+## Run production
+
+### Using Docker
 
 ```shell
-docker-compose up
+# Build image
+docker build . --target prod --tag webdevhome
+
+# Create and run container
+docker run --name webdevhome --publish 80:80 --detach webdevhome-prod
 ```
 
-_Or `docker-compose up -d` to run in detached mode._
+Change the ports accordingly.
 
-_Halt the app in detached mode by running `docker-compose down`._
+### Using Docker compose
 
-If you make any changes, start again at `docker-compose build`.
+If you want to run this app in your own Docker environment run the following commands from inside the project root
+directory:
 
-**Important:** If you change the `dependencies` in `package.json` directly you have to run `npm install` locally before running `docker-compose build`! Better use `npm i <package-name>` to add dependencies or `npm un <package-name>` to remove packages instead.
+```shell
+docker compose up --build --detach --remove-orphans webdevhome
+```
 
----
+## Credits
 
-Developed and maintained by: Andreas Linnert ([alinnert](https://github.com/alinnert))
+[TypeScript](https://github.com/microsoft/TypeScript)
+• [React](https://github.com/facebook/react)
+• [farzher/fuzzysort](https://github.com/farzher/fuzzysort)
+• [TailwindCSS](https://tailwindcss.com/)
+• [Simple Icons](https://github.com/simple-icons/simple-icons)
+• [Material Design Icons](https://github.com/Templarian/MaterialDesign)

compose.yml

@@ -0,0 +1,27 @@
+name: webdevhome
+
+services:
+  frontend:
+    container_name: webdevhome
+    build:
+      context: .
+      target: prod
+    ports:
+      - "80:80"
+  
+  dev:
+    container_name: webdevhome-dev
+    build:
+      context: .
+      target: dev
+      args:
+        ls_improvement: true
+        rm_cp_mv_interactive: true
+        warp: true
+    ports:
+      - "5173:5173"
+    volumes:
+      - type: bind
+        source: .
+        target: /app
+    tty: true

docker-compose.yml

@@ -3,7 +3,7 @@
   "version": "2.4.3",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "npm test && vite build",
     "preview": "vite preview",
     "test": "tsc && eslint src",