blog added
This commit is contained in:
thomas
Vendored
+4
@@ -47,6 +47,10 @@ p.footer-link > a:hover {
|
|||||||
border-bottom: 2px solid $primary;
|
border-bottom: 2px solid $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: .6rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@extend .list;
|
@extend .list;
|
||||||
|
|||||||
+43
-33
@@ -1,55 +1,57 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="columns">
|
<div class="columns is-multiline">
|
||||||
<div v-for="article in articles" :key="article.id" class="column is-one-third">
|
<div
|
||||||
<div class="card rounded">
|
v-for="article in blog.articles.edges"
|
||||||
|
:key="article.node.id"
|
||||||
|
class="column is-full-mobile is-half-tablet is-one-third-desktop"
|
||||||
|
>
|
||||||
|
<nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
|
||||||
|
<div class="card">
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<figure class="image is-4by3">
|
<figure v-if="article.node.image !== null">
|
||||||
<img :src="article.image.src" :alt="product.images[0].altText">
|
<img
|
||||||
|
:src="article.node.image.originalSrc"
|
||||||
|
:alt="article.node.image.altText"
|
||||||
|
>
|
||||||
|
</figure>
|
||||||
|
<figure v-else class="is-flex">
|
||||||
|
<img
|
||||||
|
src="/img/no-image.jpg"
|
||||||
|
alt="image-not-found"
|
||||||
|
>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="media">
|
|
||||||
<div class="media-content">
|
|
||||||
<p class="title is-4">
|
<p class="title is-4">
|
||||||
{{ product.title }}
|
{{ article.node.title }}
|
||||||
</p>
|
</p>
|
||||||
<p class="subtitle is-6">
|
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
|
||||||
{{ product.variants[0].price }} €
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<b-button
|
<b-taglist class="is-marginless">
|
||||||
tag="router-link"
|
<b-tag
|
||||||
:to="'/products/' + product.handle"
|
v-for="tag in article.node.tags"
|
||||||
|
:key="tag"
|
||||||
|
href="#"
|
||||||
type="is-primary"
|
type="is-primary"
|
||||||
>
|
>
|
||||||
See
|
#{{ tag }}
|
||||||
</b-button>
|
</b-tag>
|
||||||
<b-button
|
</b-taglist>
|
||||||
type="is-primary"
|
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
|
||||||
icon-left="cart"
|
|
||||||
@click="addToCart(product.variants[0].id, 1)"
|
|
||||||
>
|
|
||||||
Buy
|
|
||||||
</b-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import cartMixins from '../mixins/cartMixins'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductCardList',
|
name: 'BlogCardList',
|
||||||
mixins: [cartMixins],
|
|
||||||
props: {
|
props: {
|
||||||
products: {
|
blog: {
|
||||||
type: Array,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,5 +59,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.subtitle {
|
||||||
|
height: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
figure.is-flex {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="columns">
|
<div class="columns is-multiline">
|
||||||
<div v-for="product in products" :key="product.id" class="column is-one-third">
|
<div v-for="product in products" :key="product.id" class="column is-half-tablet is-one-third-widescreen">
|
||||||
|
<nuxt-link :to="`/products/${product.handle}`">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<figure class="image is-4by3">
|
<figure class="image is-4by3">
|
||||||
@@ -18,15 +19,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<b-button
|
|
||||||
tag="router-link"
|
|
||||||
:to="'/products/' + product.handle"
|
|
||||||
type="is-primary"
|
|
||||||
>
|
|
||||||
See
|
|
||||||
</b-button>
|
|
||||||
<b-button
|
<b-button
|
||||||
type="is-primary"
|
type="is-primary"
|
||||||
icon-left="cart"
|
icon-left="cart"
|
||||||
@@ -37,6 +30,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -57,5 +51,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.card-image {
|
||||||
|
height: 22rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,10 +3,8 @@
|
|||||||
<div class="content has-text-light">
|
<div class="content has-text-light">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<p>
|
<p class="footer-link">
|
||||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
Made with ❤️, 🍺 and ☕ by <a href="https://github.com/thomas-philippot"> Thomas Philippot</a>
|
||||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>
|
|
||||||
. The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -15,13 +13,6 @@
|
|||||||
<p class="footer-link-title">
|
<p class="footer-link-title">
|
||||||
Newsletter
|
Newsletter
|
||||||
</p>
|
</p>
|
||||||
<p
|
|
||||||
v-for="i in 5"
|
|
||||||
:key="i"
|
|
||||||
class="footer-link"
|
|
||||||
>
|
|
||||||
<a href="">link {{ i }}</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
<p class="is-size-5">
|
<p class="is-size-5">
|
||||||
|
|||||||
@@ -17,13 +17,6 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
TheFooter,
|
TheFooter,
|
||||||
TheNavbar
|
TheNavbar
|
||||||
},
|
|
||||||
asyncData ({ $shopify }) {
|
|
||||||
return $shopify.collection.fetchAllWithProducts().then((collections) => {
|
|
||||||
return {
|
|
||||||
collections
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<the-navbar />
|
||||||
|
<div id="content-wrap">
|
||||||
|
<nuxt />
|
||||||
|
</div>
|
||||||
|
<the-footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import TheNavbar from '../components/TheNavbar'
|
||||||
|
import TheFooter from '../components/TheFooter'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
TheFooter,
|
||||||
|
TheNavbar
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#content-wrap {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+4
-1
@@ -26,7 +26,10 @@ export default {
|
|||||||
/*
|
/*
|
||||||
** Plugins to load before mounting the App
|
** Plugins to load before mounting the App
|
||||||
*/
|
*/
|
||||||
plugins: [{ src: '~/plugins/localStorage.js', ssr: false }],
|
plugins: [
|
||||||
|
{ src: '~/plugins/localStorage.js', ssr: false },
|
||||||
|
{ src: '~/plugins/moment', ssr: false }
|
||||||
|
],
|
||||||
/*
|
/*
|
||||||
** Nuxt.js dev-modules
|
** Nuxt.js dev-modules
|
||||||
*/
|
*/
|
||||||
|
|||||||
Generated
+16
-30
@@ -8167,6 +8167,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"moment": {
|
||||||
|
"version": "2.24.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
|
||||||
|
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
|
||||||
|
},
|
||||||
"move-concurrently": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||||
@@ -12475,8 +12480,7 @@
|
|||||||
},
|
},
|
||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@@ -12494,13 +12498,11 @@
|
|||||||
},
|
},
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@@ -12513,18 +12515,15 @@
|
|||||||
},
|
},
|
||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -12627,8 +12626,7 @@
|
|||||||
},
|
},
|
||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@@ -12638,7 +12636,6 @@
|
|||||||
"is-fullwidth-code-point": {
|
"is-fullwidth-code-point": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@@ -12651,20 +12648,17 @@
|
|||||||
"minimatch": {
|
"minimatch": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.9.0",
|
"version": "2.9.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@@ -12681,7 +12675,6 @@
|
|||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@@ -12762,8 +12755,7 @@
|
|||||||
},
|
},
|
||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@@ -12773,7 +12765,6 @@
|
|||||||
"once": {
|
"once": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@@ -12849,8 +12840,7 @@
|
|||||||
},
|
},
|
||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@@ -12880,7 +12870,6 @@
|
|||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@@ -12898,7 +12887,6 @@
|
|||||||
"strip-ansi": {
|
"strip-ansi": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@@ -12937,13 +12925,11 @@
|
|||||||
},
|
},
|
||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxtjs/axios": "^5.9.5",
|
"@nuxtjs/axios": "^5.9.5",
|
||||||
"dotenv": "^8.2.0",
|
"dotenv": "^8.2.0",
|
||||||
|
"moment": "^2.24.0",
|
||||||
"node-sass": "^4.13.1",
|
"node-sass": "^4.13.1",
|
||||||
"nuxt": "^2.11.0",
|
"nuxt": "^2.11.0",
|
||||||
"nuxt-buefy": "^0.3.23",
|
"nuxt-buefy": "^0.3.23",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="container">
|
||||||
<div v-if="checkout.lineItems.length === 0">
|
<div v-if="checkout.lineItems.length === 0">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h1 class="is-size-1">
|
<h1 class="is-size-1">
|
||||||
@@ -11,12 +11,14 @@
|
|||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h1 class="is-size-1">
|
<h1 class="is-size-1">
|
||||||
Panier
|
Cart
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-content">
|
||||||
<b-table :data="checkout.lineItems">
|
<b-table :data="checkout.lineItems">
|
||||||
<template slot-scope="props">
|
<template slot-scope="props">
|
||||||
<b-table-column field="image" label="Image">
|
<b-table-column field="image" label="Image">
|
||||||
@@ -60,6 +62,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<b-button
|
<b-button
|
||||||
type="is-primary"
|
type="is-primary"
|
||||||
@click="confirmCheckout"
|
@click="confirmCheckout"
|
||||||
|
|||||||
@@ -1,28 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="hero is-info is-medium is-bold">
|
||||||
|
<div
|
||||||
|
class="hero-body"
|
||||||
|
:style="{
|
||||||
|
backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
backgroundSize: 'cover'
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
Article {{ params }}
|
<section class="articles">
|
||||||
{{ article }}
|
<div class="card article">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-content has-text-centered">
|
||||||
|
<p class="title article-title">{{ article.title }}</p>
|
||||||
|
<div class="tags has-addons level-item">
|
||||||
|
<span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
|
||||||
|
<span class="tag is-rounded">{{ $moment(article.publishedAt).format('DD MMMM Y') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content article-body">
|
||||||
|
<p v-html="article.contentHtml" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
|
layout: 'noContainer',
|
||||||
asyncData ({ app, params }) {
|
asyncData ({ app, params }) {
|
||||||
return app.$axios({
|
return app.$axios({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: {
|
data: {
|
||||||
query: `query {
|
query: `query {
|
||||||
blogByHandle (handle:"${params.handle}") {
|
blogByHandle (handle:"${params.handle}") {
|
||||||
title,
|
|
||||||
handle
|
|
||||||
articleByHandle (handle: "${params.articleHandle}") {
|
articleByHandle (handle: "${params.articleHandle}") {
|
||||||
title,
|
title,
|
||||||
|
publishedAt,
|
||||||
contentHtml
|
contentHtml
|
||||||
authorV2 {
|
authorV2 {
|
||||||
bio,
|
name
|
||||||
firstName,
|
|
||||||
lastName
|
|
||||||
},
|
},
|
||||||
image (maxWidth: 2000) {
|
image (maxWidth: 2000) {
|
||||||
altText,
|
altText,
|
||||||
@@ -42,4 +68,24 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.articles {
|
||||||
|
margin: -200px 0 5rem;
|
||||||
|
}
|
||||||
|
.articles .content p {
|
||||||
|
line-height: 1.9;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
.media-content {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
.article {
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
.article-body {
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 6rem;
|
||||||
|
}
|
||||||
|
.hero-body {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,57 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>{{ blog.title }}</h1>
|
<h1>{{ blog.title }}</h1>
|
||||||
<div class="columns is-multiline">
|
<blog-card-list
|
||||||
<div
|
:blog="blog"
|
||||||
v-for="article in blog.articles.edges"
|
/>
|
||||||
:key="article.node.id"
|
|
||||||
class="column is-full-mobile is-half-tablet is-one-third-desktop"
|
|
||||||
>
|
|
||||||
<nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-image">
|
|
||||||
<figure v-if="article.node.image !== null">
|
|
||||||
<img
|
|
||||||
:src="article.node.image.originalSrc"
|
|
||||||
:alt="article.node.image.altText"
|
|
||||||
>
|
|
||||||
</figure>
|
|
||||||
<figure v-else class="is-flex">
|
|
||||||
<img
|
|
||||||
src="/img/no-image.jpg"
|
|
||||||
alt="image-not-found"
|
|
||||||
>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<p class="title is-4">
|
|
||||||
{{ article.node.title }}
|
|
||||||
</p>
|
|
||||||
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
|
|
||||||
<div class="content">
|
|
||||||
<b-taglist class="is-marginless">
|
|
||||||
<b-tag
|
|
||||||
v-for="tag in article.node.tags"
|
|
||||||
:key="tag"
|
|
||||||
href="#"
|
|
||||||
type="is-primary"
|
|
||||||
>
|
|
||||||
#{{ tag }}
|
|
||||||
</b-tag>
|
|
||||||
</b-taglist>
|
|
||||||
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BlogCardList from '../../../components/BlogCardList'
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
|
components: {
|
||||||
|
BlogCardList
|
||||||
|
},
|
||||||
asyncData ({ app, params }) {
|
asyncData ({ app, params }) {
|
||||||
return app.$axios({
|
return app.$axios({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -89,13 +51,4 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.subtitle {
|
|
||||||
height: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
figure.is-flex {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<section class="hero is-primary" style="margin-bottom: 2rem">
|
<section class="hero is-medium is-primary" style="margin-bottom: 2rem">
|
||||||
<div
|
<div
|
||||||
class="hero-body"
|
class="hero-body"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -17,29 +17,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<section class="articles">
|
||||||
|
<div class="card article">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="content article-body">
|
||||||
|
<p v-html="collection.descriptionHtml" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<p
|
<h2 class="is-size-4">Products in this collection</h2>
|
||||||
class="subtitle"
|
|
||||||
v-html="collection.descriptionHtml"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="hr" />
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<h2 class="is-2">Products in this collection</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<product-card-list
|
<product-card-list
|
||||||
:products="collection.products"
|
:products="collection.products"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -60,4 +56,27 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
.articles {
|
||||||
|
margin: -200px 0 5rem;
|
||||||
|
}
|
||||||
|
.articles .content p {
|
||||||
|
line-height: 1.9;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
.media-content {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
.article {
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
.article-body {
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 6rem;
|
||||||
|
}
|
||||||
|
.hero-body {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+2
-1
@@ -4,7 +4,7 @@
|
|||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h1 class="is-size-2">My home page</h1>
|
<h1 class="is-size-2">My home page</h1>
|
||||||
<p>ceci est la page d'acceuil, ce texte ne changera pas car c'est une boutique</p>
|
<p>This website is for developpement purpose, please don't try to buy something here.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,6 +43,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
layout: 'noContainer',
|
||||||
asyncData ({ app }) {
|
asyncData ({ app }) {
|
||||||
return app.$axios({
|
return app.$axios({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Policy id</h1>
|
<h1>Policy</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
|
moment.locale('fr')
|
||||||
|
Vue.use(moment)
|
||||||
|
|
||||||
|
export default ({ app }, inject) => {
|
||||||
|
app.$moment = moment
|
||||||
|
inject('moment', moment)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user