Discover  ✦  Submit tool

🛠️ Stack

• Astro - The web framework for content-driven websites
• Typescript - JavaScript with syntax for types.
• Tailwindcss - A utility-first CSS framework for rapidly building custom designs.

🚀 Getting Started

You will need:

• Node.js 16+ (recommended 18 LTS).
• Git.

0. It is recommended to work by making a branch from "dev", and then make the PR towards dev

1. Fork this repository and clone it locally:

git clone git@github.com:your_username/devtools-site.git

2. Install dependencies:

# install dependencies:
npm install

3. Go to the public/ folder and add your .svg logo.

4. Go to the src/utilities/ListTools.ts and add the information about the tool, following the structure:

{
    title: "ILoveImg",
    description: "Online tool for image editing, converter, changing formats, image compressor.",
    icon: "/imgs/iloveimg.svg",
    imgtitle: "iloveimg",
    href: 'https://www.iloveimg.com/es',
    tooltype: 'images'
}

Note

• The categories is here: src/pages/categories. You can add a new category if you need it.

• You must create a new file with the name of the category, "example.astro".

  It should have this structure:

---
import Aside from '../../components/Aside.astro';
import Layout from '../../layouts/Layout.astro';
import MainContent from '../../components/MainContent.astro';
---

<Layout title="Example tools">
	<main>
		<Aside currentRoute="/categories/example"/>
		<MainContent page="example"/>
	</main>
</Layout>

Note

• The "page" parameter of MainContent must be the same as what is set in "tooltype" when the tool is created

• Then, you must go to src/utilities/Categories.ts, and add a new categorie into the list, it should look like this:

export const allCategories: Category[] = [
    {
        href: '/', label: 'alls'
    },
    ...
    ,
    {
        href: '/categories/example', label: 'example'
    }

    // add categories here
];

And create a pull request with the tool 🚀.

🔑 License

• MIT.