Skip to content
 
 

Latest commit

 

History

2,241 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BREAKING CHANGE for Container Image

Since the base image is now nginx-unpriviledged the container will now listen to port 8080 and not 80. So you need to update your port mapping, i.e. from 8080:80 to 8080:8080.

You can override listening port using environment variable PORT (docker option -e PORT=8888).

You can serve the app from a subfolder using environment variable BASE_URL (docker option -e BASE_URL=/it-tools/), without rebuilding the image -- see Host in a subfolder.

If the container needs to listen to IPv6, it needs to be enabled: https://serverfault.com/questions/1147296/how-to-enable-ipv6-on-ubuntu-20-04. Alternatively, you can mount your own nginx.conf own using docker option -v "./nginx.conf:/etc/nginx/templates/default.conf.template" (with listen [::]:8080; removed)

Build requirements

To build this project, around 8GB of RAM is enough. Measured on a 4-core machine, pnpm build peaks at roughly 6.5GB of system memory and completes on Node's default heap — most of the work happens inside rolldown, in Rust, rather than on the JavaScript heap.

PR Welcome

Especially for UI improvements and translation. And for anything else.

Want to support this fork of IT Tools: Buy me a coffee

HTTPS is recommended

Some tools like PGP encryption rely on WebCrypto API that is only available in HTTPS/SSL. Also, if you want to use PWA, HTTPS is required.

So even on internal installations, you should enable HTTPS using Let's Encrypt using DNS Challenge

Some docs about DNS Challenge:

Related doc for CyberPanel: https://community.cyberpanel.net/t/reverse-proxy-traffic-to-docker-container-on-cyberpanel/30644

You can use my image in your docker-compose/quadlet file if you want an up-to-date version of it-tools (with my PR and some of others) until the main branch has been updated.

(Thanks to gitmotion for this model of README fork)

Contributors

Big thanks to all the people who have already contributed!

contributors

Development under Windows

Use of WSL2 is recommended to develop using VSCode on Windows. Direct development is tricky (because of some dependencies)

Added features

Container images

GitHub Container Registry: ghcr.io/sharevb/it-tools:latest

Docker Hub: sharevb/it-tools:latest

docker run --pull always --restart unless-stopped -p 8080:8080 sharevb/it-tools:latest

Other existing docker tags: latest-en (english only)

Use in Docker Compose file

services:
  it-tools:
    container_name: it-tools
    image: sharevb/it-tools:latest
    pull_policy: always
    restart: unless-stopped
    ports:
      - 8080:8080

Use in Podman Quadlet file

[Unit]
Description=IT Tools container
After=network-online.target

[Container]
AutoUpdate=registry
Image=ghcr.io/sharevb/it-tools:latest
PublishPort=8080:8080
Label=io.containers.autoupdate=registry

[Install]
WantedBy=multi-user.target default.target

[Service]
Restart=always

Use with companion Self Hosted docker services

Some tools requires additional docker services: HTTPS/DNS tools/Ping, HTML to PDF, Docker Image Download, Multi Links Download, Short Url Expander and TCP/UDP Port tester.

See complete example here: docker-with-services

Filter tools and add home custom content

You can add custom content in Home page by mounting a home.custom.md in /usr/share/nginx/html.

You can filter available tools by mounting tools-filter.json in /usr/share/nginx/html. It can contains the following filtering regex:

{
  "excludeCategoryFilterRegex": "",
  "includeCategoryFilterRegex": "",
  "excludeToolsFilterRegex": "",
  "includeToolsFilterRegex": ""
}

Category matches on category (English) names ; Tools matches on tools path/url.

See docker-tools-filter-and-home-content

Add custom external tools

You can add custom external tools (href or markdownContent) by mounting a external-tools.json in /usr/share/nginx/html with the following structure:

[
  {
    "name": "GitHub",
    "path": "/github",
    "description": "Link to Github",
    "keywords": ["github"],
    "category": "Links",
    "href": "https://github.com"
  },
  {
    "name": "Some text",
    "path": "/some-text",
    "description": "Some description",
    "keywords": ["some"],
    "category": "Links",
    "markdownContent": "Some useful **text**\n\nin *markdown*"
  }
]

See docker-tools-filter-and-home-content

Setting default tools parameters / default UI language at runtime

For a complete sample, see docker-with-services.

You can set default tool parameters by mounting a tools-settings.json in /usr/share/nginx/html.

It is a two level json, with the first level being for tool name and the second level for parameter name:

{
  "regex-tester": {
    "multi": true,
    "regex": "some regex",
    "global": false
  }
}

You can find tool name and parameter name in the tools source code src/tools subfolder :

  • example pattern for const global = useQueryParamOrStorage({ storageName: 'regex-tester:g', name: 'global', defaultValue: true });:
{
  "regex-tester": {
    "global": false
  }
}
  • example pattern for const value = useQueryParam({ tool: 'barcode-gen', name: 'text', defaultValue: '123456789' });:
{
  "barcode-gen": {
    "text": "4356"
  }
}
  • example pattern for const width = useITStorage('ascii-text-drawer:width', 80);:
{
  "ascii-text-drawer": {
    "width": 80
  }
}

To define the default UI language, add a default_locale key to json:

{
  "default_locale": "fr"
}

To build using a custom default language:

docker build -t it-tools-fr --build-arg VITE_LANGUAGE=fr .
docker run -d --name it-tools-fr --restart unless-stopped -p 8080:8080 it-tools-fr

Host in a subfolder (/it-tools/)

The container serves the app from whatever path you point BASE_URL at. Nothing is baked into the image, so the regular latest image works for any subfolder -- no rebuild, no subfolder-specific tag:

services:
  it-tools:
    image: ghcr.io/sharevb/it-tools:latest
    restart: unless-stopped
    environment:
      BASE_URL: /it-tools/
    ports:
      - 8080:8080

or docker run -d --name it-tools -e BASE_URL=/it-tools/ -p 8080:8080 ghcr.io/sharevb/it-tools:latest.

BASE_URL accepts it-tools, /it-tools and /it-tools/ alike; the default is /.

You still want a reverse proxy in front -- Nginx Proxy Manager, Traefik, caddy etc. -- passing /it-tools/ through to the container. It does not matter whether the proxy strips the prefix before forwarding (proxy_pass http://it-tools:8080/;) or passes it on as-is (proxy_pass http://it-tools:8080;): the container handles both.

One thing only the proxy can do, in the stripping setup: /it-tools without the trailing slash never reaches the container, so redirect it there -- the sample's location /it-tools { return 301 /it-tools/; }. When the prefix is forwarded instead, the container does that redirect itself.

See the sample docker-compose.yml and nginx.conf. To run the sample:

git clone https://github.com/sharevb/it-tools
cd it-tools/docker-subfolder-sample/
docker compose up

Then navigate to http://localhost/it-tools/

Two things worth knowing:

  • Building with --build-arg BASE_URL=/it-tools/ still works, but it now only changes the image's default -- the environment variable still wins at run time.
  • On a read-only root filesystem the config template cannot be re-rendered at startup, so BASE_URL (like PORT) has no effect unless /etc/nginx/conf.d is writable -- mount a tmpfs or an emptyDir there. The container says so in its log.

To build using a custom folder:

  1. BASE_URL="/it-tools/" pnpm build
  2. Rename the generated dist folder to it-tools and serve on https://your-domain.com/it-tools

To build for GitHub Pages:

  1. Enable GitHub Pages build and deployment option in your fork, under Settings > Pages and select GitHub Actions as the source
  2. Add the following GitHub action to your repo: https://github.com/sharevb/it-tools/tree/chore/all-my-stuffs/.github/workflows/sharevb-github-pages-publish.yml

To add authentication

Assuming you're already hosting it-tools behind a reverse proxy, you can configure forward-auth and enforce authentication from the reverse proxy

(thanks @jogerj)

Deploy as LXC container

In Proxmox VE, you can use docker image directly:

sudo lxc-create -n sharevb-it-tools -t oci -- --url docker://ghcr.io/sharevb/it-tools:latest

Contribute

Recommended IDE Setup

To install VSCode in WSL2 (Windows), see: https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-vscode

VSCode with the following extensions:

with the following settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "always"
  },
  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
  "i18n-ally.keystyle": "nested"
}

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Project Setup

pnpm install --ignore-scripts

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Playwright

Playwright starts pnpm preview itself, so build first:

pnpm build
pnpm test:e2e

To iterate against the dev server instead, leave pnpm dev running and point the tests at it. Playwright then leaves the server alone:

E2E_BASE_URL=http://localhost:5173 pnpm test:e2e

The dev server compiles routes on demand, so a first run against a cold one can blow past the assertion timeouts. Open the pages once, or just run it again.

Lint with Oxlint

pnpm lint

Format with Oxfmt

pnpm fmt

Ensure CI (lock, oxlint, typecheck) will succeed

Before submitting a PR, run:

pnpm install --ignore-scripts && pnpm lint:fix && pnpm typecheck

Create a new tool

To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:

pnpm run script:create:tool my-tool-name

It will create a directory in src/tools with the correct files. You will need to fill src/tools/_my-tool-name_/index.ts with tool name, category, description... and then develop the tool.

Installation methods

Local installation required installing first: python3 make g++

Container Image Local Installation
GitHub Container Registry: ghcr.io/sharevb/it-tools:latest
Docker Hub: sharevb/it-tools:latest
sudo apt-get install python3 make g++ && git clone -b chore/all-my-stuffs https://github.com/sharevb/it-tools.git && cd it-tools/ && pnpm i --ignore-scripts && pnpm dev
replace your current image with this image copy & paste oneliner (from github repo)
You may need to clear cache and hard reload to get new features loading Installing packages for the first time may take some time; please wait until it finishes
logo

License

This project is under the GNU GPLv3.

About

My additions (and of others) to it-tools! (Collection of handy online tools for developers, with great UX. )

Resources

Stars

1.6k stars

Watchers

6 watching

Forks

Releases

Sponsor this project

Packages

Contributors

Languages