add more tools and update css

Author: cs01

.gitignore

@@ -3,4 +3,4 @@ data.json
 makefile
 *.service
 node_modules
-src/App.css
+frontend/src/App.css

backend/githubData.ts

@@ -119,6 +119,18 @@ const tools = [
     name: "pybind11",
     owner: "pybind",
   },
+  {
+    name: "pyscript",
+    owner: "pyscript",
+  },
+  {
+    name: "cython",
+    owner: "cython",
+  },
+  {
+    name: "pyodide",
+    owner: "pyodide",
+  },
 ];
 
 function getQuery(name: string, owner: string) {

frontend/package.json

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^2.3.0",
+    "@tailwindcss/typography": "^0.5.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

frontend/src/App.tailwind.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  a {
+    @apply underline;
+  }
+}

frontend/src/Tools.tsx

@@ -206,6 +206,9 @@ export function toolDataToTableData(
   return toolData
     .map((data: Tool) => ({
       ...data,
+      stargazers: data.stargazers?.totalCount
+        ? { totalCount: `⭐ ${data.stargazers.totalCount.toLocaleString()}` }
+        : null,
       name: (
         <div className="font-bold text-lg">
           {data.url ? <a href={data.url}>{data.name}</a> : data.name}
@@ -237,7 +240,7 @@ export function toolDataToTableData(
         .map((url, i) => {
           return (
             <div key={i}>
-              <a href={url} className="hover:bg-yellow-200 text-xs">
+              <a href={url} className="hover:bg-yellow-300 ">
                 {url}
               </a>
             </div>

frontend/src/Types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export type GithubGraphqlShape = {
   stargazers?: {
     totalCount: number;
@@ -26,7 +28,7 @@ export type GithubGraphqlShape = {
 export type Tool = {
   name: string;
   features: Feature[];
-  toolDescription: string;
+  toolDescription: string | React.ReactElement;
   dependsOn: string[];
   useCases: string[];
 } & GithubGraphqlShape;

frontend/src/index.css

@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+

frontend/src/initialToolData.tsx

@@ -1,4 +1,5 @@
 import { Tool } from './Types';
+import React from 'react';
 
 const zipAppDescription =
   'Makes "python executables", which are files that can be run directly, but require a python interpreter available on the system. This is part of a group of tools that utilize the zipapp feature of the standard library.';
@@ -45,10 +46,14 @@ const _initialToolData: Tool[] = [
       'install cli apps',
     ],
     name: 'pdm',
-    toolDescription:
-      'Helps you declare, manage, and install dependencies of Python projects. ' +
-      'It does not use virtual environments at all. ' +
-      'Instead it installs packages to a local directory called __pypackages__ (PEP-582).',
+    toolDescription: (
+      <div>
+        Helps you declare, manage, and install dependencies of Python projects.
+        It does not use virtual environments at all. Instead it installs
+        packages to a local directory called <code>__pypackages__</code>{' '}
+        (PEP-582).
+      </div>
+    ),
     useCases: [],
     dependsOn: [],
   },
@@ -62,12 +67,15 @@ const _initialToolData: Tool[] = [
       'PEP-582',
     ],
     name: 'pyflow',
-    toolDescription:
-      'Pyflow streamlines working with Python projects and files. ' +
-      "It's an easy-to-use CLI app with a minimalist API. " +
-      'Never worry about having the right version of Python or dependencies. ' +
-      'Instead of using virtual environments, it installs packages to a local ' +
-      'directory named __pypackages__ (PEP-582)',
+    toolDescription: (
+      <div>
+        Pyflow streamlines working with Python projects and files. "Its an
+        easy-to-use CLI app with a minimalist API. " Never worry about having
+        the right version of Python or dependencies. Instead of using virtual
+        environments, it installs packages to a local directory named
+        <code>__pypackages__</code> (PEP-582),
+      </div>
+    ),
     useCases: [],
     dependsOn: [],
   },
@@ -298,6 +306,51 @@ const _initialToolData: Tool[] = [
     useCases: [],
     dependsOn: [],
   },
+  {
+    name: 'pyscript',
+    features: ['language bindings'],
+    toolDescription: 'A frontend framework to write Python apps in the browser',
+    useCases: [],
+    dependsOn: ['wasm', 'pyodide'],
+  },
+  {
+    name: 'cython',
+    features: ['language bindings'],
+    toolDescription: (
+      <div>
+        Cython generates C code from your Python code, then builds it into a
+        shared object (.so file). These .so files are C extension modules, which
+        can be imported by your Python code, where they run at the speed of a C
+        program. For example, <code>cythonize --build hello.py</code> will build
+        <code> hello.so</code> which can be imported directly in Python code
+        elsewhere with <code>import hello</code>.
+      </div>
+    ),
+    useCases: [],
+    dependsOn: [],
+  },
+  {
+    name: 'pyodide',
+    features: ['language bindings'],
+    toolDescription: (
+      <div>
+        <p>
+          Pyodide is a Python distribution for the browser and Node.js based on
+          WebAssembly. Pyodide is a port of CPython to WebAssembly/Emscripten.
+          Pyodide makes it possible to install and run Python packages in the
+          browser with micropip. Any pure Python package with a wheel available
+          on PyPi is supported. Many packages with C extensions have also been
+          ported for use with Pyodide.{' '}
+        </p>
+        <p>
+          You can try the{' '}
+          <a href="https://pyodide.org/en/stable/console.html">REPL here.</a>
+        </p>
+      </div>
+    ),
+    useCases: [],
+    dependsOn: ['wasm'],
+  },
 ];
 _initialToolData.sort((a, b) => {
   return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1;

frontend/tailwind.config.js

@@ -1,13 +1,61 @@
 module.exports = {
-  purge: ['./src/**/*.tsx', './src/**/*.ts'],
-  theme: {
-    extend: {},
-  },
-  variants: {},
-  plugins: [],
   future: {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
   },
+  theme: {
+    extend:{}
+    // {typography:{DEFAULT:{css:{code:{backgroundColor:'#000'}}}}}
+  },
   corePlugins: { outline: false },
+  purge: ['./src/**/*.tsx', './src/**/*.ts'],
 };
+
+// module.exports = {
+//   purge: ['./src/**/*.tsx', './src/**/*.ts'],
+//   theme: {
+//     colors: {
+//       grey: {
+//         100: "#F5F7FA",
+//         1000: "#1F2933"
+//       },
+//     },
+//     typography: theme => ({
+//       default: {
+//         css: {
+//           pre: {
+//             color: theme("colors.grey.1000"),
+//             backgroundColor: theme("colors.grey.100")
+//           },
+//           "pre code::before": {
+//             "padding-left": "unset"
+//           },
+//           "pre code::after": {
+//             "padding-right": "unset"
+//           },
+//           code: {
+//             backgroundColor: theme("colors.grey.100"),
+//             color: "#DD1144",
+//             fontWeight: "400",
+//             "border-radius": "0.25rem"
+//           },
+//           "code::before": {
+//             content: '""',
+//             "padding-left": "0.25rem"
+//           },
+//           "code::after": {
+//             content: '""',
+//             "padding-right": "0.25rem"
+//           }
+//         }
+//       }
+//     })
+//   },
+//   variants: {},@tailwindcss/typography
+//   plugins: [require("@tailwindcss/typography")],
+//   future: {
+//     removeDeprecatedGapUtilities: true,
+//     purgeLayersByDefault: true,
+//   },
+//   corePlugins: { outline: false },
+// };