[docs] Bump

Author: jamesgpearce

docs/demos/car-analysis/article.html

@@ -1,4 +1,4 @@
-<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/city-database/">City Database</a></li></ul></nav><section class="s1" id="/demos/city-database/" data-id="CD"><h1>City Database</h1><iframe srcdoc="&lt;html&gt;&lt;head&gt;&lt;script src=&quot;/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/ui-react.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/ui-react-dom-debug.js&quot;&gt;&lt;/script&gt;&lt;style&gt;#loading{animation:spin 1s infinite linear;height:2rem;margin:40vh auto;width:2rem}#loading::before{content:url(&#x27;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;2rem&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;path d=&quot;M50 10A40 40 0 1 1 10 50&quot; stroke=&quot;black&quot; fill=&quot;none&quot; stroke-width=&quot;4&quot; /&gt;&lt;/svg&gt;&#x27;)}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}main{padding:.5rem}table{border-collapse:collapse;font-size:inherit;line-height:inherit;margin-top:.5rem;table-layout:fixed;width:100%}table caption{text-align:left}table caption button{border:0;margin-right:.25rem}table td,table th{overflow:hidden;padding:.15rem .5rem .15rem 0;white-space:nowrap}table th{border:solid #ddd;border-width:1px 0;cursor:pointer;text-align:left;width:15%}table th:nth-child(1){width:25%}table td{border-bottom:1px solid #eee}@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format(&#x27;woff2&#x27;)}*{box-sizing:border-box}body{user-select:none;font-family:Inter,sans-serif;letter-spacing:-.04rem;font-size:.8rem;line-height:1.5rem;margin:0;color:#333}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;script&gt;(()=&gt;{const i=React[&quot;createElement&quot;],n=TinyBase[&quot;createStore&quot;],{Provider:s,useCreateStore:o}=TinyBaseUiReact,{useMemo:l,useState:c}=React,{SortedTableInHtmlTable:t,StoreInspector:r}=TinyBaseUiReactDomDebug,e=()=&gt;{const t=o(n),[e,a]=c(!0);return l(async()=&gt;{await p(t),a(!1)},[]),i(s,{store:t},i(e?d:u,null),i(r,null))};addEventListener(&quot;load&quot;,()=&gt;ReactDOM.createRoot(document.body).render(i(e,null)));const d=()=&gt;i(&quot;div&quot;,{id:&quot;loading&quot;}),u=()=&gt;i(&quot;main&quot;,null,i(y,null)),m=/^[\d\.-]+$/,p=async i=&gt;{const t=(await(await fetch(&quot;https://tinybase.org/assets/cities.tsv&quot;)).text()).split(`
+<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/city-database/">City Database</a></li></ul></nav><section class="s1" id="/demos/city-database/" data-id="CD"><h1>City Database</h1><iframe srcdoc="&lt;html&gt;&lt;head&gt;&lt;script src=&quot;/umd/react.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/tinybase.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/ui-react.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/umd/ui-react-dom-debug.js&quot;&gt;&lt;/script&gt;&lt;style&gt;#loading{animation:spin 1s infinite linear;height:2rem;margin:40vh auto;width:2rem}#loading::before{content:url(&#x27;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;2rem&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;path d=&quot;M50 10A40 40 0 1 1 10 50&quot; stroke=&quot;black&quot; fill=&quot;none&quot; stroke-width=&quot;4&quot; /&gt;&lt;/svg&gt;&#x27;)}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}main{padding:.5rem}table{border-collapse:collapse;font-size:inherit;line-height:inherit;margin-top:.5rem;table-layout:fixed;width:100%}table caption{text-align:left}table caption button{border:0;margin-right:.25rem}table td,table th{overflow:hidden;padding:.15rem .5rem .15rem 0;white-space:nowrap}table th{border:solid #ddd;border-width:1px 0;cursor:pointer;text-align:left;width:15%}table th:nth-child(1){width:25%}table td{border-bottom:1px solid #eee}@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format(&#x27;woff2&#x27;)}*{box-sizing:border-box}body{user-select:none;font-family:Inter,sans-serif;letter-spacing:-.04rem;font-size:.8rem;line-height:1.5rem;margin:0;color:#333}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;script&gt;(()=&gt;{const i=React[&quot;createElement&quot;],n=TinyBase[&quot;createStore&quot;],{Provider:s,useCreateStore:o}=TinyBaseUiReact,{useMemo:l,useState:c}=React,{SortedTableInHtmlTable:t,StoreInspector:r}=TinyBaseUiReactDomDebug,e=()=&gt;{const t=o(n),[e,a]=c(!0);return l(async()=&gt;{await p(t),a(!1)},[]),i(s,{store:t},i(e?d:u,null),i(r,null))},d=(addEventListener(&quot;load&quot;,()=&gt;ReactDOM.createRoot(document.body).render(i(e,null))),()=&gt;i(&quot;div&quot;,{id:&quot;loading&quot;})),u=()=&gt;i(&quot;main&quot;,null,i(y,null)),m=/^[\d\.-]+$/,p=async i=&gt;{const t=(await(await fetch(&quot;https://tinybase.org/assets/cities.tsv&quot;)).text()).split(`
 `),n=t.shift().split(&quot;\t&quot;);i.transaction(()=&gt;t.forEach((t,a)=&gt;t.split(&quot;\t&quot;).forEach((t,e)=&gt;i.setCell(&quot;cities&quot;,a,n[e],m.test(t)?parseFloat(t):t))))},a=[&quot;Name&quot;,&quot;Country&quot;,&quot;Population&quot;,&quot;Latitude&quot;,&quot;Longitude&quot;,&quot;Elevation&quot;],y=()=&gt;i(t,{tableId:&quot;cities&quot;,cellId:&quot;Population&quot;,descending:!0,limit:10,sortOnClick:!0,paginator:!0,customCells:a,idColumn:!1})})()&lt;/script&gt;&lt;/html&gt;"></iframe><p>In this demo, we build an app that loads over 140,000 records to push the size and performance limits of <a href="/">TinyBase</a>.</p><p>We use <a href="https://public.opendatasoft.com/explore/dataset/geonames-all-cities-with-a-population-1000">Opendatasoft GeoNames</a> as the source of the information in this app. Thank you for a great data set to demonstrate <a href="/">TinyBase</a>!</p><h3 id="boilerplate">Boilerplate</h3><p>As per usual, we first pull in React, ReactDOM, and <a href="/">TinyBase</a>:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span> <span class="attr-name">src</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">"</span>/umd/react.production.min.js<span class="punctuation">"</span></span><span class="punctuation">></span></span><span class="script"></span><span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>script</span><span class="punctuation">></span></span>
 <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span> <span class="attr-name">src</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">"</span>/umd/react-dom.production.min.js<span class="punctuation">"</span></span><span class="punctuation">></span></span><span class="script"></span><span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>script</span><span class="punctuation">></span></span>
 <span class="tag"><span class="tag"><span class="punctuation">&lt;</span>script</span> <span class="attr-name">src</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">"</span>/umd/tinybase.js<span class="punctuation">"</span></span><span class="punctuation">></span></span><span class="script"></span><span class="tag"><span class="tag"><span class="punctuation">&lt;/</span>script</span><span class="punctuation">></span></span>