feat: Add benchmarks (tauri-apps#224)

* feat(benchmarks): basic benchmarks page (WIP)

* fix ssr

* fix execution time and apex tooltip in darkmode

* re-order memory usage

* add basic electron comparaison

need more loveee!!

* use cargo labels (multiple columns)

* Add graph merging

* Better colors handling and comparaison

* fix graph

* add tauri data’s

* chore: Caps on titles

* add some context

* fix: Prettified layout

* chore: Removed false flag

* merge depedencies (wry+tauri)

* remove log scale

* fix links

* fix seconds

* add benchmarks link in `about` sidebar

* add `3mb_transfer`

Co-authored-by: Laegel <[email protected]>

Author: lemarier

package.json

@@ -13,11 +13,14 @@
     "@docusaurus/preset-classic": "^2.0.0-alpha.50",
     "@fontsource/roboto": "^4.2.1",
     "@fontsource/tauri": "4.2.1",
+    "apexcharts": "^3.26.3",
     "classnames": "^2.2.6",
     "docs-searchbar.js": "^1.1.11",
     "highlight.js": "^10.4.1",
     "mermaid": "^8.5.0",
     "react": "^16.8.4",
+    "react-apexcharts": "^1.3.9",
+    "react-content-loader": "^6.0.3",
     "react-dom": "^16.8.4",
     "react-highlight": "^0.12.0",
     "react-infinite-scroller": "^1.2.4",

sidebars.js

@@ -19,6 +19,11 @@ module.exports = {
         'about/security',
         'about/governance',
         'about/book',
+        {
+          type: 'link',
+          label: 'Benchmarks',
+          href: '/benchmarks',
+        },
       ],
     },
   ],

src/css/custom.css

@@ -301,3 +301,7 @@ html[data-theme='light'] .header-github-link::before {
   font-weight: bold;
   margin-top: 10px;
 }
+
+html[data-theme="light"] a {
+  text-shadow: 0px 0px 1px #215b59;
+}

src/css/hljs-dark.css

@@ -3,96 +3,96 @@
 /* @author: ericwbailey */
 
 /* Comment */
-html[data-theme="dark"] .hljs-comment,
-html[data-theme="dark"] .hljs-quote {
+html[data-theme='dark'] .hljs-comment,
+html[data-theme='dark'] .hljs-quote {
   color: #d4d0ab;
 }
 
 /* Red */
-html[data-theme="dark"] .hljs-variable,
-html[data-theme="dark"] .hljs-template-variable,
-html[data-theme="dark"] .hljs-tag,
-html[data-theme="dark"] .hljs-name,
-html[data-theme="dark"] .hljs-selector-id,
-html[data-theme="dark"] .hljs-selector-class,
-html[data-theme="dark"] .hljs-regexp,
-html[data-theme="dark"] .hljs-deletion {
+html[data-theme='dark'] .hljs-variable,
+html[data-theme='dark'] .hljs-template-variable,
+html[data-theme='dark'] .hljs-tag,
+html[data-theme='dark'] .hljs-name,
+html[data-theme='dark'] .hljs-selector-id,
+html[data-theme='dark'] .hljs-selector-class,
+html[data-theme='dark'] .hljs-regexp,
+html[data-theme='dark'] .hljs-deletion {
   color: #ffa07a;
 }
 
 /* Orange */
-html[data-theme="dark"] .hljs-number,
-html[data-theme="dark"] .hljs-built_in,
-html[data-theme="dark"] .hljs-builtin-name,
-html[data-theme="dark"] .hljs-literal,
-html[data-theme="dark"] .hljs-type,
-html[data-theme="dark"] .hljs-params,
-html[data-theme="dark"] .hljs-meta,
-html[data-theme="dark"] .hljs-link {
+html[data-theme='dark'] .hljs-number,
+html[data-theme='dark'] .hljs-built_in,
+html[data-theme='dark'] .hljs-builtin-name,
+html[data-theme='dark'] .hljs-literal,
+html[data-theme='dark'] .hljs-type,
+html[data-theme='dark'] .hljs-params,
+html[data-theme='dark'] .hljs-meta,
+html[data-theme='dark'] .hljs-link {
   color: #f5ab35;
 }
 
 /* Yellow */
-html[data-theme="dark"] .hljs-attribute {
+html[data-theme='dark'] .hljs-attribute {
   color: #ffd700;
 }
 
 /* Green */
-html[data-theme="dark"] .hljs-string,
-html[data-theme="dark"] .hljs-symbol,
-html[data-theme="dark"] .hljs-bullet,
-html[data-theme="dark"] .hljs-addition {
+html[data-theme='dark'] .hljs-string,
+html[data-theme='dark'] .hljs-symbol,
+html[data-theme='dark'] .hljs-bullet,
+html[data-theme='dark'] .hljs-addition {
   color: #abe338;
 }
 
 /* Blue */
-html[data-theme="dark"] .hljs-title,
-html[data-theme="dark"] .hljs-section {
+html[data-theme='dark'] .hljs-title,
+html[data-theme='dark'] .hljs-section {
   color: #00e0e0;
 }
 
 /* Purple */
-html[data-theme="dark"] .hljs-keyword,
-html[data-theme="dark"] .hljs-selector-tag {
+html[data-theme='dark'] .hljs-keyword,
+html[data-theme='dark'] .hljs-selector-tag {
   color: #dcc6e0;
 }
 
-html[data-theme="dark"] .hljs {
+html[data-theme='dark'] .hljs {
   display: block;
   overflow-x: auto;
   color: #f8f8f2;
   padding: 0.5em;
 }
 
-html[data-theme="dark"] .hljs-emphasis {
+html[data-theme='dark'] .hljs-emphasis {
   font-style: italic;
 }
 
-html[data-theme="dark"] .hljs-strong {
+html[data-theme='dark'] .hljs-strong {
   font-weight: bold;
 }
 
 @media screen and (-ms-high-contrast: active) {
-  html[data-theme="dark"] .hljs-addition,
-  html[data-theme="dark"] .hljs-attribute,
-  html[data-theme="dark"] .hljs-built_in,
-  html[data-theme="dark"] .hljs-builtin-name,
-  html[data-theme="dark"] .hljs-bullet,
-  html[data-theme="dark"] .hljs-comment,
-  html[data-theme="dark"] .hljs-link,
-  html[data-theme="dark"] .hljs-literal,
-  html[data-theme="dark"] .hljs-meta,
-  html[data-theme="dark"] .hljs-number,
-  html[data-theme="dark"] .hljs-params,
-  html[data-theme="dark"] .hljs-string,
-  html[data-theme="dark"] .hljs-symbol,
-  html[data-theme="dark"] .hljs-type,
-  html[data-theme="dark"] .hljs-quote {
+  html[data-theme='dark'] .hljs-addition,
+  html[data-theme='dark'] .hljs-attribute,
+  html[data-theme='dark'] .hljs-built_in,
+  html[data-theme='dark'] .hljs-builtin-name,
+  html[data-theme='dark'] .hljs-bullet,
+  html[data-theme='dark'] .hljs-comment,
+  html[data-theme='dark'] .hljs-link,
+  html[data-theme='dark'] .hljs-literal,
+  html[data-theme='dark'] .hljs-meta,
+  html[data-theme='dark'] .hljs-number,
+  html[data-theme='dark'] .hljs-params,
+  html[data-theme='dark'] .hljs-string,
+  html[data-theme='dark'] .hljs-symbol,
+  html[data-theme='dark'] .hljs-type,
+  html[data-theme='dark'] .hljs-quote {
     color: highlight;
   }
 
-  html[data-theme="dark"] .hljs-keyword,
-  html[data-theme="dark"] .hljs-selector-tag {
+  html[data-theme='dark'] .hljs-keyword,
+  html[data-theme='dark'] .hljs-selector-tag {
     font-weight: bold;
   }
 }