Vue

by antixrist

HTML

<div id="app">
  <div v-for="group in groups"
       class="group"
  >
    <h3 class="group__name">{{ group.name }}</h3>
    <div class="group__summary-ru"
         :class="{'-empty': !group.summary_ru }"
    >{{ group.summary_ru }}</div>
    <div class="group__summary"
         :class="{'-empty': !group.summary }"
    >{{ group.summary }}</div>
    
    <div v-if="group.commands.length"
         class="group__commands commands"
    >
      <div v-for="command in group.commands"
           class="command"
      >
        <h4 class="command__name">{{ command.command }}</h4>
        <div class="command__args">{{ command.args }}</div>
        <div class="command__cli">{{ command.cli }}</div>
        <div class="command__url">{{ command.url }}</div>
        <div class="command__version">{{ command.version }}</div>
        <div class="command__returns"
             :class="{'-empty': !command.returns }"
        >{{ command.returns }}</div>
        <div class="command__complexity">{{ command.complexity }}</div>
        <div class="command__summary"
             :class="{'-empty': !command.summary }"
        >{{ command.summary }}</div>
        <div class="command__summary_ru"
             :class="{'-empty': !command.summary_ru }"
        >{{ command.summary_ru }}</div>
      </div>
    </div>
  </div>
</div>

SCSS

$f-mono-oxygen-en: 'https://fonts.google.com/specimen/Oxygen+Mono';

.group {
  & + & { margin: 20px 0 0; }
  
  &__name {}  
  &__summary-ru {
    &.-empty {}
  }
  &__summary {
    &.-empty {}
  }
  &__commands {}
}

.commands {}

Vue

new Vue({
  el: "#app",
  data: {
    groups: [],
  },
  async mounted() {
  	const dataUrl = 'https://gist.githubusercontent.com/antixrist/2adba38ab572488e1b4081bcd7fd4047/raw/05983f34aeddae0408e7f33f78830f49707fd026/commands-docs.json';
  	
    this.groups = await fetch(dataUrl).then(res => res.json());
    
    console.log(this.groups);
  },
})