[card] make people chose light or dark mode
This commit is contained in:
parent
4de6994510
commit
cb2d328d03
|
@ -0,0 +1,7 @@
|
||||||
|
-- Up
|
||||||
|
|
||||||
|
ALTER TABLE profiles ADD COLUMN cardDark TEXT NULL;
|
||||||
|
|
||||||
|
UPDATE profiles SET cardDark = replace(card, '.png', '-dark.png') WHERE card IS NOT NULL;
|
||||||
|
|
||||||
|
-- Down
|
|
@ -36,27 +36,31 @@
|
||||||
<Icon v="id-card"/>
|
<Icon v="id-card"/>
|
||||||
<T>profile.card.link</T>:
|
<T>profile.card.link</T>:
|
||||||
</small>
|
</small>
|
||||||
<small v-if="profile.card === null">
|
<small v-if="profile.card === null && profile.cardDark === null">
|
||||||
<button class="btn btn-outline-success btn-sm" @click="generateCard">
|
(<T>profile.card.generate</T>)
|
||||||
<T>profile.card.generate</T>
|
<button class="btn btn-outline-success btn-sm" @click="generateCard(false)">
|
||||||
|
<Icon v="sun"/>
|
||||||
|
<T>mode.light</T>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-success btn-sm" @click="generateCard(true)">
|
||||||
|
<Icon v="moon"/>
|
||||||
|
<T>mode.dark</T>
|
||||||
</button>
|
</button>
|
||||||
</small>
|
</small>
|
||||||
<small v-else-if="profile.card === ''">
|
<small v-else-if="profile.card === '' || profile.cardDark === ''">
|
||||||
<Spinner/>
|
<Spinner/>
|
||||||
<T>profile.card.generating</T>
|
<T>profile.card.generating</T>
|
||||||
</small>
|
</small>
|
||||||
<template v-if="profile.card">
|
<a v-if="profile.card" :href="profile.card" target="_blank" rel="noopener"
|
||||||
<a :href="profile.card" target="_blank" rel="noopener"
|
|
||||||
class="btn btn-outline-success btn-sm mx-1">
|
class="btn btn-outline-success btn-sm mx-1">
|
||||||
<Icon v="sun"/>
|
<Icon v="sun"/>
|
||||||
<T>mode.light</T>
|
<T>mode.light</T>
|
||||||
</a>
|
</a>
|
||||||
<a :href="profile.card.replace('.png', '-dark.png')" target="_blank" rel="noopener"
|
<a v-if="profile.cardDark" :href="profile.cardDark" target="_blank" rel="noopener"
|
||||||
class="btn btn-outline-success btn-sm mx-1">
|
class="btn btn-outline-success btn-sm mx-1">
|
||||||
<Icon v="moon"/>
|
<Icon v="moon"/>
|
||||||
<T>mode.dark</T>
|
<T>mode.dark</T>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Profile>
|
</Profile>
|
||||||
|
@ -152,13 +156,13 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async generateCard() {
|
async generateCard(dark) {
|
||||||
await this.$axios.$post(`/profile/request-card`);
|
await this.$axios.$post(`/profile/request-card?dark=${dark ? '1' : '0'}`);
|
||||||
this.profile.card = '';
|
this.profile[dark ? 'cardDark' : 'card'] = '';
|
||||||
this.startCheckingForCard();
|
this.startCheckingForCard();
|
||||||
},
|
},
|
||||||
startCheckingForCard() {
|
startCheckingForCard() {
|
||||||
if (this.cardCheckHandle || !this.profile || this.profile.card) {
|
if (this.cardCheckHandle || !this.profile || this.profile.card || this.profile.cardDark) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.cardCheckHandle = setInterval(this.checkForCard, 3000);
|
this.cardCheckHandle = setInterval(this.checkForCard, 3000);
|
||||||
|
@ -166,9 +170,9 @@
|
||||||
async checkForCard() {
|
async checkForCard() {
|
||||||
try {
|
try {
|
||||||
const card = await this.$axios.$get(`/profile/has-card`);
|
const card = await this.$axios.$get(`/profile/has-card`);
|
||||||
console.log(card);
|
if (card.card || card.cardDark) {
|
||||||
if (card) {
|
this.profile.card = card.card;
|
||||||
this.profile.card = card;
|
this.profile.cardDark = card.cardDark;
|
||||||
clearInterval(this.cardCheckHandle);
|
clearInterval(this.cardCheckHandle);
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
|
|
|
@ -23,32 +23,24 @@ const sleep = ms => new Promise(res => setTimeout(res, ms));
|
||||||
|
|
||||||
const modes = ['light', 'dark'];
|
const modes = ['light', 'dark'];
|
||||||
|
|
||||||
(async () => {
|
const shoot = async (db, mode) => {
|
||||||
const db = await dbConnection();
|
|
||||||
while (true) {
|
|
||||||
await sleep(3000);
|
|
||||||
|
|
||||||
const profiles = (await db.all(`
|
const profiles = (await db.all(`
|
||||||
SELECT profiles.id, profiles.locale, users.username
|
SELECT profiles.id, profiles.locale, users.username
|
||||||
FROM profiles
|
FROM profiles
|
||||||
LEFT JOIN users on profiles.userId = users.id
|
LEFT JOIN users on profiles.userId = users.id
|
||||||
WHERE profiles.card = ''
|
WHERE profiles.${mode === 'dark' ? 'cardDark' : 'card'} = ''
|
||||||
ORDER BY RANDOM()
|
ORDER BY RANDOM()
|
||||||
LIMIT 6
|
LIMIT 6
|
||||||
`)).filter(({locale}) => !isHighLoadTime(locale));
|
`)).filter(({locale}) => !isHighLoadTime(locale));
|
||||||
|
|
||||||
if (profiles.length === 0) {
|
if (profiles.length === 0) {
|
||||||
console.log('No profiles in the queue');
|
console.log('No profiles in the queue');
|
||||||
continue;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const results = {
|
const results = {}
|
||||||
'light': {},
|
|
||||||
'dark': {},
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
for (let mode of modes) {
|
|
||||||
const pr = new Pageres({
|
const pr = new Pageres({
|
||||||
darkMode: mode === 'dark',
|
darkMode: mode === 'dark',
|
||||||
delay: 3,
|
delay: 3,
|
||||||
|
@ -63,20 +55,23 @@ const modes = ['light', 'dark'];
|
||||||
for (let buffer of await pr.run()) {
|
for (let buffer of await pr.run()) {
|
||||||
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/);
|
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/);
|
||||||
const locale = domainLocaleMap[domain];
|
const locale = domainLocaleMap[domain];
|
||||||
results[mode][locale + '/' + username] = buffer;
|
results[locale + '/' + username] = buffer;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
continue;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let {id, locale, username} of profiles) {
|
for (let {id, locale, username} of profiles) {
|
||||||
const cardId = ulid();
|
const cardId = ulid();
|
||||||
const key = `card/${locale}/${username}-${cardId}.png`;
|
let key = `card/${locale}/${username}-${cardId}.png`;
|
||||||
for (let mode of modes) {
|
if (mode === 'dark') {
|
||||||
|
key = mode === 'dark' ? key.replace('.png', '-dark.png') : key;
|
||||||
|
}
|
||||||
|
|
||||||
console.log(`Uploading @${username} (${locale}, ${mode}) – ${cardId}`);
|
console.log(`Uploading @${username} (${locale}, ${mode}) – ${cardId}`);
|
||||||
const buffer = results[mode][locale + '/' + username.replace(/\.+$/, '')];
|
|
||||||
|
const buffer = results[locale + '/' + username.replace(/\.+$/, '')];
|
||||||
|
|
||||||
if (buffer === undefined) {
|
if (buffer === undefined) {
|
||||||
console.error('Cannot find the proper buffer!');
|
console.error('Cannot find the proper buffer!');
|
||||||
|
@ -84,14 +79,27 @@ const modes = ['light', 'dark'];
|
||||||
}
|
}
|
||||||
|
|
||||||
const s3putResponse = await s3.putObject({
|
const s3putResponse = await s3.putObject({
|
||||||
Key: mode === 'dark' ? key.replace('.png', '-dark.png') : key,
|
Key: key,
|
||||||
Body: buffer,
|
Body: buffer,
|
||||||
ContentType: 'image/png',
|
ContentType: 'image/png',
|
||||||
ACL: 'public-read',
|
ACL: 'public-read',
|
||||||
}).promise();
|
}).promise();
|
||||||
|
|
||||||
|
await db.get(`
|
||||||
|
UPDATE profiles
|
||||||
|
SET ${mode === 'dark' ? 'cardDark' : 'card'}='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}'
|
||||||
|
WHERE id='${id}'`
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await db.get(`UPDATE profiles SET card='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}' WHERE id='${id}'`)
|
(async () => {
|
||||||
|
const db = await dbConnection();
|
||||||
|
while (true) {
|
||||||
|
for (let mode of modes) {
|
||||||
|
await sleep(3000);
|
||||||
|
console.log(`Starting mode: ${mode}`)
|
||||||
|
await shoot(db, mode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -51,6 +51,7 @@ const fetchProfiles = async (db, username, self, isAdmin) => {
|
||||||
credentialsLevel: profile.credentialsLevel,
|
credentialsLevel: profile.credentialsLevel,
|
||||||
credentialsName: profile.credentialsName,
|
credentialsName: profile.credentialsName,
|
||||||
card: profile.card,
|
card: profile.card,
|
||||||
|
cardDark: profile.cardDark,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return p;
|
return p;
|
||||||
|
@ -224,11 +225,19 @@ router.post('/profile/request-card', handleErrorAsync(async (req, res) => {
|
||||||
return res.status(400).json({error: 'Missing user'});
|
return res.status(400).json({error: 'Missing user'});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (req.query.dark === '1') {
|
||||||
|
await req.db.get(SQL`
|
||||||
|
UPDATE profiles
|
||||||
|
SET cardDark = ''
|
||||||
|
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND cardDark IS NULL
|
||||||
|
`);
|
||||||
|
} else {
|
||||||
await req.db.get(SQL`
|
await req.db.get(SQL`
|
||||||
UPDATE profiles
|
UPDATE profiles
|
||||||
SET card = ''
|
SET card = ''
|
||||||
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL
|
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL
|
||||||
`);
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
return res.json('OK');
|
return res.json('OK');
|
||||||
}));
|
}));
|
||||||
|
@ -239,12 +248,12 @@ router.get('/profile/has-card', handleErrorAsync(async (req, res) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const card = await req.db.get(SQL`
|
const card = await req.db.get(SQL`
|
||||||
SELECT card
|
SELECT card, cardDark
|
||||||
FROM profiles
|
FROM profiles
|
||||||
WHERE userId=${req.user.id} AND locale=${global.config.locale}
|
WHERE userId=${req.user.id} AND locale=${global.config.locale}
|
||||||
`);
|
`);
|
||||||
|
|
||||||
return res.json(card ? card.card : null);
|
return res.json(card);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|
Reference in New Issue