<commit_before><template>

  <div class="topic-page">
    <breadcrumbs></breadcrumbs>
    <div v-if="topics.length > 0">
      <h2>Topics</h2>
      <div class="card-list">
        <topic-card
          v-for="topic in topics"
          class="card"
          :id="topic.pk"
          :title="topic.title"
          :ntotal="topic.n_total"
          :ncomplete="topic.n_complete">
        </topic-card>
      </div>
    </div>

    <div v-if="contents.length > 0">
      <h2>Content</h2>
      <div class="card-list">
        <content-card
          v-for="content in contents"
          class="card"
          :title="content.title"
          :thumbnail="content.thumbnail"
          :kind="content.kind"
          :progress="content.progress"
          :id="content.pk">
        </content-card>
      </div>
    </div>
  </div>

</template>


<script>

  module.exports = {
    created() {
      this.fetchNodes(this.id);
    },
    components: {
      'breadcrumbs': require('../breadcrumbs'),
      'topic-card': require('../topic-card'),
      'content-card': require('../content-card'),
    },
    vuex: {
      getters: {
        // better practice would be to define vuex getter functions globally
        topics: state => state.topics,
        contents: state => state.contents,
        // from URL
        id: state => state.route.params.content_id,
      },
      actions: require('../../actions'),<commit_msg>use search-widget in explore page<commit_after><template>

  <search-widget></search-widget>
  <div class="topic-page">
    <breadcrumbs></breadcrumbs>
    <div v-if="topics.length > 0">
      <h2>Topics</h2>
      <div class="card-list">
        <topic-card
          v-for="topic in topics"
          class="card"
          :id="topic.pk"
          :title="topic.title"
          :ntotal="topic.n_total"
          :ncomplete="topic.n_complete">
        </topic-card>
      </div>
    </div>

    <div v-if="contents.length > 0">
      <h2>Content</h2>
      <div class="card-list">
        <content-card
          v-for="content in contents"
          class="card"
          :title="content.title"
          :thumbnail="content.thumbnail"
          :kind="content.kind"
          :progress="content.progress"
          :id="content.pk">
        </content-card>
      </div>
    </div>
  </div>

</template>


<script>

  module.exports = {
    created() {
      this.fetchNodes(this.id);
    },
    components: {
      'breadcrumbs': require('../breadcrumbs'),
      'topic-card': require('../topic-card'),
      'content-card': require('../content-card'),
      'search-widget': require('../search-widget'),
    },
    vuex: {
      getters: {
        // better practice would be to define vuex getter functions globally
        topics: state => state.topics,
        contents: state => state.contents,
        // from URL
        id: state => state.route.params.content_id,
      },
      actions: require('../../actions'),
{'fraction_non_alphanumeric': 0.16994572591587517, 'fraction_numerical': 0.004070556309362279, 'mean_word_length': 1.9343283582089552, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2650581', 'n_tokens_mistral': 934, 'n_tokens_neox': 927, 'n_words': 164}