KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[card] make people chose light or dark mode

This commit is contained in:
Avris 2021-10-13 21:56:39 +02:00
parent 4de6994510
commit cb2d328d03
4 changed files with 116 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
migrations/037-card-dark.sql Normal file
View File

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

50
routes/profile.vue
View File

@ -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 v-if="profile.cardDark" :href="profile.cardDark" target="_blank" rel="noopener"
<a :href="profile.card.replace('.png', '-dark.png')" 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 {

124
server/cards.js
View File

@ -23,75 +23,83 @@ 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(); const profiles = (await db.all(`
while (true) {
await sleep(3000);
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');
return;
}
const results = {}
try {
const pr = new Pageres({
darkMode: mode === 'dark',
delay: 3,
scale: 2,
});
for (let {locale, username} of profiles) {
console.log(`Shooting @${username} (${locale}, ${mode})`);
pr.src(urlBases[locale] + username, ['1024x300'])
}
for (let buffer of await pr.run()) {
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/);
const locale = domainLocaleMap[domain];
results[locale + '/' + username] = buffer;
}
} catch (e) {
console.error(e);
return;
}
for (let {id, locale, username} of profiles) {
const cardId = ulid();
let key = `card/${locale}/${username}-${cardId}.png`;
if (mode === 'dark') {
key = mode === 'dark' ? key.replace('.png', '-dark.png') : key;
}
console.log(`Uploading @${username} (${locale}, ${mode}) – ${cardId}`);
const buffer = results[locale + '/' + username.replace(/\.+$/, '')];
if (buffer === undefined) {
console.error('Cannot find the proper buffer!');
continue; continue;
} }
const results = { const s3putResponse = await s3.putObject({
'light': {}, Key: key,
'dark': {}, Body: buffer,
} ContentType: 'image/png',
ACL: 'public-read',
}).promise();
try { await db.get(`
for (let mode of modes) { UPDATE profiles
const pr = new Pageres({ SET ${mode === 'dark' ? 'cardDark' : 'card'}='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}'
darkMode: mode === 'dark', WHERE id='${id}'`
delay: 3, );
scale: 2, }
}); }
for (let {locale, username} of profiles) { (async () => {
console.log(`Shooting @${username} (${locale}, ${mode})`); const db = await dbConnection();
pr.src(urlBases[locale] + username, ['1024x300']) while (true) {
} for (let mode of modes) {
await sleep(3000);
for (let buffer of await pr.run()) { console.log(`Starting mode: ${mode}`)
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/); await shoot(db, mode);
const locale = domainLocaleMap[domain];
results[mode][locale + '/' + username] = buffer;
}
}
} catch (e) {
console.error(e);
continue;
}
for (let {id, locale, username} of profiles) {
const cardId = ulid();
const key = `card/${locale}/${username}-${cardId}.png`;
for (let mode of modes) {
console.log(`Uploading @${username} (${locale}, ${mode}) – ${cardId}`);
const buffer = results[mode][locale + '/' + username.replace(/\.+$/, '')];
if (buffer === undefined) {
console.error('Cannot find the proper buffer!');
continue;
}
const s3putResponse = await s3.putObject({
Key: mode === 'dark' ? key.replace('.png', '-dark.png') : key,
Body: buffer,
ContentType: 'image/png',
ACL: 'public-read',
}).promise();
}
await db.get(`UPDATE profiles SET card='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}' WHERE id='${id}'`)
} }
} }
})(); })();

23
server/routes/profile.js
View File

@ -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'});
} }
await req.db.get(SQL` if (req.query.dark === '1') {
UPDATE profiles await req.db.get(SQL`
SET card = '' UPDATE profiles
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL SET cardDark = ''
`); WHERE userId=${req.user.id} AND locale=${global.config.locale} AND cardDark IS NULL
`);
} else {
await req.db.get(SQL`
UPDATE profiles
SET card = ''
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;