Skip to content

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

License

Notifications You must be signed in to change notification settings

sharevb/it-tools

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BREAKING CHANGE for Docker Image

Since Docker base image is now nginx-unpriviledged, docker image now listen to 8080 and no more 80. So you need to update your port mapping, ie from 8080:80 to 8080:8080.

Check out these change here: https://sharevb-it-tools.vercel.app/

You can use my image in your docker-compose file if you want an update 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)

Added features

Almost all tools PR of it-tools.

Docker images

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

Docker Hub: sharevb/it-tools:latest

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

Build docker image for a custom subfolder

According to https://github.com/sharevb/it-tools/pull/461#issuecomment-1602506049 and CorentinTh#461:

docker build -t it-tools  --build-arg BASE_URL="/my-folder/" .
docker run -d --name it-tools --restart unless-stopped -p 8080:8080 it-tools

Then if you go to http://localhost:8080 you'll get a blank page, but opening the DevTools (& refreshing) you'll notice in the Network tab that the app is trying to fetch assets from /my-folder/...

So you would need to put another server in front of it, like Nginx Proxy Manager, Traefik, caddy etc. Then setup a reverse proxy pass using /my-folder

Docker compose for hosting in a /it-tools/ subfolder

For /it-tools/ subfolder, you can use baseurl-it-tools tag.

See (sample of docker-compose.yml and nginx.conf)[https://github.com/sharevb/it-tools/docker-subfolder-sample], this docker image needs to have another reverse proxy in front of it, like Nginx Proxy Manager, Traefik, caddy etc.

Setup a reverse proxy pass using /it-tools/.

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:

.github/workflows/deploy-pages.yaml

name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - uses: pnpm/action-setup@v2
        name: Install pnpm
        id: pnpm-install
        with:
          version: 8
          run_install: true

      - name: Build
        run: |
          BASE_URL="/it-tools/" pnpm build
          cp dist/index.html dist/404.html

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Installation methods

Local installation required installing first: python3 make g++

Docker 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 && 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

Useful tools for developer and people working in IT. Have a look !.

Functionalities and roadmap

Please check the issues to see if some feature listed to be implemented.

You have an idea of a tool? Submit a feature request!

Self host

Self host solutions for your homelab

From docker hub:

docker run -d --name it-tools --restart unless-stopped -p 8080:8080 corentinth/it-tools:latest

From github packages:

docker run -d --name it-tools --restart unless-stopped -p 8080:8080 ghcr.io/corentinth/it-tools:latest

Other solutions:

Contribute

Recommended IDE Setup

VSCode with the following extensions:

with the following settings:

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "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

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test

Lint with ESLint

pnpm lint

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, and a the import in src/tools/index.ts. You will just need to add the imported tool in the proper category and develop the tool.

Contributors

Big thanks to all the people who have already contributed!

contributors

Credits

Coded with ❤️ by Corentin Thomasset.

This project is continuously deployed using vercel.com.

Contributor graph is generated using contrib.rocks.

IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt

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

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • Vue 50.8%
  • TypeScript 48.5%
  • JavaScript 0.5%
  • HTML 0.2%
  • Dockerfile 0.0%
  • EJS 0.0%