Start of project

.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ],
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": 3,
+      "targets": {
+        // https://jamie.build/last-2-versions
+        "browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
+      }
+    }]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,30 @@
+// https://eslint.org/docs/user-guide/configuring
+// File taken from https://github.com/vuejs-templates/webpack/blob/1.3.1/template/.eslintrc.js, thanks.
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+    webextensions: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/*.log
+/dist
+/dist-zip

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "pinboard-groupings",
+  "version": "1.0.0",
+  "description": "Group Pinboard tags",
+  "author": "Ben Ramey <benramey@fastmail.com>",
+  "scripts": {
+    "lint": "eslint --ext .js,.vue src",
+    "prettier": "prettier \"src/**/*.{js,vue}\"",
+    "prettier:write": "npm run prettier -- --write",
+    "build": "cross-env NODE_ENV=production webpack --hide-modules",
+    "build:dev": "cross-env NODE_ENV=development webpack --hide-modules",
+    "build-zip": "node scripts/build-zip.js",
+    "watch": "npm run build -- --watch",
+    "watch:dev": "cross-env HMR=true npm run build:dev -- --watch"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "bootstrap-vue": "^2.0.4",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/runtime-corejs3": "^7.4.0",
+    "@types/chrome": "^0.0.74",
+    "archiver": "^3.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.2",
+    "copy-webpack-plugin": "^4.5.3",
+    "core-js": "^3.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "ejs": "^2.6.1",
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "file-loader": "^1.1.11",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-extension-reloader": "^1.1.0"
+  }
+}

scripts/build-zip.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const archiver = require('archiver');
+
+const DEST_DIR = path.join(__dirname, '../dist');
+const DEST_ZIP_DIR = path.join(__dirname, '../dist-zip'); 
+
+const extractExtensionData = () => {
+  const extPackageJson = require('../package.json');
+
+  return {
+    name: extPackageJson.name,
+    version: extPackageJson.version
+  }
+};
+
+const makeDestZipDirIfNotExists = () => {
+  if(!fs.existsSync(DEST_ZIP_DIR)) {
+    fs.mkdirSync(DEST_ZIP_DIR);
+  }
+}
+
+const buildZip = (src, dist, zipFilename) => {
+  console.info(`Building ${zipFilename}...`);
+
+  const archive = archiver('zip', { zlib: { level: 9 }});
+  const stream = fs.createWriteStream(path.join(dist, zipFilename));
+  
+  return new Promise((resolve, reject) => {
+    archive
+      .directory(src, false)
+      .on('error', err => reject(err))
+      .pipe(stream);
+
+    stream.on('close', () => resolve());
+    archive.finalize();
+  });
+};
+
+const main = () => {
+  const {name, version} = extractExtensionData();
+  const zipFilename = `${name}-v${version}.zip`;
+  
+  makeDestZipDirIfNotExists();
+
+  buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename)
+    .then(() => console.info('OK'))
+    .catch(console.err); 
+};
+
+main();

src/background.js

@@ -0,0 +1,16 @@
+chrome.runtime.onInstalled.addListener(function() {
+    var data = {
+        apiKey: "the key",
+        groupings: []
+    };
+
+    chrome.storage.sync.set(data, function() {
+        console.log("data initialized");
+    });
+});
+
+chrome.browserAction.onClicked.addListener(function() {
+    chrome.tabs.create({
+        url: 'page/groupings.html'
+    });
+});

src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Pinboard Groupings",
+  "description": "Group Pinboard tags",
+  "version": 1.0,
+  "manifest_version": 2,
+  "icons": {
+    "48": "icons/icon_48.png",
+    "128": "icons/icon_128.png"
+  },
+  "browser_action": {
+    "default_title": "Open Pinboard Groupings page"
+  },
+  "permissions": ["storage", "tabs"],
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  }
+}

src/page/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="fluid-container p-2">
+    <h1>Pinboard Groupings</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      apiKey: "bob",
+      groupings: []
+    }
+  },
+  created() {
+    chrome.storage.sync.get(['apiKey', 'groupings'], result => {
+      this.apiKey = result.apiKey;
+      this.groupings = result.groupings;
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/page/groupings.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pinboard Groupings</title>
+  <link rel="stylesheet" href="groupings.css">
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body>
+  <div id="app">
+
+  </div>
+  <script src="groupings.js"></script>
+</body>
+</html>

src/page/groupings.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App'
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+
+  render: h => h(App)
+})

webpack.config.js

@@ -0,0 +1,119 @@
+const webpack = require('webpack');
+const ejs = require('ejs');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtensionReloader = require('webpack-extension-reloader');
+const { VueLoaderPlugin } = require('vue-loader');
+const { version } = require('./package.json');
+
+const config = {
+  mode: process.env.NODE_ENV,
+  context: __dirname + '/src',
+  entry: {
+    'background': './background.js',
+    'page/groupings': './page/groupings.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.js', '.vue'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loaders: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.sass$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: '/images/',
+          emitFile: false,
+        },
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: '/fonts/',
+          emitFile: false,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      global: 'window',
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new CopyWebpackPlugin([
+      { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
+      { from: 'page/groupings.html', to: 'page/groupings.html', transform: transformHtml },
+      {
+        from: 'manifest.json',
+        to: 'manifest.json',
+        transform: (content) => {
+          const jsonContent = JSON.parse(content);
+          jsonContent.version = version;
+
+          if (config.mode === 'development') {
+            jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
+          }
+
+          return JSON.stringify(jsonContent, null, 2);
+        },
+      },
+    ]),
+  ],
+};
+
+if (config.mode === 'production') {
+  config.plugins = (config.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+  ]);
+}
+
+if (process.env.HMR === 'true') {
+  config.plugins = (config.plugins || []).concat([
+    new ExtensionReloader({
+      manifest: __dirname + '/src/manifest.json',
+    }),
+  ]);
+}
+
+function transformHtml(content) {
+  return ejs.render(content.toString(), {
+    ...process.env,
+  });
+}
+
+module.exports = config;