feat(repo): ✨ Let's go!

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/wip/handle-submissions.yml

@@ -0,0 +1,10 @@
+name: CI
+
+on:
+  issues:
+    types: [ labeled ]
+
+jobs:
+  build:
+    if: ${{ github.event.label.name == 'submission accepted' }}
+    runs-on: ubuntu-latest

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+.env
+.env.local

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "repo"
+    ]
+}

README.md

@@ -0,0 +1,54 @@
+<p align="center"><img src="https://qrukfpaygglwznencwsz.supabase.co/storage/v1/object/public/tool-images/cover.png" width="50%"/>
+</p>
+
+<h1 align="center"><a href="https://tooldb.dev" target="_blank"><b>tooldb</b></a></h1>
+
+tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.
+
+<img src="https://qrukfpaygglwznencwsz.supabase.co/storage/v1/object/public/tool-images/Bildschirmfoto 2022-05-23 um 22.31.10.png" />
+
+## 💭 Motivation
+
+Many know that there is a huge amount of frameworks, new server applications and tools. But it is very hard to keep track of all the new applications and frameworks who are published almost on a daily-basis. Some are really good, but most do not know them.
+
+tooldb tries to keep track of them. **It is (soon) a massive collection of frameworks and tools for developers.**
+
+## 👥 Based on contributions
+
+Only one person couldn‘t handle the huge collection of tools and keep track of every new one. Everyone can submit their favourite framework or tool with opening an issue on GitHub.
+
+## ✨ Submit tools
+
+To grow the collection of tools, we need *you*! If you have a favourite tool or framework or you found one recently, please submit it on GitHub by creating an issue. The templates will guide you.
+
+## ♻️ Update tool information and images
+
+You can update the information and upload new images of the tools by creating an issue.
+
+## 🗂 Submit categories
+
+**Before submitting new categories, [please check](https://tooldb.dev) if it doesn't already exist.**
+
+Sometimes there are tools or frameworks which there isn't a category for on tooldb. If you have a category for it, please submit it on GitHub by creating an issue.
+
+## 💶 Donations & Sponsors
+
+tooldb.dev is a free, open-source project. Donations help to cover the costs of hosting and maintaining the project. Currently, we cannot offer any perks for donating, but they will be added in the future. Everyone who donated will be listed here.
+
+You can donate [**here**](https://tooldb.dev/donate).
+
+### Thanks to all the sponsors!
+
+Be the first one!
+
+## 💯 Contributors & how to contribute
+
+You can contribute by helping to improve the codebase, by writing issues when you have found a bug, or when you have a new feature/suggestion for improvement in mind.
+
+### All contributors (thank you very much)
+
+coming soon.
+
+## 📄 License
+
+coming soon.

components/CategoryMain.tsx

@@ -0,0 +1,80 @@
+import { Badge, Button, Carousel, TextInput } from "flowbite-react";
+import Link from "next/link";
+import { Suspense } from "react";
+import { FaGithub, FaLink, FaTwitter } from "react-icons/fa";
+import EmbeddedSearchbar from "./EmbeddedSearchbar";
+
+export default function CategoryMain(props: any) {
+
+    // Show the tool page depending on the id of the tool
+    return (
+      <section className="text-white-900 body-font">
+        <div className="container flex flex-wrap flex-col max-w-5xl mx-auto pt-40 pb-6 p-5">
+          <EmbeddedSearchbar />
+        </div>
+        <div className="flex flex-wrap flex-col md:flex-row max-w-5xl mx-auto p-5">
+            <div id="categoryData">
+              <h1 className="text-5xl text-left font-4 lh-6 ld-04 font-bold text-white mb-5">
+                    {props.categoryData.category_icon} {props.categoryData.category_name}
+              </h1>
+              <h2 className="text-lg font-4 lh-6 ld-04 pb-3 text-white">
+                {props.categoryData.category_description}
+              </h2>
+              <small className="text-white">Result: {props.categoryResults.length} tool(s) found</small>
+            </div>
+        </div>
+        <div className="max-w-5xl mx-auto p-5">
+              {
+                props.categoryResults.map((tool: any) => {
+                  return (
+                    <>
+                    <div className="flex bg-white/10 mb-3 p-3 items-center" key={tool.id}>
+                      <div className="flex-none">
+                        <img src={tool.tools.logo} width={"120px"} height={"120px"} className="rounded-lg"></img>
+                      </div>
+                      <div className="flex-auto">
+                          <div className="p-3 text-white">
+                            <h1 className="text-2xl text-left font-4 lh-6 ld-04 font-bold mb-3">
+                              <Link href={`/tool/${tool.id}`}><a className="underline">{tool.tools.tool_name}</a></Link>
+                            </h1>
+                            <h2 className="text-lg font-4 lh-6 ld-04 pb-3 text-justify">
+                              {tool.tools.tool_description}
+                            </h2>
+                          </div>
+                      </div>
+                      <div className="flex flex-col space-y-3 flex-none pb-2 pt-2 mr-2">
+                        <Link href={tool.tools.tool_link} target={"_blank"}>
+                          <Button gradientMonochrome="green" className="min-w-full">
+                            <FaLink />&nbsp;
+                            Website
+                          </Button>
+                        </Link>
+                        {
+                          tool.tools.github_repo ? 
+                          <Link href={tool.tools.github_repo} target={"_blank"}>
+                            <Button color="light" className="min-w-full">
+                              <FaGithub />&nbsp;
+                              GitHub Repository
+                            </Button>
+                          </Link> : null
+                        }
+                        {
+                          tool.tools.twitter_link ? 
+                          <Link href={tool.tools.twitter_link} target={"_blank"}>
+                            <Button gradientMonochrome="blue" className="min-w-full">
+                              <FaTwitter />&nbsp;
+                              Twitter
+                            </Button>
+                          </Link> : null
+                        }
+                      </div>
+                    </div>
+                    </>
+                  )
+                })
+              }
+            </div>
+      </section>
+    );
+}
+

components/DonatedPeople.tsx

@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+export default function DonatedPeople(props: any) {
+
+    return (
+        <div className="flex place-content-center gap-3 text-white">
+            <div className="donated_person">
+                <Image src="https://ui-avatars.com/api/" className="w-fill rounded-lg" width={"100px"} height={"100px"}/>
+                <h3>Be the first :)</h3>
+            </div>
+        </div>
+    );
+}