adding support for projects
This commit is contained in:
hamdy
@@ -59,6 +59,24 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
use: '@gridsome/source-filesystem',
|
||||
options: {
|
||||
typeName: 'Project',
|
||||
path: './content/project/**/*.md',
|
||||
templates: {
|
||||
Project: '/project/:id'
|
||||
},
|
||||
refs: {
|
||||
author: 'Person',
|
||||
tags: {
|
||||
typeName: 'Tag',
|
||||
create: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
transformers: {
|
||||
@@ -85,5 +103,9 @@ module.exports = {
|
||||
path: '/tags/:id',
|
||||
component: '~/templates/Tag.vue'
|
||||
}],
|
||||
Project: [{
|
||||
path: '/project/:id',
|
||||
component: '~/templates/Project.vue'
|
||||
}],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,15 @@ module.exports = function (api) {
|
||||
...options
|
||||
};
|
||||
}
|
||||
|
||||
if (options.internal.typeName === 'Project') {
|
||||
options.countries = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
|
||||
options.cities = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
|
||||
options.author = (typeof options.author === 'string') ? options.author.split(',').map(string => string.trim()) : options.author;
|
||||
return {
|
||||
...options
|
||||
};
|
||||
}
|
||||
})
|
||||
|
||||
api.createPages(async ({
|
||||
@@ -68,4 +77,45 @@ module.exports = function (api) {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// api.createPages(async ({
|
||||
// graphql,
|
||||
// createPage
|
||||
// }) => {
|
||||
// // Use the Pages API here: https://gridsome.org/docs/pages-api
|
||||
// const {
|
||||
// data
|
||||
// } = await graphql(`{
|
||||
// allProject {
|
||||
// edges {
|
||||
// previous {
|
||||
// id
|
||||
// }
|
||||
// next {
|
||||
// id
|
||||
// }
|
||||
// node {
|
||||
// id
|
||||
// path
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// `);
|
||||
|
||||
// data.allProject.edges.forEach(function (element) {
|
||||
// console.log(element)
|
||||
// createPage({
|
||||
// path: element.node.path,
|
||||
// component: './src/templates/Project.vue',
|
||||
// context: {
|
||||
// previousElement: (element.previous) ? element.previous.id : '##empty##',
|
||||
// nextElement: (element.next) ? element.next.id : '##empty##',
|
||||
// id: element.node.id
|
||||
// }
|
||||
// });
|
||||
|
||||
// });
|
||||
|
||||
// });
|
||||
}
|
||||
65
src/components/ProjectListItem.vue
Normal file
65
src/components/ProjectListItem.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="flex flex-post px-0 sm:px-4 pb-8 mb-8" v-bind:class="{'no-border': !border}">
|
||||
<g-link :to="record.path" class="post-card-image-link">
|
||||
<g-image :src="record.image" :alt="record.title" class="post-card-image"></g-image>
|
||||
</g-link>
|
||||
<div class="post-card-content">
|
||||
<g-link :to="record.path">
|
||||
<h2 class="post-card-title mt-3">{{ record.title }}</h2>
|
||||
<p class="post-card-excerpt">{{ record.excerpt }}</p>
|
||||
</g-link>
|
||||
<div class="w-full post-card-meta pt-4">
|
||||
<div class="avatars">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none flex author-list">
|
||||
<li v-for="author in record.author" :key="author.id" class="author-list-item">
|
||||
<g-link :to="author.path" v-tooltip="author.name">
|
||||
<g-image
|
||||
:src="author.image"
|
||||
:alt="author.name"
|
||||
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
|
||||
/>
|
||||
</g-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase">
|
||||
<p>
|
||||
<g-link :to="record.path">
|
||||
<time :datetime="record.datetime">{{ record.humanTime }}</time>
|
||||
</g-link>
|
||||
</p>
|
||||
<p>
|
||||
<g-link :to="record.path">
|
||||
<time :datetime="record.datetime">{{ record.startDate }}</time>
|
||||
</g-link>
|
||||
{{ record.status }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
record: {},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
.post-card-excerpt {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
55
src/pages/Projects.vue
Normal file
55
src/pages/Projects.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<ProjectListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
|
||||
query($page:Int) {
|
||||
entries: allProject(perPage: 9, page: $page) @paginate {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
members
|
||||
rank
|
||||
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
author {
|
||||
id
|
||||
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
|
||||
import ProjectListItem from '~/components/ProjectListItem.vue';
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "Hello, world!"
|
||||
},
|
||||
components: {
|
||||
ProjectListItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
144
src/templates/Project.vue
Normal file
144
src/templates/Project.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<Layout :hideHeader="true" :disableScroll="true">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-1/6 mx-auto sm:mx-0">
|
||||
<g-image
|
||||
:src="$page.project.image"
|
||||
class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
|
||||
></g-image>
|
||||
</div>
|
||||
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
|
||||
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">{{ $page.project.title }}</h1>
|
||||
<p class="text-gray-700 text-xl" v-if="$page.project.bio">{{ $page.project.bio }}</p>
|
||||
<div class="author-social">
|
||||
{{ $page.project.belongsTo.totalCount }} Projects
|
||||
·
|
||||
<!-- <a
|
||||
:href="$page.project.facebook"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'facebook']" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
:href="$page.project.twitter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'twitter']" />
|
||||
</a>
|
||||
-->
|
||||
<a
|
||||
:href="$page.project.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-gray-400 hover:text-black"
|
||||
>
|
||||
<font-awesome :icon="['fab', 'linkedin']" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
|
||||
|
||||
<section class="post-content container mx-auto relative font-serif text-gray-700">
|
||||
<div class="post-content-text text-xl" v-html="$page.project.content"></div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
|
||||
|
||||
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.project.belongsTo.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pagination flex justify-center mb-8">
|
||||
<Pagination
|
||||
:baseUrl="$page.project.path"
|
||||
:currentPage="$page.project.belongsTo.pageInfo.currentPage"
|
||||
:totalPages="$page.project.belongsTo.pageInfo.totalPages"
|
||||
:maxVisibleButtons="5"
|
||||
v-if="$page.project.belongsTo.pageInfo.totalPages > 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query($id: ID!, $page:Int) {
|
||||
project(id: $id) {
|
||||
id
|
||||
title
|
||||
status
|
||||
countries
|
||||
image(width:150, height:150)
|
||||
image_caption
|
||||
logo
|
||||
cities
|
||||
timeToRead
|
||||
path
|
||||
timeToRead
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
|
||||
|
||||
members
|
||||
websites
|
||||
private
|
||||
|
||||
rank
|
||||
excerpt
|
||||
content
|
||||
belongsTo(perPage: 5, page: $page) @paginate {
|
||||
totalCount
|
||||
pageInfo {
|
||||
totalPages
|
||||
currentPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
... on Person {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import ProjectListItem from "~/components/ProjectListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
ProjectListItem
|
||||
},
|
||||
computed: {
|
||||
postLabel: function() {
|
||||
var pluralize = require("pluralize");
|
||||
return pluralize("post", this.$page.project.belongsTo.totalCount);
|
||||
}
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$page.project.title
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user