diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a8281a7..a225d77 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml index 2e9e523..4ff9650 100644 --- a/.github/workflows/master.yml +++ b/.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 diff --git a/greenwood.config.js b/greenwood.config.js index 6b2b994..38a38ce 100644 --- a/greenwood.config.js +++ b/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() ] }; \ No newline at end of file diff --git a/karma.conf.js b/karma.conf.js index 8cbb0af..9505c9f 100644 --- a/karma.conf.js +++ b/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', diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..2afe51a --- /dev/null +++ b/netlify.toml @@ -0,0 +1,9 @@ +[build] + publish = "public/" + command = "yarn build" + +[build.processing] + skip_processing = true + +[build.environment] + NODE_VERSION = "14.16.0" \ No newline at end of file diff --git a/package.json b/package.json index e4bd0ab..621dacc 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..80bcdda --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('postcss-nested') + ] +}; \ No newline at end of file diff --git a/src/components/blog-post/blog-post.js b/src/components/blog-post-details/blog-post-details.js similarity index 91% rename from src/components/blog-post/blog-post.js rename to src/components/blog-post-details/blog-post-details.js index 562e873..6b0bbe4 100644 --- a/src/components/blog-post/blog-post.js +++ b/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); \ No newline at end of file +customElements.define('app-blog-post-details', BlogPostDetailsComponent); \ No newline at end of file diff --git a/src/components/blog-post/blog-post.spec.js b/src/components/blog-post-details/blog-post-details.spec.js similarity index 92% rename from src/components/blog-post/blog-post.spec.js rename to src/components/blog-post-details/blog-post-details.spec.js index 9015763..059b97e 100644 --- a/src/components/blog-post/blog-post.spec.js +++ b/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; diff --git a/src/templates/blog-template.js b/src/components/blog-posts-list/blog-posts-list.js similarity index 78% rename from src/templates/blog-template.js rename to src/components/blog-posts-list/blog-posts-list.js index 8c9a230..07881d8 100644 --- a/src/templates/blog-template.js +++ b/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 {

${year}