Load index template from resources from CDN

holoviz · May 19, 2023 · 015e5d0 · 015e5d0
1 parent f623f59
commit 015e5d0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 24 deletions.
diff --git a/panel/_templates/index.html b/panel/_templates/index.html
@@ -20,13 +20,13 @@
 
   <!-- Favicon
   -------------------------------------------------- -->
-  <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/latest/dist/images/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.holoviz.org/panel/latest/dist/images/favicon.ico">
-  <link rel="manifest" href="https://cdn.holoviz.org/panel/latest/dist/images/site.webmanifest">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ PANEL_CDN }}images/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ PANEL_CDN }}images/favicon.ico">
+  <link rel="manifest" href="{{ PANEL_CDN }}images/site.webmanifest">
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
-  <script type="module" src="https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/fast-colors@5.3.1/dist/index.js"></script>
-  <script type="module" src="https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/fast-components@1.21.8/dist/fast-components.js"></script>
+  <script type="module" src="{{ PANEL_CDN }}bundled/@microsoft/fast-components@2.30.6/dist/fast-components.js"></script>
+  <script type="module" src="{{ PANEL_CDN }}bundled/fast/js/fast_design.js"></script>
   <script type="text/javascript">
     function setParamsFromSearch(text){
         const params = new URLSearchParams(location.search);
@@ -48,32 +48,36 @@
 
       setParamsFromSearch(text)
     }
-    function toggleLightDarkTheme(){
-        el=document.getElementById("body-design-provider")
+    function toggleLightDarkTheme(update) {
         const switchEl = document.getElementById("theme-switch")
         const params = new URLSearchParams(location.search);
-
-        if (switchEl.checked){
-            el.setAttribute("background-color", "#ffffff")
+	if (switchEl.checked) {
+	    window.bodyDesign.setLuminance(1)
+	    window.bodyDesign.setBackgroundColor("#ffffff")
             params.set('theme', "default");
         } else {
-            el.setAttribute("background-color", "#000000")
+	    window.bodyDesign.setLuminance(0.1)
+	    window.bodyDesign.setBackgroundColor("#000000")
             params.set('theme', "dark");
         }
-        window.history.replaceState({}, '', `${location.pathname}?${params}`);
+	if (update) {
+            window.history.replaceState({}, '', `${location.pathname}?${params}`);
+	}
     }
     function setSwitchFromParams(){
         const params = new URLSearchParams(window.location.search)
         if (params.has('theme')){
             const theme = params.get('theme')
             const switchEl = document.getElementById("theme-switch")
             if (theme==='dark'){
-                switchEl.checked=false
+                switchEl.checked = false
             } else {
-                switchEl.checked=true
+                switchEl.checked = true
             }
-            toggleLightDarkTheme()
-        }
+            toggleLightDarkTheme(true)
+        } else {
+            toggleLightDarkTheme(false)
+	}
     }
     function setSearchFromParams(){
         const params = new URLSearchParams(window.location.search)
@@ -87,6 +91,10 @@
   </script>
 
   <style>
+    :root {
+      --background-color: #ffffff;
+      --header-background: #000000;
+    }
     html {
 	height:100%;
     }
@@ -106,7 +114,7 @@
 	font-size: 16px;
 	line-height: normal;
 	font-family: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
-	overflow-y: scroll;
+	overflow-y: auto;
     }
     .gallery-item:hover {
 	box-shadow: 0 1px 5px var(--neutral-focus);
@@ -116,7 +124,7 @@
 	text-align: center;
     }
     .header {
-	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) ),url('https://cdn.holoviz.org/panel/latest/dist/images/index_background.png');
+	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) ),url('{{ PANEL_CDN }}images/index_background.png');
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center;
@@ -148,7 +156,11 @@
 	width: 25px;
 	margin-top: 5px;
     }
-
+    #header-design-provider {
+      --neutral-fill-hover: var(--header-background);
+      --neutral-fill-rest: var(--header-background);
+      background-color: var(--header-background);
+    }
     /* The grid layout is inspired by
        https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
        https://codepen.io/andybelldesign/pen/vMMYKJ */
@@ -159,7 +171,6 @@
    */
     .cards-grid {
 	--cards-grid-min-size: 16rem;
-
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(var(--cards-grid-min-size), 1fr));
 	grid-gap: 2rem;
@@ -224,7 +235,7 @@
   </style>
 </head>
 <body>
-  <fast-design-system-provider id="body-design-provider" use-defaults background-color="#ffffff">
+  <fast-design-system-provider id="body-design-provider" use-defaults>
     <fast-design-system-provider id="header-design-provider" use-defaults background-color="#000000">
       <section class="header">
         <fast-switch id="theme-switch" style="float: right; padding-top: 1em; padding-right: 2em;" onChange="toggleLightDarkTheme()" checked>
@@ -275,8 +286,11 @@ <h2 class="card-header">{{ item[1:].replace("_", " ").title() }}</h2>
     </section>
   </fast-design-system-provider>
   <script type="text/javascript">
-    setSwitchFromParams()
-    setSearchFromParams()
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
+      setSwitchFromParams()
+      setSearchFromParams()
+    })
   </script>
 </body>
 </html>
diff --git a/panel/dist/images/site.webmanifest b/panel/dist/images/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/icons-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/icons-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/panel/io/server.py b/panel/io/server.py
@@ -50,11 +50,12 @@
 from bokeh.io import curdoc
 from bokeh.models import CustomJS
 from bokeh.server.server import Server as BokehServer
-from bokeh.server.urls import per_app_patterns
+from bokeh.server.urls import per_app_patterns, toplevel_patterns
 from bokeh.server.views.autoload_js_handler import (
     AutoloadJsHandler as BkAutoloadJsHandler,
 )
 from bokeh.server.views.doc_handler import DocHandler as BkDocHandler
+from bokeh.server.views.root_handler import RootHandler as BkRootHandler
 from bokeh.server.views.static_handler import StaticHandler
 from bokeh.util.serialization import make_id
 from bokeh.util.token import (
@@ -545,6 +546,19 @@ async def get(self, *args, **kwargs) -> None:
 
 per_app_patterns[3] = (r'/autoload.js', AutoloadJsHandler)
 
+class RootHandler(BkRootHandler):
+    """
+    Custom RootHandler that provides the CDN_DIST directory as a
+    template variable.
+    """
+
+    def render(self, *args, **kwargs):
+        kwargs['PANEL_CDN'] = CDN_DIST
+        return super().render(*args, **kwargs)
+
+toplevel_patterns[0] = (r'/?', RootHandler)
+bokeh.server.tornado.RootHandler = RootHandler
+
 
 class ComponentResourceHandler(StaticFileHandler):
     """
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/icons-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/icons-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}