Skip to content

Commit 227710f

Browse files
krestainokrestaino
committed
wip: stuff
1 parent b57039a commit 227710f

File tree

5 files changed

+165
-151
lines changed

5 files changed

+165
-151
lines changed

‎pages/_article.vue

+36-108
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<template>
22
<article class="single-article">
33
<ArticleFeaturedImage
4-
v-if="featuredImage"
4+
v-if="getFeaturedImage(article, 'large')"
55
:expanded="expanded"
6-
:featured-image="featuredImage"
6+
:featured-image="getFeaturedImage(article, 'large')"
77
/>
88
<transition name="slide-fade">
9-
<div class="narrow" :class="{ expanded: expanded, 'no-featured-image': !featuredImage }">
9+
<div
10+
class="narrow"
11+
:class="{ expanded: expanded, 'no-featured-image': !getFeaturedImage(article, 'large') }"
12+
>
1013
<button
1114
class="expand-featured-image"
1215
title="Show full image"
13-
@click.prevent="expandFeaturedImage"
16+
@click.prevent="expanded = !expanded"
1417
:class="{ expanded: expanded }"
15-
v-if="featuredImage"
18+
v-if="getFeaturedImage(article, 'large')"
1619
>
1720
<svg
1821
fill="#000000"
@@ -30,8 +33,8 @@
3033
<div class="details">
3134
<span>{{ longTimestamp(article.date) }}</span>
3235
<span class="separator">|</span>
33-
<nuxt-link class="author fancy" :to="`/authors/${author.slug}`">{{
34-
author.name
36+
<nuxt-link class="author fancy" :to="`/authors/${getAuthor(article).slug}`">{{
37+
getAuthor(article).name
3538
}}</nuxt-link>
3639
</div>
3740
</div>
@@ -44,38 +47,24 @@
4447
</template>
4548

4649
<script>
47-
import * as Vibrant from 'node-vibrant';
4850
import ArticleFeaturedImage from '~/components/ArticleFeaturedImage.vue';
4951
import ArticleComments from '~/components/ArticleComments';
5052
51-
if (process.browser) {
52-
require('lightgallery.js');
53-
require('lg-zoom.js');
54-
require('lg-thumbnail.js');
55-
}
56-
5753
export default {
5854
async asyncData({ app, store, params }) {
59-
let article = await app.$axios.get(
60-
`${process.env.WORDPRESS_API_URL}/wp/v2/posts?slug=${params.article}&_embed`
61-
);
62-
store.commit('setArticle', article.data[0]);
63-
},
64-
65-
beforeMount() {
66-
if (this.featuredImage) {
67-
let img = this.article._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail
68-
.source_url;
69-
70-
Vibrant.from(img).getPalette((err, palette) => {
71-
if (!err) {
72-
this.$store.commit('setFeaturedColor', palette);
73-
}
74-
});
75-
}
55+
const { data } = await app.$axios.get(`${process.env.WORDPRESS_API_URL}/wp/v2/posts`, {
56+
params: {
57+
slug: params.article,
58+
_embed: true
59+
}
60+
});
61+
return { article: data[0] };
7662
},
7763
7864
mixins: {
65+
getAuthor: Function,
66+
getColorAccentStyles: Function,
67+
getFeaturedImage: Function,
7968
longTimestamp: Function
8069
},
8170
@@ -84,98 +73,37 @@ export default {
8473
ArticleComments
8574
},
8675
87-
computed: {
88-
article() {
89-
return this.$store.state.article;
90-
},
91-
author() {
92-
return this.$store.state.article._embedded.author[0];
93-
},
94-
featuredImage() {
95-
let featuredImage = this.$store.state.article._embedded['wp:featuredmedia'];
96-
97-
if (featuredImage) {
98-
return (
99-
featuredImage[0].media_details.sizes.large ||
100-
featuredImage[0].media_details.sizes.full ||
101-
false
102-
);
103-
} else {
104-
return null;
105-
}
106-
}
107-
},
108-
10976
data() {
11077
return {
111-
disqusReady: false,
11278
expanded: false,
11379
colorAccentStyles: null
11480
};
11581
},
11682
117-
head() {
118-
return {
119-
title: `${this.article.title.rendered} | ${this.$store.state.meta.name}`,
120-
meta: [{ description: this.article.excerpt.rendered }]
121-
};
122-
},
123-
12483
methods: {
125-
expandFeaturedImage() {
126-
if (!this.expanded) {
127-
this.$router.push({ query: { image: null } });
128-
} else {
129-
this.$router.push({ query: null });
130-
}
131-
this.expanded = !this.expanded;
132-
},
133-
loadFeaturedImageExpanded() {
134-
if (this.$route.query.image === null) {
135-
this.expanded = true;
136-
}
137-
},
138-
gallery() {
84+
initGallery() {
13985
let galleries = document.querySelectorAll('.content > .gallery');
14086
141-
for (let i = 0; i < galleries.length; i++) {
142-
lightGallery(galleries[i], {
143-
download: false,
144-
selector: 'a'
145-
});
87+
if (galleries.length) {
88+
if (process.browser) {
89+
require('lightgallery.js');
90+
require('lg-zoom.js');
91+
require('lg-thumbnail.js');
92+
}
93+
94+
for (let i = 0; i < galleries.length; i++) {
95+
lightGallery(galleries[i], {
96+
download: false,
97+
selector: 'a'
98+
});
99+
}
146100
}
147101
}
148102
},
149103
150104
mounted() {
151-
this.gallery();
152-
this.loadFeaturedImageExpanded();
153-
},
154-
155-
watch: {
156-
'$store.state.featuredColor'() {
157-
const { DarkMuted } = this.$store.state.featuredColor;
158-
159-
if (DarkMuted) {
160-
this.colorAccentStyles = `
161-
<style>
162-
html,
163-
.featured-image .image-height {
164-
background: rgb(${DarkMuted._rgb[0]},${DarkMuted._rgb[1]},${DarkMuted._rgb[2]}) !important
165-
}
166-
main a {
167-
color: rgb(${DarkMuted._rgb[0]},${DarkMuted._rgb[1]},${DarkMuted._rgb[2]}) !important
168-
}
169-
main a:hover {
170-
color: rgb(${DarkMuted._rgb[0]},${DarkMuted._rgb[1]},${DarkMuted._rgb[2]}) !important
171-
}
172-
main a::after {
173-
background: rgb(${DarkMuted._rgb[0]},${DarkMuted._rgb[1]},${DarkMuted._rgb[2]}) !important
174-
}
175-
</style>
176-
`;
177-
}
178-
}
105+
this.initGallery();
106+
this.getColorAccentStyles(this.article).then(styles => (this.colorAccentStyles = styles));
179107
}
180108
};
181109
</script>

‎pages/index.vue

+22-40
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
<template>
22
<div class="home">
33
<div class="articles">
4-
<TheHero v-if="heroArticle" :hero-article="heroArticle" />
5-
<ArticleList :articles="articles" />
4+
<TheHero :hero-article="articles[0]" />
5+
<ArticleList :articles="[...articles].slice(1)" />
66
<client-only>
7-
<InfiniteLoading
8-
v-if="indexInfiniteLoading.enabled"
9-
ref="infiniteLoading"
10-
@infinite="moreArticles"
11-
>
7+
<InfiniteLoading ref="infiniteLoading" @infinite="moreArticles">
128
<span slot="spinner">
139
<Spinner1 />
1410
</span>
@@ -23,7 +19,7 @@
2319
</InfiniteLoading>
2420
</client-only>
2521
</div>
26-
<TheSidebar :featured-articles="$store.state.featuredArticles" />
22+
<TheSidebar :featured-articles="featured" />
2723
</div>
2824
</template>
2925

@@ -37,19 +33,8 @@ import Spinner1 from '~/components/Spinner1.vue';
3733
3834
export default {
3935
async asyncData({ app, store, params }) {
40-
if (!store.state.articles.length) {
41-
let articles = await app.$axios.get(
42-
`${process.env.WORDPRESS_API_URL}/wp/v2/posts?orderby=date&per_page=10&categories_exclude=${process.env.FEATURED_ID}&_embed`
43-
);
44-
store.commit('setArticles', articles.data);
45-
}
46-
47-
if (!store.state.featuredArticles.length) {
48-
let articles = await app.$axios.get(
49-
`${process.env.WORDPRESS_API_URL}/wp/v2/posts?orderby=date&per_page=10&categories=${process.env.FEATURED_ID}&_embed`
50-
);
51-
store.commit('setFeaturedArticles', articles.data);
52-
}
36+
const { data } = await app.$axios.get(`${process.env.WORDPRESS_API_URL}/nuepress/v1/homepage`);
37+
return { articles: data.posts, featured: data.featured };
5338
},
5439
5540
components: {
@@ -61,16 +46,10 @@ export default {
6146
Spinner1
6247
},
6348
64-
computed: {
65-
articles() {
66-
return [...this.$store.state.articles].slice(1);
67-
},
68-
heroArticle() {
69-
return this.$store.state.articles[0];
70-
},
71-
indexInfiniteLoading() {
72-
return this.$store.state.indexInfiniteLoading;
73-
}
49+
data() {
50+
return {
51+
infiniteLoadingPage: 1
52+
};
7453
},
7554
7655
head() {
@@ -82,19 +61,22 @@ export default {
8261
8362
methods: {
8463
moreArticles($state) {
85-
this.indexInfiniteLoading.page++;
86-
8764
this.$axios
88-
.get(
89-
`${process.env.WORDPRESS_API_URL}/wp/v2/posts?orderby=date&per_page=10&categories_exclude=${process.env.FEATURED_ID}&page=${this.indexInfiniteLoading.page}&_embed`
90-
)
65+
.get(`${process.env.WORDPRESS_API_URL}/wp/v2/posts`, {
66+
params: {
67+
orderby: 'date',
68+
per_page: 10,
69+
categories_exclude: process.env.FEATURED_ID,
70+
page: this.infiniteLoadingPage + 1,
71+
_embed: true
72+
}
73+
})
9174
.then(response => {
92-
this.$store.commit('setArticles', response.data);
75+
this.articles = [...this.articles, ...response.data];
76+
this.infiniteLoadingPage++;
9377
$state.loaded();
9478
})
95-
.catch(() => {
96-
$state.complete();
97-
});
79+
.catch(() => $state.complete());
9880
}
9981
}
10082
};

‎plugins/mixins.js

+43
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Vue from 'vue';
22
import { differenceInDays, format, formatDistanceStrict } from 'date-fns';
3+
import * as Vibrant from 'node-vibrant';
34

45
Vue.mixin({
56
methods: {
@@ -35,6 +36,48 @@ Vue.mixin({
3536
} else {
3637
this.$router.push('/');
3738
}
39+
},
40+
41+
getAuthor(article) {
42+
return article._embedded.author[0];
43+
},
44+
45+
getFeaturedImage(article, size) {
46+
const featuredImage = article._embedded['wp:featuredmedia'];
47+
return featuredImage[0].media_details.sizes[size] || false;
48+
},
49+
50+
getColorAccentStyles(article) {
51+
return new Promise(function(resolve, reject) {
52+
const image =
53+
article._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
54+
55+
Vibrant.from(image).getPalette((err, palette) => {
56+
if (!err && palette.DarkMuted) {
57+
const { r, g, b } = palette.DarkMuted;
58+
59+
resolve(`
60+
<style>
61+
html,
62+
.featured-image .image-height {
63+
background: rgb(${r},${g},${b}) !important
64+
}
65+
main a {
66+
color: rgb(${r},${g},${b}) !important
67+
}
68+
main a:hover {
69+
color: rgb(${r},${g},${b}) !important
70+
}
71+
main a::after {
72+
background: rgb(${r},${g},${b}) !important
73+
}
74+
</style>
75+
`);
76+
} else {
77+
reject(err);
78+
}
79+
});
80+
});
3881
}
3982
}
4083
});

‎store/index.js

-3
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ export const mutations = {
2727
setArticle(state, data) {
2828
state.article = data;
2929
},
30-
setArticles(state, data) {
31-
state.articles = state.articles.concat(data);
32-
},
3330
setPage(state, data) {
3431
state.page = data;
3532
},

0 commit comments

Comments
 (0)