--- title: "Supported blocks" slug: supported-blocks canonical_url: https://nerdymomocat-templates.github.io/posts/supported-blocks/ collection: "Personal Notes" published_at: 2023-11-25T00:00:00.000Z updated_at: 2023-11-28T00:00:00.000Z tags: - Information - Webtrotion - "🌲 Evergreen" - Guide excerpt: "Almost all of them!" author: "Nerdy Momo Cat" --- ## Navigation Context - Canonical URL: https://nerdymomocat-templates.github.io/posts/supported-blocks/ - You are here: Home > Posts > Personal Notes > Supported blocks ### Useful Next Links - [Home](https://nerdymomocat-templates.github.io/) - [Updates](https://nerdymomocat-templates.github.io/updates/) - [Another Collection](https://nerdymomocat-templates.github.io/collections/another-collection/) - [Personal Notes](https://nerdymomocat-templates.github.io/collections/personal-notes/) - [Stream](https://nerdymomocat-templates.github.io/collections/stream/) ### Related Content #### Pages That Mention This Page - [Introducing Webtrotion](https://nerdymomocat-templates.github.io/posts/introducing-webtrotion/) #### Other Pages Mentioned On This Page - [Introducing Webtrotion](https://nerdymomocat-templates.github.io/posts/introducing-webtrotion/) - [Updates](https://nerdymomocat-templates.github.io/updates/) - [Home](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog) 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-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/new-badge_blue.BemMoi_S_Z1EYdWV.svg) For using the template and the corresponding code, go to [![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/introducing-webtrotion/) ![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/die1_red.B_U-JWAW_Z1EYdWV.svg) The main thing to remember is it does not support child databases and child pages. ## Heading 1 Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens. ### Heading 2 Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens. #### Heading 3 Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens. ##### Heading 4 Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet. **Toggleable Heading 1** contents **Toggleable Heading 2** content **Toggleable Heading 3** **Toggleable Heading 4** ## Paragraph Paragraph **bold** _italic_ Underline Strike [link](https://github.com/otoyo/easy-notion-blog) `code` ← No access page Empty Block below 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 ## Special Parsing for Text Footnotes [^1] and Citations, for example if we wanted to know why Tufte style footnotes are nice \[@balkin1988footnote\]. ## 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-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/alarm_green.DN6XfjHp_Z1EYdWV.svg) **Hello** ⬜ SO many callout tests! Like cols And more cols ![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_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 [![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/introducing-webtrotion/) .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 rendering Remember this directive can be changed, check out [![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/introducing-webtrotion/) ## Quote > Quote Block > Colored Quote Block ## Equation Inline equation here 1+q2(1−q)+q6(1−q)(1−q2)+⋯\=∏j\=0∞1(1−q5j+2)(1−q5j+3),for ∣q∣<1.1 + \\frac{q^2}{(1-q)}+\\frac{q^6}{(1-q)(1-q^2)}+\\cdots = \\prod\_{j=0}^{\\infty}\\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \\quad\\quad \\text{for }\\lvert q\\rvert<1.1+(1−q)q2​+(1−q)(1−q2)q6​+⋯\=∏j\=0∞​(1−q5j+2)(1−q5j+3)1​,for ∣q∣<1. for testing Block equation below. ΔE00∗\=(ΔL′kLSL)2+(ΔC′kCSC)2+(ΔH′kHSH)2+RTΔC′kCSCΔH′kHSH\\Delta E^\*\_{00} = \\sqrt{ \\Big(\\frac{\\Delta L'}{k\_LS\_L}\\Big)^2 + \\Big(\\frac{\\Delta C'}{k\_CS\_C}\\Big)^2 + \\Big(\\frac{\\Delta H'}{k\_HS\_H}\\Big)^2 + R\_T \\frac{\\Delta C'}{k\_CS\_C} \\frac{\\Delta H'}{k\_HS\_H} }ΔE00∗​\=(kL​SL​ΔL′​)2+(kC​SC​ΔC′​)2+(kH​SH​ΔH′​)2+RT​kC​SC​ΔC′​kH​SH​ΔH′​​ ## 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-templates.github.io/webtrotion-astro-notion-cms-website-blog/notion/6dd338e7-42f6-4688-8a67-0d0c07e87788/sample.pdf) [Preview](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/notion/6dd338e7-42f6-4688-8a67-0d0c07e87788/sample.pdf) **Indented File** PDFTriage: Question Answering over Long, Structured Documents [Download](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/notion/2bf4c3ca-dfe8-422f-8e64-7ff537fb7baf/2309.08872.pdf) [Preview](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/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-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/cat_purple.D6LQSj_d_Z1EYdWV.svg)Introducing Webtrotion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/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 **New Features and Changelog** Oct 28, 2025: Comprehensive Citation and Footnote System. Webtrotion now has a complete citation and footnote system. You can now add citations from BibTeX files and have them automatically formatted. Footnotes are also supported, with popovers for easy reading. Oct 25, 2025: Enhanced OG Images. OG images for tags and collections now include descriptions. A new automated workflow has been added to clean up template-specific files when you create a new repository from the template or pull updates from it. This keeps your project clean and free of unnecessary files. Sep 11, 2025: Search from Query Parameters and UI improvements. You can now pre-fill the search box with a query parameter in the URL. The UI for the tags page has also been updated for a cleaner look. Sep 10, 2025: Cache Recovery Workflow. A new GitHub Actions workflow has been added to allow you to recover your cache. Sep 4, 2025: Upgraded Notion API. The project has been updated to use a newer version of the Notion API, ensuring better stability and compatibility with future Notion features. **Jul 6, 2024: Introducing Webtrotion. Unlike notion where your simple tables are basically just a form of displaying data, you can now search and sort your simple tables in webtrotion. Just have column headers and use <<🗂️>> in the first cell (modifiable in constants-config).** [](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/notion/a15ce12f-d3b8-44a5-8834-71c99d53b211/table-search-sort.mp4) Your browser does not support the video tag. Jul 4, 2024: Breaking change → the shortcode for HTML rendering in an iframe (if you want to use external libraries like d3.js has changed to ` ` and for injecting it directly into the body is now ` `. This helps you have code blocks that are in html and start with `` without rendering them. Jun 30, 2024: View transitions are back in and use ⌘K or ^K to search [](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/notion/23d071d4-2bc6-43f8-b918-add38fcf5601/Screen_Recording_2024-06-30_at_12.30.55_AM.mp4) Your browser does not support the video tag. [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.BT-1OJ_-_ZRKueu.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.BT-1OJ_-_ZRKueu.webp) Jun 28, 2024: Floating table of contents and shiki transforms for code blocks (updated to astro 4.11), and added [view transitions](https://astro.build/blog/future-of-astro-zero-js-view-transitions/?tw=) [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.0PHhQKUW_13RzNH.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.0PHhQKUW_13RzNH.webp) Jun 14, 2024: Pin posts to top [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.Cb4VOmLO_Z1hrG21.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.Cb4VOmLO_Z1hrG21.webp) Jun 15, 2024: Add tag descriptions [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.UQS4YSGC_Z1JsqA7.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.UQS4YSGC_Z1JsqA7.webp) Dec 12, 2023: Add support for preview popovers [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.BChspMoM_2n4shz.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.BChspMoM_2n4shz.webp) Dec 4, 2023: Add support for [recent posts on homepage](https://nerdymomocat.github.io/#auto-recent-posts) [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.LZ0hATyz_ZkMDLS.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.LZ0hATyz_ZkMDLS.webp) Dec 2, 2023: Added interlinked content section [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.D4hE7rjv_6LNfB.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.D4hE7rjv_6LNfB.webp) Nov 29, 2023: Caching ## All Mentions ### Dates 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-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/supported-blocks/#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-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/supported-blocks/#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-templates.github.io/webtrotion-astro-notion-cms-website-blog/posts/supported-blocks/#youtube), nested in) This links to block Ika (Now supported) This links to a block in another same site page Linked page with [URL](https://www.notion.so/Introducing-Webtrotion-f29407b1168842078e6cb3b1ccdf80c0) [What are complete links?](http://google.com/) Link to main pages [![](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/pcat.geGXnw40_Z2sxeOB.webp)Home](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/) 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 [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/shape_zIziBW8qTTEiqF1Gvecjx_at_25-11-01_21.08.21.B-AOD-UN_Z2nyHKl.svg)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/shape_zIziBW8qTTEiqF1Gvecjx_at_25-11-01_21.08.21.B-AOD-UN_Z2nyHKl.svg) [![Caption for an image](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/astro-notion-blog.DssJOQxZ_2cQ2ir.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/astro-notion-blog.DssJOQxZ_2cQ2ir.webp) Caption for an image [![Image uploaded to Notion](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled_Artwork_2_copy_2.CIS-XKKR_zBH53.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled_Artwork_2_copy_2.CIS-XKKR_zBH53.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 I got a blank space baby and I’ll write your name 😉 ### 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? 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-templates.github.io/webtrotion-astro-notion-cms-website-blog/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-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.ylhTKvzg_176FRJ.webp)](https://nerdymomocat-templates.github.io/webtrotion-astro-notion-cms-website-blog/_astro/Untitled.ylhTKvzg_176FRJ.webp) 4. CSS generation is also now associated with build. Run the build command once before running dev please. * * * 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 for details.