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)
    
  }
})

I think that today uscreen commit an update. beacuse my authors page are broken. Did they change some assets?

@niconiki was it centering of the images that broke for you? I added display: inline; to the author-img which should fix the centering, we recently added a new css library in and it looks like that broke centering. Let me know if there was another issue though.

I think that today uscreen commit an update. beacuse my authors page are broken. Did they change some assets?

@matticusfinch Thanks that works. I add it yesterday with padding too.

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

@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.