Skip to content

Commit d7f89d8

Browse files
binzcodesbinzcodes
authored
refactor(components): restructure components (#7)
* docs(components): documentation on component organisation add documentation to standardise component organisational structure * refactor(components): refactor components to new structure organise components as described in new documented standard
1 parent 0522b46 commit d7f89d8

File tree

12 files changed

+199
-44
lines changed

12 files changed

+199
-44
lines changed

‎components/layout/AppFooter.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<v-hover v-slot:default="{ hover }">
3+
<v-footer
4+
:class="{ 'grey lighten-3': hover }"
5+
absolute
6+
class="font-weight-medium"
7+
padless
8+
>
9+
<v-col
10+
@click="openSite()"
11+
:class="{ isHover: hover, 'text--darken-2': hover }"
12+
class="text-center grey--text hover"
13+
cols="12"
14+
>
15+
<strong>rbi.nz</strong>
16+
</v-col>
17+
</v-footer>
18+
</v-hover>
19+
</template>
20+
21+
<script scoped>
22+
export default {
23+
name: 'Footer',
24+
methods: {
25+
openSite() {
26+
window.open('https://rbi.nz', '_blank')
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style>
33+
.isHover {
34+
cursor: pointer;
35+
}
36+
</style>

‎components/layout/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# COMPONENTS
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
The components directory contains your Vue.js layout componenets.
6+
7+
_Nuxt.js doesn't supercharge these components._

‎components/placeholder/PlaceholderCard.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<v-card>
3+
<div>
4+
<app-logo />
5+
</div>
6+
<v-card-title primary-title class="p-8">
7+
<div class="mx-auto">
8+
<h1 class="headline text-xs-center">{{ cardTitle }}</h1>
9+
<p class="grey--text text-xs-center mb-0">
10+
{{ cardDescription }}
11+
</p>
12+
</div>
13+
</v-card-title>
14+
<app-stack v-bind:stack="cardTechnologyStack"></app-stack>
15+
</v-card>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'HelloCard',
21+
components: {
22+
AppLogo: () => import('~/components/ui/AppLogo.vue'),
23+
AppStack: () => import('~/components/placeholder/Stack.vue')
24+
},
25+
props: {
26+
cardTitle: { type: String, default: 'Nuxt Static' },
27+
cardDescription: {
28+
type: String,
29+
default: 'A full-featured boilerplate for static websites.'
30+
},
31+
cardTechnologyStack: {
32+
type: Array,
33+
default: () => [
34+
{
35+
name: 'Netlify',
36+
description: '',
37+
icon: 'mdi-rhombus',
38+
color: 'cyan'
39+
},
40+
{
41+
name: 'Node.js',
42+
description: '',
43+
icon: 'mdi-nodejs',
44+
color: 'green'
45+
},
46+
{
47+
name: 'NuxtJS',
48+
description: '',
49+
icon: 'mdi-nuxt',
50+
color: 'teal'
51+
},
52+
{
53+
name: 'Vue.js',
54+
description: '',
55+
icon: 'mdi-vuejs',
56+
color: 'teal'
57+
},
58+
{
59+
name: 'Vuetify',
60+
description: '',
61+
icon: 'mdi-vuetify',
62+
color: 'blue lighten-2'
63+
}
64+
]
65+
}
66+
}
67+
}
68+
</script>
69+
70+
<style>
71+
.v-card__text,
72+
.v-card__title {
73+
word-break: normal;
74+
}
75+
</style>

‎components/placeholder/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# COMPONENTS
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
The `components/placeholder` directory is an example of a domain-specific Component store.
6+
7+
Components that are reusable in different pages but belong within a specific domain,
8+
in this case the "landing page" domain
9+
These place them in separate folders under components, one folder per domain
10+
11+
_Nuxt.js doesn't supercharge these components._

‎components/placeholder/Stack.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<v-card-actions v-if="stack.length > 0" class="pb-8">
3+
<div v-bind:key="stack.index" v-for="technology in stack" class="mx-auto">
4+
<app-technology v-bind:technology="technology"></app-technology>
5+
</div>
6+
</v-card-actions>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'Stack',
12+
components: {
13+
AppTechnology: () => import('~/components/placeholder/Technology.vue')
14+
},
15+
props: {
16+
stack: {
17+
type: [Object, Array],
18+
default: () => []
19+
}
20+
}
21+
}
22+
</script>

‎components/placeholder/Technology.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<v-tooltip bottom>
3+
<template v-slot:activator="{ on }">
4+
<v-icon v-on="on" :color="technology.color" size="28">
5+
{{ technology.icon }}
6+
</v-icon>
7+
</template>
8+
<span>{{ technology.name }}</span>
9+
</v-tooltip>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'Technology',
15+
props: {
16+
technology: {
17+
type: Object,
18+
required: true
19+
}
20+
}
21+
}
22+
</script>

‎components/Logo.vue renamed to ‎components/ui/AppLogo.vue

File renamed without changes.

‎components/ui/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# COMPONENTS
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
The `components/ui` directory contains your UI Components: those that are reusable across the whole app.
6+
7+
They should communicate just by using props and events, not holding any application logic.
8+
9+
_Nuxt.js doesn't supercharge these components._

‎components/utility/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# COMPONENTS
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
The `components/utility` directory contains utility Components:
6+
those that are reusable across the whole app but belong to no domain and not ui or layout based.
7+
8+
They may have some logic but delegate the rendering to children
9+
10+
_Nuxt.js doesn't supercharge these components._

‎layouts/default.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<v-content>
55
<nuxt />
66
</v-content>
7-
<layout-footer />
7+
<app-footer />
88
</v-app>
99
</template>
1010

1111
<script>
1212
export default {
1313
components: {
14-
layoutFooter: () => import('~/components/layout/Footer.vue')
14+
AppFooter: () => import('~/components/layout/AppFooter.vue')
1515
}
1616
}
1717
</script>

‎pages/index.vue

Lines changed: 4 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<v-container fluid class="fill-height">
33
<v-row align="center" justify="center">
44
<v-col cols="12" sm="8" md="4">
5-
<hello-card :card-title="cardTitle" />
5+
<placeholder-card :card-title="cardTitle" />
66
</v-col>
77
</v-row>
88
</v-container>
@@ -12,49 +12,12 @@
1212
import config from '~/nuxt.config'
1313
export default {
1414
components: {
15-
HelloCard: () => import('~/components/HelloCard.vue')
15+
PlaceholderCard: () =>
16+
import('~/components/placeholder/PlaceholderCard.vue')
1617
},
1718
data() {
1819
return {
19-
cardTitle: config.pwa.meta.name,
20-
skills: [
21-
{
22-
name: 'Node.js',
23-
description: '',
24-
icon: 'mdi-nodejs',
25-
color: 'green'
26-
},
27-
{
28-
name: 'TypeScript',
29-
description: '',
30-
icon: 'mdi-language-typescript',
31-
color: 'light-blue'
32-
},
33-
{
34-
name: 'Vue.js',
35-
description: '',
36-
icon: 'mdi-vuejs',
37-
color: 'teal'
38-
},
39-
{
40-
name: 'GraphQL',
41-
description: '',
42-
icon: 'mdi-graphql',
43-
color: 'pink darken-2'
44-
},
45-
{
46-
name: 'NuxtJS',
47-
description: '',
48-
icon: 'mdi-nuxt',
49-
color: 'teal'
50-
},
51-
{
52-
name: 'Kubernetes',
53-
description: 'Koob-er-net-ease',
54-
icon: 'mdi-kubernetes',
55-
color: 'blue darken-2'
56-
}
57-
]
20+
cardTitle: config.pwa.meta.name
5821
}
5922
}
6023
}

‎test/Logo.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from '@vue/test-utils'
2-
import Logo from '@/components/Logo.vue'
2+
import Logo from '@/components/ui/AppLogo.vue'
33

44
describe('Logo', () => {
55
test('is a Vue instance', () => {

0 commit comments

Comments
 (0)