|
1 | 1 | import Component from '@glimmer/component'; |
2 | | -import EsFooterContributions from './es-footer-contributions'; |
3 | | -import EsFooterHelp from './es-footer-help'; |
4 | | -import EsFooterInfo from './es-footer-info'; |
5 | | -import EsFooterStatement from './es-footer-statement'; |
| 2 | +import EsIcon from './es-icon'; |
6 | 3 |
|
7 | 4 | import { |
8 | 5 | socialLinks, |
@@ -54,20 +51,125 @@ export default class EsFooterComponent extends Component { |
54 | 51 | Pass footer properties to support |
55 | 52 | <EsFooter @infoLinks={{someOtherLinks}} /> |
56 | 53 | --}} |
57 | | - <EsFooterInfo |
| 54 | + <FooterInfo |
58 | 55 | @infoLinks={{this.infoLinks}} |
59 | 56 | @socialLinks={{this.socialLinks}} |
60 | 57 | /> |
61 | 58 |
|
62 | | - <EsFooterHelp @contributeLink={{@contributeLink}} /> |
63 | | - <EsFooterStatement |
| 59 | + <FooterHelp @contributeLink={{@contributeLink}} /> |
| 60 | + <FooterStatement |
64 | 61 | @tagline={{this.tagline}} |
65 | 62 | @contributeLink={{@contributeLink}} |
66 | 63 | /> |
67 | 64 |
|
68 | 65 | <hr class="footer-spacer container py-0 my-3" /> |
69 | 66 |
|
70 | | - <EsFooterContributions @contributorLinks={{this.contributorLinks}} /> |
| 67 | + <FooterContributions @contributorLinks={{this.contributorLinks}} /> |
71 | 68 | </footer> |
72 | 69 | </template> |
73 | 70 | } |
| 71 | + |
| 72 | +const FooterInfo = <template> |
| 73 | + {{! template-lint-disable no-redundant-role }} |
| 74 | + <div class="footer-info container"> |
| 75 | + <div class="footer-info-links"> |
| 76 | + |
| 77 | + <img |
| 78 | + src="/images/ember-logo.svg" |
| 79 | + height="40px" |
| 80 | + width="83px" |
| 81 | + alt="" |
| 82 | + role="presentation" |
| 83 | + class="footer-logo" |
| 84 | + /> |
| 85 | + |
| 86 | + <div class="spacer"></div> |
| 87 | + |
| 88 | + {{#each @infoLinks as |link|}} |
| 89 | + <a href={{link.href}} class="info-link">{{link.name}}</a> |
| 90 | + {{/each}} |
| 91 | + </div> |
| 92 | + <div class="footer-social hide-on-mobile"> |
| 93 | + {{#each @socialLinks as |link|}} |
| 94 | + <a |
| 95 | + href={{link.href}} |
| 96 | + title={{link.title}} |
| 97 | + aria-label={{link.label}} |
| 98 | + rel="me" |
| 99 | + > |
| 100 | + <EsIcon @icon={{link.class}} /> |
| 101 | + {{link.title}} |
| 102 | + </a> |
| 103 | + {{/each}} |
| 104 | + </div> |
| 105 | + </div> |
| 106 | +</template>; |
| 107 | + |
| 108 | +class FooterHelp extends Component { |
| 109 | + get linkUrl() { |
| 110 | + return ( |
| 111 | + this.args.contributeLink || 'https://github.com/ember-learn/ember-website' |
| 112 | + ); |
| 113 | + } |
| 114 | + |
| 115 | + <template> |
| 116 | + {{! template-lint-disable no-whitespace-for-layout }} |
| 117 | + <div class="footer-help"> |
| 118 | + <p class="container py-1"> |
| 119 | + |
| 120 | + If you want help you can contact us by |
| 121 | + <a href="mailto:help@emberjs.com?subject=Help">email</a>, open an |
| 122 | + <a href="{{this.linkUrl}}/issues/new"> issue</a>, or get realtime help |
| 123 | + by joining the |
| 124 | + <a href="https://discord.gg/emberjs">Ember Discord</a>. |
| 125 | + |
| 126 | + </p> |
| 127 | + </div> |
| 128 | + </template> |
| 129 | +} |
| 130 | + |
| 131 | +class FooterStatement extends Component { |
| 132 | + constructor() { |
| 133 | + super(...arguments); |
| 134 | + |
| 135 | + this.currentYear = new Date().getUTCFullYear(); |
| 136 | + } |
| 137 | + |
| 138 | + <template> |
| 139 | + <div class="footer-statement"> |
| 140 | + <p class="footer-copyright container py-1"> |
| 141 | + © Copyright |
| 142 | + {{this.currentYear}} |
| 143 | + - |
| 144 | + <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a> |
| 145 | + <br /> |
| 146 | + {{@tagline}} |
| 147 | + {{#if @contributeLink}} |
| 148 | + <br /> |
| 149 | + <a href={{@contributeLink}}>Contribute to this page |
| 150 | + <EsIcon @icon="external-link" /></a> |
| 151 | + {{/if}} |
| 152 | + </p> |
| 153 | + </div> |
| 154 | + </template> |
| 155 | +} |
| 156 | + |
| 157 | +const FooterContributions = <template> |
| 158 | + <div class="footer-contributions-wrapper container pt-0 pb-3"> |
| 159 | + <div class="footer-contributions"> |
| 160 | + <span>Ember is generously supported by</span> |
| 161 | + <div class="sponsor-icons"> |
| 162 | + {{#each @contributorLinks as |link|}} |
| 163 | + <a |
| 164 | + href={{link.href}} |
| 165 | + title={{link.title}} |
| 166 | + aria-label={{link.title}} |
| 167 | + class="mr-2" |
| 168 | + > |
| 169 | + <EsIcon @icon={{link.class}} @class="footer-contributor-logo" /> |
| 170 | + </a> |
| 171 | + {{/each}} |
| 172 | + </div> |
| 173 | + </div> |
| 174 | + </div> |
| 175 | +</template>; |
0 commit comments