/
admin-block-editor.html
32 lines (29 loc) · 20.3 KB
/
admin-block-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html><html class="bg-white dark:bg-gray-900 dark:text-gray-100 leading-tight overflow-x-hidden text-gray-900" lang=en><head><meta charset=UTF-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><link href=/assets/favicons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/assets/favicons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/assets/favicons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/assets/favicons/site.webmanifest rel=manifest><link color=#000000 href=/assets/favicons/safari-pinned-tab.svg rel=mask-icon><link href=/assets/favicons/favicon.ico rel="shortcut icon"><meta content=Pushword name=apple-mobile-web-app-title><meta content=Pushword name=application-name><meta content=#fff name=msapplication-TileColor><meta content=/assets/favicons/browserconfig.xml name=msapplication-config><meta content=#fff name=theme-color><title> Admin block editor to supercharge the default markdown admin with a rich text editor </title><link href=/assets/tw.min.css?ed8033999 rel=stylesheet><style>:root{--primary:#ef8206;--secondary:#d97706;--font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}</style><style>.nojs{display:inline-block}</style><script>document.head.insertAdjacentHTML('beforeend','<style>.nojs{display:none !important}<\/style>')</script><link href=https://pushword.piedweb.com/feed.xml rel=alternate title="Pushword » Flux" type=application/rss+xml><link href=https://pushword.piedweb.com/extension/admin-block-editor rel=canonical><link href=https://pushword.piedweb.com/extension/admin-block-editor hreflang=x-default rel=alternate><meta content="Admin block editor to supercharge the default markdown admin with a rich text editor" name=og:title><meta content=https://pushword.piedweb.com/extension/admin-block-editor name=og:url><script>const base="/"</script> <body><div class="flex flex-col min-h-screen"><div class="flex flex-wrap items-stretch max-w-screen-2xl mx-auto" style=min-height:85vh><div class="lg:ml-0 lg:mr-0 lg:w-3/4 mx-auto order-2 w-full"><div class=pt-6></div> <nav aria-label=breadcrumb class="dark:text-gray-300 font-light p-3 text-gray-700 text-sm"><ol itemscope itemtype=https://schema.org/BreadcrumbList><li class=inline-block itemprop=itemListElement itemscope itemtype=https://schema.org/ListItem><a class=hover:underline href=/ itemprop=item><span itemprop=name>Pushword</span></a> <meta content=1 itemprop=position> <span class="inline-block px-1">›</span> <li class=inline-block itemprop=itemListElement itemscope itemtype=https://schema.org/ListItem><a class=hover:underline href=/extensions itemprop=item><span itemprop=name>Extensions</span></a> <meta content=2 itemprop=position></ol> </nav> <div class="flex flex-wrap max-w-5xl"><div class="lg:order-1 lg:w-4/5 order-2 overflow-hidden w-full"><div class="dark:prose-light max-w-none p-3 prose"><h1>Admin Block Editor</h1> <p>Supercharge default admin with a rich text editor wich managed blocks.</div> </div> <div class="lg:order-2 lg:w-1/5 order-3 overflow-hidden w-full"><div class="lg:absolute lg:border-gray-200 lg:border-l lg:max-w-xs m-2 max-w-screen-sm p-3 pt-4 rounded"><h3 class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 px-1 text-gray-900 text-sm tracking-wide uppercase">Contents</h3> <div class="-ml-6 dark:prose-light max-w-none prose-sm px-1"><ul><li class=first><a href=#install>Install</a> <li><a href=#configuration>Configuration</a> <ul class=menu_level_1><li class=first><a href=#disable-listener-and-use-filter>Disable Listener and use filter</a> <li><a href=#override-block-template>Override block template</a> <li class=last><a href=#customize-editor>Customize editor</a> </ul> <li class=last><a href=#usage>Usage</a> <ul class=menu_level_1><li class="first last"><a href=#pages-list-block>Pages List Block</a> </ul></ul> </div></div> </div> <div class="lg:w-4/5 order-4 overflow-hidden w-full"><div class="dark:prose-light max-w-3xl p-3 prose"><h2 id=install>Install</h2> <pre><code class="shell">composer require pushword/admin-block-editor
</code></pre> <p>That's it ! If you have a custom installation (not used the <a href="/installation">default installer</a>),
you may have a look inside <code>vendor/pushword/admin/install.php</code>. <p>Block editor is now ready. <h2 id=configuration>Configuration</h2> <p>If you want to go forward than a default install, you can override default parameters in your config : <pre><code class="yaml">admin_block_editor:
new_page: true # Set false to disable block editor for new page (because new page does not have an associated `app` yet)
</code></pre> <p>Or you individually app by app : <pre><code class="yaml"># set false to disable block editor (and get the default Mardown Editor) for this app
admin_block_editor: true
# permit to disable listener, if you want front-end works, see further in the docs
admin_block_editor_disable_listener: false
# permit to use all the blocks pre-configured in this extension
admin_block_editor_blocks: \Pushword\AdminBlockEditor\Block\DefaultBlock::AVAILABLE_BLOCKS
admin_block_editor_type_to_prose: ['paragraph', 'image', 'list', 'blockquote', 'code'] # leave empty if you don't want a prose container around this blocks
</code></pre> <h3 id=disable-listener-and-use-filter>Disable Listener and use filter</h3> <p>This extension is built like an <a href=/component/entity-filter>entity filter</a>. <p>By default, a listener apply <code>Pushword\AdminBlockEditor\BlockEditorFilter</code> before the defined filters in your app's config only on <code>mainContent</code>. <p>If you want to reorder the filters, just disable <code>admin_block_editor_disable_listener</code> and add <code>Pushword\AdminBlockEditor\BlockEditorFilter</code> in you app's config. <p><strong>Performance</strong> : It's recommanded to use only <code>BlockEditorFilter</code> to increase speed on generating page. <h3 id=override-block-template>Override block template</h3> <p>You just find the block you want to override in <a href="https://github.com/Pushword/Pushword/tree/main/packages/admin-block-editor/src/templates/block">./src/templates/block</a> and override it in your <code>templates/my-app.tld/block/my-block.html.twig</code> <h3 id=customize-editor>Customize editor</h3> <p>You want to add a custom block ? This is the path to follow : <ol><li><p>Create a new <a href=https://editorjs.io/the-first-plugin>editor.js plugin</a>. There are a few examples in <span data-rot=_tvguho.pbz/Chfujbeq/Chfujbeq/gerr/znva/cnpxntrf/nqzva-oybpx-rqvgbe-gbbyf>admin-block-editor-tools</span> <li><p><a href=https://symfony.com/doc/current/bundles/override.html>Override</a> <a href=https://github.com/Pushword/Pushword/blob/main/packages/admin-block-editor/src/templates/editorjs_widget.html.twig>@PushwordAdminBlockEditor/editorjs_widget.html.twig</a> to add your custom plugin</ol> <p>I recommend you to import <code>@PushwordAdminBlockEditor/editorjs_widget.html</code>.twig and to create only the block <strong>editorjs_block_to_add_new_plugin</strong> <ol start=3><li>Add in your <em>app</em> configuration with <strong>admin_block_editor_blocks</strong> </ol> <p>Your configuration may looks like <pre><code class="yaml">admin_block_editor_blocks: [
'paragraph',
'list',
'header',
'raw',
'quote',
'code',
'list',
'delimiter',
'table',
'image',
'embed',
'attaches',
'pages_list',
'gallery',
'\App\Block\MyCustomBlock`
]
</code></pre> <ol start=4><li>Create <code>\App\Block\MyCustomBlock</code> wich implements <span class="" data-rot="_tvguho.pbz/Chfujbeq/Chfujbeq/gerr/znva/cnpxntrf/nqzva-oybpx-rqvgbe/fep/Oybpx/OybpxVagresnpr.cuc">BlockInterface</span> or inherit <span class="" data-rot="_tvguho.pbz/Chfujbeq/Chfujbeq/gerr/znva/cnpxntrf/nqzva-oybpx-rqvgbe/fep/Oybpx/NofgenpgOybpx.cuc">AbstractBlock</span> </ol> <h2 id=usage>Usage</h2> <h3 id=pages-list-block>Pages List Block</h3> <p>The search input permit to perfom action like : <ul><li><code>CHILDREN</code> will search for children page <li><code>parent_children</code> will search for children page from the parent page <li><code>comment:HELLO-YOU</code> will search in pages's main content for <code><!--HELLO-YOU--></code> (case sensitive) <li><code>slug:hellow-world</code> will search for page with slug being exactly <code>tagada</code> <li><code>slug:hellow-world OR slug:hello-me</code> ... or operator <li><code>slug:hellow-world OR pizza OR comment:HELLO-YOU</code> ... <li><code>slug:%page%</code> containing <code>page</code> in slug</ul></div> </div></div> <div class="flex max-w-3xl mt-5 mx-3"></div> <div class="font-light max-w-3xl mt-10 mx-3 text-center text-gray-500 text-sm"><span class="dark:hover:text-gray-100 hover:text-gray-900" data-rot=_tvguho.pbz/Chfujbeq/Chfujbeq/rqvg/znva/cnpxntrf/qbpf/pbagrag/rkgrafvba/nqzva-oybpx-rqvgbe.zq><svg xmlns=http://www.w3.org/2000/svg class="-mt-1 fill-current inline-block w-3" viewbox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path></svg><span class="hidden lg:inline-block ml-2">Edit via github</span></span> </div> <div class=pb-10></div></div> <div class="lg:w-1/4 order-1 w-0"><div class=h-full><input class=hidden id=right-column type=checkbox> <label class="bg-primary block bottom-0 cursor-pointer fixed h-12 hover:bg-opacity-75 left-0 m-2 p-3 w-12 z-50" for=right-column id=right-column-toggler><div class="content-center flex flex-wrap h-6 relative w-6"><span class="block border-b-2 border-gray-100 h-1 w-full"></span> <span class="block border-b-2 border-gray-100 h-1 my-1 w-full"></span> <span class="block border-b-2 border-gray-100 h-1 w-full"></span></div> </label> <div class="bg-white border-gray-200 border-r dark:bg-gray-900 dark:border-gray-700 h-full lg:block lg:border-r-0 lg:mx-auto lg:top-18 md:py-9 mr-24 overflow-hidden pl-1 pr-3 py-6 sticky text-sm w-60 z-40" id=right-column-nav><a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/installation> Get Started</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/> Introduction</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/installation> Installation</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/configuration> Configuration</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/upgrade> Upgrade Guide</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/command> Usage</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/themes> Customize the theme</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/extensions> Extensions</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/command> Command</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/editor> Editor</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/create-extension> Developper</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/create-extension> Create an extension</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/component/entity-filter> Entity Filter</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/contribute> Contribute</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/contribute> Issues and Pull Request</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/roadmap> Roadmap</a> <span class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" data-rot=_tvguho.pbz/Chfujbeq/Chfujbeq><div style=display:inline-block;margin-bottom:-2px><svg xmlns=http://www.w3.org/2000/svg class="bi bi-github" fill=currentColor height=16 viewbox="0 0 16 16" width=16><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></div> Source Code</span></div></div> <script>document.addEventListener('DOMContentLoaded',function(){if(window.screen.width>=1025){document.querySelector('#right-column').checked=!0;document.querySelector('#right-column-toggler').classList.add('lg:hidden')}})</script> <style>#right-column:checked~label span:nth-child(1){transform:rotate(45deg) translateY(.2rem) translateX(.1rem)}#right-column:checked~label span:nth-child(2){border-color:transparent;margin:0 !important}#right-column:checked~label span:nth-child(3){transform:rotate(-45deg) translateY(-.3rem) translateX(.1rem)}#right-column:not(:checked)~#right-column-nav{height:0 !important;width:0;padding:0;margin:0}#right-column:checked~label{left:15rem}</style></div></div> <footer class="bg-gray-800 border-t border-yellow-50 dark:bg-gray-900 dark:border-gray-700 shadow-inner text-gray-200 text-sm w-full"><div class="max-w-screen-md mx-auto p-3 py-10 text-center"><a class="block hover:opacity-75 mb-3 text-2xl text-white" href=/>Pushword</a> Crafted by <a class="hover:opacity-75 text-white" href=https://piedweb.com>Pied Web</a> | Source code on <span class="hover:opacity-75 text-white" data-rot=_tvguho.pbz/chfujbeq/chfujbeq><svg xmlns=http://www.w3.org/2000/svg class="-mt-1 fill-current inline-block w-4" viewbox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> github</span> </div> </footer> <header class="fixed flex flex-col left-0 right-0 top-0 z-50"><div class="bg-gradient-to-r bg-gray-50 border-b dark:bg-gray-900 dark:border-gray-700 dark:from-gray-900 dark:to-gray-800 from-gray-50 shadow-sm to-gray-100"><div class="flex flex-row items-center justify-between max-w-screen-2xl mx-auto px-4 py-2"><span class="block font-mono mr-1 text-2xl"><a class="dark:text-gray-50 flex font-bold hover:text-gray-200 logo text-gray-800" href=/><svg xmlns=http://www.w3.org/2000/svg class="fill-current h-12 inline-block w-12" height=266.667 viewbox="0 0 266.667 266.667" width=266.667><path d="M7.152 263.774c-1.566-.758-3.516-2.846-4.333-4.64C.72 254.527.715 12.15 2.814 7.543c.814-1.787 2.942-3.915 4.73-4.73C12.14.72 254.526.72 259.124 2.814c1.787.814 3.915 2.942 4.73 4.73 2.095 4.597 2.095 246.983 0 251.58-2.633 5.78-5.77 6.2-45.25 6.2h-37.27v-8.11c0-19.1 9.543-42.552 26.35-64.754 11.535-15.238 17.14-26.185 19.27-37.643 4.903-26.366-15.248-55.43-44.615-64.35-13.928-4.23-27.952-2.427-46.338 5.96-8.806 4.017-53.043 30.14-65.637 38.76-27.857 19.067-32.823 48.42-13.268 78.44 6.732 10.335 12.396 23.89 15.474 37.03L75.546 263c.592 2.178-1.565 2.327-32.456 2.243-19.87-.054-34.228-.64-35.938-1.47zm42.62-121.593c6.84-2.857 11.562-9.377 11.557-15.95-.01-11.372-7.74-18.23-20.55-18.23-6.323 0-8.013.58-12.066 4.138-4.312 3.786-4.713 4.757-4.713 11.4 0 16.28 11.507 24.604 25.772 18.644zm42.202-28.517c12.752-6.407 14.398-24.54 2.846-31.362-9.6-5.663-23.526-3.293-27.66 4.703-2.816 5.445-1.886 17.15 1.752 22.05 5.286 7.12 14.43 8.948 23.064 4.61zm42.632-23.124c6.423-3.6 9.395-8.787 9.395-16.367 0-21.287-34.578-24.364-36.953-3.29-1.996 17.705 12.56 28.086 27.56 19.656zm93.382-3.067c7.738-3.816 13.92-12.033 17.31-23.004 6.798-22.01 1.078-33.74-17.516-35.92-19.624-2.302-30.74 9.12-32.7 33.607-.667 8.296-.337 10.42 2.623 16.886 3.422 7.475 6.357 10 13.64 11.687 5.15 1.2 9.24.4 16.654-3.255zm-52.654-8.843c4.932-1.904 10.184-8.776 10.924-14.297 1.482-11.052-5.953-19.227-18.197-20.01-12.982-.83-21.173 7.582-19.228 19.744 2.215 13.853 12.993 19.775 26.5 14.562z"></path> </svg> <span class="hidden lg:inline-block ml-2 mt-2 text-small">Pushword</span></a> </span> <div class="flex flex-1 flex-row md:mx-6 mx-3"><input class="bg-gray-50 border-2 border-gray-200 dark:bg-gray-700 focus:border-gray-200 focus:w-60 md:focus:w-full md:rounded-l md:w-full outline-none px-2 py-1 rounded rounded-r-none text-xl w-20" id=search placeholder=Search type=text> <button class="bg-white font-bold hover:bg-gray-200 md:block px-4 py-2 rounded-r text-gray-800" onclick="document.querySelector('#search').focus()"><svg xmlns=http://www.w3.org/2000/svg fill=currentColor height=16 viewbox="0 0 16 16" width=16><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path> </svg> </button></div> <nav class=nav><ul class="flex space-x-1"><li><a class="dark:text-gray-50 duration-200 font-bold hover:text-gray-600 inline-block px-3 py-2 rounded text-gray-800 transition-colors" href=/installation>Docs</a> <li><a class="dark:text-gray-50 duration-200 font-bold hidden hover:text-gray-600 md:inline-block px-3 py-2 rounded text-gray-800 transition-colors" href=/extensions>Extensions</a> <li><a class="dark:text-gray-50 duration-200 font-bold hidden hover:text-gray-600 md:inline-block px-3 py-2 rounded text-gray-800 transition-colors" href=/contribute>Contribute</a> <li><a class="dark:text-gray-50 duration-200 font-bold hidden hover:text-gray-600 md:inline-block px-3 py-2 rounded text-gray-800 transition-colors" href=/roadmap>Roadmap</a></ul> </nav></div> </div> <div class="bg-gray-100 dark:bg-gray-700 flex flex-col md:px-20 px-5 rounded-b-200" id=search-results></div></header> <style>body{margin-top:85px}a.logo:hover{filter:sepia(20%)}:root{--tw-ring-color:transparent}</style></div> <script async src=/assets/app.min.js?ea1d19e6f></script>