chore/upgrade greenwood 0.10.0 (#22)

* initial upgrade test with yarn link

* use greenwood serve task for serving

* install alpha.0

* alpha.1 update

* upgrade alpha.2

* upgrade to alpha.3 and refactor

* home page css

* fix linting

* update alpha.4

* upgrade chromimum-lib for github workflows

* update Netlify to Node v12

* update Netlify to Node v12

* upgrade v0.10.0-alpha.6

* update alpha.7

* upgrade alpha.8

* meta for favicon

* upgrade alpha.9

* clean up meta

* fix Lighthouse a11y feedback

* github badge height and width

* alpha.10 update

* v0.10.0 release version

.github/workflows/chromium-lib-install.sh

@@ -6,5 +6,6 @@ sudo apt-get update \
   && sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - \
   && sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
   && sudo apt-get update \
-  && sudo apt-get install -y google-chrome-unstable --no-install-recommends \
+  && sudo apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
+      --no-install-recommends \
   && sudo rm -rf /var/lib/apt/lists/*

greenwood.config.js

@@ -3,6 +3,7 @@ const pkg = require('./package.json');
 module.exports = {
   title: 'My Personal Blog',
   meta: [
+    { rel: 'icon', href: '/assets/favicon.ico' },
     { name: 'description', content: pkg.description } // replace the pkg.description with a custom string if you prefer
   ]
 };

netlify.toml

@@ -0,0 +1,10 @@
+[build]
+  publish = "public/"
+  command = "npm run build"
+
+[build.processing]
+  skip_processing = true
+
+
+[build.environment]
+  NODE_VERSION = "12.13.0"

package.json

@@ -6,7 +6,7 @@
     "build": "greenwood build",
     "develop": "greenwood develop",
     "start": "npm run develop",
-    "serve": "rimraf ./public && npm run build && ws -d ./public",
+    "serve": "rimraf ./public && greenwood serve",
     "lint:js": "eslint \"*.js\" \"./src/**/**/*.js\"",
     "lint:css": "stylelint \"./src/**/*.js\", \"./src/**/*.css\"",
     "lint": "ls-lint && npm run lint:js && npm run lint:css"
@@ -25,9 +25,9 @@
   },
   "homepage": "https://github.com/ProjectEvergreen/greenwood-getting-started#readme",
   "devDependencies": {
-    "@greenwood/cli": "^0.9.0",
-    "eslint": "^6.1.0",
+    "@greenwood/cli": "^0.10.0",
     "@ls-lint/ls-lint": "^1.9.2",
+    "eslint": "^6.1.0",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-standard": "^20.0.0"

src/components/header/header.js

@@ -1,5 +1,3 @@
-import logo from '../../assets/greenwood-logo.png';
-
 class HeaderComponent extends HTMLElement {
   constructor() {
     super();
@@ -53,21 +51,28 @@ class HeaderComponent extends HTMLElement {
         text-align: right;
       }
 
+      .header img.github-badge {
+        display: inline-block;
+        width: 90px;
+        height: 20px;
+      }
+
       </style>
 
       <header class="header">
         <div class="head-wrap">
           <div class="brand">
             <a href="/">
-              <img src="${logo}" />
+              <img src="/assets/greenwood-logo.png" alt="Greenwood logo"/>
               <h4>My Personal Blog</h4>
             </a>
           </div>
           <div class="social">
-            <a href="">
-              <a href="https://github.com/ProjectEvergreen/greenwood">
-                <img src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github" />
-              </a>
+            <a href="https://github.com/ProjectEvergreen/greenwood">
+              <img 
+                src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github" 
+                alt="Greenwood GitHub badge"
+                class="github-badge"/>
             </a>
           </div>
         </div>
@@ -76,4 +81,4 @@ class HeaderComponent extends HTMLElement {
   }
 }
 
-customElements.define('app-header', HeaderComponent);
+customElements.define('app-header', HeaderComponent);

src/styles/blog.css

@@ -0,0 +1,22 @@
+.content {
+  flex: 1;
+  max-width: 50em;
+  height: 100%;
+  margin: auto;
+  font-size: 1.2rem;
+  padding: 2rem;
+}
+
+.content h2 {
+  color: #0b6623;
+}
+
+.content h2,
+.content h3 {
+  font-size: 2rem;
+  margin: 5px 0;
+}
+
+.content a {
+  color: #1d337a;
+}

src/styles/home.css

@@ -0,0 +1,22 @@
+.content {
+  flex: 1;
+  max-width: 50em;
+  height: 100%;
+  margin: auto;
+  font-size: 1.2rem;
+  padding: 2rem;
+}
+
+.content h3 {
+  color: #0b6623;
+  font-size: 2rem;
+  margin: 5px 0;
+}
+
+.content a {
+  color: #1d337a;
+}
+
+.content ul li {
+  padding: 5px 0;
+}

src/templates/blog.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta-outlet></meta-outlet>
+
+    <!-- TODO have to use forward slash / for path references?  translate on the fly in serve.js? -->
+    <script type="module" src="/components/footer/footer.js"></script>
+    <script type="module" src="/components/header/header.js"></script>
+
+    <link rel="stylesheet" href="/styles/theme.css"></link>
+    <link rel="stylesheet" href="/styles/blog.css"></link>
+  </head>
+
+  <body>
+
+    <app-header></app-header>
+
+    <div class='page-template content'>
+
+      <content-outlet></content-outlet>
+
+      <h3>More Posts</h3>
+      <nav>
+        <ul>
+          <li><a href="/blog/second-post/">My Second Post</a></li>
+          <li><a href="/blog/first-post/">My First Post</a></li>
+        </ul>
+      </nav>
+    </div>
+
+    <app-footer></app-footer>
+
+  </body>
+
+</html>

src/templates/page.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta-outlet></meta-outlet>
+
+    <!-- TODO have to use forward slash / for path references?  translate on the fly in serve.js? -->
+    <script type="module" src="/components/footer/footer.js"></script>
+    <script type="module" src="/components/header/header.js"></script>
+
+    <link rel="stylesheet" href="/styles/theme.css"></link>
+    <link rel="stylesheet" href="/styles/home.css"></link>
+  </head>
+
+  <body>
+
+    <div>
+      <app-header></app-header>
+
+      <div class='content'>
+        <content-outlet></content-outlet>
+      </div>
+
+      <app-footer></app-footer>
+    </div>
+
+  </body>
+
+</html>