Skip to content

Instantly share code, notes, and snippets.

@noxify
Last active December 10, 2019 21:39
Show Gist options
  • Save noxify/ba3115905d314465e825f22e4a9fc621 to your computer and use it in GitHub Desktop.
Save noxify/ba3115905d314465e825f22e4a9fc621 to your computer and use it in GitHub Desktop.
module.exports = {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Testing',
baseDir: './content/testing',
path: '*.md'
}
}
],
templates: {
Testing: [
{
path: '/testing/:type/:title',
}
]
},
};
const slugify = require('@sindresorhus/slugify');
module.exports = function (api) {
api.createPages(async ({ graphql, createPage }) => {
// Use the Pages API here: https://gridsome.org/docs/pages-api
const { data } = await graphql(`{
allTesting {
edges {
node {
id
title
path
type
}
}
}
}`);
var componentTemplates = {
case :'./src/templates/TestingCase.vue'
};
var defaultTemplate = './src/templates/TestingKennis.vue'
data.allTesting.edges.forEach(({ node }) => {
const slug = slugify(node.title, {
replacement: '-', // replace spaces with replacement
remove: /[^\w\s-]/g, // regex to remove characters
lower: true
});
createPage({
path: `/testing/${node.type}/${slug}`,
component: (componentTemplates[node.type]) ? (componentTemplates[node.type]) : defaultTemplate,
context: {
id: node.id
}
});
});
});
};
/*
/src/pages/Testing.vue
*/
<template>
<DefaultLayout>
<ul>
<li
v-for="edge in $page.records.edges"
:key="edge.node.id"
>
<g-link :to="edge.node.path">{{ edge.node.title }}</g-link>
</li>
</ul>
</DefaultLayout>
</template>
<page-query>
query {
records: allTesting {
edges {
node {
title
path
}
}
}
}
</page-query>
/*
/src/templates/TestingCase.vue
*/
<template>
<DefaultLayout>
<h1>Case Template</h1>
<p v-html="$page.entry.title" />
</DefaultLayout>
</template>
<page-query>
query($id: ID!) {
entry : testing(id: $id) {
title
}
}
</page-query>
<script>
export default {
components: {
}
};
</script>
/*
/src/templates/TestingKennis.vue
*/
<template>
<DefaultLayout>
<h1>Case Template</h1>
<p v-html="$page.entry.title" />
</DefaultLayout>
</template>
<page-query>
query($id: ID!) {
entry : testing(id: $id) {
title
}
}
</page-query>
<script>
export default {
components: {
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment