Fix Lint Errors and Add Lint and Build Check Workflow

.github/workflows/deploy_gh_pages.yml → .github/workflows/build_check_deploy_gh_pages.yml

@@ -3,6 +3,8 @@ name: Deploy to gh-pages
 on:
   push:
     branches: [ main ]
+  pull_request:
+    branches: [main]
   repository_dispatch:
     types: [ rebuild-website ]
   workflow_dispatch:
@@ -36,6 +38,12 @@ jobs:
           cd utils/models
           python3 get_models.py
 
+      - name: fetch and convert layer data
+        run: |
+          cd new-website
+          cd utils/layers
+          python3 get_layers.py
+
       - name: fetch and convert tutorial data
         run: |
           sudo apt-get install jq
@@ -52,7 +60,9 @@ jobs:
           npm run lint
           npm run export
 
+      # Run the deploy action if the push is to the main branch
       - name: Deploy 🚀
+        if: ${{ github.ref == 'refs/heads/main' }}
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: new-website/deepchem/out

new-website/deepchem/components/Layers/LayerCard.js

@@ -11,49 +11,48 @@ import deepchemKeras from "../../public/icons/deepchem-keras.png";
  * @return {string} - The parsed and formatted string
  */
 function parseName(name) {
-    name = name.replaceAll(/([A-Z]+)/g, " $1");
-    name = name.replace(/([^ ])(Layer)/, "$1 Layer");
-    return name;
-  }
+  name = name.replaceAll(/([A-Z]+)/g, " $1");
+  name = name.replace(/([^ ])(Layer)/, "$1 Layer");
+  return name;
+}
 
 const LayerCard = ({ layer }) => {
-    let models = layer.models.length
-        ? layer.models.join(", ")
-        : "N/A";
-    models = models + " " + "\xa0".repeat(300);
+  let models = layer.models.length ? layer.models.join(", ") : "N/A";
+  models = models + " " + "\xa0".repeat(300);
 
-    return (
-        <>
-          <Link href={layer.url} target="_blank">
-            <div className="flex flex-col gap-4 py-4 px-5 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] layer-card hover:scale-[1.03] transition-all">
-                <div className="flex flex-row justify-between w-full gap-8 items-start">
-                    <div className="text-xl font-medium text-dc-orange">
-                        {parseName(layer.name)}
-                    </div>
-                    <div className="flex flex-row items-center gap-1.5 bg-dc-light-blue/5 px-2 py-1 rounded-md">
-                        {layer.category === "torch" && (
-                            <Image src={deepchemPytorch} alt="PyTorch" width={16} />
-                        )}
-                        {layer.category === "keras" && (
-                            <Image src={deepchemKeras} alt="Keras" width={16} />
-                        )}
-                    </div>
-                    <div className="font-medium text-sm text-dc-gray">
-                        {layer.category}
-                    </div>
-                </div>
-                {
-                    <div className="text-base font-medium text-dc-light-blue w-full mt-4 md:mt-auto">
-                    <p className="text-dc-gray/60">Acceptable Models</p>
-                    <p className="text-xs text-dc-gray font-medium break-all">
-                        {models}
-                    </p>
-                    </div>
-                }
+  return (
+    <>
+      <Link href={layer.url} target="_blank">
+        <div className="flex flex-col gap-4 py-4 px-5 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] layer-card hover:scale-[1.03] transition-all">
+          <div className="flex flex-row justify-between w-full gap-8 items-start">
+            <div className="text-xl font-medium text-dc-orange">
+              {parseName(layer.name)}
             </div>
-          </Link>
-        </>
-    );
+          </div>
+
+          <div className="flex flex-row justify-center items-center gap-2.5 w-fit">
+            {layer.category === "torch" && (
+              <Image src={deepchemPytorch} alt="PyTorch" width={16} />
+            )}
+            {layer.category === "keras" && (
+              <Image src={deepchemKeras} alt="Keras" width={16} />
+            )}
+            <div className="font-medium text-sm text-dc-gray">
+              {layer.category}
+            </div>
+          </div>
+          {
+            <div className="text-base font-medium text-dc-light-blue w-full mt-4 md:mt-auto">
+              <p className="text-dc-gray/60">Acceptable Models</p>
+              <p className="text-xs text-dc-gray font-medium break-all">
+                {models}
+              </p>
+            </div>
+          }
+        </div>
+      </Link>
+    </>
+  );
 };
 
-export default LayerCard;
+export default LayerCard;