mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-26 22:43:06 -04:00
23a3862ca0
- Adds a new test suite with Docker-based smoke tests for all locales. Can be run using the ./smoketest.sh script. - Replaces all calls to Math.random() with a new helper that returns 0.5 in snapshot testing mode, ensuring deterministic snapshots. - Similarly replaces all calls to new Date() and Date.now() with new helpers that return a fixed date in snapshot testing mode. - Replaces checks against NODE_ENV with APP_ENV, to ensure that the bundles can be built with Nuxt for testing without losing code that would otherwise be stripped out by production optimizations. - Adds a database init script that can be used to initialize the database with a single admin user and a long-lived JWT token for use in automation tests. - Adds a JWT decoding/encoding CLI tool for debugging JWTs. Note: Snapshots are not checked in, and must be generated manually. See test/__snapshots__/.gitignore for more information.
70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<template>
|
|
<section v-show="products.length > 0">
|
|
<div ref="columnist" class="row columnist-wall">
|
|
<div v-for="product in products" class="col-6 col-md-3 pb-3 columnist-column">
|
|
<a :href="product.onlineStoreUrl" target="_blank" rel="noopener" class="card hover-shadow text-decoration-none">
|
|
<img :src="product.images[0].src" :alt="product.title" class="card-img-top">
|
|
<div class="card-footer text-center small">
|
|
{{ product.title }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<a href="https://shop.pronouns.page" target="_blank" rel="noopener" class="btn btn-primary">
|
|
<Icon v="shopping-bag" />
|
|
shop.pronouns.page
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import Columnist from 'avris-columnist';
|
|
import { shallowRef } from 'vue';
|
|
|
|
import { random } from '~/src/helpers.ts';
|
|
|
|
export default {
|
|
setup() {
|
|
return {
|
|
// use shallowRef because the Spotify API returns some proxy itself which does not work well when
|
|
// Vue wraps it into another proxy
|
|
products: shallowRef([]),
|
|
};
|
|
},
|
|
async mounted() {
|
|
if (!this.$config.public.shopifyStorefrontToken) {
|
|
return;
|
|
}
|
|
|
|
await this.$loadScript('shopify', 'https://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js');
|
|
|
|
if (typeof window.ShopifyBuy === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const client = window.ShopifyBuy.buildClient({
|
|
domain: 'shop.pronouns.page',
|
|
storefrontAccessToken: this.$config.public.shopifyStorefrontToken,
|
|
});
|
|
|
|
client.product.fetchAll().then((products) => {
|
|
this.products = products
|
|
.filter((product) => product.availableForSale)
|
|
.sort(() => 0.5 - random())
|
|
.slice(0, 4);
|
|
|
|
const columnist = new Columnist(this.$el.querySelector('.columnist-wall'));
|
|
columnist.start();
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
section {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|