<commit_before><template>

  <div>
    <nav class="nav" role="navigation" :aria-label="$tr('youAreHere')">
      <span class="learn-bread" v-if="pageName === PageNames.LEARN_CONTENT">
        <breadcrumb :linkobject="learnRootLink" :text="$tr('learn')"></breadcrumb>
      </span>

      <template v-if="pageName === PageNames.EXPLORE_TOPIC">
        <span class="landscape">
          <breadcrumb :showarrow='false' :linkobject="exploreRootLink" :text="$tr('explore')"></breadcrumb>
        </span>
        <span class="portrait">
          <breadcrumb :linkobject="parentExploreLink"></breadcrumb>
        </span>
        <span class="middle-breadcrumb landscape" v-for="crumb in topicCrumbs">
          <a v-link="topicLink(crumb.id)">{{ crumb.title }}</a>
        </span>
      </template>

      <span v-if="pageName === PageNames.EXPLORE_CONTENT">
        <breadcrumb :linkobject="parentExploreLink"></breadcrumb>
      </span>

    </nav>
  </div>

</template>


<script>

  const PageNames = require('../../state/constants').PageNames;
  const PageModes = require('../../state/constants').PageModes;
  const getters = require('../../state/getters');

  module.exports = {
    $trNameSpace: 'learn',
    $trs: {
      learn: 'Learn',
      explore: 'Explore',
      youAreHere: 'You are here:',
    },
    components: {
      breadcrumb: require('./breadcrumb'),
    },
    computed: {
      PageModes() {
        return PageModes;
      },
      PageNames() {
        return PageNames;
      },
      learnRootLink() {
        return {
          name: PageNames.LEARN_CHANNEL,
          channel: this.currentChannel,
        };
      },
      exploreRootLink() {
        return {
          name: PageNames.EXPLORE_CHANNEL,
          channel: this.currentChannel,
        };
      },
      parentExploreLink() {
        let breadcrumbs = [];
        if (this.pageName === PageNames.EXPLORE_CONTENT) {
          breadcrumbs = this.contentCrumbs;
        } else if (this.pageName === PageNames.EXPLORE_TOPIC) {
          breadcrumbs = this.topicCrumbs;
        }
        if (breadcrumbs.length) {
          return this.topicLink(breadcrumbs[breadcrumbs.length - 1].id);
        }
        return this.exploreRootLink;
      },
    },
    methods: {
      topicLink(topicId) {
        return {
          name: PageNames.EXPLORE_TOPIC,
          params: {
            channel: this.currentChannel,
            id: topicId,
          },
        };
      },
    },
    vuex: {
      getters: {
        pageMode: getters.pageMode,
        topicCrumbs: state => state.pageState.topic.breadcrumbs,
        contentCrumbs: state => state.pageState.content.breadcrumbs,
        pageName: state => state.pageName,
        pageState: state => state.pageState,
        currentChannel: state => state.currentChannel,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .nav
    margin-top: 2em
    margin-bottom:1.4em

  .middle-breadcrumb:before
    content: '>'
    margin-left: 0.5em
    margin-right: 0.5em
    color: $core-text-annotation

  a
    display: inline-block
    vertical-align: middle
    margin-bottom: 2px
    font-size: 0.9em
    font-weight: 300
    max-width: 140px
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    color: $core-text-annotation

  .landscape
    @media screen and (max-width: $portrait-breakpoint)
      display: none

  .portrait
    display: none
    @media screen and (max-width: $portrait-breakpoint)
      display: initial

</style>
<commit_msg>Breadcrumb for content page : added 'back' next to the back.svg<commit_after><template>

  <div>
    <nav class="nav" role="navigation" :aria-label="$tr('youAreHere')">
      <span class="learn-bread" v-if="pageName === PageNames.LEARN_CONTENT">
        <breadcrumb :linkobject="learnRootLink" :text="$tr('learn')"></breadcrumb>
      </span>

      <template v-if="pageName === PageNames.EXPLORE_TOPIC">
        <span class="landscape">
          <breadcrumb :showarrow='false' :linkobject="exploreRootLink" :text="$tr('explore')"></breadcrumb>
        </span>
        <span class="portrait">
          <breadcrumb :linkobject="parentExploreLink"></breadcrumb>
        </span>
        <span class="middle-breadcrumb landscape" v-for="crumb in topicCrumbs">
          <a v-link="topicLink(crumb.id)">{{ crumb.title }}</a>
        </span>
      </template>

      <span v-if="pageName === PageNames.EXPLORE_CONTENT">
        <breadcrumb :linkobject="parentExploreLink" :text="('Back')" ></breadcrumb>
      </span>

    </nav>
  </div>

</template>


<script>

  const PageNames = require('../../state/constants').PageNames;
  const PageModes = require('../../state/constants').PageModes;
  const getters = require('../../state/getters');

  module.exports = {
    $trNameSpace: 'learn',
    $trs: {
      learn: 'Learn',
      explore: 'Explore',
      youAreHere: 'You are here:',
    },
    components: {
      breadcrumb: require('./breadcrumb'),
    },
    computed: {
      PageModes() {
        return PageModes;
      },
      PageNames() {
        return PageNames;
      },
      learnRootLink() {
        return {
          name: PageNames.LEARN_CHANNEL,
          channel: this.currentChannel,
        };
      },
      exploreRootLink() {
        return {
          name: PageNames.EXPLORE_CHANNEL,
          channel: this.currentChannel,
        };
      },
      parentExploreLink() {
        let breadcrumbs = [];
        if (this.pageName === PageNames.EXPLORE_CONTENT) {
          breadcrumbs = this.contentCrumbs;
        } else if (this.pageName === PageNames.EXPLORE_TOPIC) {
          breadcrumbs = this.topicCrumbs;
        }
        if (breadcrumbs.length) {
          return this.topicLink(breadcrumbs[breadcrumbs.length - 1].id);
        }
        return this.exploreRootLink;
      },
    },
    methods: {
      topicLink(topicId) {
        return {
          name: PageNames.EXPLORE_TOPIC,
          params: {
            channel: this.currentChannel,
            id: topicId,
          },
        };
      },
    },
    vuex: {
      getters: {
        pageMode: getters.pageMode,
        topicCrumbs: state => state.pageState.topic.breadcrumbs,
        contentCrumbs: state => state.pageState.content.breadcrumbs,
        pageName: state => state.pageName,
        pageState: state => state.pageState,
        currentChannel: state => state.currentChannel,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .nav
    margin-top: 2em
    margin-bottom:1.4em

  .middle-breadcrumb:before
    content: '>'
    margin-left: 0.5em
    margin-right: 0.5em
    color: $core-text-annotation

  a
    display: inline-block
    vertical-align: middle
    margin-bottom: 2px
    font-size: 0.9em
    font-weight: 300
    max-width: 140px
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    color: $core-text-annotation

  .landscape
    @media screen and (max-width: $portrait-breakpoint)
      display: none

  .portrait
    display: none
    @media screen and (max-width: $portrait-breakpoint)
      display: initial

</style>

{'fraction_non_alphanumeric': 0.14258028792912514, 'fraction_numerical': 0.004706533776301218, 'mean_word_length': 2.2662748643761303, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 79, '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': '1369426', 'n_tokens_mistral': 2357, 'n_tokens_neox': 2310, 'n_words': 419}