.
├── src
│   ├── common
│   │   └── rfcInformations.ts
│   ├── main
│   │   ├── lib
│   │   │   └── fetchRFC.ts
│   │   └── main.ts
│   └── renderer
│       ├── components
│       │   └── RfcCard.vue
│       ├── fonts
│       ├── App.vue
│       ├── index.pug
│       ├── index.ts
│       ├── sfc.d.ts
│       └── tsconfig.json
├── .editorconfig
├── .gitignore
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

  "devDependencies": {
    "@types/electron": "^1.6.10",
    "@types/fs-extra": "^5.0.3",
    "@types/jsdom": "^11.0.6",
    "@types/node": "^10.5.0",
    "@types/node-fetch": "^2.1.1",
    "@types/vue": "^2.0.0",
    "css-loader": "^0.28.11",
    "electron": "^2.0.3",
    "electron-packager": "^12.1.0",
    "fs-extra": "^6.0.1",
    "gulp": "4",
    "gulp-pug": "^4.0.1",
    "gulp-typescript": "^5.0.0-alpha.2",
    "jsdom": "^11.11.0",
    "node-fetch": "^2.1.2",
    "pug": "^2.0.3",
    "pug-html-loader": "^1.1.5",
    "pug-loader": "^2.4.0",
    "pug-plain-loader": "^1.0.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "ts-node": "^7.0.0",
    "tslint": "^5.10.0",
    "tslint-config-airbnb": "^5.9.2",
    "typescript": "^2.9.2",
    "vue": "^2.5.16",
    "vue-class-component": "^6.2.0",
    "vue-loader": "^15.2.4",
    "vue-property-decorator": "^7.0.0",
    "vue-template-compiler": "^2.5.16",
    "vuetify": "^1.0.19",
    "webpack": "4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-stream": "^4.0.3"
  }

import nodeFetch from 'node-fetch';

const rfcIndexUrl = 'https://www.rfc-editor.org/rfc-index.html';
export async function fetchRFC(): Promise<RFCInformation[]> {
  return nodeFetch(rfcIndexUrl)
    .then(res => res.text())
    .then((body) => {
      // フェッチしたhtmlがテキストでくるのでここでスクレイピング

      // オブジェクトを詰めて返す
      return entities;
    })
    .catch((err) => {
      return null;
    });
}

export interface OtherInformations {
  formats: Format[];
  status: string;
  stream: Stream;
  obsolete?: Obsolete;
  update?: Update;
  also?: Also;
  doi: string;
}

export interface RFCInformation {
  number: number;
  title: string;
  authors: string[];
  published: { year: number, month: number };
  other: OtherInformations;
}

      const table = new JSDOM(body).window.document.querySelectorAll('table')[2];
      const entities: RFCInformation[] = [];
      for (const r of table.tBodies[0].rows) {
        const nMatch = r.cells[0].textContent.replace(/\n/g, '').match(/\s(\d+)/);
        if (nMatch == null || nMatch.length <= 1) continue;
        const num = nMatch[1];

        const info = r.cells[1].innerHTML
          .replace(/\n/g, '') // omits any new lines
          .replace(/\s+/g, ' ') // compresses consecctive spaces
          .replace(/<script[^>]+>[^<]+<\/script>/g, '') // removes <script> tags
          .replace(/<noscript>(RFC)?([^<]+)<\/noscript>/g, '$2'); // removes <noscript> tags
        const matches = info.match(/<b>([^<]+)<\/b>\s([^[]+)\[([^]+)\]\s((\([^)]+\)\s?)+)/);
        if (matches == null || matches.length <= 1)  continue;

        const d = matches[3].trim().split(' ');

        entities.push({
          number: parseInt(num),
          title: matches[1].trim(),
          authors: matches[2].trim().split(','),
          published: { year: parseInt(d[1]), month: months.indexOf(d[0]) },
          other: createOtherInformations(matches[4]),
        });

import Vue from 'vue';
import Component from 'vue-class-component';

import { ipcRenderer } from 'electron';
import { RFCInformation } from '../common/rfcInformations';

import RfcCard from './components/RfcCard.vue';

@Component({
  name: 'app',
  components: {
    RfcCard
  }
})
export default class App extends Vue {
  rfcInformations: RFCInformation[] = [];

  password: string = "";

  mounted() {
    ipcRenderer.send('get-RFC');
    ipcRenderer.on('get-RFC', (event: Electron.Event, rfcs: RFCInformation[]) => this.onReceiveRFC(rfcs));
  }

  onReceiveRFC(rfcs: RFCInformation[]): void {
    this.rfcInformations = rfcs;
  }
};

#app
  v-app(dark)
    main
      v-container(grid-list-md)
        v-layout(row, v-for="rfc in rfcInformations" :key="rfc.number"): v-flex(xs12): rfc-card(v-bind:rfc="rfc")

import Vue from 'vue'
import Component from 'vue-class-component';
import { Prop }  from 'vue-property-decorator';
import { RFCInformation } from '../../common/rfcInformations';
@Component({
  name: 'rfc-card'
})
export default class RfcCard extends Vue {
  @Prop({ type: Object })
  rfc: RFCInformation;

  get paddedNumber(): string {
    return this.rfc.number.toString().padStart(5, '0');
  }

  get authorsList(): string {
    return this.rfc.authors.join('; ');
  }

  get hasObsoletes(): boolean {
    if (this.rfc.other.obsolete && this.rfc.other.obsolete.obsoletes) {
      return this.rfc.other.obsolete.obsoletes.length > 0;
    }

    return false;
  }

  // 省略
}

v-card: v-container(grid-list-md)
  v-layout(row)
    v-flex(xs2) {{ paddedNumber }}
    v-flex(xs10) {{ rfc.title }}
  v-layout(row): v-flex(xs12) {{ authorsList }}
  v-layout(row)
    template(v-if="hasObsoletes"): v-flex(xs6)
      #obsoletes Obsoletes:
        v-chip(color="blue lighten-2", v-for="(ob, i) in rfc.other.obsolete.obsoletes", :key="i", small, label) {{ ob }}
    template(v-if="hasObsoleted"): v-flex(xs6)
      #obsoletes Obsoleted by:
        v-chip(color="red lighten-2", v-for="(ob, i) in rfc.other.obsolete.obsoleted", :key="i", small, label) {{ ob }}
  v-layout(row)
    template(v-if="hasUpdates"): v-flex(xs6)
      #obsoletes Updates:
        v-chip(color="blue lighten-2", v-for="(ob, i) in rfc.other.update.updates", :key="i", small, label) {{ ob }}
    template(v-if="hasUpdated"): v-flex(xs6)
      #obsoletes Updated by:
        v-chip(color="red lighten-2", v-for="(ob, i) in rfc.other.update.updated", :key="i", small, label) {{ ob }}