Skip to content

Commit

Permalink
Proof of concept page title adjustments
Browse files Browse the repository at this point in the history
Different templates can coexist and correctly assign page-specific title

Related to Issue #25
  • Loading branch information
BobChao87 committed Dec 1, 2021
1 parent dec0f3c commit 519065f
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 38 deletions.
2 changes: 1 addition & 1 deletion nuxt.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { sitemapConfig } from './configs/sitemap.config';
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
'head': {

This comment has been minimized.

Copy link
@duncte123

duncte123 Dec 1, 2021

Member

Why is this property in quotes?

This comment has been minimized.

Copy link
@BobChao87

BobChao87 Dec 1, 2021

Author Contributor

Linting rules require that quotes either be used on all properties on an object or none of them. Since some properties on this object have dashes, all properties must use quotes.

title: 'Oengus v2',
titleTemplate: titleChunk => `${titleChunk ? `${titleChunk} | ` : ''}Oengus v2`,
htmlAttrs: {
lang: 'en-GB',
},
Expand Down
7 changes: 7 additions & 0 deletions pages/calendar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,15 @@

<script lang="ts">
import Vue from 'vue';
import { MetaInfo } from 'vue-meta';
export default Vue.extend({
head(): MetaInfo {
return {
title: this.$t('calendar.title') as string,
};
},
computed: {
year(): number {
return Number.parseInt(this.$route.params.year ?? new Date().getFullYear(), 10);
Expand Down
83 changes: 57 additions & 26 deletions pages/marathon/_marathon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@

<script lang="ts">
import Vue from 'vue';
import { MetaInfo } from 'vue-meta';
import { mapActions } from 'vuex';
import { FullMarathon, MarathonState } from '~/types/api/marathon';
export default Vue.extend({
data() {
Expand All @@ -16,6 +19,28 @@ export default Vue.extend({
collapsed: (globalThis.innerWidth ?? 1024) < 1024,
};
},
async fetch(): Promise<void> {
await Promise.allSettled([
this.getMarathon(this.marathonId),
]);
},
head(): MetaInfo {
// This isn't just a nicety, it tells Vue we depend on marathon, the function definition does not.
// Without this, Vue doesn't know to recompute these values when marathon is fetched
const marathon = this.marathon;
return {
titleTemplate: titleChunk => `${titleChunk ? `${titleChunk} | ` : ''}${marathon?.name ? `${marathon.name} | ` : ''}Oengus v2`,
};
},
computed: {
marathon(): FullMarathon|undefined {
return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
},
},
watch: {
$route(to, from): void {
// Detect when the path changes (not anchors in the same page or queries)
Expand All @@ -27,44 +52,50 @@ export default Vue.extend({
}
},
},
methods: {
...mapActions({
getMarathon: 'api/marathon/get',
}),
},
});
</script>

<style lang="scss" scoped>
.marathon-container {
width: 100%;
display: flex;
align-items: flex-start;
align-items: start;
gap: var(--spacing);
}
.marathon-sidebar {
min-width: min(300px, 100%);
}
.marathon-view {
width: 100%;
flex-grow: 5;
}
@media (max-width: 1023px) {
.marathon-container {
width: 100%;
display: flex;
align-items: flex-start;
align-items: start;
gap: var(--spacing);
flex-direction: column;
}
.marathon-sidebar {
min-width: min(300px, 100%);
}
.marathon-view {
width: 100%;
flex-grow: 5;
}
}
@media (max-width: 1023px) {
.marathon-container {
flex-direction: column;
}
.marathon-sidebar {
width: 100%;
}
.collapsed {
&.marathon-container {
flex-direction: column;
}
.collapsed {
&.marathon-container {
flex-direction: column;
}
.marathon-sidebar {
width: 100%;
}
.marathon-sidebar {
width: 100%;
}
}
</style>
30 changes: 19 additions & 11 deletions pages/marathon/_marathon/schedule/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,21 @@

<script lang="ts">
import Vue from 'vue';
import { MetaInfo } from 'vue-meta';
export default Vue.extend({
data() {
return {
marathonId: this.$route.params.marathon,
};
},
head(): MetaInfo {
return {
title: this.$t('marathon.schedule.title') as string,
};
},
computed: {
runHash(): string {
return this.$route.hash;
Expand All @@ -42,16 +50,16 @@ export default Vue.extend({
</script>

<style lang="scss" scoped>
.current-runs-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: stretch;
gap: var(--spacing);
> * {
min-width: min(400px, 100%);
flex-grow: 1;
}
.current-runs-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: stretch;
gap: var(--spacing);
> * {
min-width: min(400px, 100%);
flex-grow: 1;
}
}
</style>

0 comments on commit 519065f

Please sign in to comment.