Mb/11/feedback email

README.md

@@ -9,6 +9,9 @@ And I think that's sad. So I built this little app for everyone to use and creat
 - Custom message. E.g: `#OpenToFun!`
 - Starting gradient colour
 - Stopping gradient colour
+- Crop to circle / square
+- Background color
+- Text offset
 
 The app is deployed on: https://open-to-dot-dot-dot.pudr.com
 

app/components/about/index.gjs

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import GitHubLogo from 'ember-phosphor-icons/components/ph-github-logo';
+import LinkedInLogo from 'ember-phosphor-icons/components/ph-linkedin-logo';
+import Mailbox from 'ember-phosphor-icons/components/ph-mailbox';
+import TipJar from 'ember-phosphor-icons/components/ph-tip-jar';
+import Stamp from 'ember-phosphor-icons/components/ph-stamp';
+import UserCheck from 'ember-phosphor-icons/components/ph-user-check';
+import Chat from 'ember-phosphor-icons/components/ph-chat-centered-dots';
+import Coins from 'ember-phosphor-icons/components/ph-coins';
+import Detective from 'ember-phosphor-icons/components/ph-detective';
+import AboutItem from './item';
+import { inject as service } from '@ember/service';
+
+export default class About extends Component {
+  @service intl;
+
+  get items() {
+    return [
+      {
+        label: this.intl.t('about.idea.label'),
+        icon: Chat,
+        description: this.intl.t('about.idea.description'),
+      },
+      {
+        label: this.intl.t('about.pricing.label'),
+        icon: Coins,
+        description: this.intl.t('about.pricing.description'),
+      },
+      {
+        label: this.intl.t('about.privacy.label'),
+        icon: Detective,
+        description: this.intl.t('about.privacy.description'),
+      },
+      {
+        href: 'https://www.linkedin.com/posts/courtneysummer_desperate-opentowork-opentowork-activity-7241410975193513984-vexX?utm_source=share&utm_medium=member_desktop',
+        label: this.intl.t('about.original.label'),
+        icon: UserCheck,
+        description: this.intl.t('about.original.description'),
+      },
+      {
+        href: 'mailto:[email protected]?subject=%23OpenTo...%20feedback&body=Hello%20there%2C%0A%0AI%20wanted%20to%20let%20you%20know%20that%20%23OpenTo...%20%5Byour%20text%20here%5D.%0A%0AHave%20a%20nice%20day!',
+        label: this.intl.t('about.feedback.label'),
+        icon: Mailbox,
+        description: this.intl.t('about.feedback.description'),
+      },
+      {
+        href: 'https://buymeacoffee.com/michalbryxi',
+        label: this.intl.t('about.buy-me-a-coffee.label'),
+        icon: TipJar,
+        description: this.intl.t('about.buy-me-a-coffee.description'),
+      },
+      {
+        href: 'https://github.com/MichalBryxi/open-to-dot-dot-dot',
+        label: this.intl.t('about.github.label'),
+        icon: GitHubLogo,
+        description: this.intl.t('about.github.description'),
+      },
+      {
+        href: 'https://opensource.org/license/MIT',
+        label: this.intl.t('about.license.label'),
+        icon: Stamp,
+        description: this.intl.t('about.license.description'),
+      },
+    ];
+  }
+
+  <template>
+    <div class='px-4 py-5 sm:px-6'>
+
+      <div class='mt-6 border-t border-gray-100'>
+        <dl class='divide-y divide-gray-100'>
+          {{#each this.items as |item|}}
+            <AboutItem @item={{item}} />
+          {{/each}}
+        </dl>
+      </div>
+
+    </div>
+  </template>
+}

app/components/about/item.gjs

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import GitHubLogo from 'ember-phosphor-icons/components/ph-github-logo';
+import LinkedInLogo from 'ember-phosphor-icons/components/ph-linkedin-logo';
+import Mailbox from 'ember-phosphor-icons/components/ph-mailbox';
+import TipJar from 'ember-phosphor-icons/components/ph-tip-jar';
+import { t } from 'ember-intl';
+
+export default class AboutItem extends Component {
+  <template>
+    <div class='px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0'>
+      <dt class='text-sm font-medium leading-6'>
+        <@item.icon class='inline w-10 h-10 mr-2 text-purple-600' />
+        {{#if @item.href}}
+          <a
+            href='{{@item.href}}'
+            class='pr-6 text-emerald-500 font-bold underline'
+            target='_blank'
+          >
+            {{@item.label}}
+          </a>
+        {{else}}
+
+          {{@item.label}}
+        {{/if}}
+
+      </dt>
+      <dd class='mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0'>
+        {{@item.description}}
+      </dd>
+    </div>
+  </template>
+}

app/components/header/index.gjs

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import Info from 'ember-phosphor-icons/components/ph-info';
+import House from 'ember-phosphor-icons/components/ph-house';
+import { t } from 'ember-intl';
+import { ToggleButton } from '@frontile/buttons';
+import { tracked } from '@glimmer/tracking';
+import { LinkTo } from '@ember/routing';
+
+export default class Header extends Component {
+  <template>
+    <div class='flex flex-row justify-between'>
+      <div>
+        <div>
+          <LinkTo
+            @route='index'
+            @activeClass='bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%'
+            class='tracking-wider text-3xl font-black underline'
+          >
+            {{t 'application.name'}}
+          </LinkTo>
+        </div>
+        <div>
+          <span class='font-light text-gray-500'>
+            {{t 'application.subtitle'}}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <LinkTo
+          @route='about'
+          @class='text-gray-500'
+          @activeClass='text-emerald-500'
+        >
+          <Info @weight='duotone' class='w-8 h-8' />
+        </LinkTo>
+      </div>
+    </div>
+  </template>
+}

app/components/open-to/index.gjs

@@ -3,51 +3,21 @@ import { t } from 'ember-intl';
 import OpenToFiles from './files';
 import OpenToToggles from './toggles';
 import OpenToExport from './export';
-import Footer from '../footer';
 
 export default class OpenTo extends Component {
   <template>
-    <div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
-      <div class='mx-auto max-w-3xl'>
-
-        <div
-          class='divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow'
-        >
-          <div class='px-4 py-5 sm:px-6'>
-            <div>
-              <span
-                class='tracking-wider text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%'
-              >
-                {{t 'application.name'~}}
-              </span>
-            </div>
-            <div>
-              <span class='font-light text-gray-500'>
-                {{t 'application.subtitle'}}
-              </span>
-            </div>
-          </div>
-
-          <div class='px-4 py-5 sm:px-6'>
-            <div class='px-4 py-5 sm:p-6'>
-              <OpenToFiles />
-            </div>
-          </div>
-
-          <div class='px-4 py-5 sm:px-6'>
-            <OpenToToggles />
-          </div>
-
-          <div class='px-4 py-5 sm:px-6'>
-            <OpenToExport />
-          </div>
+    <div class='px-4 py-5 sm:px-6'>
+      <div class='px-4 py-5 sm:p-6'>
+        <OpenToFiles />
+      </div>
+    </div>
 
-          <div class='px-4 py-5 sm:px-6'>
-            <Footer />
-          </div>
-        </div>
+    <div class='px-4 py-5 sm:px-6'>
+      <OpenToToggles />
+    </div>
 
-      </div>
+    <div class='px-4 py-5 sm:px-6'>
+      <OpenToExport />
     </div>
   </template>
 }

app/components/open-to/toggles/index.gjs

@@ -18,10 +18,6 @@ import { Radio } from '@frontile/forms';
 export default class OpenToToggles extends Component {
   @service settings;
 
-  foo = (a, b) => {
-    console.log(a, b);
-  };
-
   <template>
     <form class='grid grid-cols-1 sm:grid-cols-3 gap-4 items-end'>
       <Input

app/router.ts

@@ -7,5 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  // Add route declarations here
+  this.route('about');
 });

app/routes/about.ts

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {}

app/routes/index.ts

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class IndexRoute extends Route {}

app/templates/about.hbs

@@ -0,0 +1,3 @@
+{{!-- {{page-title (t "page-title.about")}} --}}
+
+<About />

app/templates/application.hbs

@@ -1,5 +1,20 @@
+{{page-title (t "page-title.application")}}
+
 <div
   class="min-h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 py-8"
 >
-  <OpenTo />
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"></div>
+  <div class="mx-auto max-w-3xl">
+
+    <div
+      class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow"
+    >
+      <div class="px-4 py-5 sm:px-6">
+        <Header />
+      </div>
+
+      {{outlet}}
+
+    </div>
+  </div>
 </div>

app/templates/index.hbs

@@ -0,0 +1,3 @@
+{{!-- {{page-title (t "page-title.index")}} --}}
+
+<OpenTo />

package.json

@@ -2,8 +2,8 @@
   "name": "open-to-dot-dot-dot",
   "version": "0.0.0",
   "private": true,
-  "description": "Small description for open-to-dot-dot-dot goes here",
-  "repository": "",
+  "description": "Ever since LinkedIn has introduced the #OpenToWork / #OpenToHireoverlays for people's avatars, this feature started living a life of it's own. While some petty humans advise against using this feature, others take it to another level and own it. Sadly this feature is severely limited and apart from work/hire user has no say in customising the message. And I think that's sad. So I built this little app for everyone to use and create their custom made #OpenTo... banners.",
+  "repository": "https://github.com/MichalBryxi/open-to-dot-dot-dot",
   "license": "MIT",
   "author": "",
   "directories": {

translations/en-us.yaml

@@ -16,7 +16,32 @@ toggles:
   text-offset: Text offset
 export:
   button: Export
-footer:
-  github: GitHub
-  linked-in: Original LinkedIn post
-  tip-jar: Buy me a coffee!
+about:
+  idea:
+    label: Idea
+    description: "Ever since LinkedIn has introduced the #OpenToWork / #OpenToHireoverlays for people's avatars, this feature started living a life of it's own. While some petty humans advise against using this feature, others take it to another level and own it. Sadly this feature is severely limited and apart from work/hire user has no say in customising the message.  And I think that's sad. So I built this little app for everyone to use and create their custom made #OpenTo... banners."
+  github:
+    label: Source code
+    description: This whole app is Open Source and you can use it in any way the license permits.
+  license:
+    label: License - MIT
+    description: "Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell..."
+  original:
+    label: Original LinkedIn post by Courtney Summer Myers
+    description: "There’s been a lot of discourse about how the hashtag #OpenToWork banner puts off recruiters and hiring managers, because it makes you come across as desperate. Frankly, as a victim of redundancy, I am desperate, and I don’t think that’s anything to be ashamed of. Being laid off doesn’t reflect a lack of skills, talent or work ethic - it’s just bad luck. No one should be embarrassed that they need to pay their rent and bills, support their family, or feed themselves. Wear your hashtag #OpenToWork banner with pride, because to me, it just shows that you’re strong, resilient and optimistic - qualities any employer would be lucky to find."
+  pricing:
+    label: Pricing
+    description: Usage of this app and its products is and always will be for free. No premium features. No paywalled content. No subscriptions.
+  buy-me-a-coffee:
+    label: Buy me a coffee!
+    description: If this app made you smile and you want to support the creator, I'd be happy if you could chime in.
+  feedback:
+    label: Write me
+    description: Questions? Suggestions? Feedback? Or you'd just want to share a screenshot how you used the app? Feel free to send me an email.
+  privacy:
+    label: Privacy
+    description: This entire application works entirely in your web browser. There are no trackers installed. And I even don't collect any usage statistics on the server side.
+page-title:
+  application: "#OpenTo..."
+  index: "Avatar generator"
+  about: "About"