2e:null 2f:["$","title",null,{"children":"Generate Embed URL for zhweb | Res Marti | Observable"}] 34:[] 32:{"id":"161109790f9a927e","slug":"generate-embed-url-for-zhweb","title":"Generate Embed URL for zhweb","thumbnail":"4365cc8da9a956ae743ac299a69641f396bc3ebf5faec07f89a60ad655ed43eb","access_level":"public","create_time":"$D2022-01-12T15:52:30.436Z","update_time":"$D2024-02-14T13:40:47.879Z","view_time":null,"first_public_time":"$D2022-01-12T20:30:11.887Z","has_unpublished_edits":null,"fork":{"id":"7105991ec342b0dc","slug":"handy-embed-code-generator","title":"Handy Embed Code Generator","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":2,"starred":false,"owner":{"type":"team","id":"0d3896b062a50444","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":"starter_2024"},"version":630,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null}],"members":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Generate Embed URL for zhweb","cells":[{"id":0,"value":"md`# Generate Embed URL for zhweb\n\nObservable’s [built-in embed codes](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) are pretty nice! But to integrate a collection of cells into zhweb without a timedelay we need to have a url which returns the embedcode as html. The html is generated by a helper php-file which needs to be given some parametes. This notebook is here to help generate the url with all its parameters.\n\n## Step one: \nType in the name or the url of the notebook you’d like to embed. For example, try \\`@statistikzh/verkehrsunfallstatistik-seit-2011\\` or \\`https://observablehq.com/@statistikzh/erganzungsleistungen-mietzinsregionen-per-2021\\`.\n\nIf you would like to fix the embed code to a specific notebook version, provide the version with the name using the @-notation such as \\`@statistikzh/verkehrsunfallstatistik-seit-2011@2855\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"viewof providedslug = Inputs.textarea({\n label: \"notebook name or url\",\n rows: 1,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"cellNames\n ? md`## Step two:\nPick the named cells you want to embed. You can drag them to change their order. ${recommendation}`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof cells = selectOrder(cellNames ? cellNames : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"cellNames\n ? md`## Step three:\nSometimes a cell needs to be run without it's output being displayed. Pick the named cells you want to run in the background but not show. You can drag them to change their order (though order should not be relevant). ${recommendation}`\n : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof hiddencells = selectOrder(cellNames ? cellNames : [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"hasCells\n ? md`## Step four:\n\nzhweb uses two different max-widths for elements: standard elements are 768 px wide, wide elements are 1'168 px wide. Per default single-page applications have a width of 1'168 px (wide). Here you can define a maximum width. Maximum widths above 1'168 px, do not have an effect within zhweb.`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"Inputs.button([\n [\"no limit (default)\", () => set(viewof maxwidth, 0)],\n [\"1'168 px\", () => set(viewof maxwidth, 1168)],\n [\"768 px\", () => set(viewof maxwidth, 768)]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"viewof maxwidth = Inputs.range([0, 2000], {\n label: \"Maximale Breite\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"hasCells\n ? md`## Step five:\n\nzhweb automatically shows URL-parameter of single page applications (SPAs) in the main URL. This leads to complex an long URLs, especially if multiple SPAs are on one page. Since the URL-parameters are mostly fix and will not change while the chart is beeing displayed the URL-parameters can be hidden from zhweb. This is done by not using a '&' instead of a '?' for the first parameter. You can unhide any parameters from zhweb by putting them at the end and starting the first unhidden parameter with a '?' instead of '&'.\n\nWould you like to hide the URL-parameters?`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof hideparameters = Inputs.radio(\n new Map([\n [\"yes\", \"&\"],\n [\"no\", \"?\"]\n ]),\n {\n value: \"&\",\n label: \"hide parameters\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"hasCells & (version != null)\n ? md`## Step six:\n\nWould you like your embed to stay fresh whenever a new version of the notebook is published on Observable? Or would you like it to be pinned to the version you’re looking at right now?`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof pinned = hasCells & (version != null)\n ? radio({\n options: [\"Latest published version\", `Pinned to version ${version}`],\n value: \"Latest published version\"\n })\n : Object.assign(md``, { value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"hasCells\n ? md`## Result\n\nYou’re done! Here’s your embed url:`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"hasCells\n ? md`\n~~~html\n${embedCode}\n~~~\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"hasCells\n ? Object.assign(html`