new logo

components/Header.vue

@@ -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"/>
+                        <Logo flag class="me-2"/><span class="higher"><T>title</T></span>
-                        <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"/>
+                    <Logo flag class="me-2"/><span class="higher"><T>title</T></span>
-                    <T>title</T>
                 </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;

components/Logo.vue

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

locale/pl/blog/manifest.md

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

nuxt.config.js

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

routes/calendar.vue

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

routes/calendarDay.vue

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

routes/profileCard.vue

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

server/routes/banner.js

@@ -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 && (!global.config.pronouns || pronounName !== global.config.pronouns.mirror))) {
-
-        if (pronounName === 'zaimki' || (!pronoun && pronounName !== global.config.pronouns.any)) {
             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)
 

src/helpers.js

@@ -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;
+    }
+}

static/favicon.svg

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

static/logo/logo-primary.svg

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

static/logo/logo.svg

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