yarn global add @gridsome/cli
or
npm install --global @gridsome/cli
- Clone the Repository
git clone https://github.com/OziOcb/Gridsome-and-Markdown-Starter-Kit.git
. cd Gridsome-and-Markdown-Starter-Kit
to open the folder.- Run
yarn
ornpm install
to install project dependancies. gridsome develop
to start a local dev server athttp://localhost:8080
๐๐
Many components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as base components and they tend to be used very frequently across your components.
Thanks to gridsome-plugin-base-components
plugin, all Components with names that start with Base...
(BaseButton.vue
etc.) will be globally available.
No need for doing below in every component that uses these base-components
:
<script>
import BaseButton from "@/components/BaseButton.vue"
export default {
components: {
BaseButton,
},
}
</script>
GLOBAL HEAD METADATA ( Grdisome docs )
Global head metadata is added in src/main.js
by using head.{property}.push()
head.meta.push(
{
key: "author", // Ad.1
name: "author",
content: "Paul Ozyzniewski"
},
{
key: "description", // Ad.1
name: "description",
content: "YOUR DESCRIPTION IN HERE"
}
)
- Always use
key
property ! (that makes overwriting form child component easier)
What is the Fluid Typography?
-
You can find the function responsible for setting min and max font sizes inside
/src/assets/sass/globals/_typography.scss
-
To set the min font-size find and edit the
$typography-type-scale
array
$typography-type-scale: (
-2: 0.79rem,
-1: 0.889rem, // h5, h6, body, a
0: 1rem, // h4, buttons
1: 1.125rem, // h3
2: 1.266rem, // h2
3: 1.424rem, // h1
4: 1.602rem, // .display-md
5: 1.802rem, // .display-lg
6: 2.027rem // .display-xl
);
- To set the max font-size find and edit the
$typography-type-scale-contrast
array
$typography-type-scale-contrast: (
-2: 0.75rem,
-1: 1rem, // h5, h6, body, a
0: 1.3333rem, // h4, buttons
1: 1.777rem, // h3
2: 2.369rem, // h2
3: 3.157rem, // h1
4: 4.209rem, // .display-md
5: 5.61rem, // .display-lg
6: 7.478rem // .display-xl
);
Thanks to the vue-svg-loader you can import SVGs as you do with any other Vue component.
<template>
<layout>
<SvgBrand />
</layout>
</template>
<script>
import SvgBrand from "~/assets/img/svg/Brand.svg"
export default {
components: {
SvgBrand
}
}
</script>
FONT-AWESOME 5 ICONS ( Gridsome docs )
<font-awesome :icon="['fab', 'github']" /> // Ad.1
<font-awesome :icon="['fab', 'linkedin']" /> // Ad.1
- Thanks to doing it this way, the SVG for Github/LinkedIn icons will be the only ones added to our final build!
To do that you must use ~@/
as a prefix in the url
.imageBox {
background: url("~@/assets/img/image-name.jpg") center/cover no-repeat;
}
Lodash is a great library, well crafted, battle tested and with a strong team.
- Lodash official docs
- Usefull source
// YourComponent.vue
<script>
import { _debounce } from 'lodash-es'; // Ad.1
export default {
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
</script>
_debaunce
- Add
_
prefix to indicate that this function comes from Lodash
- Add
This is the component that is shown for few seconds while going between two pages
To edit this component go to : src/components/ThePageTransitionOverlay.vue
To edit basic page transitions go to src/utils/transitions.js
and edit the gsapTransition()
function.
// YourPageComponent.vue
<script>
import {
basicPageTransitionEnter,
basicPageTransitionLeave
} from "@/mixins/pageTransitions"
export default {
...
mixins: [
basicPageTransitionEnter,
basicPageTransitionLeave
],
...
}
</script>
You edit these transitions inside the component's methods
like this:
// YourPageComponent.vue
<script>
import { checkWindowWidth } from "@/utils/window"
import breakpoint from "@/utils/breakpoints"
import {
durationTransitionForWrapper,
durationTransitionForOverlay,
enterPageWithBasicTransition, // Ad.1
leavePageWithBasicTransition // Ad.1
} from "@/utils/transitions"
import { gsap } from "gsap"
export default {
...
mounted() {
if (checkWindowWidth() < breakpoint.lg) { // Ad.1
enterPageWithBasicTransition()
} else {
this.gsapPageTransition({ pageEnter: true })
}
},
methods: {
gsapPageTransition({ onComplete, pageEnter }) {
const tl = gsap.timeline({ onComplete })
tl.to(".YOUR_ELEMENT", 0.3, { autoAlpha: 0, scale: 4 }, 0)
.to( // Ad.2
".pageTransitionWrapper",
durationTransitionForWrapper,
{ autoAlpha: 0 },
0
)
.to( // Ad.2
".pageTransitionOverlay",
durationTransitionForOverlay,
{ autoAlpha: 1 },
0.3
)
return pageEnter ? tl.reverse(0) : tl.play()
}
},
beforeRouteLeave(to, from, next) {
if (checkWindowWidth() < breakpoint.lg) { // Ad.1
leavePageWithBasicTransition(next)
} else {
this.gsapPageTransition({ onComplete: next })
}
}
}
</script>
- Use basic page transition for mobile ( Optional )
- Hide the content and show the Overlay