docs: add jupyter dashboard tutorial part 1

solara/website/components/mailchimp.py

@@ -0,0 +1,13 @@
+from pathlib import Path
+
+import solara
+
+HERE = Path(__file__).parent
+
+# html = Path(HERE / "mailchimp.v").read_text()
+
+
+@solara.component_vue("mailchimp.vue")
+def MailChimp():
+    # solara.HTML(unsafe_innerHTML=html)
+    pass

solara/website/components/mailchimp.vue

@@ -0,0 +1,57 @@
+<template>
+    <div id="mc_embed_shell">
+        <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
+        <style type="text/css">
+            #mc_embed_signup {
+                background: #fff;
+                false;
+                clear: left;
+                font: 14px Helvetica, Arial, sans-serif;
+                width: 600px;
+            }
+
+            /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
+                       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
+        </style>
+        <div id="mc_embed_signup">
+            <form
+                action="https://gmail.us13.list-manage.com/subscribe/post?u=1dcdd74de47214edace5b6f49&amp;id=c60b5def86&amp;f_id=00f4c1e2f0"
+                method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
+                target="_blank">
+                <div id="mc_embed_signup_scroll">
+                    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
+                    <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span
+                                class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email"
+                            id="mce-EMAIL" required="" value=""></div>
+                    <!-- <div class="mc-field-group"><label for="mce-FNAME">First Name </label><input type="text" name="FNAME"
+                        class=" text" id="mce-FNAME" value=""></div>
+                <div class="mc-field-group"><label for="mce-LNAME">Last Name </label><input type="text" name="LNAME"
+                        class=" text" id="mce-LNAME" value=""></div>
+                <div class="mc-field-group"><label for="mce-COMPANY">Company </label><input type="text" name="COMPANY"
+                        class=" text" id="mce-COMPANY" value=""></div> -->
+                    <div id="mce-responses" class="clear foot">
+                        <div class="response" id="mce-error-response" style="display: none;"></div>
+                        <div class="response" id="mce-success-response" style="display: none;"></div>
+                    </div>
+                    <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                        /* real people should not fill this in and expect good things - do not remove this or risk form bot
+                        signups */
+                        <input type="text" name="b_1dcdd74de47214edace5b6f49_c60b5def86" tabindex="-1" value="">
+                    </div>
+                    <div class="optionalParent">
+                        <div class="clear foot">
+                            <v-btn type="submit" name="subscribe" id="mc-embedded-subscribe"
+                                class="button v-btn v-btn-contained"
+                                style="background-color: rgb(241, 159, 65); border-color: rgb(241, 159, 65);"
+                                value="Subscribe">Subscribe</v-btn>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+        <script type="text/javascript">
+            (function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[7] = 'COMPANY'; ftypes[7] = 'text'; fnames[10] = 'WHYCLOUD'; ftypes[10] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; fnames[5] = 'BIRTHDAY'; ftypes[5] = 'birthday'; fnames[6] = 'USECASE'; ftypes[6] = 'text'; fnames[8] = 'POSITION'; ftypes[8] = 'text'; fnames[9] = 'MMERGE9'; ftypes[9] = 'text'; }(jQuery)); var $mcj = jQuery.noConflict(true);
+        </script>
+    </div>
+</template>

solara/website/pages/docs/content/04-tutorial/60-jupyter-dashboard-part1.py

@@ -0,0 +1,41 @@
+from pathlib import Path
+
+import solara
+from solara.website.components.mailchimp import MailChimp
+from solara.website.components.notebook import Notebook
+
+HERE = Path(__file__).parent
+title = "Jupyter Dashboard (1/3)"
+
+
+@solara.component
+def Page():
+    title = "Build your Jupyter dashboard using Solara"
+    solara.Meta(property="og:title", content=title)
+    solara.Meta(name="twitter:title", content=title)
+    solara.Title(title)
+
+    img = "https://solara.dev/static/public/docs/tutorial/jupyter-dashboard1.png"
+    solara.Meta(name="twitter:image", content=img)
+    solara.Meta(property="og:image", content=img)
+
+    description = "Learn how to build a Jupyter dashboard and deploy it as a web app using Solara."
+    solara.Meta(name="description", property="og:description", content=description)
+    solara.Meta(name="twitter:description", content=description)
+    tags = [
+        "jupyter",
+        "jupyter dashboard",
+        "dashboard",
+        "web app",
+        "deploy",
+        "solara",
+    ]
+    solara.Meta(name="keywords", content=", ".join(tags))
+
+    Notebook(Path(HERE / "_jupyter_dashboard_1.ipynb"), show_last_expressions=True)
+    solara.Markdown(
+        """
+        Don’t miss the next tutorial and stay updated with the latest techniques and insights by subscribing to our newsletter.
+    """
+    )
+    MailChimp()