new logo - blog post

components/LanguageVersions.vue

@@ -12,7 +12,7 @@
                 </a>
             </li>
             <li>
-                <LocaleLink locale="en" link="/blog/creating-new-language-version" class="small">
+                <LocaleLink locale="en" link="/new-version" class="small">
                     <Icon v="plus"/>
                     <T>localise.shorter</T>
                 </LocaleLink>

components/VersionDropdown.vue

@@ -23,7 +23,7 @@
                 </li>
                 <li class="dropdown-divider"></li>
                 <li>
-                    <LocaleLink locale="en" link="/blog/creating-new-language-version" class="dropdown-item small">
+                    <LocaleLink locale="en" link="/new-version" class="dropdown-item small">
                         <Icon v="plus"/>
                         <T>localise.shorter</T>
                     </LocaleLink>

locale/en/blog/new-logo.md

@@ -0,0 +1,35 @@
+# Our new logo
+
+<small>2022-01-28 | Collective</small>
+
+Pronouns.page started as a simple, tiny project – and its logo reflected that fact:
+it was just a generic icon of tags (representing pronouns and labels).
+But with more features, more traffic, more users, and more team members
+came new needs, new ideas, and the talent and skills necessary to make them come true.
+
+We needed a more distinctive logo for the project.
+And today we are very proud to present it! Look how awesome it looks! 😍
+
+![The new Pronouns.page logo: two letters “P”, one rotated 180 degrees, styled so that their vertical lines form a slash](/img-local/blog/new-logo.png)
+
+It was designed by [詩央 / Shio](/@shio_o). In a simple yet distinctive shape she managed to combine four important meanings:
+
+1. `(   /   )`, pronoun indicator, as in “Alex (they/them)” – to symbolise **pronouns**, 
+2. ԀP – double P – stands for **P**ronouns.**P**age
+3. [中](https://en.wiktionary.org/wiki/%E4%B8%AD) – a Han character meaning center/middle
+   (pronounced “zhōng” in Mandarin, “chuu” or “naka” in Japanese) –
+   symbolising **neutrality** (as in: gender neutral language),
+4. 🔗 – a link symbol – representing **human connection**.
+
+Thanks to [Daniel/Kris](/@CtrlAltGr) we can also present the new logo and the idea behind it using a cool video: 
+
+// (TODO) not the actual video, I just put it here to test embedding from peertube,
+replace the placeholder with the proper video once it's finished ;) 
+
+{embed=//videos.trom.tf/videos/embed/90252742-5e91-4e2f-9de8-2907a21cdd81=67. Moderating the Fediverse}
+
+The new logo comes with an extra little feature:
+[Andrea](/@andrea) made sure that hovering your mouse over the logo in the header will reveal
+a flag related to a celebration from the [Queer Calendar](/calendar) on the current day.
+
+Hope y'all like it as much as we do 😉

locale/en/config.suml

@@ -328,6 +328,13 @@ calendar:
 census:
     enabled: false
 
+blog:
+    shortcuts:
+        name: 'why-the-name'
+        history: 'project-history'
+        logo: 'new-logo'
+        new-version: 'creating-new-language-version'
+
 redirects:
     - { from: '^/blog/neutral-language-council$', to: '/team' }
 

routes/contact.vue

@@ -34,7 +34,7 @@
             <p>
                 <Icon v="language"/>
                 <T>localise.long</T>
-                <LocaleLink locale="en" link="/blog/creating-new-language-version">
+                <LocaleLink locale="en" link="/new-version">
                     <T>localise.longLink</T>
                 </LocaleLink>
             </p>

server/routes/banner.js

@@ -54,7 +54,7 @@ router.get('/banner/:pronounName*.png', handleErrorAsync(async (req, res) => {
             leftRatio = 5;
             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 ? 32 : 24));
+            context.fillText(translations.title, width / leftRatio + imageSize / 1.5, height / 2 + (translations.title.length < 10 ? 48 : translations.title.length < 14 ? 36 : 24));
         }
 
         if (pronounName.startsWith('@')) {

src/parseMarkdown.js

@@ -8,6 +8,7 @@ export default async function parseMarkdown(markdown) {
                 .replace(/<a href="http/g, '<a target="_blank" rel="noopener" href="http')
                 .replace(/<p>{details=(.+?)}<\/p>(.+?)<p>{\/details}<\/p>/gms, '<details class="border mb-3"><summary class="bg-light p-3">$1</summary><div class="border-top p-3 bg-white">$2</div></details>')
                 .replace(/<img (.*?)>/g, '<img $1 class="border">')
+                .replace(/{embed=\/\/(.+?)=(.+?)}/g, '<div style="position: relative;height: 0;padding-bottom: 56.25%;"><iframe src="https://$1" title="$2" allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups" style="position: absolute;top: 0; left: 0;width: 100%;height: 100%;border:0;"></iframe></div>')
             + '</div>'
         ;
         const titleMatch = content.match('<h1[^>]*>([^<]+)</h1>');