Add in CNAME, fixed header for table, change dark mode with user pref…

…erence

docs/CNAME

@@ -0,0 +1 @@
+tech-diff.com

docs/file/index.md

@@ -25,79 +25,79 @@ hide:
     </thead>
     <tbody>
         <tr>
-            <th><b>Name</b></th>
+            <td><b>Name</b></td>
             <td>Apache Iceberg</td>
             <td>Apache ORC</td>
             <td>Apache Parquet</td>
             <td>CSV</td>
             <td>Delta Lake</td>
         </tr>
         <tr>
-            <th><b>Description</b></th>
+            <td><b>Description</b></td>
             <td>Iceberg is a high-performance format for huge analytic tables.</td>
             <td>ORC is a self-describing type-aware columnar file format designed for Hadoop workloads.</td>
             <td>Apache Parquet is an open source, column-oriented data file format designed for efficient data storage and retrieval.</td>
             <td>Comma-Separated Values (CSV) is a text file format that uses commas to separate values in plain text.</td>
             <td>Delta Lake is an open-source storage framework that enables building a Lakehouse architecture.</td>
         </tr>
         <tr>
-            <th><b>License</b></th>
+            <td><b>License</b></td>
             <td>Apache license 2.0</td>
             <td>Apache license 2.0</td>
             <td>Apache license 2.0</td>
             <td>N/A</td>
             <td>Apache license 2.0</td>
         </tr>
         <tr>
-            <th><b>Source code</b></th>
+            <td><b>Source code</b></td>
             <td><a href="https://github.com/apache/iceberg">https://github.com/apache/iceberg</a></td>
             <td><a href="https://github.com/apache/orc">https://github.com/apache/orc</a></td>
             <td><a href="https://github.com/apache/parquet-format">https://github.com/apache/parquet-format</a></td>
             <td></td>
             <td><a href="https://github.com/delta-io/delta">https://github.com/delta-io/delta</a></td>
         </tr>
         <tr>
-            <th><b>Website</b></th>
+            <td><b>Website</b></td>
             <td><a href="https://iceberg.apache.org/">https://iceberg.apache.org/</a></td>
             <td><a href="https://orc.apache.org/">https://orc.apache.org/</a></td>
             <td><a href="https://parquet.apache.org/">https://parquet.apache.org/</a></td>
             <td><a href="https://www.rfc-editor.org/rfc/rfc4180.html">https://www.rfc-editor.org/rfc/rfc4180.html</a></td>
             <td><a href="https://delta.io/">https://delta.io/</a></td>
         </tr>
         <tr>
-            <th><b>Year created</b></th>
+            <td><b>Year created</b></td>
             <td>2017</td>
             <td>2013</td>
             <td>2013</td>
             <td>0</td>
             <td>2019</td>
         </tr>
         <tr>
-            <th><b>Company</b></th>
+            <td><b>Company</b></td>
             <td>Netflix</td>
             <td>Hortonworks, Facebook</td>
             <td>Twitter, Cloudera</td>
             <td></td>
             <td>Databricks</td>
         </tr>
         <tr>
-            <th><b>Language support</b></th>
+            <td><b>Language support</b></td>
             <td></td>
             <td>java, scala, c++, python</td>
             <td>java, scala, c++, python, r, php</td>
             <td>java, scala, c++, python, r, php, go</td>
             <td>scala, java, python, rust</td>
         </tr>
         <tr>
-            <th><b>Use cases</b></th>
+            <td><b>Use cases</b></td>
             <td>Write once read many, Analytics, Efficient storage, ACID transactions</td>
             <td>Write once read many, Analytics, Efficient storage, ACID transactions</td>
             <td>Write once read many, Analytics, Efficient storage, Column based queries</td>
             <td></td>
             <td>Write once read many, Analytics, Efficient storage, ACID transactions</td>
         </tr>
         <tr>
-            <th><b>Is human readable</b></th>
+            <td><b>Is human readable</b></td>
             <td>    <span class="twemoji red-cross"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.757 10.243a6.001 6.001 0 1 1 8.488-8.486 6.001 6.001 0 0 1-8.488 8.486ZM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763Z"></path></svg></span>
 </td>
             <td><a href="https://orc.apache.org/specification/ORCv2/#motivation">    <span class="twemoji red-cross"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.757 10.243a6.001 6.001 0 1 1 8.488-8.486 6.001 6.001 0 0 1-8.488 8.486ZM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763Z"></path></svg></span>
@@ -110,15 +110,15 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Orientation</b></th>
+            <td><b>Orientation</b></td>
             <td>column</td>
             <td><a href="https://orc.apache.org/specification/ORCv2/#motivation">row</a></td>
             <td><a href="https://github.com/apache/parquet-format/blob/master/README.md">column</a></td>
             <td><a href="https://www.rfc-editor.org/rfc/rfc4180.html">row</a></td>
             <td>column</td>
         </tr>
         <tr>
-            <th><b>Has type system</b></th>
+            <td><b>Has type system</b></td>
             <td>    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </td>
             <td><a href="https://orc.apache.org/docs/types.html">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
@@ -131,7 +131,7 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Has nested structure support</b></th>
+            <td><b>Has nested structure support</b></td>
             <td>    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </td>
             <td><a href="https://orc.apache.org/docs/types.html">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
@@ -144,7 +144,7 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Has native compression</b></th>
+            <td><b>Has native compression</b></td>
             <td>    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </td>
             <td><a href="https://orc.apache.org/specification/ORCv2/#compression">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
@@ -157,7 +157,7 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Has encoding support</b></th>
+            <td><b>Has encoding support</b></td>
             <td>    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </td>
             <td><a href="https://orc.apache.org/specification/ORCv2/#run-length-encoding">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
@@ -170,7 +170,7 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Has constraint support</b></th>
+            <td><b>Has constraint support</b></td>
             <td>    <span class="twemoji red-cross"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.757 10.243a6.001 6.001 0 1 1 8.488-8.486 6.001 6.001 0 0 1-8.488 8.486ZM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763Z"></path></svg></span>
 </td>
             <td>    <span class="twemoji red-cross"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.757 10.243a6.001 6.001 0 1 1 8.488-8.486 6.001 6.001 0 0 1-8.488 8.486ZM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763Z"></path></svg></span>
@@ -183,7 +183,7 @@ hide:
 </a></td>
         </tr>
         <tr>
-            <th><b>Has acid support</b></th>
+            <td><b>Has acid support</b></td>
             <td><a href="https://iceberg.apache.org/docs/latest/reliability/">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </a></td>
             <td>    <span class="twemoji red-cross"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.757 10.243a6.001 6.001 0 1 1 8.488-8.486 6.001 6.001 0 0 1-8.488 8.486ZM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763Z"></path></svg></span>
@@ -196,7 +196,7 @@ hide:
 </a></td>
         </tr>
         <tr>
-            <th><b>Has metadata</b></th>
+            <td><b>Has metadata</b></td>
             <td>    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
 </td>
             <td><a href="https://orc.apache.org/specification/ORCv2/#postscript">    <img alt="✅" class="twemoji" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/2705.svg" title=":white_check_mark:">
@@ -209,7 +209,7 @@ hide:
 </td>
         </tr>
         <tr>
-            <th><b>Data processing framework support</b></th>
+            <td><b>Data processing framework support</b></td>
             <td>
                 <a href="https://drill.apache.org/docs/iceberg-format-plugin/">Apache Drill, </a>
             </td>
@@ -243,7 +243,7 @@ hide:
             </td>
         </tr>
         <tr>
-            <th><b>Analytics query support</b></th>
+            <td><b>Analytics query support</b></td>
             <td>
             </td>
             <td>

docs/javascripts/tableselect.js

@@ -1,15 +1,32 @@
-let prefers = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-let html = document.querySelector('html');
+const matchDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
+if (matchDarkMode.matches) {
+    document.querySelector('html').classList.add("dark");
+}
 
-html.classList.add(prefers);
+let colourPaletteButton = document.querySelectorAll('[data-md-component="palette"]');
+if (colourPaletteButton.length > 0) {
+    colourPaletteButton[0].addEventListener("click", function(event) {
+        event.stopPropagation();
+        let targetAttr = event.target.getAttribute("data-md-color-media");
+        if (targetAttr != null) {
+            let html = document.querySelector("html");
+            if (targetAttr === "(prefers-color-scheme: light)" && html.classList.contains("dark")) {
+                html.classList.remove("dark");
+            } else if (targetAttr === "(prefers-color-scheme: dark)" && !html.classList.contains("dark")) {
+                html.classList.add("dark");
+            }
+        }
+    })
+}
 
 document$.subscribe(function() {
     const tables = document.querySelectorAll("table");
     tables.forEach(function(table) {
         const dataTable = new DataTable(table, {
             ordering: false,
             paging: false,
-            autoWidth: true
+            autoWidth: true,
+            fixedHeader: true
         })
 
         document.querySelectorAll("a.toggle-vis").forEach((el) => {

docs/stylesheets/extra.css

@@ -1,3 +1,11 @@
 .red-cross {
     color: #d9534f;
-}
+}
+
+.md-header {
+    position: unset;
+}
+
+.sorting_disabled {
+    font-size: 0.8rem;
+}

mkdocs.yml

@@ -1,10 +1,12 @@
 site_name: Tech Diff
+site_url: https://tech-diff.com/
 repo_url: https://github.com/pflooky/tech-diff
 repo_name: tech-diff
 
 theme:
   name: material
   features:
+    - header.autohide
     - navigation.tabs
     - navigation.sections
     - navigation.instant
@@ -42,10 +44,12 @@ nav:
 extra_javascript:
   - https://code.jquery.com/jquery-3.7.0.js
   - https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js
+  - https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js
   - javascripts/tableselect.js
 
 extra_css:
   - https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css
+  - https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css
   - stylesheets/extra.css
 
 markdown_extensions:

site/404.html

@@ -19,7 +19,7 @@
 
 
 
-        <title>Data Tech Compare</title>
+        <title>Tech Diff</title>
 
 
 
@@ -47,6 +47,8 @@
 
       <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
 
+      <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css">
+
       <link rel="stylesheet" href="/stylesheets/extra.css">
 
     <script>__md_scope=new URL("/",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
@@ -83,7 +85,7 @@
 
 <header class="md-header" data-md-component="header">
   <nav class="md-header__inner md-grid" aria-label="Header">
-    <a href="/." title="Data Tech Compare" class="md-header__button md-logo" aria-label="Data Tech Compare" data-md-component="logo">
+    <a href="/." title="Tech Diff" class="md-header__button md-logo" aria-label="Tech Diff" data-md-component="logo">
 
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
@@ -97,7 +99,7 @@
       <div class="md-header__ellipsis">
         <div class="md-header__topic">
           <span class="md-ellipsis">
-            Data Tech Compare
+            Tech Diff
           </span>
         </div>
         <div class="md-header__topic" data-md-component="header-topic">
@@ -190,13 +192,13 @@
 
 
       <div class="md-header__source">
-        <a href="https://github.com/pflooky/data-tech-compare" title="Go to repository" class="md-source" data-md-component="source">
+        <a href="https://github.com/pflooky/tech-diff" title="Go to repository" class="md-source" data-md-component="source">
   <div class="md-source__icon md-icon">
 
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
   </div>
   <div class="md-source__repository">
-    data-tech-compare
+    tech-diff
   </div>
 </a>
       </div>
@@ -273,23 +275,23 @@
 
 <nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
   <label class="md-nav__title" for="__drawer">
-    <a href="/." title="Data Tech Compare" class="md-nav__button md-logo" aria-label="Data Tech Compare" data-md-component="logo">
+    <a href="/." title="Tech Diff" class="md-nav__button md-logo" aria-label="Tech Diff" data-md-component="logo">
 
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
 
     </a>
-    Data Tech Compare
+    Tech Diff
   </label>
 
     <div class="md-nav__source">
-      <a href="https://github.com/pflooky/data-tech-compare" title="Go to repository" class="md-source" data-md-component="source">
+      <a href="https://github.com/pflooky/tech-diff" title="Go to repository" class="md-source" data-md-component="source">
   <div class="md-source__icon md-icon">
 
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
   </div>
   <div class="md-source__repository">
-    data-tech-compare
+    tech-diff
   </div>
 </a>
     </div>
@@ -402,7 +404,7 @@ <h1>404 - Not found</h1>
     </div>
 
 
-    <script id="__config" type="application/json">{"base": "/", "features": ["navigation.tabs", "navigation.sections", "navigation.instant", "navigation.tracking", "navigation.top", "navigation.footer", "content.code.copy", "content.code.select", "toc.integrate", "toc.follow"], "search": "/assets/javascripts/workers/search.f2da59ea.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
+    <script id="__config" type="application/json">{"base": "/", "features": ["header.autohide", "navigation.tabs", "navigation.sections", "navigation.instant", "navigation.tracking", "navigation.top", "navigation.footer", "content.code.copy", "content.code.select", "toc.integrate", "toc.follow"], "search": "/assets/javascripts/workers/search.f2da59ea.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
 
 
       <script src="/assets/javascripts/bundle.ef51cdc3.min.js"></script>
@@ -411,6 +413,8 @@ <h1>404 - Not found</h1>
 
         <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
 
+        <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
+
         <script src="/javascripts/tableselect.js"></script>
 
 

site/CNAME

@@ -0,0 +1 @@
+tech-diff.com