new Newsroom

content/site/navigation.json

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

gridsome.server.js

@@ -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
+    private = null
-else if(private == "false")
+else if (private == "false")
-  private = 1
+    private = 1
 
-module.exports = function (api) {
+module.exports = function(api) {
-  api.loadSource(({
+    api.loadSource(({
-    addCollection
+        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
     }) => {
-      // Use the Pages API here: https://gridsome.org/docs/pages-api
+        // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
-      const {
+    })
-        data
+
-      } = await graphql(`{
+    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) {
+        data.allBlog.edges.forEach(function(element) {
-        createPage({
+            createPage({
-          path: element.node.path,
+                path: element.node.path,
-          component: './src/templates/BlogPost.vue',
+                component: './src/templates/BlogPost.vue',
-          context: {
+                context: {
-            previousElement: (element.previous) ? element.previous.id : '##empty##',
+                    previousElement: (element.previous) ? element.previous.id : '##empty##',
-            nextElement: (element.next) ? element.next.id : '##empty##',
+                    nextElement: (element.next) ? element.next.id : '##empty##',
-            id: element.node.id
+                    id: element.node.id
-          }
+                }
-        });
+            });
 
-      });
+        });
 
     });
 }

src/assets/scss/main.scss

@@ -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) {
+.author-list-item:nth-child(n + 2) {
-    @apply -ml-3
+    @apply -ml-3;
 }
 
 @media (min-width: 768px) {
-    .with-large>.flex-post:nth-child(5n),
+    // .with-large>.flex-post:nth-child(5n),
-    .with-large>.flex-post:nth-child(5n-1) {
+    .with-large>.flex-post:nth-child(6n + 1) {
-        // @apply flex-100;
+        @apply flex-100;
-        flex: 1 1 50%;
+        @apply flex-row;
-        @apply flex-col;
         .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;
+            @apply flex-post-large-content;
-            flex: 0 1 auto;
+            @apply self-center;
-            @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;
             }
         }
     }

src/components/PostListItem.vue

@@ -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">
+        <section
-              <g-link
+          class="flex flex-wrap post-tags container mx-auto relative py-1"
-                v-for="membership in record.memberships"
+        >
-                :key="membership.id"
+          <g-link
-                :to="membership.path"
+            v-for="membership in record.memberships"
-                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"
+            :key="membership.id"
-                >{{ membership.title }}</g-link
+            :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"
-            </section>
+            >{{ 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
+            <div class="flex flex-col text-xs leading-none uppercase">
-              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">
+          <section class="post-tags container mx-auto relative py-3">
-              <g-link
+            <g-link
-                v-for="tag in record.tags"
+              v-for="tag in record.tags"
-                :key="tag.id"
+              :key="tag.id"
-                :to="tag.path"
+              :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"
+              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
+              >{{ tag.title }}</g-link
-              >
+            >
-            </section>
+          </section>
-           
         </div>
       </div>
     </div>

src/templates/NewsRoom.vue

@@ -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>