Enhancement/upgrade greenwood 0.10.0

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        node-version: 12.13.0
+        node-version: 14.16.0
     - name: Installing project dependencies
       run: |
         yarn install --frozen-lockfile

.github/workflows/master.yml

@@ -18,7 +18,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        node-version: 12.13.0
+        node-version: 14.16.0
     - name: Installing project dependencies
       run: |
         yarn install --frozen-lockfile

greenwood.config.js

@@ -1,10 +1,13 @@
 const pluginGoogleAnalytics = require('@greenwood/plugin-google-analytics');
+const pluginGraphQL = require('@greenwood/plugin-graphql');
+const pluginImportCSS = require('@greenwood/plugin-import-css');
+const pluginPostcss = require('@greenwood/plugin-postcss');
 const DESCRIPTION = 'Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.';
 const FAVICON_HREF = '/assets/favicon.ico';
 const TITLE = 'The Greenhouse I/O';
 
 module.exports = {
-  optimization: 'strict',
+  // optimization: 'strict',
 
   title: TITLE,
 
@@ -22,14 +25,19 @@ module.exports = {
   ],
 
   devServer: {
-    port: 1981,
-    host: 'local.thegreenhouse.io'
+    port: 51201
   },
 
   plugins: [
-    ...pluginGoogleAnalytics({
+    pluginGoogleAnalytics({
       analyticsId: 'UA-147204327-1'
-    })
+    }),
+
+    pluginPostcss(),
+
+    ...pluginImportCSS(),
+
+    ...pluginGraphQL()
   ]
 
 };

karma.conf.js

@@ -27,7 +27,7 @@ module.exports = function (config) {
       module: {
         rules: [
           { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' },
-          { test: /\.css/, exclude: /node_modules/, loader: 'css-loader' },
+          { test: /\.css/, exclude: /node_modules/, loader: 'css-loader?url=false' }, // ignores url in CSS files
           { test: /\.js$/, enforce: 'post',
             exclude: [/\.spec.js$/, /node_modules/, /karma-test-shim.js$/],
             loader: 'istanbul-instrumenter-loader',

netlify.toml

@@ -0,0 +1,9 @@
+[build]
+  publish = "public/"
+  command = "yarn build"
+
+[build.processing]
+  skip_processing = true
+
+[build.environment]
+  NODE_VERSION = "14.16.0"

package.json

@@ -12,15 +12,23 @@
     "lint": "ls-lint && yarn lint:js && yarn lint:css",
     "lint:js": "eslint \"*.js\" \"src/**/**/*.js\"",
     "lint:css": "stylelint \"./src/**/*.js\", \"./src/**/*.css\"",
-    "serve": "yarn build && ws -d ./public",
+    "serve": "yarn clean && greenwood serve",
     "start": "yarn develop",
     "test": "export CI_RUN=true && yarn clean && karma start",
     "test:tdd": "yarn clean && karma start"
   },
+  "dependencies": {
+    "lit-element": "^2.4.0"
+  },
   "devDependencies": {
-    "@greenwood/cli": "^0.9.0",
-    "@greenwood/plugin-google-analytics": "^0.9.0",
+    "@greenwood/cli": "0.10.0-alpha.8",
+    "@greenwood/plugin-google-analytics": "0.10.0-alpha.8",
+    "@greenwood/plugin-graphql": "^0.10.0-alpha.8",
+    "@greenwood/plugin-import-css": "^0.10.0-alpha.8",
+    "@greenwood/plugin-postcss": "^0.10.0-alpha.8",
     "@ls-lint/ls-lint": "^1.9.2",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
     "eslint": "^6.1.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine": "^3.3.1",
@@ -32,9 +40,11 @@
     "karma-junit-reporter": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0-alpha.3.0",
+    "postcss-nested": "^4.1.2",
     "puppeteer": "^1.19.0",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-standard": "^20.0.0",
+    "webpack": "^4.29.6"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('postcss-nested')
+  ]
+};

src/components/blog-post/blog-post.js → src/components/blog-post-details/blog-post-details.js

@@ -14,7 +14,7 @@ export function slugifyDate(date) {
  * - `props.date` needs to match the folder path of the blog post
  * 
  */
-class BlogPostComponent extends LitElement {
+class BlogPostDetailsComponent extends LitElement {
 
   constructor() {
     super();
@@ -73,4 +73,4 @@ class BlogPostComponent extends LitElement {
   }
 }
 
-customElements.define('app-blog-post', BlogPostComponent);
+customElements.define('app-blog-post-details', BlogPostDetailsComponent);

src/components/blog-post/blog-post.spec.js → src/components/blog-post-details/blog-post-details.spec.js

@@ -1,11 +1,11 @@
-import { slugifyDate } from './blog-post';
-import './blog-post';
+import { slugifyDate } from './blog-post-details';
+import './blog-post-details';
 
-describe('BlogPost', () => {
+describe('BlogPostDetails', () => {
   let blogPost;
 
   beforeEach(async () => {
-    blogPost = document.createElement('app-blog-post');
+    blogPost = document.createElement('app-blog-post-details');
 
     document.body.appendChild(blogPost);
 
@@ -73,7 +73,7 @@ describe('BlogPost', () => {
     };
 
     beforeEach(async () => {
-      blogPost = document.createElement('app-blog-post');
+      blogPost = document.createElement('app-blog-post-details');
       blogPost.image = mockPost.image;
       blogPost.date = mockPost.date;
       blogPost.title = mockPost.title;

src/templates/blog-template.js → src/components/blog-posts-list/blog-posts-list.js

@@ -1,9 +1,8 @@
 import { css, html, LitElement } from 'lit-element';
-import client from '@greenwood/cli/data/client';
-import ChildrenQuery from '../queries/children';
-import '../styles/theme.css';
+import client from '@greenwood/plugin-graphql/core/client';
+import ChildrenQuery from '../../queries/children.gql';
 
-class BlogTemplate extends LitElement {
+class BlogPostsListComponent extends LitElement {
 
   constructor() {
     super();
@@ -47,6 +46,7 @@ class BlogTemplate extends LitElement {
 
   async connectedCallback() {
     super.connectedCallback();
+
     const response = await client.query({
       query: ChildrenQuery,
       variables: {
@@ -63,10 +63,10 @@ class BlogTemplate extends LitElement {
       <h2>${year}</h2>
       <ul>
       ${this.posts.filter((post) => {
-          return post.link.includes(year);
+          return post.route.includes(year);
         })
         .map((post) => {
-          return html`<li><a href="${post.link}">${post.title} ${post.data.emoji}</a></li>`;
+          return html`<li><a href="${post.route}">${post.title} ${post.data.emoji}</a></li>`;
         })
         .reverse()
       }
@@ -79,7 +79,7 @@ class BlogTemplate extends LitElement {
     let years = [];
 
     posts.forEach(post => {
-      const year = post.link.split('/')[2];
+      const year = post.route.split('/')[2];
 
       if (year && !years[year]) {
         years[year] = year;
@@ -99,4 +99,4 @@ class BlogTemplate extends LitElement {
 }
 /* eslint-enable indent */
 
-customElements.define('page-template', BlogTemplate);
+customElements.define('app-blog-posts-list', BlogPostsListComponent);

src/components/card-list/card-list.js

@@ -1,5 +1,5 @@
 import { html, LitElement } from 'lit-element';
-import '../card/card';
+import '../card/card.js';
 
 class CardListComponent extends LitElement {
 

src/components/card/card.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement, unsafeCSS } from 'lit-element';
-import '../social-icon-link/social-icon-link';
+import '../social-icon-link/social-icon-link.js';
 import cardCss from './card.css';
 
 class CardComponent extends LitElement {

src/components/footer/footer.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement, unsafeCSS } from 'lit-element';
-import '../social-icon-link/social-icon-link';
+import '../social-icon-link/social-icon-link.js';
 import footerCss from './footer.css';
 
 class FooterComponent extends LitElement {

src/components/social-icon-link/social-icon-link.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit-element';
-import SocialLinksService from '../../services/social-links/social-links-service';
+import SocialLinksService from '../../services/social-links/social-links-service.js';
 
 class SocialIconLinkComponent extends LitElement {
 

src/pages/blog/2020/10/28/index.md

@@ -7,7 +7,6 @@ description: 'NodeJS package for running and testing of CLIs.'
 image: '//raw.githubusercontent.com/thescientist13/gallinago/master/.github/assets/gallinago.jpg'
 ---
 
-
 In my free time when working on open source projects, I typically find myself working on build tools and CLI type projects.  These kind of projects, unlike the web apps I help build by day, typically take a combination of a user configuration file and some source code, and then generates some sort of output from that.  
 
 For the [Greenwood](https://www.greenwoodjs.io/) project, which is a site builder, the output of that project is going to be HTML, CSS and JavaScript, all based on the user's source code (e.g. markdown files).  To help ensure we don't break anything as we go, and taking influence from **webpack** and how they setup their tests, the majority of the project's test coverage is predominently made up of test "cases"; wherein fixtures and files are used to recreate what a users folder structure might actually look like while using the tool.  (I think this would fall under the umbrealla of [_BDD_](https://en.wikipedia.org/wiki/Behavior-driven_development), but don't quote me on that)

src/pages/blog/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="/components/blog-posts-list/blog-posts-list.js"></script>
+  </head>
+
+  <body>
+    <app-blog-posts-list></app-blog-posts-list>
+  </body>
+
+</html>

src/queries/children.gql

@@ -1,7 +1,7 @@
 query($parent: String!) {
   children(parent: $parent) {
     title,
-    link,
+    route,
     data {
       emoji
     }

src/queries/graph.gql

@@ -1,7 +1,7 @@
 query {
   graph {
     title,
-    link,
+    route,
     data {
       date,
       image

src/styles/post-details.css

@@ -0,0 +1,26 @@
+p {
+  width: 60%;
+  margin: 10px auto;
+  padding: 10px;
+}
+
+img {
+  display: block;
+  width: 70%;
+  margin: 0 auto;
+}
+
+ul {
+  list-style-type: none;
+  width: 70%;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+pre {
+  width: 400px;
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+}

src/styles/theme.css

@@ -20,4 +20,11 @@ h4,
 h5,
 h6 {
   line-height: 1.4;
+}
+
+p {
+  text-align: center;
+  width: 50%;
+  margin: 20px auto;
+  font-size: 1.1em;
 }