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