feat(docs-generator): update landing page (#59)

* feat(docs-generator): update landing page

* chore(deps): update quasar

* feat(partners): add digital ocean

* feat(logos): update DO and claim and link

* fix(docs-generator/landing): flowchart x-overflow

* chore(partners): guijs

Co-authored-by: Daniel <denjell@sfosc.org>

docs-generator/package.json

@@ -22,23 +22,23 @@
     "deploy:ssr-pm2_kill": "pm2 kill"
   },
   "dependencies": {
-    "@quasar/extras": "1.4.1",
+    "@quasar/extras": "1.5.1",
     "lru-cache": "5.1.1",
-    "mermaid": "8.4.4",
-    "quasar": "1.7.2"
+    "mermaid": "8.4.6",
+    "quasar": "1.9.2"
   },
   "devDependencies": {
-    "@quasar/app": "1.5.1",
+    "@quasar/app": "1.5.6",
     "@quasar/quasar-app-extension-icon-genie": "1.1.3",
     "@quasar/quasar-app-extension-qactivity": "1.0.0-beta.4",
-    "@quasar/quasar-app-extension-qmarkdown": "1.0.16",
+    "@quasar/quasar-app-extension-qmarkdown": "1.0.23",
     "@quasar/quasar-app-extension-qmediaplayer": "1.0.17",
     "@quasar/quasar-app-extension-qribbon": "1.0.0-beta.14",
-    "@vue/eslint-config-standard": "5.1.0",
+    "@vue/eslint-config-standard": "5.1.2",
     "babel-eslint": "10.0.3",
     "eslint": "6.8.0",
     "eslint-loader": "3.0.3",
-    "eslint-plugin-import": "2.20.0",
+    "eslint-plugin-import": "2.20.1",
     "eslint-plugin-node": "11.0.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",

docs-generator/quasar.extensions.json

@@ -18,7 +18,7 @@
           "iconHash": "1223e08a3a2fc40fc5fffd4fa30cb0be"
         },
         "pwa": {
-          "iconHash": "1223e08a3a2fc40fc5fffd4fa30cb0be"
+          "iconHash": "4a527af8aa5591a5914efd4d86627f43"
         }
       },
       "build": {

docs-generator/src-pwa/pwa-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}

docs-generator/src-ssr/ssr-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    ssr: true;
+  }
+}

docs-generator/src/assets/partners.js

@@ -1,5 +1,15 @@
 export default {
   sponsors: [
+    {
+      title: 'Digital Ocean',
+      tags: [
+        'testing', 'JS/TS'
+      ],
+      url: 'https://m.do.co/c/40f468c2e493',
+      logoUrl: ['statics/partnerLogos/DO_Logo_Vertical_Blue.png', 'statics/partnerLogos/DO_Logo_Vertical_Blue.png'],
+      description: 'This project is supported by Digital Ocean. Click this card to visit their website and get $100 credit that you can use over 60 days.',
+      flair: 'TECH SPONSOR'
+    },
     {
       title: 'wallaby.js',
       tags: [
@@ -12,6 +22,16 @@ export default {
     }
   ],
   collaborators: [
+    {
+      title: 'GUIJS',
+      tags: [
+        'Dev Toolkit', 'early-adopter'
+      ],
+      url: 'https://guijs.dev/',
+      logoUrl: ['statics/partnerLogos/guijs-round.svg', 'statics/partnerLogos/guijs-round.svg'],
+      description: 'GUIJS is a toolkit for making your devlife easier. This collaboration enabled the extension of Tauri to have a new mode, the sidecar.',
+      flair: 'COLLABORATOR'
+    },
     {
       title: 'PureOS',
       tags: [

docs-generator/src/components/Hero.vue

@@ -5,7 +5,7 @@
       <div>
         <router-link to="/">
           <div id="tauri-name--holder">
-            <img src="statics/tauri.svg" class="animateLeft tauri-name scroll-determined" style="cursor:pointer" alt="Tauri Wordmark" title="Tauri">
+            <img src="statics/tauri-wordmark.svg" class="animateLeft tauri-name scroll-determined" style="cursor:pointer" alt="Tauri Wordmark" title="Tauri">
           </div>
         </router-link>
         <q-btn
@@ -108,59 +108,6 @@ export default {
       // const action = !!this.rightDrawerOpen
       this.$store.commit('common/rightDrawerOpen', true)
     }
-    /*
-    scrolled (position) {
-      const pos = position / 4.5
-      this.height = 270 - (pos)
-      this.heightName = 140 - (pos)
-      this.heightPic = 250 - (pos)
-      this.heightClaim = 220 - (pos)
-
-      // todo: cleanup, use vuex, be faster!
-      // the buttons
-      if (pos >= 110 && this.buttons !== false) {
-        this.buttons = false
-        document.getElementsByClassName('scroll-determined')[0].setAttribute('style', 'height: 70px')
-        // the icon
-        document.getElementsByClassName('scroll-determined')[1].setAttribute('style', `height: 55px;width: 55px;transform: rotate(${position}deg)`)
-        // the name
-        document.getElementsByClassName('tauri-name')[0].setAttribute('style', 'height: 30px')
-        document.getElementsByClassName('tauri-name')[0].classList.add('animateLeft')
-        // claim
-        // the sidebar id="scrollHolder" style="height:50%"
-        document.getElementsByClassName('q-drawer__content')[0].setAttribute('style', 'margin-top: 60px')
-        document.getElementById('scrollHolder').setAttribute('style', 'height: calc(100% - 132px)')
-        document.getElementById('padding').setAttribute('style', 'height: 70px')
-      } else if (this.buttons === false) {
-        document.getElementsByClassName('scroll-determined')[1].setAttribute('style', `height: 55px;width: 55px;transform: rotate(${position}deg)`)
-        document.getElementById('claim').setAttribute('style', 'display: none')
-      } else {
-        document.getElementsByClassName('scroll-determined')[1].setAttribute('style', `transform: rotate(${position}deg)`)
-        document.getElementsByClassName('scroll-determined')[0].setAttribute('style', `height: ${this.height}px`)
-        // the icon
-        document.getElementsByClassName('scroll-determined')[1].setAttribute('style', `height: ${this.heightPic - 5}px;width: ${this.heightPic}px;transform: rotate(${position}deg)`)
-        // the name
-        document.getElementsByClassName('tauri-name')[0].setAttribute('style', `height: ${this.heightName}px;`)
-        // claim
-        document.getElementById('claim').setAttribute('style', 'display: none')
-        // the sidebar
-        document.getElementsByClassName('q-drawer__content')[0].setAttribute('style', `margin-top: ${this.height + 20}px`)
-      }
-
-      /*
-      document.getElementsByClassName('scroll-determined')[0].setAttribute('style', `height: ${this.height}px`)
-      // the icon
-      document.getElementsByClassName('scroll-determined')[1].setAttribute('style', `height: ${this.heightPic - 5}px;width: ${this.heightPic}px;transform: rotate(${position}deg)`)
-      // the name
-      document.getElementsByClassName('tauri-name')[0].setAttribute('style', `
-      height: ${this.heightName}px;
-      `)
-      // claim
-      document.getElementById('claim').setAttribute('style', `top: ${this.heightClaim}px`)
-      // the sidebar
-      document.getElementsByClassName('q-drawer__content')[0].setAttribute('style', `margin-top: ${this.height + 10}px`)
-      */
-    // }
   }
 }
 </script>
@@ -175,19 +122,19 @@ export default {
   right 0
   background red
 .tauri-name
-  height 30px
-  min-height 30px
+  height 24px
+  min-height 24px
   max-width 50%
   position fixed
   text-align center
   margin 0 30%
-  top 21px
+  top 23px
   left 0
 .page-header
   height 70px
   border-bottom 2px solid #212111
 .bg-container
-  background-image url(/statics/thetaTauri_logo.png)
+  background-image url(/statics/tauri-240x.png)
   background-repeat no-repeat
   background-size contain
   position absolute

docs-generator/src/components/PartnerCard.vue

@@ -6,7 +6,7 @@
       </q-ribbon>
       <q-card-section>
         <q-item>
-          <q-item-section avatar>
+          <q-item-section avatar style="height:80px">
             <img :src="logoUrl" style="max-width:80px">
           </q-item-section>
           <q-item-section>

docs-generator/src/layouts/MainLayout.vue

@@ -1,7 +1,5 @@
 <template>
   <q-layout view="hHh lpR ffr">
-    <q-page-sticky id="tauri-studio-logo" class="page-header full-width full-height z-top" style="background-image:url(/statics/tauri-studio.svg);background-position:center;background-repeat:no-repeat;background-size:50%;width:100vw!important;height:100vh!important;overflow:hidden; z-index:10000000;position:fixed;display:none">
-    </q-page-sticky>
     <q-drawer
       ref="drawer"
       v-model="rightDrawerOpen"

docs-generator/src/pages/Landing.vue

@@ -22,8 +22,50 @@
       </q-carousel-slide>
     </q-carousel>
 
+    <div class="text-h6 text-center q-mt-xl">
+      Create small, fast, and secure desktop apps from your existing HTML, CSS, and Javascript.
+    </div>
+
+    <div style="width:100%;overflow-x:auto;">
+      <div style="min-width:500px;" class="q-py-xl col text-subtitle1">
+        <div :class="`row text-center ${$q.screen.width < 720 ? 'items-center' : 'items-top'}`">
+          <div class="col">
+            <div class="row justify-center">
+              <q-icon size="42px" name="web"></q-icon>
+            </div>
+            <div class="row justify-center">
+              Any web-based frontend framework, or none at all.
+            </div>
+          </div>
+          <q-icon class="self-center" name="arrow_right_alt" size=42px></q-icon>
+          <div class="col col-shrink q-px-lg">
+            <div class="row justify-center">
+              <q-icon size="42px" name="img:/statics/app-logo-128x128.png"></q-icon>
+            </div>
+          </div>
+          <q-icon class="self-center" name="arrow_right_alt" size=42px></q-icon>
+          <div class="col">
+            <div class="row justify-center">
+              <q-icon size="42px" name="desktop_windows"></q-icon>
+            </div>
+            <div class="row justify-center">
+              Native binary for Windows, Mac, or Linux.
+            </div>
+          </div>
+        </div>
+        <div style="margin-top: -30px" class="row justify-center">
+          <div class="col-4 col text-center">
+              <q-icon name="arrow_upward" size="42px"></q-icon>
+                <div class="row justify-center">
+                  Native Rust code, or even entire native binaries (optional).
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+
     <div class="full-width text-center">
-      <q-btn outline rounded class="text-h6 q-mt-xl" :to="{name: 'introduction'}">Get to know Tauri</q-btn>
+      <q-btn icon-right="arrow_right" outline class="text-subtitle1 q-mt-lg" type="a" href="https://github.com/tauri-apps/tauri/wiki">Get Started With Tauri</q-btn>
     </div>
     <!--
     <div id="testimonials">
@@ -46,7 +88,7 @@
     </div>
 
     <div class="full-width text-center">
-      <q-btn outline rounded class="text-h6 q-my-xl" type="a" href="https://github.com/tauri-apps/tauri/wiki">Setup Tauri for my Environment</q-btn>
+      <q-btn icon-right="arrow_right" outline class="text-subtitle1 q-my-xl" :to="{name: 'introduction'}">Technical Details</q-btn>
     </div>
 
     <!-- roadmap -->
@@ -81,11 +123,11 @@
           </q-activity-item>
         </q-activity>
         <small class="text-weight-light">Notice: This roadmap is subject to change.</small>
-        <q-parallax
+        <img
           :height="130"
           src="statics/images/skycave.jpg"
           class="full-width"
-          style="position:absolute;top:0;left:0;"
+          style="position:absolute;top:0;left:0;object-fit:cover;"
         />
         <div style="position:absolute;left:0;top:0;right:0;height:130px;background: linear-gradient(0deg, rgba(224,247,250,1) 5%, rgba(224,247,250,0.9) 30%, rgba(224,247,250,0.7) 60%, rgba(224,247,250,0.45) 80%, rgba(224,247,250,0) 100%);z-index:10"></div>
         <h2 class="text-weight-thin" style="position:absolute;top:20px;z-index:100;left:10px; right:10px;margin:auto;text-shadow:0 0 5px white,0 0 2px white; color:#253239">ROADMAP</h2>
@@ -195,7 +237,7 @@ export default {
         },
         {
           icon: 'ti-settings',
-          claim: 'Tauri lets you use any frontend-framework to build apps, and it can be integrated into any pipeline.',
+          claim: 'Tauri lets you use any HTML/JS-based frontend framework to build apps, and it can be integrated into any pipeline.',
           btnLabel: 'Learn How!',
           btnTarget: '/docs/frameworks'
         },
@@ -267,12 +309,28 @@ export default {
         },
         {
           icon: 'ti-link',
-          iconColor: 'blue',
+          iconColor: 'green',
           iconTextColor: 'white',
           label: 'Sideloader',
           caption: 'Integrate and instrument other binaries.',
           time: 'Q1 2020'
         },
+        {
+          icon: 'ti-blackboard',
+          iconColor: 'green',
+          iconTextColor: 'white',
+          label: 'Splashscreen',
+          caption: 'Use a splashscreen while the main content is loading.',
+          time: 'Q1 2020'
+        },
+        {
+          icon: 'ti-share',
+          iconColor: 'blue',
+          iconTextColor: 'white',
+          label: 'App Storage',
+          caption: 'Use a canonical location to store userdata.',
+          time: 'Q1 2020'
+        },
         {
           icon: 'ti-layout-grid3-alt',
           iconColor: 'blue',
@@ -289,14 +347,6 @@ export default {
           caption: 'Update Tauri Apps from within Tauri.',
           time: 'Q1 2020'
         },
-        {
-          icon: 'ti-cup',
-          iconColor: 'blue',
-          iconTextColor: 'white',
-          label: 'DENO',
-          caption: 'Enable alternative DENO CLI.',
-          time: 'Q1 2020'
-        },
         {
           icon: 'ti-bolt',
           iconColor: 'blue',
@@ -334,7 +384,7 @@ export default {
           iconColor: 'red',
           iconTextColor: 'white',
           label: 'Beta Release',
-          caption: 'Generally stable on Desktop, API fixed',
+          caption: 'Generally stable on Desktop, API locked down.',
           time: 'Q2 2020'
         },
         {
@@ -345,6 +395,14 @@ export default {
           caption: 'Bundle to all major mobile device operating systems.',
           time: 'Q2 2020'
         },
+        {
+          icon: 'ti-cup',
+          iconColor: 'blue',
+          iconTextColor: 'white',
+          label: 'DENO',
+          caption: 'Enable alternative DENO CLI.',
+          time: 'Q3 2020'
+        },
         {
           icon: 'ti-control-shuffle',
           iconColor: 'blue',

docs-generator/src/pages/Partners.vue

@@ -2,9 +2,9 @@
   <div>
     <div id="padding" style="padding-top:40px"></div>
     <div class="text-h4 text-center text-weight-thin q-ma-sm">Sponsors</div>
-    <div class="row justify-center">
+    <div class="row justify-center q-gutter-md">
       <PartnerCard
-        class="col-lg-3 col-md-4 col-sm-6 col-xs-12"
+        class="col-lg-3 col-md-4 col-sm-6 col-xs-12 q-ma-md"
         v-for="partner in partners.sponsors"
         :key="partner.id"
         :title="partner.title"

docs-generator/src/statics/tauri-wordmark.svg

@@ -0,0 +1,9 @@
+<svg width="100%" height="100%" viewBox="0 0 520 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill:#67D6ED;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="g920" transform="matrix(1,0,0,1,-638.338,-82.9627)">
+        <path id="path910" d="M710.873,220.019C710.873,225.623 707.371,228.424 700.367,228.424C693.48,228.424 690.036,225.623 690.036,220.019L690.036,105.677L659.393,105.677C655.19,105.677 652.972,102.7 652.739,96.747C652.739,90.91 654.957,87.991 659.393,87.991L741.516,87.991C745.952,87.991 748.054,90.91 747.82,96.747C747.82,102.7 745.719,105.677 741.516,105.677L710.873,105.677L710.873,220.019Z" style="fill-rule:nonzero;"/>
+        <path id="path912" d="M809.352,105.152L771.005,222.821L771.005,222.646C770.304,224.397 769.312,225.856 768.028,227.023C766.861,228.074 765.402,228.599 763.65,228.599C762.717,228.599 761.783,228.483 760.849,228.249C760.032,228.132 759.156,227.957 758.222,227.724L758.397,227.724C751.743,225.623 749.292,221.887 751.043,216.517L790.966,95.171C791.55,93.303 792.542,91.727 793.943,90.443C795.461,89.159 797.212,88.4 799.196,88.167C801.181,87.816 803.107,87.583 804.975,87.466C806.843,87.233 808.302,87.116 809.352,87.116C810.403,87.116 811.862,87.233 813.73,87.466C815.598,87.583 817.524,87.758 819.508,87.991C821.143,88.225 822.719,89.1 824.236,90.618C825.87,92.136 827.096,93.653 827.913,95.171C834.45,115.249 841.046,135.503 847.7,155.931C854.471,176.243 861.125,196.439 867.662,216.517C869.296,221.887 866.845,225.623 860.307,227.724C859.374,227.957 858.498,228.132 857.681,228.249C856.98,228.483 856.163,228.599 855.229,228.599C853.595,228.599 852.078,228.074 850.677,227.023C849.393,225.856 848.459,224.397 847.875,222.646L847.875,222.821L809.352,105.152Z" style="fill-rule:nonzero;"/>
+        <path id="path914" d="M977.722,199.007C977.722,208.462 974.571,215.525 968.267,220.194C965.232,222.412 962.08,224.163 958.811,225.448C955.659,226.615 952.566,227.199 949.531,227.199L911.358,227.199C908.323,227.199 905.171,226.615 901.903,225.448C898.751,224.163 895.657,222.412 892.622,220.194C889.587,217.86 887.252,215 885.618,211.614C883.984,208.112 883.167,203.91 883.167,199.007L883.167,95.521C883.167,89.918 886.61,87.116 893.498,87.116C900.502,87.116 904.004,89.918 904.004,95.521L904.004,197.606C904.004,200.641 904.88,203.384 906.631,205.836C908.382,208.287 911.417,209.513 915.736,209.513L945.153,209.513C949.472,209.513 952.508,208.287 954.259,205.836C956.01,203.384 956.885,200.641 956.885,197.606L956.885,95.521C956.885,89.918 960.329,87.116 967.216,87.116C974.22,87.116 977.722,89.918 977.722,95.521L977.722,199.007Z" style="fill-rule:nonzero;"/>
+        <path id="path916" d="M1053.96,169.414L1040.48,169.414C1038.5,169.414 1036.92,168.656 1035.75,167.138C1034.7,165.504 1034.18,163.344 1034.18,160.659C1034.18,154.706 1036.63,151.729 1041.53,151.729L1062.02,151.729C1066.34,151.729 1069.37,150.503 1071.12,148.052C1072.88,145.6 1073.75,142.915 1073.75,139.997L1073.75,117.409C1073.75,114.49 1072.88,111.805 1071.12,109.354C1069.37,106.903 1066.34,105.677 1062.02,105.677L1025.07,105.677L1025.07,219.844C1025.07,225.448 1021.63,228.249 1014.74,228.249C1007.85,228.249 1004.41,225.448 1004.41,219.844L1004.41,98.498C1004.41,94.295 1005.46,91.493 1007.56,90.093C1009.78,88.692 1012.41,87.991 1015.44,87.991L1066.4,87.991C1069.43,87.991 1072.58,88.633 1075.85,89.918C1079.12,91.202 1082.27,92.836 1085.31,94.82L1085.13,94.82C1088.17,97.038 1090.5,99.957 1092.14,103.576C1093.77,107.078 1094.59,111.163 1094.59,115.833L1094.59,141.398C1094.59,150.854 1091.44,157.916 1085.13,162.585C1083.85,163.519 1082.45,164.395 1080.93,165.212C1079.53,166.029 1078.07,166.846 1076.55,167.663L1104.57,213.891C1104.92,214.474 1105.27,215.233 1105.62,216.167C1105.97,217.101 1106.14,217.86 1106.14,218.443C1106.14,221.245 1104.16,223.93 1100.19,226.498L1100.19,226.323C1097.51,227.957 1095.23,228.774 1093.36,228.774C1090.68,228.774 1088.52,227.432 1086.88,224.747L1087.06,224.922L1053.96,169.414Z" style="fill-rule:nonzero;"/>
+        <path id="path918" d="M1143.94,219.669C1143.94,225.272 1140.43,228.074 1133.43,228.074C1126.54,228.074 1123.1,225.272 1123.1,219.669L1123.1,95.521C1123.1,89.918 1126.54,87.116 1133.43,87.116C1140.43,87.116 1143.94,89.918 1143.94,95.521L1143.94,219.669Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

docs-generator/src/store/store-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}