Доки по Redis'у

by antixrist

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.2/markdown-it.js"></script>
<div id="app">
  <div v-for="group in sortedGroups"
       class="group"
       :id="makeId(`group-${ group.name }`)"
  >
    <div class="group__name">{{ group.name }}</div>
    <div class="group__desc">
      <div v-if="group.summary_ru || group.summary"
           class="group__summary-ru"
      >{{ group.summary_ru || group.summary }}</div>
      <div v-if="group.summary_ru ? group.summary : ''"
           class="group__summary"
      >{{ group.summary_ru ? group.summary : '' }}</div>
    </div>
    
    <div v-if="group.commands.length"
         class="group__commands commands"
    >
      <div v-for="command in group.commands"
           :id="makeId(`command-${ command.command }`)"
           class="command"
      >
        <div class="command__cli">
          <div class="command__name">{{ command.command }}</div>
          <div>&nbsp;</div>
          <div class="command__args">{{ command.args }}</div>
        </div>
        <div class="command__desc">
          <div class="command__summary_ru">{{ command.summary_ru || command.summary }}</div>
          <div class="command__summary">{{ command.summary_ru ? command.summary : '' }}</div>

          <div class="command__version-complexity">
            <span v-if="command.version"
                  class="command__version"
            >
              <a v-if="command.url"
                 class="command__url"
                 :href="command.url.toLowerCase()"
              >{{ command.version }}</a>
              <template v-else>{{ command.version }}</template>;
              </span>
            <span class="command__complexity">{{ command.complexity }}</span>
          </div>

          <div class="command__returns"
              ...

SCSS

$f-mono-oxygen-en: 'Oxygen Mono', monospace;
$f-mono-ibm-en: 'IBM Plex Mono', monospace;

@import url('https://fonts.google.com/specimen/Oxygen+Mono');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');

$f-size: 16px;
$h-space: 0;
$color: #000;
$font-mono: $f-mono-oxygen-en;

body {
  padding: 0 20px 0 40px;
}

* {
  color: $color;
  font-size: 16px;
  line-height: 1.4;
}

%summary-reserve {
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  color: $color;
  margin-top: 0;
}

pre
code, {
  font-family: $font-mono;
}
pre {
  white-space: pre-line;
  font-size: 100%;
}
code {
  color: $color;
  border-radius: 2px;
  white-space: nowrap;
  padding: 2px 4px;
  background: #e0e0e0;
}
pre > code {
  white-space: pre-line;
  display: block;
}

ul,
ol {
  padding-left: 17px;
}

.group {
  &:not(:last-child) { margin: 0 0 20px; }
  
  &__name {
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    /* border-bottom: .5px solid $color; */
    padding: 0 $h-space 3px;
  }
  &__desc {
    border-bottom: .5px solid;
    
    > :first-child { padding-top: 6px; }
    > :last-child { padding-bottom: 10px; }
  }
  &__summary-ru,
  &__summary {
    &:empty { display: none; }
  }
  &__summary-ru {}
  &__summary {
    @extend %summary-reserve;
    margin-top: 5px;
  }
  &__commands {
    /* margin-top: 15px; */
  }
  
}

.commands {}

.command {
  padding: 13px $h-space;
  margin: 0;
  
  &:not(:last-child) {
    border-bottom: .5px solid $color;
  }
/*   
  &:nth-child(odd) {
    background: #f5f5f5;
  }
*/  
  &__cli {
    font-size: 18px;
    font-family: $font-mono;
    display: flex;
    margin-bottom: 6px;
    font-weight: 600 !important;
  }

  &__desc {    
    > *:not(:empty):not(:first-child) {
      margin-top: 5px;
    }
  }
  &__summary-ru,
  &__summary {
    &:empty { display: none; }
  }
  &__summary-ru {}
  &__summary {
    @extend %summary-reserve;
  }
  
  &__returns {
    > * {
      margin: 5px 0 0;
      
     ...

Babel + JSX

const md = window.markdownit();

const DATA_URL = 'https://gist.githubusercontent.com/antixrist/2adba38ab572488e1b4081bcd7fd4047/raw/f6a23a61fc651130b08728c28d427b2ed43f70a7/commands-docs.json';

new Vue({
  el: "#app",
  data: {
    groups: [],
  },
  computed: {
  	sortedGroups() {
    	return this.groups.map(({commands, ...group}) => ({
      	...group,
        commands: this.sort(commands, 'command'),
      }));
    },
  },
  methods: {
  	sort: (arr, key) => arr.sort((a, b) => a[key].toLowerCase().localeCompare(b[key].toLowerCase())),
    
    md2html(text) {
    	return md.render(text);
    },
    
    makeId(str) {
    	return str.trim().replace(/[^a-z0-9]+/ig, '-').replace(/\s+/g, '-').replace(/[-]+/g, '-').toLowerCase();
    },
  },
  async mounted() {
  	this.groups = await fetch(DATA_URL).then(res => res.json());
  },
});