Copy new state-based export from PlutoSliderServer (#1063)

* Copy new state-based export from PlutoSliderServer

* asdf

frontend/components/Editor.js

@@ -1001,20 +1001,19 @@ patch: ${JSON.stringify(
         const status = this.cached_status ?? statusmap(this.state)
         const statusval = first_true_key(status)
 
-        const notebook_export_url =
+        const export_url = (u) =>
             this.state.binder_session_url == null
-                ? `./notebookfile?id=${this.state.notebook.notebook_id}`
-                : `${this.state.binder_session_url}notebookfile?id=${this.state.notebook.notebook_id}&token=${this.state.binder_session_token}`
+                ? `./${u}?id=${this.state.notebook.notebook_id}`
+                : `${this.state.binder_session_url}${u}?id=${this.state.notebook.notebook_id}&token=${this.state.binder_session_token}`
 
         return html`
             <${PlutoContext.Provider} value=${this.actions}>
                 <${PlutoBondsContext.Provider} value=${this.state.notebook.bonds}>
                     <${Scroller} active=${this.state.scroller} />
                     <header className=${export_menu_open ? "show_export" : ""}>
                         <${ExportBanner}
-                            pluto_version=${this.client?.version_info?.pluto}
-                            notebook=${this.state.notebook}
-                            notebook_export_url=${notebook_export_url}
+                            notebookfile_url=${export_url("notebookfile")}
+                            notebookexport_url=${export_url("notebookexport")}
                             open=${export_menu_open}
                             onClose=${() => this.setState({ export_menu_open: false })}
                         />
@@ -1039,7 +1038,7 @@ patch: ${JSON.stringify(
                             <div class="flex_grow_1"></div>
                             ${
                                 this.state.binder_phase === BinderPhase.ready
-                                    ? html`<pluto-filepicker><a href=${notebook_export_url} target="_blank">Save notebook...</a></pluto-filepicker>`
+                                    ? html`<pluto-filepicker><a href=${export_url("notebookfile")} target="_blank">Save notebook...</a></pluto-filepicker>`
                                     : html`<${FilePicker}
                                           client=${this.client}
                                           value=${notebook.in_temp_dir ? "" : notebook.path}

frontend/components/ExportBanner.js

@@ -1,7 +1,5 @@
 import { html } from "../imports/Preact.js"
 
-import { offline_html } from "../common/OfflineHTMLExport.js"
-
 const Circle = ({ fill }) => html`
     <svg
         width="48"
@@ -23,61 +21,20 @@ const Triangle = ({ fill }) => html`
     </svg>
 `
 
-export const ExportBanner = ({ notebook, pluto_version, onClose, notebook_export_url }) => {
-    // @ts-ignore
-    let is_chrome = window.chrome == null
-
+export const ExportBanner = ({ onClose, notebookfile_url, notebookexport_url }) => {
     return html`
         <aside id="export">
             <div id="container">
                 <div class="export_title">export</div>
-                <a href=${notebook_export_url} target="_blank" class="export_card">
+                <a href=${notebookfile_url} target="_blank" class="export_card" download>
                     <header><${Triangle} fill="#a270ba" /> Notebook file</header>
                     <section>Download a copy of the <b>.jl</b> script.</section>
                 </a>
-                <a
-                    href="#"
-                    class="export_card"
-                    onClick=${(e) => {
-                        offline_html({
-                            pluto_version: pluto_version,
-                            head: document.head,
-                            body: document.body,
-                        }).then((html) => {
-                            if (html != null) {
-                                const fake_anchor = document.createElement("a")
-                                fake_anchor.setAttribute("download", `${notebook.shortpath}.html`)
-                                fake_anchor.setAttribute(
-                                    "href",
-                                    URL.createObjectURL(
-                                        new Blob([html], {
-                                            type: "text/html",
-                                        })
-                                    )
-                                )
-                                document.body.appendChild(fake_anchor)
-                                setTimeout(() => {
-                                    fake_anchor.click()
-                                    document.body.removeChild(fake_anchor)
-                                }, 100)
-                            }
-                        })
-                    }}
-                >
+                <a href=${notebookexport_url} target="_blank" class="export_card" download>
                     <header><${Circle} fill="#E86F51" /> Static HTML</header>
                     <section>An <b>.html</b> file for your web page, or to share online.</section>
                 </a>
-                <a
-                    href="#"
-                    class="export_card"
-                    style=${!is_chrome ? "opacity: .7;" : ""}
-                    onClick=${() => {
-                        if (!is_chrome) {
-                            alert("PDF generation works best on Google Chome.\n\n(We're working on it!)")
-                        }
-                        window.print()
-                    }}
-                >
+                <a href="#" class="export_card" onClick=${() => window.print()}>
                     <header><${Circle} fill="#3D6117" /> Static PDF</header>
                     <section>A static <b>.pdf</b> file for print or email.</section>
                 </a>

sample/Interactivity.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.12.11
+# v0.14.0
 
 using Markdown
 using InteractiveUtils
@@ -94,7 +94,7 @@ Try drawing a rectangle in the canvas below 👇 and notice that the `area` vari
 
 <script>
 // 🐸 `currentScript` is the current script tag - we use it to select elements 🐸 //
-const canvas = currentScript.closest('pluto-output').querySelector("canvas")
+const canvas = currentScript.parentElement.querySelector("canvas")
 const ctx = canvas.getContext("2d")
 
 var startX = 80

src/Pluto.jl

@@ -13,11 +13,13 @@ project_relative_path(xs...) = normpath(joinpath(dirname(dirname(pathof(Pluto)))
 
 import Pkg
 
+include_dependency("../Project.toml")
 const PLUTO_VERSION = VersionNumber(Pkg.TOML.parsefile(project_relative_path("Project.toml"))["version"])
 const PLUTO_VERSION_STR = 'v' * string(PLUTO_VERSION)
 const JULIA_VERSION_STR = 'v' * string(VERSION)
 
 include("./notebook/PathHelpers.jl")
+include("./notebook/Export.jl")
 include("./Configuration.jl")
 
 include("./evaluation/Tokens.jl")

src/notebook/Export.jl

@@ -0,0 +1,59 @@
+import Pkg
+using Base64
+
+function generate_html(;
+        version=nothing, pluto_cdn_root=nothing,
+        notebookfile_js="undefined", statefile_js="undefined", 
+        slider_server_url_js="undefined", binder_url_js="undefined", 
+        disable_ui=true
+    )::String
+
+    original = read(project_relative_path("frontend", "editor.html"), String)
+
+    cdn_root = if pluto_cdn_root === nothing
+        if version isa Nothing
+            version = PLUTO_VERSION
+        end
+        "https://cdn.jsdelivr.net/gh/fonsp/Pluto.jl@$(string(version))/frontend/"
+    else
+        pluto_cdn_root
+    end
+
+    @info "Using CDN for Pluto assets:" cdn_root
+
+    cdnified = replace(
+    replace(original, 
+        "href=\"./" => "href=\"$(cdn_root)"),
+        "src=\"./" => "src=\"$(cdn_root)")
+
+    result = replace(cdnified, 
+        "<!-- [automatically generated launch parameters can be inserted here] -->" => 
+        """
+        <script data-pluto-file="launch-parameters">
+        window.pluto_notebookfile = $(notebookfile_js)
+        window.pluto_disable_ui = $(disable_ui ? "true" : "false")
+        window.pluto_statefile = $(statefile_js)
+        window.pluto_slider_server_url = $(slider_server_url_js)
+        window.pluto_binder_url = $(binder_url_js)
+        </script>
+        <!-- [automatically generated launch parameters can be inserted here] -->
+        """
+    )
+
+    return result
+end
+
+
+function generate_html(notebook; kwargs...)
+    state = notebook_to_js(notebook)
+
+    statefile_js = let
+        statefile64 = base64encode() do io
+            pack(io, state)
+        end
+
+        "\"data:;base64,$(statefile64)\""
+    end
+
+    generate_html(; statefile_js=statefile_js, kwargs...)
+end

src/webserver/Static.jl

@@ -200,16 +200,18 @@ function http_router_for(session::ServerSession)
     HTTP.@register(router, "GET", "/sample/*", serve_sample)
     HTTP.@register(router, "POST", "/sample/*", serve_sample)
 
+    notebook_from_uri(request) = let
+        uri = HTTP.URI(request.target)        
+        query = HTTP.queryparams(uri)
+        id = UUID(query["id"])
+        session.notebooks[id]
+    end
     serve_notebookfile = with_authentication(; 
         required=security.require_secret_for_access || 
         security.require_secret_for_open_links
     ) do request::HTTP.Request
         try
-            uri = HTTP.URI(request.target)        
-            query = HTTP.queryparams(uri)
-            id = UUID(query["id"])
-            notebook = session.notebooks[id]
-
+            notebook = notebook_from_uri(request)
             response = HTTP.Response(200, sprint(save_notebook, notebook))
             push!(response.headers, "Content-Type" => "text/plain; charset=utf-8")
             push!(response.headers, "Content-Disposition" => "inline; filename=\"$(basename(notebook.path))\"")
@@ -219,6 +221,22 @@ function http_router_for(session::ServerSession)
         end
     end
     HTTP.@register(router, "GET", "/notebookfile", serve_notebookfile)
+
+    serve_notebookexport = with_authentication(; 
+        required=security.require_secret_for_access || 
+        security.require_secret_for_open_links
+    ) do request::HTTP.Request
+        try
+            notebook = notebook_from_uri(request)
+            response = HTTP.Response(200, generate_html(notebook))
+            push!(response.headers, "Content-Type" => "text/html; charset=utf-8")
+            push!(response.headers, "Content-Disposition" => "inline; filename=\"$(basename(notebook.path)).html\"")
+            response
+        catch e
+            return error_response(400, "Bad query", "Please <a href='https://github.com/fonsp/Pluto.jl/issues'>report this error</a>!", sprint(showerror, e, stacktrace(catch_backtrace())))
+        end
+    end
+    HTTP.@register(router, "GET", "/notebookexport", serve_notebookexport)
 
     function serve_asset(request::HTTP.Request)
         uri = HTTP.URI(request.target)