arvidkahl

<div class="container" id="vue-root">
  <div class="row">
    <div class="col-xs-12">
      <h1>A JSON Tree View Component in Vue.js</h1>      
    </div>  
  </div>

  <div class="row">
    <div class="col-xs-6">
      <pre><code>{{formatJSON(sampleData)}}</code></pre>

arvidkahl

Vue.component("tree-view", Vue.extend({
  name: "tree-view",
  template: "<div>Tree View</div>",
  props: ["data"],
  methods: {},
  computed: {}
}));

// To be used with <tree-view :data="sampleData"></tree-view>

arvidkahl

// ... inside the tree-view component

  methods: {
  
    // Transformer for the non-Collection types, 
    // like String, Integer of Float
    transformValue: function(valueToTransform, keyForValue){
    	return {
      	key: keyForValue,
        type: "value",

arvidkahl

// Add some CSS for indentation
.tree-view-item {
  margin-left: 10px;
}

arvidkahl

// Modifying the tree-view-item component
// ...
  data: function(){
    return {
      open: true
    }
  },
  methods: {
    isOpen: function(){
      return this.isRootObject(this.data) || this.open;

arvidkahl

Vue.component("tree-view-item", Vue.extend({
  name: "tree-view-item",
  props: ["data", "max-depth", "current-depth"],
  data: function(){
    return {
      open: this.currentDepth < this.maxDepth
    }
  },
  methods: {
    isOpen: function(){

arvidkahl

// Make sure to pass the correct currency symbol, three-letter-name and your locale

(function(currency='$', currencyName='USD', locale='en-US'){return (Math.ceil(100*Array.prototype.slice.call(document.getElementsByTagName('span')).reduce((acc,item,index,src)=>{if(item.innerText.indexOf(currency)>-1){return acc+parseFloat(item.innerText.replace(/,/g,'.').replace(RegExp(currency, "g"),''))}else{return acc}}, 0.0))/100).toLocaleString(locale,{style: 'currency',currency: currencyName,});})("€", "EUR", "de-DE")

arvidkahl

const stopwords = 'a an and at but by for in nor of on or so the to up yet'
const defaults = stopwords.split(' ')

function titleCase1(str, options) {
  const opts = options || {}

  if (!str) return ''

  const stop = opts.stopwords || defaults
  const keep = opts.keepSpaces

arvidkahl

// using https://try-puppeteer.appspot.com/

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.setViewport({width: 1500, height: 3000, deviceScaleFactor: 4});
await page.goto('https://twitter.com/arvidkahl/status/1375476092853743621?s=20');
await page.waitForNavigation({ waitUntil: 'networkidle2' })
console.log(await page.content());
await page.screenshot({path: 'screenshot.png'});

arvidkahl

This is a script picking winners for a contest where:

• every winning entry has to mention one other twitter account in a reply
• double winners are allowed

You'll need a few things installed:

• jq
• twarc
• boxes