gctGenerator/docs/.vuepress/components/CodeInfo.vue

<template>
  <div>
    <h3 v-if="anchor" :id="headerId">
      <a :href="`#${headerId}`" class="header-anchor">#</a>
      {{ code.title }}
    </h3>
    <h3 v-else>{{ code.title }}</h3>
    <div class="metadata">
      <span>Version: {{ code.version }} ({{ code.date }})</span>
      <span v-if="code.author.includes(',')">Authors: {{ code.author }}</span>
      <span v-else>Author: {{ code.author }}</span>
    </div>
    <p class="description" v-html="code.description"></p>
  </div>
</template>

<script>
export default {
  props: {
    anchor: { type: Boolean },
    code: { type: Object },
  },
  data() {
    return {
      headerId: this.code.title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-'),
    };
  },
};
</script>

<style scoped>
.metadata span {
  display: block;
  font-style: italic;
  font-size: 0.9rem;
}

.description td {
  padding: 0;
}
</style>