add contribution guide

.github/workflows/deploy.yml

@@ -13,6 +13,8 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v3
+      with:
+        fetch-depth: 0  # Fetch all history for all branches and tags
 
     - name: Set up Git
       run: |
@@ -23,6 +25,10 @@ jobs:
       run: |
         git remote add hf https://${{ secrets.HF_USERNAME }}:${{ secrets.HF_TOKEN }}@huggingface.co/spaces/${{ secrets.HF_USERNAME }}/${{ secrets.SPACE_NAME }}
 
+    - name: Fetch from Hugging Face
+      run: |
+        git fetch hf
+
     - name: Commit changes if any
       run: |
         git add .

README.md

@@ -9,8 +9,55 @@ app_port: 3000
 ---
 # Transformers.js Playground
 
+
 ![Transformers.js Playground](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/webllm/shot.png?)
 
+## Contributing
+
+Adding a demo is pretty straightforward. You can take a look at this [PR](https://github.com/cfahlgren1/transformersjs-playground/pull/1) as an example.
+
+## Example of Adding Page to Playground
+
+### Steps
+
+#### 1. Add Route
+Add the page where the demo will go under the category it belongs in. You can create hooks, components, and types as needed.
+
+**Example**
+```
+app
+└── category
+    └── [slug]
+        └── generate-text
+            └── llama-3.2
+                └── page.tsx
+```
+<img width="1683" alt="image" src="https://github.com/user-attachments/assets/1903e56a-5ecd-4587-a382-579cfcc72763">
+
+#### 2. Add demo to `categories.tsx`, this will allow it to show up on Categories Page
+<img width="1657" alt="image" src="https://github.com/user-attachments/assets/1f1680af-9d9b-45b2-84a5-658b750fe020">
+
+```ts
+  {
+    title: "Generate Text",
+    slug: "generate-text",
+    icon: Type,
+    description: "Llama. Qwen. Enough said.",
+    status: "Available",
+    colorName: "blue",
+    graphic: TextGenerationIcon,
+    demos: [
+      {
+        title: "Llama 3.2",
+        slug: "llama-3.2",
+        component: Llama32Page,
+        description: "Llama 3.2 in the browser. WebGPU FTW."
+      }
+    ]
+  }
+```
+
+
 ## Getting Started
 
 First, run the development server:

components/Footer.tsx

@@ -6,17 +6,16 @@ const Footer: React.FC = () => {
   return (
     <footer className="bg-emerald-400/80 p-20 relative overflow-hidden rounded-xl">
       <div className="max-w-7xl mx-auto relative z-10">
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
+        <div className="flex flex-wrap justify-between items-center gap-y-4 mb-12">
           {categories.map((category) => (
-            <div key={category.slug} className="text-center sm:text-left">
-              <Link 
-                href={`/category/${category.slug}`}
-                className="text-lg font-bold text-emerald-800 hover:text-emerald-900 transition-colors duration-300 ease-in-out relative group"
-              >
-                {category.title}
-                <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-emerald-800 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span>
-              </Link>
-            </div>
+            <Link 
+              key={category.slug}
+              href={`/category/${category.slug}`}
+              className="text-lg font-bold text-emerald-800 hover:text-emerald-900 transition-colors duration-300 ease-in-out relative group"
+            >
+              {category.title}
+              <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-emerald-800 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span>
+            </Link>
           ))}
         </div>
       </div>