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: {
|
transformers: {
|
||||||
@@ -85,5 +103,9 @@ module.exports = {
|
|||||||
path: '/tags/:id',
|
path: '/tags/:id',
|
||||||
component: '~/templates/Tag.vue'
|
component: '~/templates/Tag.vue'
|
||||||
}],
|
}],
|
||||||
|
Project: [{
|
||||||
|
path: '/project/:id',
|
||||||
|
component: '~/templates/Project.vue'
|
||||||
|
}],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,6 +27,15 @@ module.exports = function (api) {
|
|||||||
...options
|
...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 ({
|
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