--- title: "Supported blocks in Webtrotion" slug: supported-blocks-in-webtrotion canonical_url: https://nerdymomocat.github.io/posts/supported-blocks-in-webtrotion/ collection: Notes published_at: 2023-11-25T00:00:00.000Z updated_at: 2023-11-28T00:00:00.000Z tags: - Information - Notion - Webtrotion excerpt: "Almost all of them!" author: "Nerdy Momo Cat" --- ## Navigation Context - Canonical URL: https://nerdymomocat.github.io/posts/supported-blocks-in-webtrotion/ - You are here: Home > Posts > Notes > Supported blocks in Webtrotion ### Useful Next Links - [Home](https://nerdymomocat.github.io/) - [Bundles](https://nerdymomocat.github.io/collections/bundles/) - [Logbook](https://nerdymomocat.github.io/collections/logbook/) - [Notes](https://nerdymomocat.github.io/collections/notes/) - [Stream](https://nerdymomocat.github.io/collections/stream/) ### Related Content #### Pages That Mention This Page - [Introducing Webtrotion](https://nerdymomocat.github.io/posts/introducing-webtrotion/) - [Webtrotion vs Notion Sites v2](https://nerdymomocat.github.io/posts/webtrotion-vs-notion-sites-v2/) #### Other Pages Mentioned On This Page - [Introducing Webtrotion](https://nerdymomocat.github.io/posts/introducing-webtrotion/) - [Code and Snippets](https://nerdymomocat.github.io/posts/code-and-snippets/) function d(e){return e.querySelector("\[data-tab-list\]")}function f(e){const n=d(e);return n instanceof HTMLElement?Array.from(n.querySelectorAll(':scope > \[role="tab"\]')):\[\]}function b(e){return Array.from(e.querySelectorAll(":scope > \[data-tab-panel\]"))}function i(e){const n=e.querySelector("\[data-tab-header\]"),t=d(e);if(!(n instanceof HTMLElement)||!(t instanceof HTMLElement))return;const s=Math.max(0,t.scrollWidth-t.clientWidth),a=6;n.dataset.canScrollLeft=String(t.scrollLeft>a),n.dataset.canScrollRight=String(t.scrollLeft{const u=c===o;r.setAttribute("aria-selected",String(u)),r.setAttribute("tabindex",u?"0":"-1"),r.classList.toggle("is-active",u)}),a.forEach((r,c)=>{r.hidden=c!==o}),t&&s\[o\]?.focus(),s\[o\]?.scrollIntoView({block:"nearest",inline:"nearest",behavior:t?"smooth":"auto"}),requestAnimationFrame(()=>i(e))}function h(e){if(!(e instanceof HTMLElement))return null;const n=\[\];let t=e.parentElement;for(;t;){if(t.matches("\[data-tab-panel\]")){const s=t.closest("\[data-notion-tab-block\]");s instanceof HTMLElement&&n.push({container:s,panel:t})}t=t.parentElement}return n.reverse().forEach(({container:s,panel:a})=>{const r=b(s).indexOf(a);r!==-1&&l(s,r)}),e}function m(e){if(e instanceof HTMLElement)return e;if(typeof e!="string")return null;const n=e.startsWith("#")?e.slice(1):e;if(!n)return null;const t=document.getElementById(decodeURIComponent(n));return t instanceof HTMLElement?t:null}function w(e){if(e.dataset.tabsReady==="true")return;e.dataset.tabsReady="true";const n=e.querySelector("\[data-tab-list\]");l(e,Number(e.dataset.initialTab??0)),i(e),n instanceof HTMLElement&&(n.addEventListener("scroll",()=>i(e),{passive:!0}),"ResizeObserver"in window&&new ResizeObserver(()=>i(e)).observe(n)),window.addEventListener("resize",()=>i(e),{passive:!0}),e.addEventListener("click",t=>{const s=t.target instanceof Element?t.target.closest('\[role="tab"\]'):null;if(!(s instanceof HTMLElement)||!e.contains(s))return;const a=Number(s.dataset.tabIndex??0);l(e,a)}),e.addEventListener("keydown",t=>{const s=t.target instanceof Element?t.target.closest('\[role="tab"\]'):null;if(!(s instanceof HTMLElement)||!e.contains(s))return;const a=f(e),o=a.indexOf(s);if(o===-1)return;let r=o;switch(t.key){case"ArrowRight":case"ArrowDown":r=(o+1)%a.length;break;case"ArrowLeft":case"ArrowUp":r=(o-1+a.length)%a.length;break;case"Home":r=0;break;case"End":r=a.length-1;break;case"Enter":case" ":l(e,o),t.preventDefault();return;default:return}t.preventDefault(),l(e,r,!0)})}if(typeof window<"u"&&(window.\_\_ensureNotionTabTargetVisible||(window.\_\_ensureNotionTabTargetVisible=e=>{const n=m(e);return h(n)}),!window.\_\_notionTabHashSyncReady)){window.\_\_notionTabHashSyncReady="true";const e=(n="auto")=>{const t=window.\_\_ensureNotionTabTargetVisible(window.location.hash);t instanceof HTMLElement&&requestAnimationFrame(()=>{t.scrollIntoView({behavior:n,block:"start"})})};window.addEventListener("hashchange",()=>e("smooth")),window.location.hash&&requestAnimationFrame(()=>e("auto"))}document.querySelectorAll("\[data-notion-tab-block\]").forEach(e=>{w(e)}); ![](https://nerdymomocat.github.io/_astro/die1_red.B_U-JWAW_Z1EYdWV.svg) The main thing to remember is it does not support child databases and child pages. I don’t plan to support those till Notion adds a native embed option. ## Heading 1 ### Heading 2 #### Heading 3 ##### Heading 4 **Toggleable Heading 1** contents **Toggleable Heading 2** **Toggleable Heading 3** **Toggleable Heading 4** ## Paragraph Paragraph **bold** _italic_ Underline Strike [link](https://github.com/otoyo/easy-notion-blog) `code` ← page with no access color color background common latex code 4\=54=54\=5 colored block colored text with colored block ### Color Test **Color guide for reference:** | Name | Text LM (Hex) | Text DM (Hex) | BG LM (Hex) | BG DM (Hex) | Select LM (Hex) | Select DM (Hex) | | --- | --- | --- | --- | --- | --- | --- | | Default | 37352F | FFFFFF (90%) | FFFFFF | 2F3437 | CECDCA (50%) | 505558 | | Gray | 9B9A97 | 979A9B (95%) | EBECED | 454B4E | 9B9A97 (40%) | 979A9B (50%) | | Brown | 64473A | 937264 | E9E5E3 | 434040 | 8C2E00 (20%) | 937264 (50%) | | Orange | D9730D | FFA344 | FAEBDD | 594A3A | F55D00 (20%) | FFA344 (50%) | | Yellow | DFAB01 | FFDC49 | FBF3DB | 59563B | E9A800 (20%) | FFDC49 (50%) | | Green | 0F7B6C | 4DAB9A | DDEDEA | 354C4B | 00876B (20%) | 4DAB9A (50%) | | Blue | 0B6E99 | 529CCA | DDEBF1 | 364954 | 0078DF (20%) | 529CCA (50%) | | Purple | 6940A5 | 9A6DD7 | EAE4F2 | 443F57 | 6724DE (20%) | 9A6DD7 (50%) | | Pink | AD1A72 | E255A1 | F4DFEB | 533B4C | DD0081 (20%) | E255A1 (50%) | | Red | E03E3E | FF7369 | FBE4E4 | 594141 | FF001A (20%) | FF7369 (50%) | **Background** the lazy cat meows and meows at the flailing kitten **Text** the lazy cat meows and meows at the flailing kitten ## Bulleted List - Bulleted List - Uni - Tako - AAA - BBB ## Numbered List 1. Numbered List 2. Kani 3. Ika 1. 111 2. 222 1. Third! ## To Do ✅ To-do 1 ⬜ Todo 2 ⬜ A bit complicated now ⬜ A bit more complicated now? What if child has no box? ## What if there is `suddenly` a heading? 💡 Huh? ⬜ Oh ⬜ To-do 3 ⬜ Todo 4 ⬜ Todo 5 ⬜ Todo 6 ## Special Parsing for Text Footnotes [^1] and Citations, for example if we wanted to know why Tufte style footnotes are nice \[1\]. Citations won’t work here because they are not enabled by default. ## Column List Column 1 [![External image](https://images.unsplash.com/photo-1526666923127-b2970f64b422?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy)](https://images.unsplash.com/photo-1526666923127-b2970f64b422?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy) Column 2 [![External image](https://images.unsplash.com/photo-1429041966141-44d228a42775?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy)](https://images.unsplash.com/photo-1429041966141-44d228a42775?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy) ### Columns inside columns Column 1 Column 1 still Column 2 Column 2a Column2 b ## Tab block Tab 1Tab 2Tab 3 Here is some content! And so is here ## Divider * * * ## Callout ℹ️ Callout Line break ![](https://nerdymomocat.github.io/_astro/alarm_green.DN6XfjHp_Z1EYdWV.svg) **Hello** ⬜ SO many callout tests! Like cols And more cols ![](https://nerdymomocat.github.io/_astro/attachment_gray.DdDP1Rry_Z1EYdWV.svg) Colored Callout and background color [![External image](https://images.unsplash.com/photo-1429041966141-44d228a42775?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb)](https://images.unsplash.com/photo-1429041966141-44d228a42775?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb) ## Code ``` const root = ReactDOM.createRoot(document.getElementById('root')); root.render(

Hello, world!

); ``` This is code caption. ``` a=32 if a: x =23 ``` **Also supports shiki transformers:** What you write ``` # <> # use this keyword to tell it to transform code a=32 if a: x =23 ``` What you get ``` a=32 if a: x =23 ``` ### CodePen Embed ### Code with Mermaid diagram flowchart LR; A\[Hard Edge\] --->|LinkText|B(Round Edge) Mermaid notation ### Trying HTML injection Remember this directive can be changed, check out .card { overflow: visible; width: 190px; height: 254px; } .content { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 300ms; box-shadow: 0px 0px 10px 1px #000000ee; border-radius: 5px; } .front, .back { background-color: #151515; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5px; overflow: hidden; } .back { width: 100%; height: 100%; justify-content: center; display: flex; align-items: center; overflow: hidden; } .back::before { position: absolute; content: ' '; display: block; width: 160px; height: 160%; background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent); animation: rotation\_481 5000ms infinite linear; } .back-content { position: absolute; width: 99%; height: 99%; background-color: #151515; border-radius: 5px; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; } .card:hover .content { transform: rotateY(180deg); } @keyframes rotation\_481 { 0% { transform: rotateZ(0deg); } 0% { transform: rotateZ(360deg); } } .front { transform: rotateY(180deg); color: white; } .front .front-content { position: absolute; width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; } .front-content .badge { background-color: #00000055; padding: 2px 10px; border-radius: 10px; backdrop-filter: blur(2px); width: fit-content; } .card-description { box-shadow: 0px 0px 10px 5px #00000088; width: 100%; padding: 10px; background-color: #00000099; backdrop-filter: blur(5px); border-radius: 5px; } .card-title { font-size: 11px; max-width: 100%; display: flex; justify-content: space-between; } .card-title p { width: 50%; } .card-footer { color: #ffffff88; margin-top: 5px; font-size: 8px; } .front .img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .circle { width: 90px; height: 90px; border-radius: 50%; background-color: #ffbb66; position: relative; filter: blur(15px); animation: floating 2600ms infinite linear; } #bottom { background-color: #ff8866; left: 50px; top: 0px; width: 150px; height: 150px; animation-delay: -800ms; } #right { background-color: #ff2233; left: 160px; top: -80px; width: 30px; height: 30px; animation-delay: -1800ms; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } **Hover Me** Pasta **Spaguetti Bolognese** 30 Mins   |   1 Serving A random fancy hover card [(source)](https://uiverse.io/ElSombrero2/tricky-robin-67) ### Trying HTML injection ## Quote > Quote Block > Colored Quote Block ## Equation Inline equation here c\=±a2+b2c = \\pm\\sqrt{a^2 + b^2}c\=±a2+b2​ for testing Block equation below. c\=±a2+b2c = \\pm\\sqrt{a^2 + b^2}c\=±a2+b2​ ## Table Know that Table column/row colors do not show up in Notion API | Simple | Table | Ika | Tako | Shake | | --- | --- | --- | --- | --- | | 1 | 2 | 3 | 4 | 5 | | a | b | c | d | e | | A | B | C | D | E | ## File A file about XYZ [Download](https://nerdymomocat.github.io/notion/6dd338e7-42f6-4688-8a67-0d0c07e87788/sample.pdf) [Preview](https://nerdymomocat.github.io/notion/6dd338e7-42f6-4688-8a67-0d0c07e87788/sample.pdf) **Indented File** PDFTriage: Question Answering over Long, Structured Documents [Download](https://nerdymomocat.github.io/notion/2bf4c3ca-dfe8-422f-8e64-7ff537fb7baf/2309.08872.pdf) [Preview](https://nerdymomocat.github.io/notion/2bf4c3ca-dfe8-422f-8e64-7ff537fb7baf/2309.08872.pdf) ## Toggle **Toggle** This is toggled details. - 1 - 2 - 3 **Toggle inside toggle** More toggles! **Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc.** Long enough toggle to see what happens to the marker here. ## Link to page [![](https://nerdymomocat.github.io/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat.github.io/posts/introducing-webtrotion/) ## Synced Block ♻️ Synced Block ♻️ Synced Block - 1 - 2 - 3 ♻️ Synced Block ♻️ Synced Block - 1 - 2 - 3 ### Synced block from a different page ![](https://nerdymomocat.github.io/_astro/condense_orange.C09CXT4i_Z1EYdWV.svg) **tl;dr** And that concludes my TED Talk on "Just Pick Your Tool, Keep Evaluating It." Remember, choosing the right note-taking app is all about finding the one that best meets your requirements and preferences. Once you've made your choice, continue evaluating it regularly to ensure it continues to serve your needs effectively. By refining your requirements, assigning tool scores, and conducting checks on accessibility, stability, and usability, you can make an informed decision on which app to use. Don't be swayed by shiny new tools that may not fulfill your actual needs. Stay true to what works best for you and your note-taking process. So, go ahead, pick your tool, and embark on a journey of continuous evaluation and improvement. Happy note-taking! ## All Mentions Dates: Nov 23, 2023, 05:27 AM Nov 22, 2023 Nov 17, 2023 to Nov 22, 2023 Nov 23, 2023, 05:00 PM and People: I did something very normal Nov 22, 2023 which is a huge deal! ### Linked Blocks and Pages This links to [heading Column List](https://nerdymomocat.github.io/posts/supported-blocks-in-webtrotion/#column-list) **But we can also have links that are not on direct children of the page, right?** This inside toggle links to [heading Column List](https://nerdymomocat.github.io/posts/supported-blocks-in-webtrotion/#column-list) This links to a heading in another webpage This links to a heading in same page but an internal block (not [main page](https://nerdymomocat.github.io/posts/supported-blocks-in-webtrotion/#what-if-there-is-suddenly-a-heading), nested in) This links to block Ika (now supported) Linked page with [URL](https://www.notion.so/nerdymomocat/Introducing-Webtrotion-848f6ee3ea8941c2b3da7df6c35b3e6d) [What are complete links?](http://google.com/) Link to main pages [![](https://nerdymomocat.github.io/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat.github.io/posts/introducing-webtrotion/) But paste link as mention doesn’t work: [![](https://escapeapp.cloud/assets/images/favicon.png) Mind map & Outline Ideas - Escape](https://escapeapp.cloud/index.html) ## Image [![Caption for an image](https://nerdymomocat.github.io/_astro/astro-notion-blog.DssJOQxZ_1TJXjN.webp)](https://nerdymomocat.github.io/_astro/astro-notion-blog.DssJOQxZ_1TJXjN.webp) Caption for an image [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/Untitled_Artwork_2_copy_2.CIS-XKKR_Z1LKF16.webp)](https://nerdymomocat.github.io/_astro/Untitled_Artwork_2_copy_2.CIS-XKKR_Z1LKF16.webp) ## Audio Your browser does not support the audio element. Your browser does not support the audio element. ## Link Preview & Bookmark [ GitHub - otoyo/easy-notion-blog: ✍️ Let’s start your own Notion Blog easily. / Notion Blogを始めましょう！ ✍️ Let’s start your own Notion Blog easily. / Notion Blogを始めましょう！ - otoyo/easy-notion-blog ![title](https://www.google.com/s2/favicons?domain=github.com) https://github.com/otoyo/easy-notion-blog ![title](https://repository-images.githubusercontent.com/424061638/8c198182-db48-456a-ae3b-df0d98a605e1) ](https://github.com/otoyo/easy-notion-blog) You can add caption to bookmarks and link previews! And I do not want to lose that information Bookmark for [https://github.com/otoyo/easy-notion-blog](https://github.com/otoyo/easy-notion-blog) [ Oops! You found a missing page! Oops! It looks like this page is lost in space! ![title](https://www.google.com/s2/favicons?domain=thezal.dev) https://thezal.dev/article\_giscus\_astro/ ![title](https://thezal.dev/social-card.png) ](https://thezal.dev/article_giscus_astro/) Bookmark for [https://thezal.dev/article\_giscus\_astro/](https://thezal.dev/article_giscus_astro/) ## Other Embeds ### Twitter [ ![おとよ🦙NotionブログN2B](https://pbs.twimg.com/profile_images/1921695463000145922/PK03AVhN_normal.jpg) ](https://twitter.com/otoyo0122/status/1558960777167609857) [ おとよ🦙NotionブログN2B ](https://twitter.com/otoyo0122/status/1558960777167609857) [@otoyo0122](https://twitter.com/otoyo0122/status/1558960777167609857) · [Follow](https://twitter.com/intent/follow?screen_name=otoyo0122) [](https://twitter.com/otoyo0122/status/1558960777167609857) easy-notion-blog バージョン0.10の内容を紹介します。コードハイライトやマーメイド図がNotionらしくなりました。 [ift.tt/AfjnLqz](https://ift.tt/AfjnLqz) [Aug 14, 2022, 11:36 PM](https://twitter.com/otoyo0122/status/1558960777167609857)[](https://help.twitter.com/en/twitter-for-websites-ads-info-and-privacy) [ 5](https://twitter.com/intent/like?tweet_id=1558960777167609857)[ Reply](https://twitter.com/intent/tweet?in_reply_to=1558960777167609857) Mentions [tweet](https://twitter.com/user/status/1558960777167609857) And a caption for the tweet! ### Spotify [https://open.spotify.com/embed/track/45wMBGri1PORPjM9PwFfrS?utm\_source=generator](https://open.spotify.com/embed/track/45wMBGri1PORPjM9PwFfrS?utm_source=generator) ### tldraw [](https://www.tldraw.com/s/v2_c_x2Qc1KednwBpfQTXJ7w3b?viewport=0,-0,2000,1153&page=page:80w6wBME7YuFFIizQomO2) ### Raindrop [ Design 268 bookmarks ![title](https://www.google.com/s2/favicons?domain=raindrop.io) https://raindrop.io/exentrich/design-66 ![title](https://raindrop.page/api/ogimage?url=https%3A%2F%2Fexentrich.raindrop.page%2Fdesign-66&v=1774283321284) ](https://raindrop.io/exentrich/design-66) Bookmark for [https://raindrop.io/exentrich/design-66](https://raindrop.io/exentrich/design-66) ### YouTube And a caption for youtube video ### Tiktok > [@twiniboo](https://www.tiktok.com/{user}?refer=embed "@twiniboo") Cat gets a bath! [https://www.tiktok.com/@twiniboo/video/7013145735747079429?lang=en](https://www.tiktok.com/@twiniboo/video/7013145735747079429?lang=en) ### Instagram > [ > > View this post on Instagram > > ](https://www.instagram.com/reel/CzHxObTvS6J/?utm_source=ig_embed&utm_campaign=loading) > > [A post shared by Instagram](https://www.instagram.com/reel/CzHxObTvS6J/?utm_source=ig_embed&utm_campaign=loading) Shelby Grace Instagram with orange hair ### Maps Using the embed link by google [](https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.862502325055!2d103.82046972647512!3d1.2541727118727801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1955a615a343%3A0x3094037d34e6529f!2sUniversal%20Studios%20Singapore!5e0!3m2!1sen!2sus!4v1701502781758!5m2!1sen!2sus) Captions work! And click the black button on right to expand! Using general link by google (it auto converts) [ Google Maps Find local businesses, view maps and get driving directions in Google Maps. ![title](https://www.google.com/s2/favicons?domain=maps.app.goo.gl) https://maps.app.goo.gl/dyjQVyHP87ZsVBPn6 ![title](https://maps.google.com/maps/api/staticmap?center=1.2541674%2C103.8230446&zoom=17&size=900x900&language=en&sensor=false&key=AIzaSyBoYjeRtfVI0Jd8Q_9mnflo9i4sOYpShB0&signature=LABig1CUQE0FkOlYGGIGX5W3qBM) ](https://maps.app.goo.gl/dyjQVyHP87ZsVBPn6) Bookmark for [https://maps.app.goo.gl/dyjQVyHP87ZsVBPn6](https://maps.app.goo.gl/dyjQVyHP87ZsVBPn6) Using Notion embed [ Google Maps Find local businesses, view maps and get driving directions in Google Maps. ![title](https://www.google.com/s2/favicons?domain=www.google.com) https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026\_mw1?entry=ttu ![title](https://maps.google.com/maps/api/staticmap?center=1.2541727%2C103.8204697&zoom=17&size=900x900&language=en&sensor=false&key=AIzaSyBoYjeRtfVI0Jd8Q_9mnflo9i4sOYpShB0&signature=ZHui1VNUDlcCpdgx7MiA5O2x_XA) ](https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026_mw1?entry=ttu) Bookmark for [https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026\_mw1?entry=ttu](https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026_mw1?entry=ttu) Using HTML directive ``` ``` This google maps will go out of margin if we set width to 600 and height to 450. So, embeds are usually a better idea! In columns [ Google Maps Find local businesses, view maps and get driving directions in Google Maps. ![title](https://www.google.com/s2/favicons?domain=www.google.com) https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026\_mw1?entry=ttu ![title](https://maps.google.com/maps/api/staticmap?center=1.2541727%2C103.8204697&zoom=17&size=900x900&language=en&sensor=false&key=AIzaSyBoYjeRtfVI0Jd8Q_9mnflo9i4sOYpShB0&signature=ZHui1VNUDlcCpdgx7MiA5O2x_XA) ](https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026_mw1?entry=ttu) Bookmark for [https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026\_mw1?entry=ttu](https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026_mw1?entry=ttu) [](https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.862502325055!2d103.82046972647512!3d1.2541727118727801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1955a615a343%3A0x3094037d34e6529f!2sUniversal%20Studios%20Singapore!5e0!3m2!1sen!2sus!4v1701502781758!5m2!1sen!2sus) ### Loom Loom/any video embed using Notion’s option is not supported at the moment But it works if you use their embed URL [](https://www.loom.com/embed/0281766fa2d04bb788eaf19e65135184) ## Direct Uploaded Video [](https://nerdymomocat.github.io/notion/de333a66-2cb4-4f5c-8d5c-0d051e4a08cb/Screen_Recording_2023-02-09_at_2.50.20_PM.mp4) Your browser does not support the video tag. This is a direct uploaded video caption! **Known stuff that is not supported/has bugs** 1. Multiple injections on a single page if not handled carefully, have clashes can have a problem! 2. Resizing for embedded html is a problem, for things like d3.js, but does it matter? How does distil handle it? 3. If you use `npm run dev` without `npm run build`, some things may not be download leading to: [![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/Untitled.ylhTKvzg_Z1EDUOA.webp)](https://nerdymomocat.github.io/_astro/Untitled.ylhTKvzg_Z1EDUOA.webp) 4. CSS generation is also now associated with build. Run the build command once before running dev please. 5. Synced blocks do not change the update timestamp of the pages the block is synced to — so they are not updated unless you end up building without cache, or updating the fields in the individual pages where the blocks are synced. * * * 1. Table column colors are not supported through API 2. Block mentions are not supported through API 3. Comments are not supported 4. Word breaks are an issue on smaller screen if there is no viable place to break them. Currently I am using `word-wrap:normal;` 5. I do not plan to add support for inline databases but I’d love if anyone wants to contribute? 6. Child Pages are too much work to support and I do not have a personal usecase for it! 7. Column widths and embed widths are not exposed in API 8. Backlinks are not exposed in API so I do not know how to do _**Links to This Note**_ 9. Right now, if I click on a tag from “unlisted” URL and that tag is only attached to that post, no tag page is generated, and I think that isn’t a bad thing! 10. If you post a parent block with child sync block to another workspace, it will not show up in UI but does show up in API causing warnings/errors 11. Heading ids are generated based off text. If you have two headings with same names, that is an issue. I can change it to use block id, but then they are illegible to anyone using an href link for them to share. [^1]: Footnotes can be added like this. Please check [here](https://nerdymomocat.github.io/posts/webtrotion-20-footnotes-citations-and-json5-config/#how-footnotes-work-in-webtrotion) for details. ## Bibliography 1. Balkin, J. M. (1988). Footnote. _Northwestern University Law Review_, _83_, 275. (https://openyls.law.yale.edu/server/api/core/bitstreams/7af4ac40-7b7f-4d3d-b0b0-76dd4eb7f9de/content)