Create showcase app

.github/ISSUE_TEMPLATE/showcase.md

@@ -0,0 +1,19 @@
+---
+name: Showcase
+about: Share something you built with Mesop
+title: ''
+labels: showcase
+assignees: ''
+---
+
+**Describe your showcase**
+A clear and concise description of what you built with Mesop.
+
+**GitHub Repo**
+The link to your GitHub repo or specific file.
+
+**Image**
+Upload an image or screenshot of your application:
+
+**Application URL** (if applicable)
+If your application is hosted online, provide the URL here:

docs/javascript/showcase.js

@@ -0,0 +1,4 @@
+const iframe = document.createElement('iframe');
+iframe.src = 'https://wwwillchen-mesop-showcase.hf.space/';
+iframe.className = 'full-screen-iframe';
+document.body.appendChild(iframe);

docs/showcase.md

@@ -0,0 +1,9 @@
+<!-- This file path is specifically chosen to match the GitHub pages path. -->
+---
+hide:
+  - navigation
+  - toc
+---
+<!-- This uses the production URLs to make the paths work locally and on GitHub -->
+<link rel="stylesheet" href="https://google.github.io/mesop/stylesheets/demo.css">
+<script src="https://google.github.io/mesop/javascript/showcase.js"></script>

mkdocs.yml

@@ -86,7 +86,8 @@ nav:
           - Focus component: api/commands/focus-component.md
       - Config: api/config.md
   - FAQ: faq.md
-  - Demo Gallery 🔗: demo.md
+  - Demo 🌐: demo.md
+  - Showcase 🌐: showcase.md
   - Blog:
       - blog/index.md
   - Contributing:

showcase/Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.10.14-bullseye
+
+RUN apt-get update && \
+    apt-get install -y \
+    # General dependencies
+    locales \
+    locales-all && \
+    # Clean local repository of package files since they won't be needed anymore.
+    # Make sure this line is called after all apt-get update/install commands have
+    # run.
+    apt-get clean && \
+    # Also delete the index files which we also don't need anymore.
+    rm -rf /var/lib/apt/lists/*
+
+ENV LC_ALL en_US.UTF-8
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US.UTF-8
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+# Create non-root user
+RUN groupadd -g 900 mesop && useradd -u 900 -s /bin/bash -g mesop mesop
+USER mesop
+
+# Add app code here
+COPY . /srv/mesop-app
+WORKDIR /srv/mesop-app
+
+# Run Mesop through gunicorn. Should be available at localhost:8080
+CMD ["gunicorn", "--bind", "0.0.0.0:8080", "main:me"]

showcase/README.md

@@ -0,0 +1,10 @@
+---
+title: Mesop Showcase
+emoji: 👓
+colorFrom: red
+colorTo: yellow
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 8080
+---

showcase/deploy_to_hf.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+set -e
+
+error_handler() {
+    echo "Error: An error occurred. Exiting script."
+    exit 1
+}
+
+# Set up error handling
+trap error_handler ERR
+
+if [ $# -eq 0 ]; then
+    echo "Error: Please provide a destination path as an argument."
+    exit 1
+fi
+
+DEST_PATH="$1"
+
+if [ ! -d "$DEST_PATH" ]; then
+    echo "Destination path does not exist. Creating it now."
+    mkdir -p "$DEST_PATH"
+fi
+
+# Get the path of this script which is the demo dir.
+DEMO_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+cp -R "$DEMO_DIR/" "$DEST_PATH"
+echo "Demo files have been copied to $DEST_PATH"
+
+cd "$DEST_PATH"
+echo "Changed directory to $DEST_PATH"
+
+git init
+
+git add .
+
+git commit -m "Commit"
+
+# The hf remote may already exist if the script has been run
+# on this dest directory before.
+git remote add hf https://huggingface.co/spaces/wwwillchen/mesop-showcase || true
+
+git push hf --force
+
+echo "Pushed to: https://huggingface.co/spaces/wwwillchen/mesop-showcase. Check the logs to see that it's deployed correctly."