Merge pull request #1107 from NullVoxPopuli/uwu

Add secret uwu/kawaii logo

Author: MinThaMie

.npmrc

@@ -0,0 +1 @@
+ignore-scripts=false

app/components/community-trends.hbs

@@ -0,0 +1,9 @@
+  {{! optional content, for meme / participating in the broader JS ecosystem, maintaining relevance }}
+  {{#if (qp 'uwu')}}
+    {{!-- lint incorrectly says this is already called out by a screen reader --}}
+    {{!-- template-lint-disable require-valid-alt-text --}}
+    <img
+      class="uwu-logo"
+      alt="ember uwu / kawaii logo (from internet trend / meme)"
+      src="/images/ember-uwu-meme.png">
+  {{/if}}

app/controllers/application.js

@@ -4,6 +4,7 @@ import headerLinks from 'ember-styleguide/constants/links';
 import replaceLinks from 'ember-website/utils/replace-links';
 
 export default class ApplicationController extends Controller {
+  queryParams = ['uwu'];
   links = replaceLinks(headerLinks);
   infoLinks = replaceLinks(infoLinks);
 }

app/helpers/qp.js

@@ -0,0 +1,10 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+export default class QP extends Helper {
+  @service router;
+
+  compute([qp]) {
+    return this.router.currentRoute?.queryParams?.[qp];
+  }
+}

app/styles/app.css

@@ -1,5 +1,6 @@
 @import "components/addon-tabs.css";
 @import "components/brand-logos.css";
+@import "components/community-trends.css";
 @import "components/ecosystem-icons.css";
 @import "components/cta-emberconf.css";
 @import "components/faqs.css";

app/styles/components/community-trends.css

@@ -0,0 +1,25 @@
+.uwu-logo {
+  position: fixed;
+  right: 50%;
+  transform: translateX(800px);
+  top: -1rem;
+  max-width: 600px;
+}
+
+@media (max-width: 1500px) {
+  .uwu-logo {
+    transform: none;
+    right: 0;
+    max-width: 400px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .uwu-logo {
+    transform: none;
+    right: unset;
+    left: 0;
+    max-width: 200px;
+  }
+}
+

app/templates/index.hbs

@@ -8,6 +8,7 @@
       <a href="https://guides.emberjs.com/release/tutorial/" class="es-button" title="New to building websites, or just want a more in-depth introduction to Ember? The tutorial is for you!">Read the Tutorial</a>
     </div>
   </div>
+  <CommunityTrends />
 </section>
 
 <section aria-labelledby="section-intro" class="bg-light">