anchor tags + urlParams for tabs

Author: Sami Kolari

public/index.html

@@ -6,7 +6,7 @@
     <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.hash.outbound-links.js"></script>
+    <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.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 = [];

src/components/Navbar.vue

@@ -110,9 +110,11 @@ export default {
     itemClick(itemId) {
       const el = document.getElementById(itemId)
       if (!el) return
-      // window.history.replaceState(null, null, `?section=${itemId}`)
+      // setting window.location.hash causes instant page scroll to that position and we dont want that
+      // lets strip urlParams and hash from url and append new hash
+      history.replaceState(null, null, `${location.href.split('?')[0].split('#')[0]}#${itemId}`)
       window.scrollTo({
-        top: el.offsetTop - 74,
+        top: el.offsetTop,
         behavior: 'smooth'
       })
       window.plausible('Nav click', { props: { section: itemId } })

src/components/PageSection.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="border-top-theme mt-xlarge"
+    class="border-top-theme mt-xlarge section-container"
     tabindex="-1">
     <div class="row p-small">
       <div
         class="col-sm-12 col-lg-3"
         :class="$store.state.isMobile ? '' : 'pt-3xsmall'">
-        <h2>
+        <h2 :id="titleId">
           {{ title }}
         </h2>
       </div>
@@ -33,7 +33,22 @@ export default {
     body: {
       type: String,
       default: ''
+    },
+    titleId: {
+      type: String,
+      required: true
     }
   }
 }
 </script>
+
+<style scoped>
+  h2::before {
+  display: block;
+  content: " ";
+  margin-top: -100px;
+  height: 100px;
+  visibility: hidden;
+  pointer-events: none;
+}
+</style>

src/components/PageSectionTwitter.vue

@@ -1,37 +1,33 @@
 <template>
-  <div
-    class="border-top-theme"
-    :id="title.toLowerCase().replaceAll(' ', '-')">
-    <div class="row p-small pb-none">
-      <div
-        class="col-sm-12 col-lg-3"
-        :class="$store.state.isMobile ? '' : 'pt-3xsmall'">
-        <h2>
-          {{ title }}
-        </h2>
-      </div>
-      <div
-        class="col-sm-12 col-lg-6"
-        :class="!$store.state.isMobile ? 'pr-large' : ''"
-        style="height: fit-content;"
-        ref="body">
-        <p v-html="body" />
-        <slot />
-      </div>
-      <div
-        v-if="!$store.state.isMobile"
-        class="twitter col-sm-12 col-lg-3 p-none mt-small card"
-        :style="`height: ${twitterHeight}px;`">
-        <accessibility-link label="Skip twitter timeline" go-to="getting-started" />
-        <a
-          class="twitter-timeline"
-          data-dnt="true"
-          data-theme="dark"
-          href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw">¨
-          Tweets by robotframework
-        </a>
-        <component :is="'script'" async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
-      </div>
+  <div class="border-top-theme row p-small pb-none">
+    <div
+      class="col-sm-12 col-lg-3"
+      :class="$store.state.isMobile ? '' : 'pt-3xsmall'">
+      <h2 :id="titleId">
+        {{ title }}
+      </h2>
+    </div>
+    <div
+      class="col-sm-12 col-lg-6"
+      :class="!$store.state.isMobile ? 'pr-large' : ''"
+      style="height: fit-content;"
+      ref="body">
+      <p v-html="body" />
+      <slot />
+    </div>
+    <div
+      v-if="!$store.state.isMobile"
+      class="twitter col-sm-12 col-lg-3 p-none mt-small card"
+      :style="`height: ${twitterHeight}px;`">
+      <accessibility-link label="Skip twitter timeline" go-to="getting-started" />
+      <a
+        class="twitter-timeline"
+        data-dnt="true"
+        data-theme="dark"
+        href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw">¨
+        Tweets by robotframework
+      </a>
+      <component :is="'script'" async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
     </div>
   </div>
 </template>
@@ -52,6 +48,10 @@ export default {
     body: {
       type: String,
       default: ''
+    },
+    titleId: {
+      type: String,
+      required: true
     }
   },
   data: () => ({
@@ -72,4 +72,12 @@ export default {
   .twitter {
     overflow: scroll;
   }
+  h2::before {
+    display: block;
+    content: " ";
+    margin-top: -100px;
+    height: 100px;
+    visibility: hidden;
+    pointer-events: none;
+  }
 </style>

src/components/ResourceBox.vue

@@ -239,6 +239,8 @@ export default {
         window.plausible('Interact', { props: { element: 'Resources' } })
         this.eventSent = true
       }
+      const newUrl = `${window.location.href.split('?')[0].split('#')[0]}?tab=${this.activeTab}#resources`
+      history.replaceState(null, null, newUrl)
     },
     showAll() {
       if (!this.eventSent) {
@@ -282,6 +284,14 @@ export default {
       if (this.$refs.tagInput && !this.$refs.tagInput.contains(target)) this.tagsDropdownShown = false
     }
   },
+  created() {
+    // if url contains searchParam, open specific tab
+    if (window.location.hash !== '#resources') return
+    const param = new URLSearchParams(window.location.search)
+    const tab = param.get('tab')
+    if (!tab) return
+    this.activeTab = tab
+  },
   mounted() {
     this.stars = stars()
     document.addEventListener('click', this.onClick)

src/components/TabBox.vue

@@ -78,12 +78,22 @@ export default {
       return Array.from(el.content.children).map((child) => child.outerHTML)
     }
   },
+  created() {
+    // if url contains searchParam, open specific tab
+    if (window.location.hash !== '#getting-started') return
+    const param = new URLSearchParams(window.location.search)
+    const tab = param.get('tab')
+    if (!tab) return
+    this.activeTabIndex = Number(tab)
+  },
   watch: {
     activeTab() {
       if (!this.eventSent) {
         window.plausible('Interact', { props: { element: 'Learning' } })
         this.eventSent = true
       }
+      const newUrl = `${window.location.href.split('?')[0].split('#')[0]}?tab=${this.activeTabIndex}#getting-started`
+      history.replaceState(null, null, newUrl)
     }
   }
 }

src/views/Home.vue

@@ -11,7 +11,7 @@
   <div class="container mb-xlarge">
     <!-- introduction -->
     <page-section-twitter
-      id="introduction"
+      title-id="introduction"
       :title="$t('introduction.title')"
       :body="$t('introduction.body')">
       <div class="mt-small mb-small">
@@ -20,7 +20,7 @@
     </page-section-twitter>
     <!-- getting started -->
     <page-section
-      id="getting-started"
+      title-id="getting-started"
       :title="$t('gettingStarted.title')"
       :body="$t('gettingStarted.body')">
       <tab-box
@@ -39,7 +39,7 @@
     </page-section>
     <!-- community -->
     <page-section
-      id="community"
+      title-id="community"
       :title="$t('community.title')"
       :body="$t('community.body')">
       <div class="col-sm-12 col-md-9 col-md-offset-3 row">
@@ -53,7 +53,7 @@
     </page-section>
     <!-- resources -->
     <page-section
-      id="resources"
+      title-id="resources"
       :title="$t('resources.title')"
       :body="$t('resources.body')">
       <resource-box class="col-sm-12 col-md-9 col-md-offset-3" />
@@ -91,13 +91,6 @@ export default {
     CommunityItems,
     ResourceBox,
     TabBox
-  },
-  mounted() {
-    const section = new URLSearchParams(window.location.search).get('section')
-    const el = document.getElementById(section)
-    if (!section || !el) return
-    setTimeout(() => { window.scroll(0, el.offsetTop - 70) }, 10)
-    window.history.replaceState(null, null, '/#/')
   }
 }
 </script>