Uscreen Custom Author List Code

author-list.liquid

{{ 'author-styles.css' | stylesheet_link }}
<div class="container">
  <div id="authors_app"></div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
{{ 'authors.js' | javascript_link }}

author-styles.css

.author-img {
  border-radius: 50%;
  width: 60%;
  display: inline;
}

.author-block {
  text-align: center;
}

authors.js

new Vue({
  el: "#authors_app",
  template: `
    <div>
      <h1>Our Bakers</h1>
      <p>We've got over 10 years of experience between our team and are here to help you get started on your journey.</p>
      <div class="row">
        <a class="col-md-4 author-block" :href="filteredList[authorIndex].url" v-if="authorIndex  < filteredList.length" v-for="(author, authorIndex) in authorsToShow">
          <div>
            <img class="author-img" :src="filteredList[authorIndex].avatar_url" :alt="filteredList[authorIndex].title" />
          </div>
          <h3>{{ filteredList[authorIndex].title }}</h3>
          <p>{{ descriptionTransform(filteredList[authorIndex].description) }}</p>
        </a>
      </div>
    </div>
  `,
  data() {
    return {
      search: '',
      authors: [],
      authorsToShow: 150,
      totalAuthors: 0
    };
  },
  methods: {
    descriptionTransform: function(description) {
      if (description) {
        return description.replace(/<[^>]*>?/gm, '').split('##')[1] ? description.replace(/<[^>]*>?/gm, '').split('##')[1] : ''
      } else {
        return ''
      }
      
    }
  },
  computed: {
    filteredList() {
      return this.authors.filter(author => {
        let string = author.title.toLowerCase() + this.descriptionTransform(author.description)
        return string.includes(this.search.toLowerCase())
      })
    }
  },
  created() {
    this.totalAuthors = this.authors.length
    axios
      .get('https://YOURCOMPANYURLHERE/api/authors/')
      .then(response => this.authors = response.data)
    
  }
})

@matticusfinch With this addition of the page, the SEO does not work for me. Tell me how to fix it

I believe SEO should be outside of the scope of what this code affects, email me at [email protected] and we can explore what's up.

This is great. Any idea why using the same technique for the categories API end point doesn't work. https://DOMAIN.uscreen.io/api/categories returns a 404 despite there being categories.

Answered my own question: They no longer support authors or categories in the current API, which is here: https://uscreen.io/api/publisher#/default/

This also means the authors endpoint could go away. This is highly annoying.

It looks like the authors' page is totally broken with the pages' deprecation. Did you change the uscreen frameworks? It seems like col-md-4 doesn't have any CSS properties and we have 1 card per row.