snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Separate secondary navigation from social links

Browse source 
We can now set social links using custom properties, leaving the
secondary navigation free for other things (like complying with
payment gateway standards)!
This commit is contained in:
Badri Sunderarajan 2023-02-11 18:35:18 +05:30
parent 40ba700d67
commit cb3fbfc08d
3 changed files with 51 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
default.hbs
View file

@ -48,18 +48,28 @@
{{navigation}} {{navigation}}
</div> </div>
<div class="gh-head-actions"> <div class="gh-head-actions">
{{#if @site.secondary_navigation}} <div class="gh-social">
{{navigation type="secondary"}} {{#if @site.facebook}}
{{else}} <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
<div class="gh-social"> {{/if}}
{{#if @site.facebook}} {{#if @site.twitter}}
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a> <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}} {{/if}}
{{#if @site.twitter}} {{#if @custom.mastodon_url}}
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a> <a class="gh-social-mastodon" href="{{@custom.mastodon_url}}" title="Mastodon" target="_blank" rel="noopener">
{{/if}} <svg width="16" height="16" role="img" aria-label="Mastodon icon">
</div> <use xlink:href="#mastodon"></use>
{{/if}} </svg>
</a>
{{/if}}
{{#if @custom.instagram_url}}
<a class="gh-social-instagram" href="{{@custom.instagram_url}}" title="Instagram" target="_blank" rel="noopener">
<svg width="16" height="16" role="img" aria-label="Instagram icon">
<use xlink:href="#instagram"></use>
</svg>
</a>
{{/if}}
</div>
{{#unless @member}} {{#unless @member}}
<a class="gh-head-button" href="#/portal/signup">Newsletter</a> <a class="gh-head-button" href="#/portal/signup">Newsletter</a>
@ -79,20 +89,11 @@
<footer class="site-footer outer"> <footer class="site-footer outer">
<div class="inner"> <div class="inner">
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section> <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
<div class="gh-social">
{{#if @site.secondary_navigation}} <nav class="site-footer-nav">
{{navigation type="secondary"}} {{navigation type="secondary"}}
{{else}} </nav>
<div class="gh-social">
{{#if @site.facebook}}
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}}
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{/if}}
</div>
<div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div> <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
</div> </div>
</footer> </footer>

10
package.json
View file

@ -86,6 +86,16 @@
"xl": { "xl": {
"width": 2000 "width": 2000
} }
},
"custom": {
"mastodon_url": {
"type": "text",
"default": ""
},
"instagram_url": {
"type": "text",
"default": ""
}
} }
}, },
"renovate": { "renovate": {

30
partials/navigation.hbs
View file

@ -1,19 +1,17 @@
{{#if isSecondary}} {{#if isSecondary}}
<div class="gh-social"> <ul class="nav-secondary">
{{#foreach navigation}} {{#foreach navigation}}
<a class="gh-social-{{slug}}" href="{{url}}" title="{{slug}}" target="_blank" rel="noopener"> <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
<svg width="16" height="16" role="img" aria-label="{{slug}} icon"> <a href="{{url absolute="true"}}">{{label}}</a>
<use xlink:href="#{{slug}}"></use> </li>
</svg> {{/foreach}}
</a> </ul>
{{/foreach}}
</div>
{{else}} {{else}}
<ul class="nav"> <ul class="nav">
{{#foreach navigation}} {{#foreach navigation}}
<li class="{{link_class for=(url) class=(concat "nav-" slug)}}"> <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
<a href="{{url absolute="true"}}">{{label}}</a> <a href="{{url absolute="true"}}">{{label}}</a>
</li> </li>
{{/foreach}} {{/foreach}}
</ul> </ul>
{{/if}} {{/if}}