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

new logo

This commit is contained in:
Andrea 2022-01-25 22:40:43 +01:00
parent 76b95c78ed
commit 4165acbf2d
14 changed files with 150 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/Header.vue
View File

@ -2,9 +2,9 @@
<div v-if="config.header" class="mb-4">
<header>
<div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`nav-item btn btn-sm ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`">
<h1 v-if="link.header" class="text-nowrap">
<Icon v="tags"/>
<Logo flag/>
<span class="higher"><T>title</T></span>
</h1>
<template v-else>
@ -21,8 +21,7 @@
<div class="text-center mb-3">
<nuxt-link to="/">
<h1 class="text-nowrap">
<Icon v="tags"/>
<span class="higher"><T>title</T></span>
<Logo flag class="me-2"/><span class="higher"><T>title</T></span>
</h1>
</nuxt-link>
<VersionDropdown/>
@ -116,10 +115,9 @@
</div>
<header v-else class="mb-4">
<div class="container">
<h1 class="text-nowrap p-4">
<h1 class="text-nowrap p-4 mb-0">
<nuxt-link to="/">
<Icon v="tags"/>
<T>title</T>
<Logo flag class="me-2"/><span class="higher"><T>title</T></span>
</nuxt-link>
</h1>
</div>
@ -433,6 +431,9 @@
height: $header-height;
padding-top: 1.2rem;
&.nav-header {
padding-top: 0.6rem;
}
margin-top: 3px;
&:first-child, &:last-child {
@ -449,6 +450,7 @@
h1 {
text-decoration: none;
margin-bottom: .5em;
.higher {
position: relative;
top: -0.1em;

94
components/Logo.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<span v-if="flag"
:class="['logo-wrapper rounded-circle d-inline-flex justify-content-center align-items-center', forceShowFlag || forceShowFlagDyn ? 'logo-flag' : '']"
:style="flagName ? `--flag: url('/flags/${flagName}.png')` : ''">
<span class="logo" v-html="svg"/>
</span>
<span v-else class="logo" v-html="svg"/>
</template>
<script>
import {Day} from "@/src/calendar/helpers";
import { calendar } from '../src/calendar/calendar';
import { ImmutableArray } from '../src/helpers';
export default {
props: {
flag: { type: Boolean },
forceShowFlag: { type: Boolean },
day: { 'default': () => Day.today() },
},
data() {
return {
svg: process.env.LOGO,
flagName: this.selectFlag(),
d: this.day,
forceShowFlagDyn: false,
};
},
mounted() {
this.$eventHub.$on('calendar-select', (d) => {
this.forceShowFlagDyn = !!d;
this.d = d;
this.flagName = this.selectFlag();
})
},
methods: {
selectFlag() {
return new ImmutableArray(...calendar.getCurrentYear().eventsByDate[(this.d || this.day).toString()])
.filter(e => e.flag && !e.flag.startsWith('_'))
.sorted((a, b) => b.level - a.level)
.groupBy(e => e.level)
.indexOrFallback(0, [0, new ImmutableArray()])[1]
.map(e => e.flag)
.randomElement();
}
}
}
</script>
<style lang="scss">
.logo-wrapper {
width: 1.3em;
height: 1.3em;
position: relative;
overflow: hidden;
&:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: var(--flag);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -5;
opacity: 0;
transition: all .25s ease-in-out;
}
}
.logo {
height: 1em;
width: 1em;
display: inline-block;
vertical-align: middle;
svg {
vertical-align: baseline !important;
}
}
.logo-wrapper.logo-flag, h1:hover .logo-wrapper {
svg path {
stroke: white;
stroke-width: 10;
}
&:before {
opacity: 1;
}
}
</style>

2
locale/pl/blog/manifest.md
View File

@ -46,7 +46,7 @@ i robi to wymuszając w takich przypadkach jeden z dwóch rodzajów gramatycznyc
Dla wielu z nas jest to przykre, pogłębiające dysforię płciową,
i wręcz zmusza nas do kłamania w niemal każdym zdaniu na temat naszej własnej płci.
Dlatego jako społeczność pracujemy nas tworzeniem i popularyzowaniem [pomysłów](/)
Dlatego jako społeczność pracujemy nas tworzeniem i popularyzowaniem [pomysłów](/zaimki)
na uczynienie języka bardziej inkluzywnym, a mniej binarnym
i mniej poddanym [męskiej dominacji językowej](https://pl.wikipedia.org/wiki/M%C4%99ska_dominacja_j%C4%99zykowa).

4
nuxt.config.js
View File

@ -14,6 +14,7 @@ const title = translations.title;
const description = translations.description;
const banner = process.env.BASE_URL + '/api/banner/zaimki.png';
const colour = '#C71585';
const logo = fs.readFileSync(__dirname + '/static/logo/logo.svg').toString('utf-8').replace('/></svg>', 'fill="currentColor"/></svg>');
process.env.LOCALE = locale;
if (process.env.ENV) {
@ -110,7 +111,7 @@ export default {
{ hid: 'twitter:image', property: 'twitter:image', content: banner },
],
link: [
{ rel: 'icon', type: 'image/svg', href: '/favicon.svg' }
{ rel: 'icon', type: 'image/svg', href: '/logo/logo-primary.svg' }
],
},
css: [],
@ -178,6 +179,7 @@ export default {
STATS_FILE: process.env.STATS_FILE,
HCAPTCHA_SITEKEY: process.env.HCAPTCHA_SITEKEY,
ALL_LOCALES_URLS: process.env.ALL_LOCALES_URLS,
LOGO: logo,
},
serverMiddleware: ['~/server/no-ssr.js', '~/server/index.js'],
axios: {

4
routes/calendar.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="year">
<div v-if="year" :class="basic ? 'py-5' : ''">
<CommunityNav v-if="!basic"/>
<h2 class="d-flex justify-content-between flex-column flex-md-row">
@ -9,7 +9,7 @@
</span>
<span v-if="basic" class="h4 mt-2">
<nuxt-link :to="`/${ config.calendar.route }`">
<Icon v="tags"/>
<Logo/>
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
</span>

2
routes/calendarDay.vue
View File

@ -10,7 +10,7 @@
</span>
<span v-if="basic" class="h4 mt-2">
<nuxt-link :to="`/${ config.calendar.route }`">
<Icon v="tags"/>
<Logo/>
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
</span>

2
routes/profileCard.vue
View File

@ -2,7 +2,7 @@
<Profile v-if="profile" :user="user" :profile="profile" class="pb-3 mt-5" expandLinks>
<nuxt-link to="/">
<h1 class="text-nowrap h5">
<Icon v="tags"/>
<Logo/>
<T>domain</T><span v-if="profile">/@{{user.username}}</span>
</h1>
</nuxt-link>

18
server/routes/banner.js
View File

@ -47,12 +47,14 @@ router.get('/banner/:pronounName*.png', handleErrorAsync(async (req, res) => {
const bg = await loadImage('static/bg.png');
context.drawImage(bg, 0, 0, width, height);
const logo = await loadImage('static/logo/logo.svg');
const logoPrimary = await loadImage('static/logo/logo-primary.svg');
const fallback = async _ => {
const logo = await loadImage('node_modules/@fortawesome/fontawesome-pro/svgs/light/tags.svg');
leftRatio = 5;
context.drawImage(logo, width / leftRatio - imageSize / 2, height / 2 - imageSize / 1.25 / 2, imageSize, imageSize / 1.25);
context.drawImage(logo, width / leftRatio - imageSize / 2, height / 2 - imageSize / 2, imageSize, imageSize);
context.font = `regular ${translations.title.length < 10 ? 120 : translations.title.length < 14 ? 80 : 72}pt '${fontName}'`;
context.fillText(translations.title, width / leftRatio + imageSize / 1.5, height / 2 + (translations.title.length < 10 ? 48 : translations.title.length < 14 ? 24 : 24));
context.fillText(translations.title, width / leftRatio + imageSize / 1.5, height / 2 + (translations.title.length < 10 ? 48 : translations.title.length < 14 ? 32 : 24));
}
if (pronounName.startsWith('@')) {
@ -69,12 +71,10 @@ router.get('/banner/:pronounName*.png', handleErrorAsync(async (req, res) => {
context.font = `regular 48pt '${fontName}'`
context.fillText('@' + user.username, width / leftRatio + imageSize, height / 2)
const logo = await loadImage('static/favicon.svg');
context.font = `regular 24pt '${fontName}'`
context.fillStyle = '#C71585';
const logoSize = 24 * 1.25;
context.drawImage(logo, width / leftRatio + imageSize, height / 2 + logoSize - 4, logoSize, logoSize / 1.25)
context.drawImage(logoPrimary, width / leftRatio + imageSize, height / 2 + logoSize - 8, logoSize, logoSize)
context.fillText(translations.title, width / leftRatio + imageSize + 36, height / 2 + 48);
return canvas.toBuffer(mime);
@ -85,14 +85,12 @@ router.get('/banner/:pronounName*.png', handleErrorAsync(async (req, res) => {
pronounName,
);
const logo = await loadImage('node_modules/@fortawesome/fontawesome-pro/svgs/light/tags.svg');
if (pronounName === 'zaimki' || (!pronoun && pronounName !== global.config.pronouns.any)) {
if (pronounName === 'zaimki' || (!pronoun && pronounName !== global.config.pronouns.any && (!global.config.pronouns || pronounName !== global.config.pronouns.mirror))) {
await fallback();
return canvas.toBuffer(mime);
}
context.drawImage(logo, width / leftRatio - imageSize / 2, height / 2 - imageSize / 1.25 / 2, imageSize, imageSize / 1.25)
context.drawImage(logo, width / leftRatio - imageSize / 2, height / 2 - imageSize / 2, imageSize, imageSize)
context.font = `regular 48pt '${fontName}'`;
context.fillText(translations.pronouns.intro + ':', width / leftRatio + imageSize / 1.5, height / 2 - 36)

29
src/helpers.js
View File

@ -229,3 +229,32 @@ const escapeChars = {
};
export const escapeHtml = (text) => text.replace(/[&<>"]/g, tag => escapeChars[tag] || tag);
export class ImmutableArray extends Array {
sorted(a, b) {
return new ImmutableArray(...[...this].sort(a, b));
}
randomElement() {
return this[Math.floor(Math.random() * this.length)];
}
groupBy(m) {
const keys = {}
const grouped = new ImmutableArray();
for (let el of this) {
const key = m(el);
if (!keys.hasOwnProperty(key)) {
keys[key] = grouped.length;
grouped.push([key, new ImmutableArray()]);
}
grouped[keys[key]][1].push(el);
}
return grouped;
}
indexOrFallback(index, fallback) {
return this.length > index ? this[index] : fallback;
}
}

1
static/favicon.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#C71585" d="M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
static/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

1
static/logo/logo-primary.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 650"><path d="M396.52 174.35c1.35-2.4.21-4.35-2.54-4.35l-48.2.03c-2.75 0-6.15 1.94-7.54 4.31l-118.1 199.77c-16.48 27.15-39.48 33.15-61.58 30.47-37.94-4.6-58.34-32.45-58.34-69.54 0-37.25 30.31-67.56 67.56-67.56h75c2.75 0 6.12-1.95 7.48-4.34l27.03-47.2c1.37-2.39.23-4.34-2.52-4.34h-107c-68.06 0-123.44 55.37-123.44 123.44 0 32.89 12.85 68.36 36.22 91.54 23.03 22.84 53.8 31.21 86.64 31.89 18.54.21 69.46-.21 93.33-42.68 26.73-47.57 136-241.44 136-241.44zM571.94 244.44c-23.03-22.84-53.8-31.21-86.64-31.89-18.54-.21-69.46.21-93.33 42.68-26.72 47.55-136 241.42-136 241.42-1.35 2.4-.21 4.35 2.54 4.35l48.2-.03c2.75 0 6.15-1.94 7.54-4.31l118.1-199.77c16.48-27.15 39.48-33.15 61.58-30.47 37.94 4.6 58.34 32.45 58.34 69.54 0 37.25-30.31 67.56-67.56 67.56h-75c-2.75 0-6.12 1.95-7.48 4.34l-27.03 47.2c-1.37 2.39-.23 4.34 2.52 4.34h107c68.06 0 123.44-55.37 123.44-123.44 0-32.87-12.85-68.34-36.22-91.52z" fill="#C71585"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 974 B

1
static/logo/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 650"><path d="M396.52 174.35c1.35-2.4.21-4.35-2.54-4.35l-48.2.03c-2.75 0-6.15 1.94-7.54 4.31l-118.1 199.77c-16.48 27.15-39.48 33.15-61.58 30.47-37.94-4.6-58.34-32.45-58.34-69.54 0-37.25 30.31-67.56 67.56-67.56h75c2.75 0 6.12-1.95 7.48-4.34l27.03-47.2c1.37-2.39.23-4.34-2.52-4.34h-107c-68.06 0-123.44 55.37-123.44 123.44 0 32.89 12.85 68.36 36.22 91.54 23.03 22.84 53.8 31.21 86.64 31.89 18.54.21 69.46-.21 93.33-42.68 26.73-47.57 136-241.44 136-241.44zM571.94 244.44c-23.03-22.84-53.8-31.21-86.64-31.89-18.54-.21-69.46.21-93.33 42.68-26.72 47.55-136 241.42-136 241.42-1.35 2.4-.21 4.35 2.54 4.35l48.2-.03c2.75 0 6.15-1.94 7.54-4.31l118.1-199.77c16.48-27.15 39.48-33.15 61.58-30.47 37.94 4.6 58.34 32.45 58.34 69.54 0 37.25-30.31 67.56-67.56 67.56h-75c-2.75 0-6.12 1.95-7.48 4.34l-27.03 47.2c-1.37 2.39-.23 4.34 2.52 4.34h107c68.06 0 123.44-55.37 123.44-123.44 0-32.87-12.85-68.34-36.22-91.52z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 959 B