From 03b2dcd9b45c261e1ffa97e180ea3da222b15bc5 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@widgetti.io>
Date: Mon, 23 Dec 2024 15:01:24 +0100
Subject: [PATCH] fix!: solara `Meta` and `Navigator` elements insert empty
 span into DOM (#625)

* fix[docs]: solara.Meta elements insert empty span into DOM

* chore: remove workaround from jupyter notebook tutorial

Reverts https://github.com/widgetti/solara/pull/627, since the workaround is no longer needed.

* fix!: navigator would insert an empty span into dom
---
 solara/components/head_tag.vue                |  3 +-
 .../60-jupyter-dashboard-part1.py             | 98 +++++++++----------
 solara/widgets/vue/navigator.vue              |  1 -
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/solara/components/head_tag.vue b/solara/components/head_tag.vue
index 4dc6892a0..99d12d6c0 100644
--- a/solara/components/head_tag.vue
+++ b/solara/components/head_tag.vue
@@ -1,4 +1,5 @@
-<template><span></span></template>
+<template>
+</template>
 
 <script>
 module.exports = {
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py b/solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py
index 2154b7cf2..0ca4ca6a5 100644
--- a/solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py
+++ b/solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py
@@ -10,56 +10,54 @@
 
 @solara.component
 def Page():
-    with solara.Column(gap=0):
-        title = "Build your Jupyter dashboard using Solara"
-        solara.Meta(property="og:title", content=title)
-        solara.Meta(name="twitter:title", content=title)
-        solara.Title(title)
+    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://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp"
-        solara.Meta(name="twitter:image", content=img)
-        solara.Meta(property="og:image", content=img)
+    img = "https://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp"
+    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))
-        with solara.Column():
-            Notebook(
-                Path(HERE / "_jupyter_dashboard_1.ipynb"),
-                show_last_expressions=True,
-                execute=False,
-                outputs={
-                    "a7d17a84": None,  # empty output (7)
-                    # original: https://github.com/widgetti/solara/assets/1765949/e844acdb-c77d-4df4-ba4c-a629f92f18a3
-                    "82f1d2f7": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/map.webp"),  # map (11)
-                    "3e7ea361": None,  # (13)
-                    # original: https://github.com/widgetti/solara/assets/1765949/daaa3a46-61f5-431f-8003-b42b5915da4b
-                    "56055643": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/view.webp"),  # View (15)
-                    # original: https://github.com/widgetti/solara/assets/1765949/2f4daf0f-b7d8-4f70-b04a-c27542cffdb0
-                    "c78010ec": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/page.webp"),  # Page (20)
-                    # original: https://github.com/widgetti/solara/assets/1765949/a691d9f1-f07b-4e06-b21b-20980476ad64
-                    "18290364": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/controls.webp"),  # Controls
-                    "0ca68fe8": None,
-                    "fef5d187": None,
-                    # original: https://github.com/widgetti/solara/assets/1765949/f0075ad1-808d-458c-8797-e460ce4dc06d
-                    "af686391": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/full-app.webp"),  # Full app
-                },
-            )
-            solara.Markdown(
-                """
-                Explore this app live at [solara.dev](/apps/jupyter-dashboard-1).
+    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,
+        execute=False,
+        outputs={
+            "a7d17a84": None,  # empty output (7)
+            # original: https://github.com/widgetti/solara/assets/1765949/e844acdb-c77d-4df4-ba4c-a629f92f18a3
+            "82f1d2f7": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/map.webp"),  # map (11)
+            "3e7ea361": None,  # (13)
+            # original: https://github.com/widgetti/solara/assets/1765949/daaa3a46-61f5-431f-8003-b42b5915da4b
+            "56055643": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/view.webp"),  # View (15)
+            # original: https://github.com/widgetti/solara/assets/1765949/2f4daf0f-b7d8-4f70-b04a-c27542cffdb0
+            "c78010ec": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/page.webp"),  # Page (20)
+            # original: https://github.com/widgetti/solara/assets/1765949/a691d9f1-f07b-4e06-b21b-20980476ad64
+            "18290364": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/controls.webp"),  # Controls
+            "0ca68fe8": None,
+            "fef5d187": None,
+            # original: https://github.com/widgetti/solara/assets/1765949/f0075ad1-808d-458c-8797-e460ce4dc06d
+            "af686391": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/full-app.webp"),  # Full app
+        },
+    )
+    solara.Markdown(
+        """
+        Explore this app live at [solara.dev](/apps/jupyter-dashboard-1).
 
-                Don’t miss the next tutorial and stay updated with the latest techniques and insights by subscribing to our newsletter.
-            """
-            )
-            location = solara.use_router().path
-            MailChimp(location=location)
+        Don’t miss the next tutorial and stay updated with the latest techniques and insights by subscribing to our newsletter.
+    """
+    )
+    location = solara.use_router().path
+    MailChimp(location=location)
diff --git a/solara/widgets/vue/navigator.vue b/solara/widgets/vue/navigator.vue
index 95f8d05c0..fee24f0bb 100644
--- a/solara/widgets/vue/navigator.vue
+++ b/solara/widgets/vue/navigator.vue
@@ -1,5 +1,4 @@
 <template>
-  <span></span>
 </template>
 ​
 <script>