ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new Newsroom

Browse Source
This commit is contained in:
samaradel
2020-11-26 13:34:35 +02:00
parent d499758ce0
commit 6e565b4c56
6 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
content/site/navigation.json
View File

@@ -1,5 +1,10 @@
{
"headerNavigation": [
{
"name": "About",
"link": "/about",
"external": false
},
{
"name": "Projects",
"link": "/projects",
@@ -11,19 +16,13 @@
"external": false
},
{
"name": "Overview",
"link": "/overview",
"name": "Blog",
"link": "/blog",
"external": false
},
{
"name": "News",
"link": "/news",
"external": false
},
{
"name": "About",
"link": "/about",
"name": "NewsRoom",
"link": "/newsroom",
"external": false
}
],

216
gridsome.server.js
View File

@@ -5,106 +5,106 @@
// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`
var private = process.env.SHOWPRIVATE
var private = process.env.SHOWPRIVATE
if (private == "true")
private = null
else if(private == "false")
private = 1
private = null
else if (private == "false")
private = 1
module.exports = function (api) {
api.loadSource(({
addCollection
}) => {
// Use the Data Store API here: https://gridsome.org/docs/data-store-api/
})
api.createPages(({
createPage
}) => {
// Use the Pages API here: https://gridsome.org/docs/pages-api/
})
api.onCreateNode(options => {
if (options.internal.typeName === 'Blog') {
options.tags = (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
};
}
if (options.internal.typeName === 'Project') {
options.tags = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;
options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
options.members = (typeof options.members === 'string') ? options.members.split(',').map(string => string.trim()) : options.members;
options.author = (typeof options.author === 'string') ? options.author.split(',').map(string => string.trim()) : options.author;
return {
...options
};
}
if (options.internal.typeName === 'Person') {
options.project_ids = (typeof options.project_ids === 'string') ? options.project_ids.split(',').map(string => string.trim()) : options.project_ids;
options.memberships = (typeof options.memberships === 'string') ? options.memberships.split(',').map(string => string.trim()) : options.memberships;
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;
options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
return {
...options
};
}
})
api.createPages(({ createPage }) => {
createPage({
path: '/people',
component: './src/templates/People.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/search',
component: './src/templates/Search.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/projects',
component: './src/templates/Projects.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/overview',
component: './src/templates/Overview.vue',
context: {
private: private
}
})
})
api.createPages(async ({
graphql,
createPage
module.exports = function(api) {
api.loadSource(({
addCollection
}) => {
// Use the Pages API here: https://gridsome.org/docs/pages-api
const {
data
} = await graphql(`{
// Use the Data Store API here: https://gridsome.org/docs/data-store-api/
})
api.createPages(({
createPage
}) => {
// Use the Pages API here: https://gridsome.org/docs/pages-api/
})
api.onCreateNode(options => {
if (options.internal.typeName === 'Blog') {
options.tags = (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
};
}
if (options.internal.typeName === 'Project') {
options.tags = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;
options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
options.members = (typeof options.members === 'string') ? options.members.split(',').map(string => string.trim()) : options.members;
options.author = (typeof options.author === 'string') ? options.author.split(',').map(string => string.trim()) : options.author;
return {
...options
};
}
if (options.internal.typeName === 'Person') {
options.project_ids = (typeof options.project_ids === 'string') ? options.project_ids.split(',').map(string => string.trim()) : options.project_ids;
options.memberships = (typeof options.memberships === 'string') ? options.memberships.split(',').map(string => string.trim()) : options.memberships;
options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;
options.cities = (typeof options.cities === 'string') ? options.cities.split(',').map(string => string.trim()) : options.cities;
return {
...options
};
}
})
api.createPages(({ createPage }) => {
createPage({
path: '/people',
component: './src/templates/People.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/search',
component: './src/templates/Search.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/projects',
component: './src/templates/Projects.vue',
context: {
private: private
}
})
})
api.createPages(({ createPage }) => {
createPage({
path: '/newsroom',
component: './src/templates/NewsRoom.vue',
context: {
private: private
}
})
})
api.createPages(async({
graphql,
createPage
}) => {
// Use the Pages API here: https://gridsome.org/docs/pages-api
const {
data
} = await graphql(`{
allBlog {
edges {
previous {
@@ -122,18 +122,18 @@ module.exports = function (api) {
}
`);
data.allBlog.edges.forEach(function (element) {
createPage({
path: element.node.path,
component: './src/templates/BlogPost.vue',
context: {
previousElement: (element.previous) ? element.previous.id : '##empty##',
nextElement: (element.next) ? element.next.id : '##empty##',
id: element.node.id
}
});
data.allBlog.edges.forEach(function(element) {
createPage({
path: element.node.path,
component: './src/templates/BlogPost.vue',
context: {
previousElement: (element.previous) ? element.previous.id : '##empty##',
nextElement: (element.next) ? element.next.id : '##empty##',
id: element.node.id
}
});
});
});
});
}

59
src/assets/scss/main.scss
View File

@@ -51,9 +51,8 @@ ul {
}
}
.animated-link:after {
content: '';
content: "";
width: 0px;
height: 1px;
display: block;
@@ -95,33 +94,32 @@ ul {
}
}
.author-list-item:nth-child(n+2) {
@apply -ml-3
.author-list-item:nth-child(n + 2) {
@apply -ml-3;
}
@media (min-width: 768px) {
.with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(5n-1) {
// @apply flex-100;
flex: 1 1 50%;
@apply flex-col;
// .with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(6n + 1) {
@apply flex-100;
@apply flex-row;
.post-card-image-link {
// @apply flex-auto;
flex: 1 1 100%;
@apply relative;
min-height: 400px;
min-height: 380px;
@apply mr-6;
}
.post-card-image {
@apply absolute;
@apply h-full;
@apply h-auto;
@apply w-full;
@apply object-cover;
@apply rounded-lg;
}
.post-card-content {
// @apply flex-post-large-content;
flex: 0 1 auto;
@apply self-center
@apply flex-post-large-content;
@apply self-center;
}
.post-card-title {
@apply text-4xl;
@@ -130,6 +128,33 @@ ul {
@apply text-xl;
}
}
// .with-large>.flex-overview:nth-child(6n + 1) {
// @apply flex-100;
// @apply flex-row;
// .post-card-image-link {
// @apply flex-auto;
// @apply relative;
// min-height: 380px;
// @apply mr-6;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// @apply flex-post-large-content;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
}
body[data-theme="dark"] {
@@ -165,7 +190,7 @@ body[data-theme="dark"] {
.author-social {
a {
&:hover {
@apply text-white
@apply text-white;
}
}
}

51
src/components/PostListItem.vue
View File

@@ -14,17 +14,19 @@
<g-link :to="record.path">
<h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
<p class="post-card-excerpt">{{ record.excerpt }}</p>
<section class="flex flex-wrap post-tags container mx-auto relative py-1">
<g-link
v-for="membership in record.memberships"
:key="membership.id"
:to="membership.path"
class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full mb-2"
>{{ membership.title }}</g-link
>
</section>
<section
class="flex flex-wrap post-tags container mx-auto relative py-1"
>
<g-link
v-for="membership in record.memberships"
:key="membership.id"
:to="membership.path"
class="text-xs bg-transparent hover:text-blue-700 py-1 px-2 mr-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full mb-2"
>{{ membership.title }}</g-link
>
</section>
</g-link>
<div class="w-full post-card-meta pt-2">
<div class="avatars">
<div class="flex items-center">
@@ -45,10 +47,8 @@
</li>
</ul>
</div>
<div
class="flex flex-col text-xs leading-none uppercase"
>
<div class="flex flex-col text-xs leading-none uppercase">
<p>
<g-link :to="record.path">
<time :datetime="record.datetime">{{
@@ -64,22 +64,17 @@
</g-link>
{{ record.status }}
</p>
</div>
</div>
<section class="post-tags container mx-auto relative py-3">
<g-link
v-for="tag in record.tags"
:key="tag.id"
:to="tag.path"
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
>{{ tag.title }}</g-link
>
</section>
<section class="post-tags container mx-auto relative py-3">
<g-link
v-for="tag in record.tags"
:key="tag.id"
:to="tag.path"
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
>{{ tag.title }}</g-link
>
</section>
</div>
</div>
</div>

0
src/pages/News.vue → src/pages/Blog.vue
View File

2
src/templates/Overview.vue → src/templates/NewsRoom.vue
View File

@@ -1,7 +1,7 @@
<template>
<Layout>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
</div>
</div>