-<div id="app"><!--[--><header sticky><div data-v-26aac3dc><nav class="navbar navbar-expand-md d-print-none navbar-dark bg-dark" data-v-26aac3dc><div class="container-fluid" data-v-26aac3dc><div class="navbar-left" data-v-26aac3dc><!--[--><a href="/index.html" title="Home" class="navbar-brand"><img src="/images/custardUI-words.png" height="40"></a><!--]--></div><div class="navbar-default" data-v-26aac3dc><ul class="navbar-nav me-auto mt-2 mt-lg-0" data-v-26aac3dc><!--[--> <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li> <li><a highlight-on="sibling-or-child" href="/readerGuide/index.html" class="nav-link">READER GUIDE</a></li> <li><a highlight-on="sibling-or-child" href="/authorGuide/index.html" class="nav-link">AUTHOR GUIDE</a></li> <li><a highlight-on="sibling-or-child" href="/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a></li> <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li> <li><a href="https://github.com/custardui/custard" target="_blank" class="nav-link"><span><span aria-hidden="true" class="fab fa-github"></span></span></a></li> <li><a href="#cv-open" class="nav-link">OPEN DIALOG</a></li> <!--]--></ul></div><ul class="navbar-nav navbar-right" data-v-26aac3dc><!--[--><li><form class="navbar-form"><div style="position:relative;" class="dropdown" data-v-00e26d0a><!--[--><input value="" data-bs-toggle="dropdown" type="text" class="form-control" placeholder="Search" autocomplete="off" data-v-00e26d0a><div class="form-control placeholder-div-hidden" data-v-00e26d0a>Search</div><!--]--><ul class="dropdown-menu search-dropdown-menu dropdown-menu-hidden dropdown-menu-end" data-v-00e26d0a><!--[--><!--]--></ul></div></form></li><!--]--></ul></div></nav><div style="display:none;" class="lower-navbar-container" data-v-26aac3dc><!--[--><!----><!----><!--]--></div></div></header> <div id="flex-body"><div id="content-wrapper"><h1 id="custom-views-library-documentation">Custom Views Library Documentation<a class="fa fa-anchor" href="#custom-views-library-documentation" onclick="event.stopPropagation()"></a></h1> <p>This directory contains the comprehensive documentation and live demo for the Custom Views library.</p> <h2 id="quick-start">Quick Start<a class="fa fa-anchor" href="#quick-start" onclick="event.stopPropagation()"></a></h2> <h3 id="for-development">For Development<a class="fa fa-anchor" href="#for-development" onclick="event.stopPropagation()"></a></h3> <ol><li>Install MarkBind: <code class="hljs inline no-lang">npm install -g markbind-cli</code></li> <li>Navigate to docs directory: <code class="hljs inline no-lang">cd docs</code></li> <li>Start development server: <code class="hljs inline no-lang">markbind serve</code></li> <li>Open <a href="http://localhost:8080">http://localhost:8080</a></li></ol> <h3 id="for-production-build">For Production Build<a class="fa fa-anchor" href="#for-production-build" onclick="event.stopPropagation()"></a></h3> <ol><li>Build the site: <code class="hljs inline no-lang">markbind build</code></li> <li>Deploy the <code class="hljs inline no-lang">_site</code> directory</li></ol> <h2 id="interactive-demo">Interactive Demo<a class="fa fa-anchor" href="#interactive-demo" onclick="event.stopPropagation()"></a></h2> <p>The documentation includes a fully functional demo that demonstrates:</p> <ul><li>Profile and state management</li> <li>URL parameter handling</li> <li>Persistence across sessions</li> <li>Widget-based user interaction</li></ul> <p>Use the "Custom Views" settings icon in the middle-left corner to interact with the demo.</p> <h2 id="development-notes">Development Notes<a class="fa fa-anchor" href="#development-notes" onclick="event.stopPropagation()"></a></h2> <ul><li>The site uses MarkBind for static site generation</li> <li>The Custom Views library is loaded from unpkg CDN</li> <li>Plugin configuration is in <code class="hljs inline no-lang">_markbind/plugins/customviews.js</code></li> <li><code class="hljs inline no-lang">baseUrl: '/customviews'</code> is configured for GitHub Pages deployment</li> <li>Documentation pages demonstrate the library in action</li></ul></div> <div class="scroll-top-button fa-lg d-print-none" style="display:none;bottom:2%;right:2%;position:fixed;" aria-hidden="true"><!--[--><i class="fas fa-arrow-circle-up"></i><!--]--></div></div> <div><footer><div class="text-center"><small>[Generated by <a href="https://markbind.org/">MarkBind 6.3.1</a> on Thu, 26 Feb 2026, 15:32:44 GMT+8]</small><br></div></footer></div><!--]--></div>
0 commit comments