Merge

.gitignore

@@ -128,4 +128,6 @@ dmypy.json
 # Pyre type checker
 .pyre/
 .DS_Store
-**/*api_key*
+**/*api_key*
+**/venv
+**/tmp

docs/flask.html

@@ -139,6 +139,7 @@
 
             <div id="page-container" class="container px-5 my-5 mx-auto">
                 <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Flask</p>
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-lg sm:text-4xl ">Simple Example</p>
 <p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">PyVibe can be used with Flask. This is a simple example of how to use PyVibe with Flask.</p>
 <p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">First, create a new file called <code>app.py</code> and add the following code:</p>
 <div class="mx-auto my-10 max-w-3xl">
@@ -179,6 +180,24 @@
         <code class="text-white" style="white-space: break-spaces">python app.py</code>
     </div>
 </div>
+<span id=extended-example></span>
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-lg sm:text-4xl ">Extended Example</p>
+<img class="max-w-fit h-auto rounded-lg shadow-lg w-full md:w-2/5 " src="https://storage.googleapis.com/img.pycob.com/screenshot/pypi-analytics.png" alt="PyPi Analytics">
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="https://pypi-analytics.pycob.app" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Live App
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="https://github.com/pycob/pyvibe/blob/main/sample-apps/pypi-analytics/main.py" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Source Code on GitHub
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p>
+
+    <script src="https://emgithub.com/embed-v2.js?target=https%3A//github.com/pycob/pyvibe/blob/main/sample-apps/pypi-analytics/main.py&style=vs2015&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on&fetchFromJsDelivr=on"></script>
+
 
 <script>
   function dismissBanner() {

generator/docs/flask.py

@@ -5,7 +5,7 @@
 
 page.add_header("Flask")
 
-
+page.add_header("Simple Example", size=4)
 page.add_text("PyVibe can be used with Flask. This is a simple example of how to use PyVibe with Flask.")
 
 page.add_text("First, create a new file called <code>app.py</code> and add the following code:")
@@ -28,4 +28,13 @@ def index():
 page.add_text("Then, run the following command in your terminal:")
 page.add_code("python app.py", prefix="%")
 
+page.add_section("extended-example", "Extended Example")
+page.add_header("Extended Example", size=4)
+
+page.add_image("https://storage.googleapis.com/img.pycob.com/screenshot/pypi-analytics.png", "PyPi Analytics", classes="shadow-lg w-full md:w-2/5")
+page.add_link("Live App", "https://pypi-analytics.pycob.app")
+page.add_link("Source Code on GitHub", "https://github.com/pycob/pyvibe/blob/main/sample-apps/pypi-analytics/main.py")
+
+page.add_emgithub("https://github.com/pycob/pyvibe/blob/main/sample-apps/pypi-analytics/main.py")
+
 page.add_html(marketing_banner)

sample-apps/pypi-analytics/Makefile

@@ -0,0 +1,24 @@
+# define the name of the virtual environment directory
+VENV := venv
+
+# default target, when make executed without arguments
+all: venv run
+
+$(VENV)/bin/activate: requirements.txt
+	python3 -m venv $(VENV)
+	./$(VENV)/bin/pip install -r requirements.txt
+
+# venv is a shortcut target
+venv: $(VENV)/bin/activate
+
+run: venv
+	./$(VENV)/bin/python3 main.py
+
+deploy: venv
+	./$(VENV)/bin/python3 -m pycob.deploy
+
+clean:
+	rm -rf $(VENV)
+	find . -type f -name '*.pyc' -delete
+
+.PHONY: all venv run clean deploy

sample-apps/pypi-analytics/Procfile

@@ -0,0 +1 @@
+web: gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 main:app

sample-apps/pypi-analytics/main.py

@@ -0,0 +1,97 @@
+# INITIALIZATION
+from flask import Flask, request
+import pyvibe as pv
+
+import pycob as cob
+import plotly.express as px
+
+app = Flask(__name__)
+pypi_projects_by_month = cob.fetch_pickle('pypi_projects_by_month.pkl')
+
+# PAGE FUNCTIONS
+@app.route('/')
+def home() -> str:
+    page = pv.Page("PyPi Analytics")
+    page.add_header("PyPi Analytics")
+    page.add_text("PyPi analytics enables Python engineers to identify usage trends with Python packages as an input for picking the right package")
+    page.add_link("See the source code for this app", "/view_source")
+    page.add_text("")
+
+    top_projects = pypi_projects_by_month.groupby('pypi_project').sum().sort_values('avg_downloads_per_day', ascending=False).reset_index().head(50)
+
+    action_buttons = [
+        cob.Rowaction(label="Analytics", url="/project_detail?project_name={pypi_project}", open_in_new_window=True),
+        cob.Rowaction(label="Project", url="https://pypi.org/project/{pypi_project}", open_in_new_window=True),
+    ]
+
+    with page.add_card() as card:
+        card.add_header("Analyze a Project")
+        with card.add_form(action="/project_detail") as form:
+            form.add_formtext(name="project_name", label="Project Name", placeholder="Enter a project name")
+            form.add_formsubmit("Analyze")
+
+    page.add_text("")
+
+    page.add_header("Top 50 Projects by Downloads", size=4)
+    page.add_pandastable(top_projects, action_buttons=action_buttons)
+
+    return page.to_html()
+
+@app.route('/project_detail')
+def project_detail() -> str:
+    page = pv.Page("PyPi Analytics")
+
+    project_name = request.args['project_name']
+    if 'compare_to' in request.args:
+        compare_to = request.args['compare_to']
+        subtitle = request.args['compare_to']
+    else:
+        compare_to = None
+        subtitle = None
+
+    page.add_header(f"PyPi Analytics for <code>{project_name}</code>")
+
+    if not subtitle:
+        with page.add_form(action="/project_detail") as form:
+            form.add_formhidden(name="project_name", value=project_name)
+            form.add_formhidden(name="compare_to", value=compare_to if compare_to else "")
+            form.add_formtext(name="subtitle", label="Subtitle", placeholder="Enter a subtitle")
+            form.add_formsubmit("Update Subtitle")
+    else:
+        page.add_header(f"{subtitle}", size=4)
+
+    if compare_to:
+        project_detail = pypi_projects_by_month[pypi_projects_by_month['pypi_project'].isin([project_name, compare_to])]
+    else:
+        project_detail = pypi_projects_by_month[pypi_projects_by_month['pypi_project'] == project_name]
+
+    fig = px.line(project_detail.sort_values(["month", "pypi_project"]), x="month", y="avg_downloads_per_day", line_group="pypi_project", color="pypi_project")
+
+    page.add_plotlyfigure(fig)
+
+    if not compare_to:
+        with page.add_card() as card:
+            with card.add_form(action="/project_detail") as form:
+                form.add_formhidden(name="project_name", value=project_name)
+                form.add_formtext(label="Compare To", name="compare_to", placeholder="Enter a project name")
+                form.add_formsubmit("Analyze")
+
+    return page.to_html()
+
+@app.route('/view_source')
+def view_source() -> str:
+    page = pv.Page("View Source")
+    page.add_header("View Source")
+
+    # Read the source code
+    with open(__file__, 'r') as f:
+        source = f.read()
+
+    # Add the source code to the page
+    page.add_codeeditor(source, language="python")
+
+    return page.to_html()
+
+# RUN APP
+if __name__ == '__main__':
+    app.run(debug=True)

sample-apps/pypi-analytics/requirements.txt

@@ -0,0 +1,5 @@
+pyvibe
+pandas
+pycob
+gunicorn
+plotly

sample-apps/websockets/Makefile

@@ -0,0 +1,24 @@
+# define the name of the virtual environment directory
+VENV := venv
+
+# default target, when make executed without arguments
+all: venv run
+
+$(VENV)/bin/activate: requirements.txt
+	python3 -m venv $(VENV)
+	./$(VENV)/bin/pip install -r requirements.txt
+
+# venv is a shortcut target
+venv: $(VENV)/bin/activate
+
+run: venv
+	./$(VENV)/bin/python3 main.py
+
+deploy: venv
+	./$(VENV)/bin/python3 -m pycob.deploy
+
+clean:
+	rm -rf $(VENV)
+	find . -type f -name '*.pyc' -delete
+
+.PHONY: all venv run clean deploy

sample-apps/websockets/Procfile

@@ -0,0 +1 @@
+web: gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 main:app

sample-apps/websockets/main.py

@@ -0,0 +1,89 @@
+import pyvibe as pv
+from flask import Flask, render_template
+from flask_sock import Sock
+
+app = Flask(__name__)
+sock = Sock(app)
+
+class WebSocketReceiverComponent(pv.Component):
+    def __init__(self, path_to_websocket: str):    
+        self.path_to_websocket = path_to_websocket
+
+    def to_html(self):
+        return """
+        <div id="log"></div>
+        <script>
+            var httpProtocol = 'http://'; 
+            var wsProtocol = 'ws://';
+            if (window.location.protocol === 'https:') {
+                httpProtocol = 'http://';
+                wsProtocol = 'wss://';
+            }
+
+            const log = (text, color) => {
+                document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
+            };
+
+            const socket = new WebSocket(wsProtocol + location.host + '""" + self.path_to_websocket + """');
+            socket.addEventListener('message', ev => {
+                document.getElementById('log').innerHTML += ev.data;
+            });
+        </script>
+        """
+
+class WebSocketSenderComponent(pv.Component):
+    def __init__(self, path_to_websocket: str):    
+        self.path_to_websocket = path_to_websocket
+
+    def to_html(self):
+        return """
+        <form class="max-w-full" style="width: 500px" onsubmit="event.preventDefault(); sendWebsocket(this)" action="?" method="GET">
+            <div class="mb-6">
+                <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Input</label>
+                <input type="text" name="text" value="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required="">
+            </div>
+            <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Send</button> 
+        </form>
+        <script>
+            function sendWebsocket(form) {
+                const textField = form.text;
+                socket.send(textField.value);
+                textField.value = '';
+                return false;
+            }
+        </script>
+        """
+
+@app.route('/')
+def index():
+    page = pv.Page('Websocket Test', description='WebSocket proof of concept using Flask-Sock and PyVibe')
+
+    page.add_header("Websocket Test")
+
+    with page.add_container(grid_columns=2) as container:
+        with container.add_card() as card:
+            card.add_header('Send')
+            card.add_component(WebSocketSenderComponent('/echo'))
+
+        with container.add_card() as card:
+            card.add_header('Receive')
+            card.add_component(WebSocketReceiverComponent('/echo'))
+
+    page.add_header("Source Code")
+    page.add_emgithub("https://github.com/pycob/pyvibe/blob/main/sample-apps/websockets/main.py")
+
+    return page.to_html()
+
+from threading import Timer
+
+@sock.route('/echo')
+def echo(sock):
+    while True:
+        data = sock.receive()
+
+        alert_component = pv.AlertComponent(data, 'Received')
+
+        sock.send(alert_component.to_html())
+
+if __name__ == '__main__':
+    app.run(debug=True)

sample-apps/websockets/requirements.txt

@@ -0,0 +1,5 @@
+pyvibe
+pycob
+flask
+flask-sock
+gunicorn