3e:null 3f:["$","title",null,{"children":"Svelte, SVG and D3 (1) | gefercan | Observable"}] 45:[] 43:{"id":"6ebb1444d173e43a","slug":null,"title":"Svelte, SVG and D3 (1)","thumbnail":"9bd918cf249c73d80b58f2439a94d042450b0ace6611f2aa4f4ff85dbe595a2e","access_level":"public","create_time":"$D2023-07-08T18:21:35.142Z","update_time":"$D2023-07-13T09:07:32.398Z","view_time":null,"first_public_time":"$D2023-07-08T18:21:35.142Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b4d67296fbb33425","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":"starter_2024","bio":"","following":false},"version":86,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Svelte, SVG and D3 (1)","cells":[{"id":0,"value":"# Svelte, SVG and D3 (1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"

\nThere are complex modes to install Svelte app via npm,
but in the course Amelia uses \nsandbox and Rollup code, from the same creator of Svelte.

\nSVELTE:\n
\nSvelte.js is declarative, component-based, JavaScript framework for building websites.\n
\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"1) COMPONENT ANATOMY:
\nSvelte components look like basic HTML;to render the output of JavaScript expressions, we wrap it in curly braces...we can also add one script tag and one style tag; we can define a variable in the script tag and render it in the body\n
\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"//all this script goes in the app.svelte file\n\n\n\n

Welcome

\n\n

today is {new Date().toLocaleDateString()}\n

\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"2) SCOPED STYLES:
\nStyles in the < \"style\"> tag will be scoped to the component.\n
Svelte will add a hash to the CSS selector and the classes in the HTML.\n
to write global styles, wrap the selector in :global().\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"//in app.svlete file\n

\n h1 in the component\n

\n\n\n//in text.svelte file\n\n

\n Text\n

\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"