CINXE.COM
Obsidian Web Clipper
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Obsidian Web Clipper</title> <meta name="description" content="Highlight and capture web pages in your favorite browser. Save anything and everything with just one click."> <meta name="copyright" content="Obsidian"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/tailwind.css?hash=37"> <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Obsidian Blog"> <link rel="alternate" type="application/feed+json" href="/feed.json" title="Obsidian Blog"> <link rel="alternate" type="application/atom+xml" href="/changelog.xml" title="Obsidian Changelog"> <link rel="alternate" type="application/feed+json" href="/changelog.json" title="Obsidian Changelog"> <meta property="og:site_name" content="Obsidian"> <meta property="og:title" content="Obsidian Web Clipper"> <meta property="og:description" content="Highlight and capture web pages in your favorite browser. Save anything and everything with just one click."> <meta property="og:type" content="website"> <meta property="og:image" content="https://obsidian.md/images/banner-clipper.png"> <meta name="twitter:title" content="Obsidian Web Clipper"> <meta name="twitter:description" content="Highlight and capture web pages in your favorite browser. Save anything and everything with just one click."> <meta name="twitter:site" content="@obsdmd"> <meta name="twitter:domain" content="obsidian.md"> <meta name="twitter:creator" content="@obsdmd"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://obsidian.md/images/banner-clipper.png"> </head> <body class="theme-dark"> <style> mark { background-color: rgba(255, 235, 0, 0.5); } </style> <div class=""> <div class="header-height"></div> <header class="header"> <div class="container flex items-center"> <div class="flex items-center"> <a class="header-logo mr-4 flex items-center gap-x-2 transition-colors -mt-[3px]" href="/" aria-label="Go to the Obsidian home page"> <svg alt="Obsidian" height="22" viewBox="0 0 143 25" width="126" xmlns="http://www.w3.org/2000/svg"><path fill="#A88BFA" d="m6.91927 14.5955c.64053-.1907 1.67255-.4839 2.85923-.5565-.71191-1.7968-.88376-3.3691-.74554-4.76905.15962-1.61678.72977-2.9662 1.28554-4.11442.1186-.24501.2326-.47313.3419-.69198.1549-.30984.3004-.60109.4365-.8953.2266-.48978.3948-.92231.4798-1.32416.0836-.39515.0841-.74806-.0148-1.08657-.099-.338982-.3093-.703864-.7093-1.1038132-.5222-.1353116-1.1017-.0165173-1.53613.3742922l-5.15591 4.638241c-.28758.25871-.47636.60929-.53406.99179l-.44455 2.94723c.69903.6179 2.42435 2.41414 3.47374 4.90644.09364.2224.1819.4505.26358.6838z"/><path fill="#A88BFA" d="m2.97347 10.3512c-.02431.1037-.05852.205-.10221.3024l-2.724986 6.0735c-.279882.6238-.15095061 1.3552.325357 1.8457l4.288349 4.4163c2.1899-3.2306 1.87062-6.2699.87032-8.6457-.75846-1.8013-1.90801-3.2112-2.65683-3.9922z"/><path fill="#A88BFA" d="m5.7507 23.5094c.07515.012.15135.0192.2281.0215.81383.0244 2.18251.0952 3.29249.2997.90551.1669 2.70051.6687 4.17761 1.1005 1.1271.3294 2.2886-.5707 2.4522-1.7336.1192-.8481.343-1.8075.7553-2.6869l-.0095.0033c-.6982-1.9471-1.5865-3.2044-2.5178-4.0073-.9284-.8004-1.928-1.1738-2.8932-1.3095-1.60474-.2257-3.07497.1961-4.00103.4682.55465 2.3107.38396 5.0295-1.48417 7.8441z"/><path fill="#A88BFA" d="m17.3708 19.3102c.9267-1.3985 1.5868-2.4862 1.9352-3.0758.1742-.295.1427-.6648-.0638-.9383-.5377-.7126-1.5666-2.1607-2.1272-3.5015-.5764-1.3785-.6624-3.51876-.6673-4.56119-.0019-.39626-.1275-.78328-.3726-1.09465l-3.3311-4.23183c-.0117.19075-.0392.37998-.0788.56747-.1109.52394-.32 1.04552-.5585 1.56101-.1398.30214-.3014.62583-.4646.95284-.1086.21764-.218.4368-.3222.652-.5385 1.11265-1.0397 2.32011-1.1797 3.73901-.1299 1.31514.0478 2.84484.8484 4.67094.1333.0113.2675.0262.4023.0452 1.1488.1615 2.3546.6115 3.4647 1.5685.9541.8226 1.8163 2.0012 2.5152 3.6463z"/><path fill="currentColor" d="m39.752 4.5038c-5.952 0-10.248 3.744-10.248 8.88s4.296 8.88 10.248 8.88c5.928 0 10.224-3.744 10.224-8.88s-4.296-8.88-10.224-8.88zm0 3.47999c3.576 0 6.144 2.13601 6.144 5.40001s-2.568 5.4-6.144 5.4c-3.6 0-6.168-2.136-6.168-5.4s2.568-5.40001 6.168-5.40001z"/><path fill="currentColor" d="m55.4847 20.5598c.864.936 2.472 1.704 4.584 1.704 4.32 0 6.8401-2.976 6.8401-6.576 0-3.624-2.5201-6.60001-6.8401-6.60001-2.112 0-3.72.79201-4.584 1.70401v-6.02401h-3.84v17.23201h3.84zm-.12-4.944c0-1.992 1.704-3.432 3.912-3.432 2.112 0 3.888 1.248 3.888 3.504s-1.776 3.48-3.888 3.48c-2.208 0-3.912-1.416-3.912-3.408z"/><path fill="currentColor" d="m67.3181 19.9118c1.464 1.488 4.272 2.352 7.2 2.352 3.96 0 6.936-1.44 6.936-4.392 0-2.88-2.832-3.432-6.072-3.816-2.736-.312-3.576-.384-3.576-1.08 0-.648.864-1.056 2.496-1.056 1.968 0 3.672.6 4.824 1.656l1.992-2.304c-1.272-1.224-3.648-2.18401-6.624-2.18401-4.008 0-6.48 1.72801-6.48 4.32001 0 2.712 2.52 3.312 5.544 3.696 2.832.336 4.032.336 4.032 1.176 0 .792-1.056 1.128-2.784 1.128-2.16 0-4.152-.672-5.664-2.064z"/><path fill="currentColor" d="m82.8395 8.05579h3.912v-3.288h-3.912zm3.864 1.29601h-3.84v12.648h3.84z"/><path fill="currentColor" d="m99.8264 20.5598v1.44h3.8396v-17.23201h-3.8396v6.02401c-.864-.912-2.472-1.70401-4.584-1.70401-4.32 0-6.84 2.97601-6.84 6.60001 0 3.6 2.52 6.576 6.84 6.576 2.112 0 3.72-.768 4.584-1.704zm.12-4.944v.144c0 1.992-1.704 3.408-3.912 3.408-2.112 0-3.888-1.224-3.888-3.48s1.776-3.504 3.888-3.504c2.208 0 3.912 1.44 3.912 3.432z"/><path fill="currentColor" d="m105.996 8.05579h3.912v-3.288h-3.912zm3.864 1.29601h-3.84v12.648h3.84z"/><path fill="currentColor" d="m116.863 22.2638c2.232 0 4.056-.648 5.208-1.656.648 1.2 2.184 1.92 4.992 1.392v-2.832c-1.344.288-1.632-.024-1.632-.696v-4.608c0-3.168-2.376-4.77601-6.408-4.77601-3.48 0-6.264 1.51201-7.056 3.79201l3.456.936c.384-.984 1.704-1.704 3.432-1.704 2.04 0 2.856.768 2.856 1.728v.072l-5.04.456c-2.976.288-5.16 1.512-5.16 3.984 0 2.496 2.232 3.912 5.352 3.912zm4.848-5.112c0 1.464-2.184 2.304-4.152 2.304-1.488 0-2.328-.432-2.328-1.248 0-.84.672-1.152 1.992-1.272l4.488-.456z"/><path fill="currentColor" d="m128.379 21.9998h3.84v-6.048c0-2.184 1.2-3.456 3.288-3.456 1.968 0 3 1.296 3 3.432v6.072h3.84v-7.2c0-3.504-2.232-5.71201-5.52-5.71201-2.04 0-3.624.76801-4.608 1.80001v-1.536h-3.84z"/></svg> </a> </div> <div class="group w-full"> <ul class="text-sm hidden md:flex"> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/download">Download</a></li> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/pricing">Pricing</a></li> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/sync">Sync</a></li> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/publish">Publish</a></li> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/enterprise">Enterprise</a></li> <div class="flex-grow"></div> <li><a class="px-3 py-2 rounded-lg font-medium hover:text-white text-muted hover:bg-gray-800" href="/community">Community</a></li> <li><a class="px-3 py-2 rounded-lg font-medium text-muted hover:text-white hover:bg-gray-800" href="/account">Account</a></li> </ul> </div> <div class="ml-auto md:hidden z-10 text-gray-200 hover:text-gray-100"> <a class="header-mobile-nav" href="#" aria-label="Open the navigation menu"> <div class="header-mobile-nav-button"> <div class="header-mobile-nav-button-inner"></div> </div> </a> </div> </div> </header> <div class="header-mobile-nav-menu fixed top-0 right-0 bottom-0 left-0 overflow-scroll overscroll-contain block md:hidden"> <div class="container py-4"> <ul class="text-xl font-medium grid sm:grid-cols-2 pb-4 border-b border-gray-800"> <li><a class="flex py-1 items-center gap-2" href="/download"> Download</a></li> <li><a class="flex py-1 items-center gap-2" href="/account"> Account</a></li> <li><a class="flex py-1 items-center gap-3" href="/sync"> Sync</a></li> <li><a class="flex py-1 items-center gap-3" href="/publish"> Publish</a></li> <li><a class="flex py-1 items-center gap-3" href="/pricing"> Pricing</a></li> <li><a class="flex py-1 items-center gap-3" href="/plugins"> Plugins</a></li> <li><a class="flex py-1 items-center gap-2" href="/enterprise"> Enterprise</a></li> <li><a class="flex py-1 items-center gap-2" href="/clipper"> Web Clipper</a></li> </ul> <div class="text-muted mt-6">Learn more</div> <ul class="font-medium grid grid-cols-2 my-2 pb8"> <li><a class="block py-1" href="https://help.obsidian.md" target="_blank">Help</a></li> <li><a class="block py-1" href="/about">About</a></li> <li><a class="block py-1" href="/blog">Blog</a></li> <li><a class="block py-1" href="https://discord.gg/obsidianmd" rel="noopener noreferrer" target="_blank">Discord</a></li> <li><a class="block py-1" href="/changelog">Changelog</a></li> <li><a class="block py-1" href="/community">Community</a></li> <li><a class="block py-1" href="/roadmap">Roadmap</a></li> <li><a class="block py-1" href="/security">Security</a></li> <li><a class="block py-1" href="/softwear">Merch store</a></li> <li><a class="block py-1" href="/privacy">Privacy</a></li> </ul> </div> </div> <div class="min-h-[60vh] flex items-center overflow-hidden"> <div class="container pt-24 pb-24"> <div class="max-w-lg sm:text-center sm:mx-auto"> <p class="mb-2 text-accent flex items-center sm:justify-center"> <svg alt="Obsidian Web Clipper" class="aspect-ratio[7] h-6 sm:h-8" viewBox="0 0 169 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M14.16.29h2.807l5.532 16.423L28.454.29h2.62L24.06 19.247h-3.07L15.537 3.01l-5.479 16.237h-3.07L0 .29h2.647l5.955 16.423L14.161.29ZM37.867 17.479c2.673 0 4.579-1.373 5.214-3.3l1.932 1.002c-.82 2.324-3.414 4.357-7.146 4.357-4.58 0-7.862-2.957-7.862-7.182 0-4.092 3.203-7.181 7.862-7.181 4.526 0 7.358 3.01 7.358 6.865v.924h-12.97c.291 2.746 2.568 4.514 5.612 4.514ZM37.76 7.181c-2.674 0-4.87 1.478-5.4 3.96h10.535c-.159-1.875-2.038-3.96-5.135-3.96ZM50.064 16.819v2.428h-2.382V.29h2.382v7.578c1.032-1.479 3.07-2.693 5.823-2.693 4.659 0 7.57 3.168 7.57 7.181 0 3.987-2.911 7.182-7.57 7.182-2.753 0-4.79-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM71.568 9.769C71.568 4.092 76.332 0 82.658 0c4.95 0 8.523 2.429 9.873 6.152L90.414 7.26c-1.138-3.09-3.812-4.99-7.729-4.99-4.95 0-8.55 3.036-8.55 7.498s3.6 7.498 8.55 7.498c3.917 0 6.59-1.9 7.729-4.99l2.117 1.11c-1.35 3.722-4.923 6.151-9.873 6.151-6.326 0-11.09-4.093-11.09-9.769ZM96.98.29v18.957h-2.383V.29h2.382ZM100.307 3.036V.29h2.594v2.746h-2.594Zm2.488 2.403v13.808h-2.382V5.44h2.382ZM108.611 16.819V24h-2.382V5.439h2.382v2.429c1.032-1.479 3.07-2.693 5.823-2.693 4.659 0 7.57 3.168 7.57 7.181 0 3.987-2.911 7.182-7.57 7.182-2.753 0-4.791-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM126.912 16.819V24h-2.383V5.439h2.383v2.429c1.032-1.479 3.07-2.693 5.823-2.693 4.658 0 7.57 3.168 7.57 7.181 0 3.987-2.912 7.182-7.57 7.182-2.753 0-4.791-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM149.894 17.479c2.674 0 4.58-1.373 5.215-3.3l1.932 1.002c-.821 2.324-3.414 4.357-7.147 4.357-4.579 0-7.861-2.957-7.861-7.182 0-4.092 3.203-7.181 7.861-7.181 4.527 0 7.359 3.01 7.359 6.865v.924h-12.97c.291 2.746 2.567 4.514 5.611 4.514Zm-.105-10.297c-2.674 0-4.871 1.478-5.4 3.96h10.534c-.158-1.875-2.038-3.96-5.134-3.96ZM169 5.518v2.376c-.582-.132-.953-.21-1.615-.21-3.176 0-5.293 1.847-5.293 5.068v6.495h-2.383V5.44h2.383v2.904c1.032-1.822 2.779-3.01 5.346-3.01.636 0 1.191.08 1.562.185Z"/> </svg> </p> <h1 class="text-title mb-6 mt-4">Save the web.</h1> <div class="mt-4"> <p class="mt-6 text-2xl sm:text-3xl text-muted"> Highlight and capture web pages in your favorite browser. Save anything and everything with just one click. </p> <p class="mt-8 text-accent font-medium hidden"> Try it with your favorite browser </p> </div> <div class="py-6 mt-4 flex sm:items-center gap-6 flex-row items-center sm:justify-center"> <a class="download-button button button-primary text-base py-3 px-6 flex items-center gap-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf" target="_blank"> <span class="browser-icon" class="inline align-text-top mr-1"> <svg alt="Chrome" width="24" height="24" viewBox="0 0 14 14" fill="currentColor"><path d="M7 14c-.19 0-.38 0-.57-.02l3.14-5.44.03-.04A3 3 0 0 0 9.24 5h4.47A7 7 0 0 1 7 14Zm.1-10a3 3 0 0 0-2.95 2.06L1.9 2.2A6.98 6.98 0 0 1 13.33 4H7.09Zm-5.86-.98 3.15 5.46a2.99 2.99 0 0 0 3.22 1.46L5.38 13.8A7 7 0 0 1 1.24 3.02ZM9 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg> </span> <span>Add to <span class="download-browser">Chrome</span> <script> (function() { let browser = 'Chrome'; const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.includes('firefox')) { browser = 'Firefox'; } else if (userAgent.indexOf("edg/") > -1) { browser = 'Edge'; } else if (userAgent.includes('safari') && !userAgent.includes('chrome')) { browser = 'Safari'; } // Special cases checked after page load if ('brave' in navigator) { browser = 'Brave'; } if (getComputedStyle(document.documentElement).getPropertyValue('--arc-palette-background')) { browser = 'Arc'; } if ('KAGI' in window) { browser = 'Orion'; } const el = document.currentScript.previousElementSibling; el.textContent = browser; })(); </script> </span> </a> <a class="text-accent font-medium" href="#more-browsers"> More browsers </a> </div> </div> </div> </div> </div> <div class="pb-16 sm:pb-32"> <div class="container tab-container" style="--active-tab: 0;"> <div class="grid grid-cols-1 gap-x-16 gap-y-16 items-center sm:gap-y-20 lg:grid-cols-2"> <div class=""> <div class="mx-auto"> <p class="text-lg font-semibold leading-7 text-accent">Capture</p> <h2 class="mt-2 text-3xl font-semibold sm:text-4xl">Easily capture pages and metadata to durable files you can read offline.</h2> <p class="mt-6 text-xl sm:text-2xl text-muted">Templates allow you to customize how web pages are saved to your vault.</p> <div class="mt-8 text-lg relative max-w-xl lg:max-w-none"> <div class="tab-glider absolute md:bg-secondary -left-[3%] h-1/5 rounded-lg w-[106%] transition-all duration-100" style="transform: translateY(calc(100% * var(--active-tab)))"></div> <dl class="grid grid-cols-1 auto-rows-fr text-muted"> <div class="tab-button active relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-articles"> <dt class="inline font-semibold text-normal"> <i icon-name="newspaper" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Articles </dt> <dd class="inline">including citations and footnotes.</dd> </div> <div class="tab-button relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-recipes"> <dt class="inline font-semibold text-normal"> <i icon-name="cooking-pot" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Recipes </dt> <dd class="inline">with ingredients, steps, and nutrition.</dd> </div> <div class="tab-button relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-references"> <dt class="inline font-semibold text-normal"> <i icon-name="book-open" class="icon-xl absolute left-0 top-4 text-accent-400"></i> References </dt> <dd class="inline">for books, movies, or podcasts.</dd> </div> <div class="tab-button relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-papers"> <dt class="inline font-semibold text-normal"> <i icon-name="graduation-cap" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Academic papers </dt> <dd class="inline">including code and math.</dd> </div> <div class="tab-button relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-custom"> <dt class="inline font-semibold text-normal"> <i icon-name="settings" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Custom templates </dt> <dd class="inline">for your favorite sites.</dd> </div> </dl> </div> </div> </div> <div class="tab-content h-[540px] max-w-xl" aria-hidden="true" data-nosnippet> <div class="tab-pane active select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-articles"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>stephango.com/file-over-app</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="antialiased bg-[#FFFCF0] opacity-80 text-black overflow-hidden text-sm sm:text-base leading-normal px-8 sm:px-12 pb-6 w-full h-full absolute bottom-0 z-10"> <div class="blur-sm opacity-80"> <p> <em>File over app</em> is a philosophy: if you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you this freedom. </p> <br> <p> <em>File over app</em> is an appeal to tool makers: accept that all software is ephemeral, and give people ownership over their data. </p> <br> <p> In the fullness of time, the files you create are more important than the tools you use to create them. Apps are ephemeral, but your files have a chance to last. </p> <br> <p> The ancient temples of Egypt contain hieroglyphs that were chiseled in stone thousands of years ago. The ideas hieroglyphs convey are more important than the type of chisel that was used to carve them. </p> <br> <p> The world is filled with ideas from generations past, transmitted through many mediums, from clay tablets to manuscripts, paintings, sculptures, and tapestries. These artifacts are objects that you can touch, hold, own, store, preserve, and look at. To read something written on paper all you need is eyeballs. </p> </div> </div> <div class="min-w-[76%] md:min-w-0 absolute z-30 text-xs h-[86%] bottom-[4%] right-[4%] w-[60%] ui ui-light rounded-xl shadow-xl bg-white flex flex-col overflow-hidden"> <div class="p-3 leading-4 max-h-full flex-grow"> <div class="flex w-full gap-2"> <div class="text-gray-600 font-medium grow mr-auto">Article template</div> <i icon-name="ellipsis" class="icon-xs text-faint"></i> <i icon-name="highlighter" class="icon-xs text-faint"></i> <i icon-name="settings" class="icon-xs text-faint"></i> </div> <div class="text-black text-base font-semibold pb-2">File over app</div> <div class="text-gray-600 font-medium pb-1.5">Properties</div> <div class="flex flex-col gap-1.5"> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">category</div> <div class="basis-2/3">Clippings</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">author</div> <div class="basis-2/3">Steph Ango</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="calendar" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">published</div> <div class="basis-2/3">2023-06-30</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">description</div> <div class="basis-2/3 max-w-3/4 whitespace-nowrap overflow-hidden text-ellipsis">If you want to create digital artifacts that last, they must be files you can control.</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">source</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">https://stephango.com/file-over-app</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="tags" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">tags</div> <div class="basis-2/3">clippings, articles</div> </div> </div> </div> <div class="border-t border-gray-200 p-3 leading-4 overflow-y-auto"> <p> *File over app* is a philosophy: if you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you this freedom. </p> <br> <p> *File over app* is an appeal to tool makers: accept that all software is ephemeral, and give people ownership over their data. </p> <br> <p> In the fullness of time, the files you create are more important than the tools you use to create them. Apps are ephemeral, but your files have a chance to last. </p> <br> <p> The ancient temples of Egypt contain hieroglyphs that were chiseled in stone thousands of years ago. The ideas hieroglyphs convey are more important than the type of chisel that was used to carve them. </p> </div> <div class="border-t border-gray-200 p-3 w-full select-none justify-self-end mt-auto"> <div class="block w-full text-center bg-accent-500 font-medium text-white px-4 py-1.5 transition-all duration-100 rounded hover:bg-accent-400 hover:text-white">Add to Obsidian</div> </div> </div> </div> <div class="tab-pane select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-recipes"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>erickim.net/recipes</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="bg-white opacity-70 overflow-hidden w-full h-full absolute bottom-0 z-10"> <img src="/images/clipper-cookie.jpg" class="w-full"> <div class="blur-sm mt-8 text-black px-8 sm:px-12"> <div class="text-4xl font-serif">Gochujang Caramel Cookies</div> <div class="text-lg mt-2">By Eric Kim</div> </div> </div> <div class="min-w-[76%] md:min-w-0 absolute z-30 text-xs h-[86%] bottom-[4%] right-[4%] w-[60%] ui ui-light rounded-xl shadow-xl bg-white flex flex-col overflow-hidden"> <div class="p-3 leading-4 max-h-full flex-grow"> <div class="flex w-full gap-2"> <div class="text-gray-600 font-medium grow mr-auto">Recipe template</div> <i icon-name="ellipsis" class="icon-xs text-faint"></i> <i icon-name="highlighter" class="icon-xs text-faint"></i> <i icon-name="settings" class="icon-xs text-faint"></i> </div> <div class="text-black text-base font-semibold pb-2">Gochujang Caramel Cookies</div> <div class="text-gray-600 font-medium pb-1.5">Properties</div> <div class="flex flex-col gap-1.5"> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">category</div> <div class="basis-2/3">Recipes</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">author</div> <div class="basis-2/3">Erik Kim</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="binary" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">rating</div> <div class="basis-2/3">5</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">length</div> <div class="basis-2/3">45 minutes</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">description</div> <div class="basis-2/3 max-w-3/4 whitespace-nowrap overflow-hidden text-ellipsis">Gochujang, the fermented Korean chile paste, offers intrigue in this otherwise classic chewy sugar cookie</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">source</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">https://erickim.net/recipes</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="tags" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">tags</div> <div class="basis-2/3">clippings, recipes</div> </div> </div> </div> <div class="border-t border-gray-200 p-3 select-none leading-4 overflow-y-auto"> <p>## Ingredients</p> <br> <p>- [ ] 115 grams unsalted butter</p> <p>- [ ] 2 packed tablespoons dark brown sugar</p> <p>- [ ] 1 heaping tablespoon gochujang</p> <p>- [ ] 200 grams granulated sugar</p> <p>- [ ] 1 large egg</p> <p>- [ ] 1/2 teaspoon kosher salt</p> <p>- [ ] 1/4 teaspoon ground cinnamon</p> <p>- [ ] 1 teaspoon vanilla extract</p> <p>- [ ] 1/2 teaspoon baking soda</p> <p>- [ ] 185 grams all-purpose flour</p> <br> <p>## Instructions</p> <br> <p>- [ ] In a small bowl, stir together 1 tablespoon butter, the brown sugar and gochujang until smooth. Set aside for later, at room temperature.</p> <p>- [ ] In a large bowl, by hand, whisk together the remaining 7 tablespoons butter, the granulated sugar, egg, salt, cinnamon and vanilla until smooth, about 1 minute. Switch to a flexible spatula and stir in the baking soda. Add the flour and gently stir to combine. Place this large bowl in the refrigerator until the dough is less sticky but still soft and pliable, 15 to 20 minutes.</p> </div> <div class="border-t border-gray-200 p-3 w-full select-none justify-self-end mt-auto"> <div class="block w-full text-center bg-accent-500 font-medium text-white px-4 py-1.5 transition-all duration-100 rounded hover:bg-accent-400 hover:text-white">Add to Obsidian</div> </div> </div> </div> <div class="tab-pane select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-references"> <div class="h-[60px] bg-gray-700 z-20 relative whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>letterboxd.com/film/the-matrix</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="bg-[#050908] opacity-70 overflow-hidden w-full h-full absolute bottom-0 z-10"> <img src="/images/clipper-matrix.jpg" class="w-full"> <div class="blur-sm mt-8 text-white px-8 sm:px-12"> <div class="text-2xl font-serif font-bold">The Matrix</div> <div class="text-xl mt-2">1999 · Directed by Lana Wachowski, Lilly Wachowski</div> </div> </div> <div class="min-w-[76%] md:min-w-0 absolute z-30 text-xs h-[86%] bottom-[4%] right-[4%] w-[60%] ui ui-light rounded-xl shadow-xl bg-white flex flex-col overflow-hidden"> <div class="p-3 leading-4 max-h-full"> <div class="flex w-full gap-2"> <div class="text-gray-600 font-medium grow mr-auto">Movie template</div> <i icon-name="ellipsis" class="icon-xs text-faint"></i> <i icon-name="highlighter" class="icon-xs text-faint"></i> <i icon-name="settings" class="icon-xs text-faint"></i> </div> <div class="text-black text-base font-semibold pb-2">The Matrix</div> <div class="text-gray-600 font-medium pb-1.5">Properties</div> <div class="flex flex-col gap-1.5"> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">category</div> <div class="basis-2/3">Movies</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">director</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">Lana Wachowski, Lilly Wachowski</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="binary" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">rating</div> <div class="basis-2/3">4.2</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">length</div> <div class="basis-2/3">136 minutes</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="binary" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">year</div> <div class="basis-2/3">1999</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">cast</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">Keanu Reeves, Laurence Fishburne, Carrie-Anne Moss</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">genre</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">Sci-Fi, Action</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">description</div> <div class="basis-2/3 max-w-3/4 whitespace-nowrap overflow-hidden text-ellipsis">Set in the 22nd century, The Matrix tells the story of a computer hacker who joins a group of underground insurgents fighting the vast and powerful computers who now rule the earth.</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="tags" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">tags</div> <div class="basis-2/3">movies, references</div> </div> </div> </div> <div class="border-t border-gray-200 p-3 leading-4 overflow-y-auto grow"> <p> > Set in the 22nd century, The Matrix tells the story of a computer hacker who joins a group of underground insurgents fighting the vast and powerful computers who now rule the earth. </p> </div> <div class="border-t border-gray-200 p-3 w-full select-none justify-self-end mt-auto"> <div class="block w-full text-center bg-accent-500 font-medium text-white px-4 py-1.5 transition-all duration-100 rounded hover:bg-accent-400 hover:text-white">Add to Obsidian</div> </div> </div> </div> <div class="tab-pane select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-papers"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>arxiv.org/html/1706.03762v7</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="bg-white opacity-70 overflow-hidden w-full h-full absolute bottom-0 z-10"> <img src="/images/clipper-math.jpg" class="w-full h-full object-cover"> </div> <div class="min-w-[76%] md:min-w-0 absolute z-30 text-xs h-[86%] bottom-[4%] right-[4%] w-[60%] ui ui-light rounded-xl shadow-xl bg-white flex flex-col overflow-hidden"> <div class="p-3 leading-4 max-h-full flex-grow"> <div class="flex w-full gap-2"> <div class="text-gray-600 font-medium grow mr-auto">Research template</div> <i icon-name="ellipsis" class="icon-xs text-faint"></i> <i icon-name="highlighter" class="icon-xs text-faint"></i> <i icon-name="settings" class="icon-xs text-faint"></i> </div> <div class="text-black text-base font-semibold pb-2">Attention Is All You Need</div> <div class="text-gray-600 font-medium pb-1.5">Properties</div> <div class="flex flex-col gap-1.5"> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">category</div> <div class="basis-2/3">Papers</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">author</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">Ashish Vaswani, Noam Shazeer, Niki Parmar, Jakob Uszkoreit</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="calendar" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">published</div> <div class="basis-2/3">2017-06-12</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">description</div> <div class="basis-2/3 max-w-3/4 whitespace-nowrap overflow-hidden text-ellipsis">The dominant sequence transduction models are based on complex recurrent or convolutional neural networks in an encoder-decoder configuration. </div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">source</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">https://arxiv.org/abs/1706.03762</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="tags" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">tags</div> <div class="basis-2/3">clippings, papers</div> </div> </div> </div> <div class="border-t border-gray-200 p-3 leading-4 overflow-y-auto"> <p>The encoder is composed of a stack of $N=6$ identical layers. Each layer has two sub-layers. The first is a multi-head self-attention mechanism, and the second is a simple, position-wise fully connected feed-forward network. We employ a residual connection [^11] around each of the two sub-layers, followed by layer normalization [^1]. That is, the output of each sub-layer is $\mathrm{LayerNorm}(x+\mathrm{Sublayer}(x))$ , where $\mathrm{Sublayer}(x)$ is the function implemented by the sub-layer itself. To facilitate these residual connections, all sub-layers in the model, as well as the embedding layers, produce outputs of dimension $d_{\text{model}}=512$ .</p> </p> </div> <div class="border-t border-gray-200 p-3 w-full select-none justify-self-end mt-auto"> <div class="block w-full text-center bg-accent-500 font-medium text-white px-4 py-1.5 transition-all duration-100 rounded hover:bg-accent-400 hover:text-white">Add to Obsidian</div> </div> </div> </div> <div class="tab-pane overflow-hidden select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-custom"> <div class="h-[60px] w-full bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>Web Clipper Settings</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="p-4 p-6"> <p class="text-xl font-semibold">Create template</p> <p class="text-sm font-semibold mt-5 mb-2">Template name</p> <div class="border border-gray-600 text-xs px-1.5 py-1 rounded w-full"> Custom template </div> <p class="text-sm font-semibold mt-5 mb-2">Behavior</p> <div class="border border-gray-600 text-xs px-1.5 py-1 rounded w-full"> Add to existing note </div> <p class="text-sm font-semibold mt-5 mb-1">Note name</p> <p class="text-xs text-gray-400 mb-2">Format for the file name of the note. You can use variables like {{title}}, {{date}}, and {{published}} to pre-populate data from the page.</p> <div class="border border-gray-600 text-xs px-1.5 py-1 rounded w-full"> {{title}} </div> <p class="text-sm font-semibold mt-5 mb-1">Note location</p> <p class="text-xs text-gray-400 mb-2">The folder or path of the note.</p> <div class="border border-gray-600 text-xs px-1.5 py-1 rounded w-full"> Clippings </div> <p class="text-sm font-semibold mt-5 mb-2">Vault</p> <p class="text-xs text-gray-400">Select the default vault for this template. Go to general settings to add or remove vaults.</p> <div class="border border-gray-600 text-xs px-1.5 py-1 rounded w-full"> Last used </div> </div> </div> </div> </div> </div> </div> <div class="py-16 sm:py-32"> <div class="container tab-container" style="--active-tab: 0;"> <div class="grid grid-cols-1 gap-x-16 gap-y-16 items-center sm:gap-y-20 lg:grid-cols-2"> <div class="tab-content h-[540px] max-w-xl order-2 lg:order-1" aria-hidden="true" data-nosnippet> <div class="tab-pane active select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-highlight"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>wired.com/1996/12/ffglass/</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="z-30 left-0 right-0 mx-auto bg-gray-700 w-fit p-1 rounded-2xl shadow-xl absolute top-[80px] flex flex-row items-stretch gap-1"> <div class="text-sm font-medium bg-accent-500 text-white px-1.5 py-0.5 rounded-xl hover:bg-accent-400 transition-all duration-100 ring-1 ring-white ring-opacity-20 ring-inset"> Clip highlights </div> <div class="bg-gray-600 px-1 pl-2 gap-1 flex items-center rounded-xl text-sm font-medium text-gray-300 ring-1 ring-white ring-opacity-20 ring-inset hover:bg-gray-500 transition-all duration-100 hover:text-white"> 4 <i icon-name="trash-2" class="icon-xs"></i> </div> <div class="bg-gray-600 px-1 gap-1 flex items-center rounded-xl text-sm font-medium text-gray-300 ring-1 ring-white ring-opacity-20 ring-inset hover:bg-gray-500 transition-all duration-100 hover:text-white"> <i icon-name="x" class="icon-xs"></i> </div> </div> <div class="antialiased bg-[#FFFCF0] text-black overflow-hidden text-sm sm:text-base leading-normal px-8 sm:px-12 pb-6 w-full h-full absolute bottom-0 z-10"> <p> <mark>Information moves, or we move to it.</mark> Moving to it has rarely been popular and is growing unfashionable; nowadays we demand that the information come to us. <mark>This can be accomplished in three basic ways: moving physical media around, broadcasting radiation through space, and sending signals through wires.</mark> This article is about what will, for a short time anyway, be the biggest and best wire ever made. </p> <br> <p> <mark>Wires warp cyberspace in the same way wormholes warp physical space: the two points at opposite ends of a wire are, for informational purposes, the same point, even if they are on opposite sides of the planet.</mark> The cyberspace-warping power of wires, therefore, changes the geometry of the world of commerce and politics and ideas that we live in. The financial districts of New York, London, and Tokyo, linked by thousands of wires, are much closer to each other than, say, the Bronx is to Manhattan. </p> <br> <p> Today this is all quite familiar, but in the 19th century, when the first feeble bits struggled down the first undersea cable joining the Old World to the New, <mark>it must have made people's hair stand up on end in more than just the purely electrical sense – it must have seemed supernatural.</mark> </p> </div> </div> <div class="tab-pane select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-annotate"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>wired.com/1996/12/ffglass/</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="z-30 w-2/3 border border-gray-400 ring-2 ring-black ring-opacity-10 bottom-[33%] z-30 right-[5%] mx-auto bg-white rounded-lg shadow-xl absolute"> <div class="p-2 text-xs text-black"> If wires are like a nervous system to transport information, roads are like a vascular system to transport materials. Computers are the distributed organelles necessary to store and process information. </div> </div> <div class="z-30 left-0 right-0 mx-auto bg-gray-700 w-fit p-1 rounded-2xl shadow-xl absolute top-[80px] flex flex-row items-stretch gap-1"> <div class="text-sm font-medium bg-accent-500 text-white px-1.5 py-0.5 rounded-xl hover:bg-accent-400 transition-all duration-100 ring-1 ring-white ring-opacity-20 ring-inset"> Clip highlights </div> <div class="bg-gray-600 px-1 pl-2 gap-1 flex items-center rounded-xl text-sm font-medium text-gray-300 ring-1 ring-white ring-opacity-20 ring-inset hover:bg-gray-500 transition-all duration-100 hover:text-white"> 4 <i icon-name="trash-2" class="icon-xs"></i> </div> <div class="bg-gray-600 px-1 gap-1 flex items-center rounded-xl text-sm font-medium text-gray-300 ring-1 ring-white ring-opacity-20 ring-inset hover:bg-gray-500 transition-all duration-100 hover:text-white"> <i icon-name="x" class="icon-xs"></i> </div> </div> <div class="antialiased bg-[#FFFCF0] text-black overflow-hidden text-sm sm:text-base leading-normal px-8 sm:px-12 pb-6 w-full h-full absolute bottom-0 z-10"> <p> <mark>Information moves, or we move to it.</mark> Moving to it has rarely been popular and is growing unfashionable; nowadays we demand that the information come to us. <mark>This can be accomplished in three basic ways: moving physical media around, broadcasting radiation through space, and sending signals through wires.</mark> This article is about what will, for a short time anyway, be the biggest and best wire ever made. </p> <br> <p> <mark>Wires warp cyberspace in the same way wormholes warp physical space: the two points at opposite ends of a wire are, for informational purposes, the same point, even if they are on opposite sides of the planet.</mark> The cyberspace-warping power of wires, therefore, changes the geometry of the world of commerce and politics and ideas that we live in. The financial districts of New York, London, and Tokyo, linked by thousands of wires, are much closer to each other than, say, the Bronx is to Manhattan. </p> <br> <p> Today this is all quite familiar, but in the 19th century, when the first feeble bits struggled down the first undersea cable joining the Old World to the New, <mark>it must have made people's hair stand up on end in more than just the purely electrical sense – it must have seemed supernatural.</mark> </p> </div> </div> <div class="tab-pane select-none relative rounded-2xl sm:rounded-3xl isolate overflow-hidden border border-white border-opacity-20 bg-gray-800 pb-8sm:mx-auto sm:pb-16 lg:mx-0 lg:max-w-none" data-tab="tab-clip"> <div class="h-[60px] w-full absolute z-20 bg-gray-700 whitespace-nowrap ui ui-light rounded-tl-xl border-b border-gray-600 shadow-xl px-4 py-6 flex items-center gap-4"> <div class="grow"> <div class="overflow-hidden text-ellipsis whitespace-nowrap border border-gray-600 text-gray-400 text-xs px-3 py-1.5 rounded-2xl w-full flex items-center gap-2"> <i icon-name="lock" class="icon-xs text-faint"></i> <span>wired.com/1996/12/ffglass/</span> </div> </div> <div class="w-[20px] grow-0 text-accent-400 mr-2 sm:mr-6"> <svg alt="Obsidian" width="100%" height="100%" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M264.407 295.548C245.366 250.113 238.383 215.766 238.666 187.848C238.968 158.133 247.502 136.435 257.208 117.286C259.881 112.012 262.563 107.056 265.164 102.247C272.191 89.2568 278.637 77.3411 282.777 63.1444C287.478 47.0267 289.053 28.0287 283.321 2.38138C271.713 -2.19086 257.959 -0.237655 247.966 8.74821L142.586 103.508C136.709 108.793 132.85 115.956 131.671 123.77L122.078 187.339C136.878 200.764 170.369 236.427 190.964 285.321C193.743 291.919 196.288 298.763 198.521 305.827C212.381 302.087 236.727 296.04 264.407 295.548Z"/> <path d="M283.201 296.124C293.371 296.954 303.759 298.694 314.05 301.688C341.566 309.696 368.385 326.61 388.654 358.422C396.3 370.422 402.961 384.457 408.386 400.814C429.539 369.211 444.502 344.592 452.137 331.673C455.699 325.646 455.054 318.091 450.835 312.504C439.844 297.946 418.814 268.361 407.356 240.968C395.575 212.805 393.818 169.08 393.718 147.783C393.68 139.688 391.113 131.781 386.103 125.419L303.454 20.466C305.123 38.6505 303.203 54.0202 299.15 67.9155C294.458 84.0034 286.773 98.2005 279.485 111.662L279.484 111.664C277.043 116.175 274.646 120.602 272.421 124.991C263.369 142.85 255.986 161.888 255.72 188.021C255.454 214.252 262.359 248.35 283.201 296.124Z"/> <path d="M333.604 510.743C356.327 517.042 379.193 498.795 382.339 475.436C384.606 458.6 388.873 439.476 396.752 421.733C391.05 399.529 383.302 381.757 374.27 367.58C356.418 339.563 333.185 325.012 309.283 318.056C268.02 306.049 224.757 316.496 203.034 322.296C213.856 368.927 209.895 423.62 171.688 480.268C173.839 480.859 176.056 481.242 178.31 481.403L241.521 485.916C243.782 486.078 246.022 486.464 248.206 487.07L333.604 510.743Z"/> <path d="M156.864 471.744C202.625 404.616 196.033 341.287 175.245 291.936C159.107 253.621 134.418 223.894 118.954 208.042L118.842 208.786C118.38 211.847 117.503 214.832 116.235 217.657L60.5399 341.74C54.8195 354.484 57.4547 369.427 67.1898 379.448L156.27 471.147C156.369 471.249 156.468 471.35 156.569 471.451C156.667 471.549 156.765 471.647 156.864 471.744Z"/> </svg> </div> </div> <div class="min-w-[76%] md:min-w-0 absolute z-30 text-xs h-[86%] bottom-[4%] right-[4%] w-[60%] ui ui-light rounded-xl shadow-xl bg-white flex flex-col overflow-hidden"> <div class="leading-4 max-h-full flex-grow"> <div class="flex w-full gap-1 pl-3 pt-2 pr-2"> <div class="text-gray-600 font-medium grow mr-aut py-1">Article template</div> <div class="flex items-center p-1 text-faint"> <i icon-name="ellipsis" class="icon-xs"></i> </div> <div class="flex items-center p-1 text-accent bg-accent-100 rounded-full"> <i icon-name="highlighter" class="icon-xs"></i> </div> <div class="flex items-center p-1 text-faint"> <i icon-name="settings" class="icon-xs"></i> </div> </div> <div class="px-3 pb-3"> <div class="text-black text-base font-semibold pb-2">Mother Earth Mother Board</div> <div class="text-gray-600 font-medium pb-1.5">Properties</div> <div class="flex flex-col gap-1.5"> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">category</div> <div class="basis-2/3">Clippings</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="list" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">author</div> <div class="basis-2/3">Neil Stephenson</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="calendar" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">published</div> <div class="basis-2/3">1996-12-01</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">description</div> <div class="basis-2/3 max-w-3/4 whitespace-nowrap overflow-hidden text-ellipsis">The hacker tourist ventures forth across the wide and wondrous meatspace of three continents, chronicling the laying of the longest wire on Earth.</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="align-left" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">source</div> <div class="basis-2/3 whitespace-nowrap overflow-hidden text-ellipsis">https://www.wired.com/1996/12/ffglass/</div> </div> <div class="flex w-full gap-1 items-center"> <i icon-name="tags" class="icon-xs text-faint shrink-0"></i> <div class="grow text-faint">tags</div> <div class="basis-2/3">clippings, articles</div> </div> </div> </div> </div> <div class="border-t border-gray-200 p-3 leading-4 overflow-y-auto"> <p> > This can be accomplished in three basic ways: moving physical media around, broadcasting radiation through space, and sending signals through wires. </p> <br> <p> > Wires warp cyberspace in the same way wormholes warp physical space: the two points at opposite ends of a wire are, for informational purposes, the same point, even if they are on opposite sides of the planet. </p> <br> <p> > it must have made people's hair stand up on end in more than just the purely electrical sense – it must have seemed supernatural. </p> </div> <div class="border-t border-gray-200 p-3 w-full select-none justify-self-end mt-auto"> <div class="block w-full text-center bg-accent-500 font-medium text-white px-4 py-1.5 transition-all duration-100 rounded hover:bg-accent-400 hover:text-white">Add to Obsidian</div> </div> </div> <div class="antialiased bg-[#FFFCF0] opacity-80 text-black overflow-hidden text-sm sm:text-base leading-normal px-8 sm:px-12 pb-6 w-full h-full absolute bottom-0 z-10"> <div class="blur-sm opacity-80"> <p> <mark>Information moves, or we move to it.</mark> Moving to it has rarely been popular and is growing unfashionable; nowadays we demand that the information come to us. <mark>This can be accomplished in three basic ways: moving physical media around, broadcasting radiation through space, and sending signals through wires.</mark> This article is about what will, for a short time anyway, be the biggest and best wire ever made. </p> <br> <p> <mark>Wires warp cyberspace in the same way wormholes warp physical space: the two points at opposite ends of a wire are, for informational purposes, the same point, even if they are on opposite sides of the planet.</mark> The cyberspace-warping power of wires, therefore, changes the geometry of the world of commerce and politics and ideas that we live in. The financial districts of New York, London, and Tokyo, linked by thousands of wires, are much closer to each other than, say, the Bronx is to Manhattan. </p> <br> <p> Today this is all quite familiar, but in the 19th century, when the first feeble bits struggled down the first undersea cable joining the Old World to the New, <mark>it must have made people's hair stand up on end in more than just the purely electrical sense – it must have seemed supernatural.</mark> </p> </div> </div> </div> </div> <div class="order-1 lg:order-2"> <div class="mx-auto"> <p class="text-lg font-semibold leading-7 text-accent">Highlight</p> <h2 class="mt-2 text-3xl font-semibold sm:text-4xl">Highlight the web.</h2> <p class="mt-6 text-xl sm:text-2xl text-muted">Easily highlight important passages you want to save to Obsidian. Your highlights are always visible, so you can revisit them when you return to a page.</p> <div class="mt-8 text-lg relative max-w-xl lg:max-w-none"> <div class="tab-glider absolute md:bg-secondary -left-[3%] h-1/2 rounded-lg w-[106%] transition-all duration-100" style="transform: translateY(calc(100% * var(--active-tab)))"></div> <dl class="grid grid-cols-1 auto-rows-fr text-muted"> <div class="tab-button active relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-highlight"> <dt class="inline font-semibold text-normal"> <i icon-name="highlighter" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Highlight </dt> <dd class="inline">text, images, and blocks of content.</dd> </div> <!-- <div class="tab-button relative pl-9 pr-3 rounded-lg py-3 hidden" data-tab="tab-annotate"> <dt class="inline font-semibold text-normal"> <i icon-name="align-left" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Annotate </dt> <dd class="inline">your highlights directly on the page.</dd> </div>--> <div class="tab-button relative pl-9 pr-3 rounded-lg py-3" data-tab="tab-clip"> <dt class="inline font-semibold text-normal"> <i icon-name="scissors" class="icon-xl absolute left-0 top-4 text-accent-400"></i> Clip </dt> <dd class="inline">your highlights to Obsidian in one click.</dd> </div> </dl> </div> </div> </div> </div> </div> </div> <div class="py-16 sm:py-24 cards"> <div class="container"> <div class="mx-auto grid grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-2"> <div> <p class="text-lg font-semibold leading-7 text-accent">Features</p> <h2 class="text-3xl font-semibold sm:text-4xl">Bring the web to your personal knowledge base.</h2> <p class="mt-6 text-xl sm:text-2xl text-muted">Web Clipper is free, <a href="https://github.com/obsidianmd/obsidian-clipper" target="_blank" class="text-accent font-medium">open source</a>, and packed with useful features that make your favorite browser a sharper tool.</p> </div> <dl class="col-span-2 grid grid-cols-1 gap-x-4 gap-y-8 sm:gap-y-4 sm:grid-cols-2 md:grid-cols-3"> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="eye-off" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> Stay private<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> All your clipped content is stored locally in your Obsidian vault. Your thoughts are yours. </dd> </div> </div> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="files" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> No lock-in<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> Your clips are saved to durable Markdown files. All your highlights and settings are exportable to JSON. </dd> </div> </div> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="keyboard" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> Hotkeys<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> Speed up your workflow with keyboard shortcuts to quickly add content to your vault. </dd> </div> </div> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="zap" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> Auto-apply templates<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> Set up rules to automatically apply the right template based on the website you're clipping from. </dd> </div> </div> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="square-dashed-mouse-pointer" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> Extract anything<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> Capture any data from the page: meta tags, Schema.org variables, and even element selectors. </dd> </div> </div> <div class="card card-shimmer card-grow sm:ring-1 ring-inset ring-white/5 rounded-xl sm:p-6 sm:bg-secondary text-lg sm:text-xl flex flex-row sm:flex-col gap-y-2 gap-x-3"> <div> <i icon-name="braces" class="icon-xl sm:icon-2xl text-accent h-8 w-8 -mt-1 sm:mt-0"></i> </div> <div> <dt class="font-semibold inline sm:block"> Manipulate page data<span class="sm:hidden">.</span> </dt> <dd class="mt-2 text-lg leading-6 text-muted inline sm:block"> Powerful <a href="https://help.obsidian.md/web-clipper" target="_blank" class="text-accent font-medium">templating features</a> allow you to modify page data before it's saved to your vault. </dd> </div> </div> </dl> </div> </div> </div> <div id="more-browsers" class="pt-16 pb-16 sm:pb-24"> <div class="container"> <div class="flex justify-center sm:pt-16 pb-12 cards select-none"> <a class="download-button" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf" target="_blank"> <div class="text-center flex justify-center mt-12 text-accent hover:text-white transition-all"> <svg alt="Obsidian Web Clipper" width="338" height="48" viewBox="0 0 169 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M14.16.29h2.807l5.532 16.423L28.454.29h2.62L24.06 19.247h-3.07L15.537 3.01l-5.479 16.237h-3.07L0 .29h2.647l5.955 16.423L14.161.29ZM37.867 17.479c2.673 0 4.579-1.373 5.214-3.3l1.932 1.002c-.82 2.324-3.414 4.357-7.146 4.357-4.58 0-7.862-2.957-7.862-7.182 0-4.092 3.203-7.181 7.862-7.181 4.526 0 7.358 3.01 7.358 6.865v.924h-12.97c.291 2.746 2.568 4.514 5.612 4.514ZM37.76 7.181c-2.674 0-4.87 1.478-5.4 3.96h10.535c-.159-1.875-2.038-3.96-5.135-3.96ZM50.064 16.819v2.428h-2.382V.29h2.382v7.578c1.032-1.479 3.07-2.693 5.823-2.693 4.659 0 7.57 3.168 7.57 7.181 0 3.987-2.911 7.182-7.57 7.182-2.753 0-4.79-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM71.568 9.769C71.568 4.092 76.332 0 82.658 0c4.95 0 8.523 2.429 9.873 6.152L90.414 7.26c-1.138-3.09-3.812-4.99-7.729-4.99-4.95 0-8.55 3.036-8.55 7.498s3.6 7.498 8.55 7.498c3.917 0 6.59-1.9 7.729-4.99l2.117 1.11c-1.35 3.722-4.923 6.151-9.873 6.151-6.326 0-11.09-4.093-11.09-9.769ZM96.98.29v18.957h-2.383V.29h2.382ZM100.307 3.036V.29h2.594v2.746h-2.594Zm2.488 2.403v13.808h-2.382V5.44h2.382ZM108.611 16.819V24h-2.382V5.439h2.382v2.429c1.032-1.479 3.07-2.693 5.823-2.693 4.659 0 7.57 3.168 7.57 7.181 0 3.987-2.911 7.182-7.57 7.182-2.753 0-4.791-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM126.912 16.819V24h-2.383V5.439h2.383v2.429c1.032-1.479 3.07-2.693 5.823-2.693 4.658 0 7.57 3.168 7.57 7.181 0 3.987-2.912 7.182-7.57 7.182-2.753 0-4.791-1.215-5.823-2.72Zm-.106-4.568v.185c0 3.142 2.726 5.069 5.638 5.069 3.097 0 5.585-1.954 5.585-5.149 0-3.22-2.488-5.174-5.585-5.174-2.912 0-5.638 1.953-5.638 5.069ZM149.894 17.479c2.674 0 4.58-1.373 5.215-3.3l1.932 1.002c-.821 2.324-3.414 4.357-7.147 4.357-4.579 0-7.861-2.957-7.861-7.182 0-4.092 3.203-7.181 7.861-7.181 4.527 0 7.359 3.01 7.359 6.865v.924h-12.97c.291 2.746 2.567 4.514 5.611 4.514Zm-.105-10.297c-2.674 0-4.871 1.478-5.4 3.96h10.534c-.158-1.875-2.038-3.96-5.134-3.96ZM169 5.518v2.376c-.582-.132-.953-.21-1.615-.21-3.176 0-5.293 1.847-5.293 5.068v6.495h-2.383V5.44h2.383v2.904c1.032-1.822 2.779-3.01 5.346-3.01.636 0 1.191.08 1.562.185Z"/> </svg> </div> </a> </div> <div class="flex flex-col sm:flex-row gap-4 mx-auto max-w-xs sm:max-w-none justify-center"> <a class="download-button button button-primary text-xl py-4 px-6 flex items-center justify-center gap-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf" target="_blank"> <span class="browser-icon" class="inline align-text-top mr-1"> <svg alt="Chrome" width="24" height="24" viewBox="0 0 14 14" fill="currentColor"><path d="M7 14c-.19 0-.38 0-.57-.02l3.14-5.44.03-.04A3 3 0 0 0 9.24 5h4.47A7 7 0 0 1 7 14Zm.1-10a3 3 0 0 0-2.95 2.06L1.9 2.2A6.98 6.98 0 0 1 13.33 4H7.09Zm-5.86-.98 3.15 5.46a2.99 2.99 0 0 0 3.22 1.46L5.38 13.8A7 7 0 0 1 1.24 3.02ZM9 7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg> </span> <span>Add to <span class="download-browser">Chrome</span></span> </a> </div> </div> </div> <div class="pb-24 container"> <div class="sm:p-8 sm:border sm:border-gray-800 rounded-xl mx-auto max-w-md"> <h2 class="text-2xl font-semibold">More browsers</h2> <div class="flex gap-4 sm:gap-6 pt-6 md:text-xl"> <div class="flex flex-col grow leading-tight divide-y divide-solid divide-gray-800"> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf"> <i icon-name="arrow-down-circle"></i> <span>Chrome</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://apps.apple.com/us/app/obsidian-web-clipper/id6720708363"> <i icon-name="arrow-down-circle"></i> <span>Safari</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://addons.mozilla.org/en-US/firefox/addon/web-clipper-obsidian/"> <i icon-name="arrow-down-circle"></i> <span>Firefox</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://microsoftedge.microsoft.com/addons/detail/obsidian-web-clipper/eigdjhmgnaaeaonimdklocfekkaanfme"> <i icon-name="arrow-down-circle"></i> <span>Edge</span> </a> </div> <div class="flex flex-col grow leading-tight divide-y divide-solid divide-gray-800"> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf"> <i icon-name="arrow-down-circle"></i> <span>Brave</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf"> <i icon-name="arrow-down-circle"></i> <span>Arc</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf"> <i icon-name="arrow-down-circle"></i> <span>Orion</span> </a> <a class="py-2 text-accent font-medium flex items-center gap-x-2" href="https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf"> <i icon-name="arrow-down-circle"></i> <span>Vivaldi</span> </a> </div> </div> </div> </div> <footer class="container flex flex-row-reverse flex-wrap pt-24 pb-12 sm:pt-24 md:pb-32"> <div class="grid grid-cols-2 gap-3 gap-y-6 md:grid-cols-3 justify-between w-full mb-24 ml-auto md:w-3/5 lg:w-1/2 md:mb-0 leading-loose md:leading-relaxed md:pl-6"> <div> <ul class=""> <li class="text-faint mb-3">Get started</li> <li><a class="font-medium" href="/download">Download</a></li> <li><a class="font-medium" href="/pricing">Pricing</a></li> <li><a class="font-medium" href="/enterprise">Enterprise</a></li> <li><a class="font-medium" href="/account">Account</a></li> </ul> <ul class="mt-8"> <li class="text-faint mb-3">Obsidian</li> <li><a class="font-medium" href="/">Overview</a></li> <li><a class="font-medium" href="/sync">Sync</a></li> <li><a class="font-medium" href="/publish">Publish</a></li> <li><a class="font-medium" href="/canvas">Canvas</a></li> <li><a class="font-medium" href="/mobile">Mobile</a></li> <li><a class="font-medium" href="/clipper">Web Clipper</a></li> <li><a class="font-medium" href="/plugins">Plugins</a></li> </ul> </div> <div> <ul class=""> <li class="text-faint mb-3">Learn</li> <li><a class="font-medium" href="https://help.obsidian.md/" target="_blank">Help</a></li> <li><a class="font-medium" href="https://docs.obsidian.md/" target="_blank">Developers</a></li> <li><a class="font-medium" href="/changelog">Changelog</a></li> <li><a class="font-medium" href="/about">About</a></li> <li><a class="font-medium" href="/roadmap">Roadmap</a></li> <li><a class="font-medium" href="/blog">Blog</a></li> </ul> <ul class="mt-8"> <li class="text-faint mb-3">Resources</li> <li><a class="font-medium" href="https://status.obsidian.md" rel="noopener noreferrer">System status</a></li> <li><a class="font-medium" href="/license">License overview</a></li> <li><a class="font-medium" href="/terms">Terms of service</a></li> <li><a class="font-medium" href="/privacy">Privacy policy</a></li> <li><a class="font-medium" href="/security">Security</a></li> </ul> </div> <div> <ul class=""> <li class="text-faint mb-3">Community</li> <li><a class="font-medium" href="/community">Join the community</a></li> <li><a class="font-medium" href="https://discord.gg/obsidianmd" rel="noopener noreferrer" target="_blank">Discord</a></li> <li><a class="font-medium" href="https://forum.obsidian.md" target="_blank">Forum</a> <span class="text-gray-600">/</span> <a class="font-medium" href="https://forum-zh.obsidian.md" target="_blank">中文论坛</a></li> <li><a class="font-medium" href="/softwear">Merch store</a></li> <li><a class="font-medium" href="/brand">Brand guidelines</a></li> </ul> </div> </div> <div class="mr-auto w-full sm:w-auto"> <a class="header-logo mr-4 flex items-center gap-x-2 transition-colors" href="/" aria-label="Go to the Obsidian home page"> <svg alt="Obsidian" height="22" viewBox="0 0 143 25" width="126" xmlns="http://www.w3.org/2000/svg"><path fill="#A88BFA" d="m6.91927 14.5955c.64053-.1907 1.67255-.4839 2.85923-.5565-.71191-1.7968-.88376-3.3691-.74554-4.76905.15962-1.61678.72977-2.9662 1.28554-4.11442.1186-.24501.2326-.47313.3419-.69198.1549-.30984.3004-.60109.4365-.8953.2266-.48978.3948-.92231.4798-1.32416.0836-.39515.0841-.74806-.0148-1.08657-.099-.338982-.3093-.703864-.7093-1.1038132-.5222-.1353116-1.1017-.0165173-1.53613.3742922l-5.15591 4.638241c-.28758.25871-.47636.60929-.53406.99179l-.44455 2.94723c.69903.6179 2.42435 2.41414 3.47374 4.90644.09364.2224.1819.4505.26358.6838z"/><path fill="#A88BFA" d="m2.97347 10.3512c-.02431.1037-.05852.205-.10221.3024l-2.724986 6.0735c-.279882.6238-.15095061 1.3552.325357 1.8457l4.288349 4.4163c2.1899-3.2306 1.87062-6.2699.87032-8.6457-.75846-1.8013-1.90801-3.2112-2.65683-3.9922z"/><path fill="#A88BFA" d="m5.7507 23.5094c.07515.012.15135.0192.2281.0215.81383.0244 2.18251.0952 3.29249.2997.90551.1669 2.70051.6687 4.17761 1.1005 1.1271.3294 2.2886-.5707 2.4522-1.7336.1192-.8481.343-1.8075.7553-2.6869l-.0095.0033c-.6982-1.9471-1.5865-3.2044-2.5178-4.0073-.9284-.8004-1.928-1.1738-2.8932-1.3095-1.60474-.2257-3.07497.1961-4.00103.4682.55465 2.3107.38396 5.0295-1.48417 7.8441z"/><path fill="#A88BFA" d="m17.3708 19.3102c.9267-1.3985 1.5868-2.4862 1.9352-3.0758.1742-.295.1427-.6648-.0638-.9383-.5377-.7126-1.5666-2.1607-2.1272-3.5015-.5764-1.3785-.6624-3.51876-.6673-4.56119-.0019-.39626-.1275-.78328-.3726-1.09465l-3.3311-4.23183c-.0117.19075-.0392.37998-.0788.56747-.1109.52394-.32 1.04552-.5585 1.56101-.1398.30214-.3014.62583-.4646.95284-.1086.21764-.218.4368-.3222.652-.5385 1.11265-1.0397 2.32011-1.1797 3.73901-.1299 1.31514.0478 2.84484.8484 4.67094.1333.0113.2675.0262.4023.0452 1.1488.1615 2.3546.6115 3.4647 1.5685.9541.8226 1.8163 2.0012 2.5152 3.6463z"/><path fill="currentColor" d="m39.752 4.5038c-5.952 0-10.248 3.744-10.248 8.88s4.296 8.88 10.248 8.88c5.928 0 10.224-3.744 10.224-8.88s-4.296-8.88-10.224-8.88zm0 3.47999c3.576 0 6.144 2.13601 6.144 5.40001s-2.568 5.4-6.144 5.4c-3.6 0-6.168-2.136-6.168-5.4s2.568-5.40001 6.168-5.40001z"/><path fill="currentColor" d="m55.4847 20.5598c.864.936 2.472 1.704 4.584 1.704 4.32 0 6.8401-2.976 6.8401-6.576 0-3.624-2.5201-6.60001-6.8401-6.60001-2.112 0-3.72.79201-4.584 1.70401v-6.02401h-3.84v17.23201h3.84zm-.12-4.944c0-1.992 1.704-3.432 3.912-3.432 2.112 0 3.888 1.248 3.888 3.504s-1.776 3.48-3.888 3.48c-2.208 0-3.912-1.416-3.912-3.408z"/><path fill="currentColor" d="m67.3181 19.9118c1.464 1.488 4.272 2.352 7.2 2.352 3.96 0 6.936-1.44 6.936-4.392 0-2.88-2.832-3.432-6.072-3.816-2.736-.312-3.576-.384-3.576-1.08 0-.648.864-1.056 2.496-1.056 1.968 0 3.672.6 4.824 1.656l1.992-2.304c-1.272-1.224-3.648-2.18401-6.624-2.18401-4.008 0-6.48 1.72801-6.48 4.32001 0 2.712 2.52 3.312 5.544 3.696 2.832.336 4.032.336 4.032 1.176 0 .792-1.056 1.128-2.784 1.128-2.16 0-4.152-.672-5.664-2.064z"/><path fill="currentColor" d="m82.8395 8.05579h3.912v-3.288h-3.912zm3.864 1.29601h-3.84v12.648h3.84z"/><path fill="currentColor" d="m99.8264 20.5598v1.44h3.8396v-17.23201h-3.8396v6.02401c-.864-.912-2.472-1.70401-4.584-1.70401-4.32 0-6.84 2.97601-6.84 6.60001 0 3.6 2.52 6.576 6.84 6.576 2.112 0 3.72-.768 4.584-1.704zm.12-4.944v.144c0 1.992-1.704 3.408-3.912 3.408-2.112 0-3.888-1.224-3.888-3.48s1.776-3.504 3.888-3.504c2.208 0 3.912 1.44 3.912 3.432z"/><path fill="currentColor" d="m105.996 8.05579h3.912v-3.288h-3.912zm3.864 1.29601h-3.84v12.648h3.84z"/><path fill="currentColor" d="m116.863 22.2638c2.232 0 4.056-.648 5.208-1.656.648 1.2 2.184 1.92 4.992 1.392v-2.832c-1.344.288-1.632-.024-1.632-.696v-4.608c0-3.168-2.376-4.77601-6.408-4.77601-3.48 0-6.264 1.51201-7.056 3.79201l3.456.936c.384-.984 1.704-1.704 3.432-1.704 2.04 0 2.856.768 2.856 1.728v.072l-5.04.456c-2.976.288-5.16 1.512-5.16 3.984 0 2.496 2.232 3.912 5.352 3.912zm4.848-5.112c0 1.464-2.184 2.304-4.152 2.304-1.488 0-2.328-.432-2.328-1.248 0-.84.672-1.152 1.992-1.272l4.488-.456z"/><path fill="currentColor" d="m128.379 21.9998h3.84v-6.048c0-2.184 1.2-3.456 3.288-3.456 1.968 0 3 1.296 3 3.432v6.072h3.84v-7.2c0-3.504-2.232-5.71201-5.52-5.71201-2.04 0-3.624.76801-4.608 1.80001v-1.536h-3.84z"/></svg> </a> <div class="mt-6 text-base md:text-sm text-faint mb-3 md:mb-2">Follow us</div> <div class="text-base md:text-sm grid gap-y-2 grid-cols-2 gap-x-4 md:gap-y-1 mb-4"> <a class="font-medium" href="https://discord.com/invite/obsidianmd" rel="noopener noreferrer" target="_blank">Discord</a> <a class="font-medium" href="https://x.com/obsdmd" rel="noopener noreferrer" target="_blank">Twitter</a> <a class="font-medium" href="https://bsky.app/profile/obsidian.md" rel="me noopener noreferrer" target="_blank">Bluesky</a> <a class="font-medium" href="https://www.threads.net/@obsdmd" rel="me noopener noreferrer" target="_blank">Threads</a> <a class="font-medium" href="https://mas.to/@obsidian" rel="me noopener noreferrer" target="_blank">Mastodon</a> <a class="font-medium" href="https://www.youtube.com/@obsdmd" rel="noopener noreferrer" target="_blank">YouTube</a> <a class="font-medium" href="https://github.com/obsidianmd" rel="noopener noreferrer" target="_blank">GitHub</a> </div> <div class="text-sm text-faint">© 2025 Obsidian</div> </div> </footer> </div> <script src="static.js"></script> <script src="extension.js"></script> </body> </html>