users page + analytics event tracking

Author: Sami Kolari

public/img/companies/ABB.svg renamed to public/img/carousel-company-icons/ABB.svg

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name=description content="Generic open source automation framework for acceptance testing, acceptance test driven development (ATDD), and robotic process automation (RPA).">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.js"></script>
+    <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.hash.outbound-links.js"></script>
+    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <!-- <script type="text/javascript">
       var _jipt = [];
       _jipt.push(['project', 'ddd00e482856bb264959ae8e3d51e4b6']);

public/img/companies/Cisco.svg renamed to public/img/carousel-company-icons/Cisco.svg

@@ -1,7 +1,9 @@
 <template>
-  <div ref="root">
-    <router-view />
-  </div>
+  <router-view v-slot="{ Component }">
+    <transition name="opacity" mode="out-in">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
 
 <script>

public/img/companies/Condé_Nast.svg renamed to public/img/carousel-company-icons/Condé_Nast.svg

@@ -56,7 +56,8 @@ button.theme, button.stroke {
 button.theme {
     color: var(--color-black);
     background-color: var(--color-white);
-    box-shadow: 2px 4px 2px 0px rgba(0,0,0,0.15);
+    box-shadow: 2px 4px 3px -1px rgba(0,0,0,0.1),
+    6px 6px 15px -1px rgba(0,0,0,0.04);
 }
 button.stroke {
     color: var(--color-white);

public/img/companies/Finnair.svg renamed to public/img/carousel-company-icons/Finnair.svg

@@ -11,6 +11,10 @@
     transition: transform 0.25s, opacity 0.15s;
     transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
 }
+.opacity-slow-enter-active,
+.opacity-slow-leave-active {
+    transition: opacity 0.3s;
+}
 
 .fade-enter-from, .fade-leave-to {
     opacity: 0;
@@ -28,6 +32,7 @@
     opacity: 0;
     transform: translateY(10px) !important;
 }
-.opacity-enter-from, .opacity-leave-to {
+.opacity-enter-from, .opacity-leave-to,
+.opacity-slow-enter-from, .opacity-slow-leave-to {
     opacity: 0;
 }

public/img/companies/Juniper_Networks.svg renamed to public/img/carousel-company-icons/Juniper_Networks.svg

@@ -17,7 +17,7 @@
             :class="$store.state.isMobile ? 'mb-medium' : ''">
             <div
               class="img-container"
-              :style="`background-image: url(${publicPath}img/companies/${activeCompany.imgName})`" />
+              :style="`background-image: url(${publicPath}img/carousel-company-icons/${activeCompany.imgName})`" />
           </div>
           <div
             class="col-sm-12 col-md-9 type-italic type-small description"
@@ -31,15 +31,18 @@
         <chevron-icon direction="right" :size="48" />
       </button>
     </div>
-    <div class="row mt-2xsmall">
+    <div class="row">
       <button
         v-for="(company, i) in companiesShuffled"
         :key="company.name"
         :aria-label="`${company.name} testimonial`"
-        :style="`background-image: url(${publicPath}img/companies/${company.imgName})`"
-        class="img-container-small mr-small mr-small bg-white card mb-small"
+        :style="`background-image: url(${publicPath}img/carousel-company-icons/${company.imgName})`"
+        class="img-container-small mr-small mr-small bg-white card mt-2xsmall"
         :class="activeCompanyIndex === i ? 'logo-active border-black border-thin' : ''"
         @click="activeCompanyIndex = i" />
+      <router-link :to="{ name: 'Users' }" class="card pl-small pr-small color-grey-dark mt-2xsmall" style="line-height: 1.85;">
+        More users
+      </router-link>
     </div>
   </div>
 </template>
@@ -56,7 +59,8 @@ export default {
     activeCompanyIndex: 0,
     publicPath: process.env.BASE_URL,
     direction: 0,
-    companiesShuffled: []
+    companiesShuffled: [],
+    eventSent: false
   }),
   computed: {
     activeCompany() {
@@ -78,6 +82,14 @@ export default {
       }
     }
   },
+  watch: {
+    activeCompanyIndex() {
+      if (!this.eventSent) {
+        window.plausible('Interact', { props: { element: 'Testimonials' } })
+        this.eventSent = true
+      }
+    }
+  },
   created() {
     const companies = this.$tm('introduction.companies')
     for (let i = companies.length - 1; i > 0; i--) {

public/img/companies/Kone.svg renamed to public/img/carousel-company-icons/Kone.svg

@@ -7,12 +7,12 @@
         <div v-if="!linksOpen" key="1" class="pl-2xsmall">
           <div
             v-for="item in $tm('navbar.items')"
-            :key="item">
+            :key="item.name">
             <button
-              :name="`go-to-${item}`"
+              :name="`go-to-${item.name}`"
               class="mb-small mt-xsmall color-white font-title type-uppercase"
-              @click="scrollTo(item, 400); isOpen = false">
-              {{ item }}
+              @click="scrollTo(item.id, 400); isOpen = false">
+              {{ item.name }}
             </button>
           </div>
           <button
@@ -99,7 +99,7 @@ export default {
         t2 -= 1
         return (-c / 2) * (t2 * (t2 - 2) - 1) + b
       }
-      const to = document.getElementById(el.toLowerCase().replaceAll(' ', '-')).offsetTop - 80
+      const to = document.getElementById(el).offsetTop - 80
       const element = document.scrollingElement || document.documentElement
       const start = element.scrollTop
 

public/img/companies/Naval_Research_Laboratory.svg renamed to public/img/carousel-company-icons/Naval_Research_Laboratory.svg

@@ -6,11 +6,11 @@
     <!-- section navigation -->
     <button
       v-for="item in $tm('navbar.items')"
-      :key="item"
-      :name="`go-to-${item}`"
+      :key="item.name"
+      :name="`go-to-${item.name}`"
       class="pl-small pr-small color-white font-title type-uppercase type-no-underline border-right-white"
-      @click="scrollTo(item)">
-      {{ item }}
+      @click="itemClick(item.id)">
+      {{ item.name }}
     </button>
     <!-- external links -->
     <div class="relative" ref="dropdown">
@@ -102,13 +102,15 @@ export default {
     }
   },
   methods: {
-    scrollTo(item) {
-      const el = document.getElementById(item.toLowerCase().replaceAll(' ', '-'))
+    itemClick(itemId) {
+      const el = document.getElementById(itemId)
       if (!el) return
+      // window.history.replaceState(null, null, `?section=${itemId}`)
       window.scrollTo({
         top: el.offsetTop - 74,
         behavior: 'smooth'
       })
+      window.plausible('Nav click', { props: { section: itemId } })
     },
     setLang(lang) {
       this.$i18n.locale = lang

public/img/companies/Nokia.svg renamed to public/img/carousel-company-icons/Nokia.svg

@@ -1,7 +1,6 @@
 <template>
   <div
     class="border-top-theme mt-xlarge"
-    :id="title.toLowerCase().replaceAll(' ', '-')"
     tabindex="-1">
     <div class="row p-small">
       <div

public/img/companies/Vero.svg renamed to public/img/carousel-company-icons/Vero.svg

@@ -13,8 +13,8 @@
       <div
         class="col-sm-12 col-lg-6"
         :class="!$store.state.isMobile ? 'pr-large' : ''"
-        ref="body"
-        id="asd">
+        style="height: fit-content;"
+        ref="body">
         <p v-html="body" />
         <slot />
       </div>
@@ -61,7 +61,9 @@ export default {
     setTimeout(() => {
       this.twitterHeight = this.$refs.body.offsetHeight - 32
     }, 200)
-    window.addEventListener('resize', () => { this.twitterHeight = this.$refs.body.offsetHeight - 16 })
+    window.addEventListener('resize', () => {
+      this.twitterHeight = this.$refs.body.offsetHeight - 32
+    })
   }
 }
 </script>

public/img/companies/Wartsila.svg renamed to public/img/carousel-company-icons/Wartsila.svg

@@ -170,7 +170,8 @@ export default {
     tagsDropdownShown: false,
     filterInput: '',
     showAll: false,
-    stars: []
+    stars: [],
+    eventSent: false
   }),
   computed: {
     tableHeaders() {
@@ -227,6 +228,16 @@ export default {
       this.filterInput = ''
       if (this.activeTab !== 'builtin') this.sortBy = 'Stars'
       else this.sortBy = 'Name'
+      if (!this.eventSent) {
+        window.plausible('Interact', { props: { element: 'Resources' } })
+        this.eventSent = true
+      }
+    },
+    showAll() {
+      if (!this.eventSent) {
+        window.plausible('Interact', { props: { element: 'Resources' } })
+        this.eventSent = true
+      }
     }
   },
   methods: {

public/img/icons/android-icon-192x192.png renamed to public/img/icons/android-chrome-192x192.png

@@ -58,7 +58,8 @@ export default {
     }
   },
   data: () => ({
-    activeTabIndex: 0
+    activeTabIndex: 0,
+    eventSent: false
   }),
   computed: {
     activeTab() {
@@ -74,6 +75,14 @@ export default {
       el.innerHTML = this.activeTab.description
       return Array.from(el.content.children).map((child) => child.outerHTML)
     }
+  },
+  watch: {
+    activeTab() {
+      if (!this.eventSent) {
+        window.plausible('Interact', { props: { element: 'Learning' } })
+        this.eventSent = true
+      }
+    }
   }
 }
 </script>

public/img/users/TMAlogo.png

@@ -3,10 +3,22 @@ export default () => ({
   newsBanner: '🎉 New website has been released!',
   navbar: {
     items: [
-      'Introduction',
-      'Getting started',
-      'Community',
-      'Resources'
+      {
+        name: 'Introduction',
+        id: 'introduction'
+      },
+      {
+        name: 'Getting started',
+        id: 'getting-started'
+      },
+      {
+        name: 'Community',
+        id: 'community'
+      },
+      {
+        name: 'Resources',
+        id: 'resources'
+      }
     ],
     dropdownName: 'Links',
     dropdown: [
@@ -254,5 +266,12 @@ Welcome Page Should Be Open
       'Standard',
       'External'
     ]
+  },
+  usersPage: {
+    title: 'Users of Robot Framework',
+    body: `If you'd like your company added here, please submit a
+      <a href="https://github.com/robotframework/robotframework.github.com/pulls">pull request</a> or an
+      <a href="https://github.com/robotframework/robotframework.github.com/issues">issue</a>.`
+    // list of users is found in ./resources/users.js
   }
 })

public/img/users/abb.png

@@ -12,6 +12,7 @@ import libraries from './resources/libraries.js'
 import tools from './resources/tools.js'
 import learning from './resources/learning.js'
 import stars from './resources/stars.js'
+import users from './resources/users.js'
 
 export {
   english,
@@ -27,5 +28,6 @@ export {
   libraries,
   tools,
   learning,
-  stars
+  stars,
+  users
 }

public/img/users/accruent.png

@@ -257,7 +257,8 @@ export default () => ([
   {
     name: 'WADLibrary',
     href: 'https://github.com/Adwisit/WADLibrary',
-    description: 'Application testing library that utilizes Win App Driver.'
+    description: 'Application testing library that utilizes Win App Driver.',
+    tags: ['windows']
   },
   {
     name: 'Zoomba Library',
@@ -287,6 +288,12 @@ export default () => ([
     name: 'Plone.app .robotframework',
     href: 'https://github.com/plone/plone.app.robotframework/',
     description: 'Provides resources and tools for writing functional Selenium tests for Plone CMS and its add-ons.',
-    tags: ['tools']
+    tags: ['selenium']
+  },
+  {
+    name: 'WatchUI',
+    href: 'https://github.com/Tesena-smart-testing/WatchUI',
+    description: 'Visual testing library for visual difference testing as well as image content testing (including PDF documents). Runs on Selenium to generate screenshots, uses PyMuPDF to process PDFs and Tesseract OCR to recognize text.',
+    tags: ['ui']
   }
 ])