Skip to content

Commit eb28641

Browse files
author
Sami Kolari
committed
anchor tags + urlParams for tabs
1 parent 1fe776f commit eb28641

File tree

7 files changed

+87
-49
lines changed

7 files changed

+87
-49
lines changed

public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<meta name=description content="Generic open source automation framework for acceptance testing, acceptance test driven development (ATDD), and robotic process automation (RPA).">
88
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9-
<script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.hash.outbound-links.js"></script>
9+
<script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
1010
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
1111
<!-- <script type="text/javascript">
1212
var _jipt = [];

src/components/Navbar.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,11 @@ export default {
110110
itemClick(itemId) {
111111
const el = document.getElementById(itemId)
112112
if (!el) return
113-
// window.history.replaceState(null, null, `?section=${itemId}`)
113+
// setting window.location.hash causes instant page scroll to that position and we dont want that
114+
// lets strip urlParams and hash from url and append new hash
115+
history.replaceState(null, null, `${location.href.split('?')[0].split('#')[0]}#${itemId}`)
114116
window.scrollTo({
115-
top: el.offsetTop - 74,
117+
top: el.offsetTop,
116118
behavior: 'smooth'
117119
})
118120
window.plausible('Nav click', { props: { section: itemId } })

src/components/PageSection.vue

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<div
3-
class="border-top-theme mt-xlarge"
3+
class="border-top-theme mt-xlarge section-container"
44
tabindex="-1">
55
<div class="row p-small">
66
<div
77
class="col-sm-12 col-lg-3"
88
:class="$store.state.isMobile ? '' : 'pt-3xsmall'">
9-
<h2>
9+
<h2 :id="titleId">
1010
{{ title }}
1111
</h2>
1212
</div>
@@ -33,7 +33,22 @@ export default {
3333
body: {
3434
type: String,
3535
default: ''
36+
},
37+
titleId: {
38+
type: String,
39+
required: true
3640
}
3741
}
3842
}
3943
</script>
44+
45+
<style scoped>
46+
h2::before {
47+
display: block;
48+
content: " ";
49+
margin-top: -100px;
50+
height: 100px;
51+
visibility: hidden;
52+
pointer-events: none;
53+
}
54+
</style>

src/components/PageSectionTwitter.vue

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
11
<template>
2-
<div
3-
class="border-top-theme"
4-
:id="title.toLowerCase().replaceAll(' ', '-')">
5-
<div class="row p-small pb-none">
6-
<div
7-
class="col-sm-12 col-lg-3"
8-
:class="$store.state.isMobile ? '' : 'pt-3xsmall'">
9-
<h2>
10-
{{ title }}
11-
</h2>
12-
</div>
13-
<div
14-
class="col-sm-12 col-lg-6"
15-
:class="!$store.state.isMobile ? 'pr-large' : ''"
16-
style="height: fit-content;"
17-
ref="body">
18-
<p v-html="body" />
19-
<slot />
20-
</div>
21-
<div
22-
v-if="!$store.state.isMobile"
23-
class="twitter col-sm-12 col-lg-3 p-none mt-small card"
24-
:style="`height: ${twitterHeight}px;`">
25-
<accessibility-link label="Skip twitter timeline" go-to="getting-started" />
26-
<a
27-
class="twitter-timeline"
28-
data-dnt="true"
29-
data-theme="dark"
30-
href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw"
31-
Tweets by robotframework
32-
</a>
33-
<component :is="'script'" async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
34-
</div>
2+
<div class="border-top-theme row p-small pb-none">
3+
<div
4+
class="col-sm-12 col-lg-3"
5+
:class="$store.state.isMobile ? '' : 'pt-3xsmall'">
6+
<h2 :id="titleId">
7+
{{ title }}
8+
</h2>
9+
</div>
10+
<div
11+
class="col-sm-12 col-lg-6"
12+
:class="!$store.state.isMobile ? 'pr-large' : ''"
13+
style="height: fit-content;"
14+
ref="body">
15+
<p v-html="body" />
16+
<slot />
17+
</div>
18+
<div
19+
v-if="!$store.state.isMobile"
20+
class="twitter col-sm-12 col-lg-3 p-none mt-small card"
21+
:style="`height: ${twitterHeight}px;`">
22+
<accessibility-link label="Skip twitter timeline" go-to="getting-started" />
23+
<a
24+
class="twitter-timeline"
25+
data-dnt="true"
26+
data-theme="dark"
27+
href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw"
28+
Tweets by robotframework
29+
</a>
30+
<component :is="'script'" async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
3531
</div>
3632
</div>
3733
</template>
@@ -52,6 +48,10 @@ export default {
5248
body: {
5349
type: String,
5450
default: ''
51+
},
52+
titleId: {
53+
type: String,
54+
required: true
5555
}
5656
},
5757
data: () => ({
@@ -72,4 +72,12 @@ export default {
7272
.twitter {
7373
overflow: scroll;
7474
}
75+
h2::before {
76+
display: block;
77+
content: " ";
78+
margin-top: -100px;
79+
height: 100px;
80+
visibility: hidden;
81+
pointer-events: none;
82+
}
7583
</style>

src/components/ResourceBox.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,8 @@ export default {
239239
window.plausible('Interact', { props: { element: 'Resources' } })
240240
this.eventSent = true
241241
}
242+
const newUrl = `${window.location.href.split('?')[0].split('#')[0]}?tab=${this.activeTab}#resources`
243+
history.replaceState(null, null, newUrl)
242244
},
243245
showAll() {
244246
if (!this.eventSent) {
@@ -282,6 +284,14 @@ export default {
282284
if (this.$refs.tagInput && !this.$refs.tagInput.contains(target)) this.tagsDropdownShown = false
283285
}
284286
},
287+
created() {
288+
// if url contains searchParam, open specific tab
289+
if (window.location.hash !== '#resources') return
290+
const param = new URLSearchParams(window.location.search)
291+
const tab = param.get('tab')
292+
if (!tab) return
293+
this.activeTab = tab
294+
},
285295
mounted() {
286296
this.stars = stars()
287297
document.addEventListener('click', this.onClick)

src/components/TabBox.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,22 @@ export default {
7878
return Array.from(el.content.children).map((child) => child.outerHTML)
7979
}
8080
},
81+
created() {
82+
// if url contains searchParam, open specific tab
83+
if (window.location.hash !== '#getting-started') return
84+
const param = new URLSearchParams(window.location.search)
85+
const tab = param.get('tab')
86+
if (!tab) return
87+
this.activeTabIndex = Number(tab)
88+
},
8189
watch: {
8290
activeTab() {
8391
if (!this.eventSent) {
8492
window.plausible('Interact', { props: { element: 'Learning' } })
8593
this.eventSent = true
8694
}
95+
const newUrl = `${window.location.href.split('?')[0].split('#')[0]}?tab=${this.activeTabIndex}#getting-started`
96+
history.replaceState(null, null, newUrl)
8797
}
8898
}
8999
}

src/views/Home.vue

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="container mb-xlarge">
1212
<!-- introduction -->
1313
<page-section-twitter
14-
id="introduction"
14+
title-id="introduction"
1515
:title="$t('introduction.title')"
1616
:body="$t('introduction.body')">
1717
<div class="mt-small mb-small">
@@ -20,7 +20,7 @@
2020
</page-section-twitter>
2121
<!-- getting started -->
2222
<page-section
23-
id="getting-started"
23+
title-id="getting-started"
2424
:title="$t('gettingStarted.title')"
2525
:body="$t('gettingStarted.body')">
2626
<tab-box
@@ -39,7 +39,7 @@
3939
</page-section>
4040
<!-- community -->
4141
<page-section
42-
id="community"
42+
title-id="community"
4343
:title="$t('community.title')"
4444
:body="$t('community.body')">
4545
<div class="col-sm-12 col-md-9 col-md-offset-3 row">
@@ -53,7 +53,7 @@
5353
</page-section>
5454
<!-- resources -->
5555
<page-section
56-
id="resources"
56+
title-id="resources"
5757
:title="$t('resources.title')"
5858
:body="$t('resources.body')">
5959
<resource-box class="col-sm-12 col-md-9 col-md-offset-3" />
@@ -91,13 +91,6 @@ export default {
9191
CommunityItems,
9292
ResourceBox,
9393
TabBox
94-
},
95-
mounted() {
96-
const section = new URLSearchParams(window.location.search).get('section')
97-
const el = document.getElementById(section)
98-
if (!section || !el) return
99-
setTimeout(() => { window.scroll(0, el.offsetTop - 70) }, 10)
100-
window.history.replaceState(null, null, '/#/')
10194
}
10295
}
10396
</script>

0 commit comments

Comments
 (0)