Skip to content

Instantly share code, notes, and snippets.

@matticusfinch

matticusfinch/author-list.liquid

Last active June 12, 2023 17:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save matticusfinch/e13629b59d43f6140612cf8d522087fa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save matticusfinch/e13629b59d43f6140612cf8d522087fa to your computer and use it in GitHub Desktop.
Download ZIP
Uscreen Custom Author List Code
Raw
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 }}
Raw
author-styles.css
.author-img {
border-radius: 50%;
width: 60%;
display: inline;
}
.author-block {
text-align: center;
}
Raw
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)
}
})
@Polkilof
Copy link

Polkilof commented Mar 30, 2021

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

@matticusfinch
Copy link
Author

matticusfinch commented Apr 12, 2021

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

@aripap
Copy link

aripap commented Feb 19, 2022 •
edited
Loading

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.

@niconiki
Copy link

niconiki commented Jun 12, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment