Skip to content

[WIP] Tag implementation #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[WIP] Tag implementation #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b51634
Add dummy tags
amyrlam Jun 28, 2019
37ee2da
WIP tag work
amyrlam Jul 23, 2019
4a0bf1b
removing console.log and fixing tag page
mansona Aug 26, 2019
e41f515
Hide version tags from "browse by subject"
kennethlarsen Sep 3, 2019
c0c40c1
add recent times posts to sidebar
kennethlarsen Jan 6, 2020
0170044
list latest releases
kennethlarsen Jan 6, 2020
6cd2757
minor tag improvements
kennethlarsen Jan 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions addon/components/tag-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,64 @@ import Component from '@ember/component';
import layout from '../templates/components/tag-sidebar';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';
import { filter } from '@ember/object/computed';

export default Component.extend({
router: service(),

showSidebar: computed('router.currentRouteName', function() {
fiteredTags: filter('tags.[]', ['yearTags'], function (tag) {
let individualIgnoredTags = [
'releases',
'new',
];

let allIgnoredTags = [
...individualIgnoredTags,
...this.yearTags.map(tag => tag.id),
...this.versionTags.map(tag => tag.id),
]

return !allIgnoredTags.includes(tag.id);
}),

yearTags: filter('tags.[]', function (tag) {
// console.log(tag.id, tag.id.match(/^20\d\d$/))
return tag.id.match(/^20\d\d$/);
}),

specificVersionTags: filter('tags.[]', function (tag) {
return tag.id.match(/^3.\d$/) || tag.id.match(/^2.\d$/) || tag.id.match(/^1.\d$/)
}),

newsletterTags: filter('tags.[]', function (tag) {
if (tag.id.match(/^newsletter/)) {
return tag;
}
}),

versionTags: filter('tags.[]', function (tag) {
let versionTags = [
"3",
"2",
"1",
"version-1-x",
"version-2-x",
"version-3-x"
]

let allIgnoredTags = [
...versionTags,
... this.specificVersionTags.map(tag => tag.id)
]

return allIgnoredTags.includes(tag.id);
}),

showSidebar: computed('router.currentRouteName', function () {
if (this.router.currentRouteName === 'author') {

return false;
}
}
return true;
}),

Expand Down
130 changes: 58 additions & 72 deletions addon/templates/components/tag-sidebar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,66 @@
{{#if showSidebar}}
<aside class="sidebar" role="complementary">
<div class="blog-sidebar">
<h3 class="list-group-title" id="recent-posts">Recent Posts</h3>
<ul class="list-group" aria-labelledby="recent-posts">
{{!-- <% blog.tags['Recent Posts'].sort_by(&:date).reverse.take(3).each_with_index do |article, i| %>
<li class='list-item'><%= link_to article.title, article %></li>
<% end %> --}}
<li class="list-item"><a href="<%= tag_path 'Recent posts'%>">More Recent Posts...</a></li>
</ul>
<aside class="sidebar" role="complementary">
<div class="blog-sidebar">
<h3 class="list-group-title" id="recent-posts">Recent Posts</h3>
<ul class="list-group" aria-labelledby="recent-posts">
{{!-- TODO: Add recent posts --}}
{{!-- {{#each this.recentPosts as |tag|}}
<li class="list-item">{{#link-to 'tag' tag}}{{tag.name}}{{/link-to}}</li>
{{/each}} --}}
</ul>

<h3 class="list-group-title" id="releases">Releases</h3>
<ul class="list-group" aria-labelledby="releases">
{{!-- <% blog.tags['Releases'].sort_by(&:date).reverse.take(3).each_with_index do |article, i| %>
<li class='list-item'><%= link_to article.title, article %></li>
<% end %> --}}
<li class="list-item"><a href="<%= tag_path 'Releases'%>">More Releases...</a></li>
</ul>
<h3 class="list-group-title" id="releases">Releases</h3>
<ul class="list-group" aria-labelledby="releases">
{{#each this.specificVersionTags as |tag|}}
{{#each tag.posts as |post|}}
<li class="list-item">{{#link-to "post" post}}{{post.title}}{{/link-to}}</li>
{{/each}}
{{/each}}
<li class="list-item">{{#link-to "tag" "releases"}}More Releases...{{/link-to}}</li>
</ul>

<h3 class="list-group-title" id="newsletter">Ember.js Times</h3>
<ul class="list-group" aria-labelledby="newsletter">
{{!-- <% blog.tags['Newsletter'].sort_by(&:date).reverse.take(3).each_with_index do |article, i| %>
<li class='list-item'><%= link_to article.title, article %></li>
<% end %> --}}
<li class="list-item"><a href="<%= tag_path 'Newsletter'%>">More Issues...</a></li>
</ul>
<h3 class="list-group-title" id="newsletter">Ember.js Times</h3>
<ul class="list-group" aria-labelledby="newsletter">
{{#each this.newsletterTags as |tag|}}
{{#each tag.posts as |post|}}
<li class="list-item">{{#link-to "post" post}}{{post.title}}{{/link-to}}</li>
{{/each}}

{{/each}}
<li class="list-item">{{#link-to "tag" "newsletter"}}More Newsletters...{{/link-to}}</li>

<h3 class="list-group-title" id="browse-year">Browse by Year</h3>
<ul class="list-group" aria-labelledby="browse-year">
<li class="list-item list-inline">
<a href="<%= tag_path '2012'%>">2012</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2013'%>">2013</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2014'%>">2014</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2015'%>">2015</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2016'%>">2016</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2017'%>">2017</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path '2018'%>">2018</a>
</li>
</ul>
</ul>

<h3 class="list-group-title" id="browse-version">Browse by Major Version</h3>
<ul class="list-group" aria-labelledby="browse-version">
<li class="list-item list-inline">
<a href="<%= tag_path 'version 1.x'%>">1.x</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path 'version 2.x'%>">2.x</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path 'version 3.x'%>">3.x</a>
</li>
</ul>

<h3 class="list-group-title" id="browse-subject">Browse by Subject</h3>
<ul class="list-group" aria-labelledby="browse-subject">
<li class="list-item"><a href="<%= tag_path 'Announcement'%>">Announcements</a></li>
<li class="list-item"><a href="<%= tag_path 'Ember CLI'%>">Ember CLI</a></li>
<li class="list-item"><a href="<%= tag_path 'Ember Data'%>">Ember Data</a></li>
<li class="list-item"><a href="<%= tag_path 'Newsletter'%>">Newsletter</a></li>
<li class="list-item"><a href="<%= tag_path 'Performance'%>">Performance</a></li>
<li class="list-item"><a href="<%= tag_path 'Roadmap'%>">Roadmap</a></li>
<li class="list-item"><a href="<%= tag_path 'Security'%>">Security</a></li>
<li class="list-item"><a href="<%= tag_path 'Testing'%>">Testing</a></li>
</ul>
</div>
</aside>
<h3 class="list-group-title" id="browse-year">Browse by Year</h3>
<ul class="list-group" aria-labelledby="browse-year">
{{#each this.yearTags as |tag|}}
<li class="list-item">{{#link-to 'tag' tag}}{{tag.name}}{{/link-to}}</li>
{{/each}}

<li class="list-item">{{#link-to "tag" "releases"}}More Releases...{{/link-to}}</li>

</ul>

<h3 class="list-group-title" id="browse-version">Browse by Major Version</h3>
<ul class="list-group" aria-labelledby="browse-version">
<li class="list-item list-inline">
<a href="<%= tag_path 'version 1.x'%>">1.x</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path 'version 2.x'%>">2.x</a>
</li>
<li class="list-item list-inline">
<a href="<%= tag_path 'version 3.x'%>">3.x</a>
</li>
</ul>

<h3 class="list-group-title" id="browse-subject">Browse by Subject</h3>
<ul class="list-group" aria-labelledby="browse-subject">
{{#each fiteredTags as |tag|}}
<li class="list-item">{{#link-to "tag" tag}}{{tag.name}}{{/link-to}}</li>
{{/each}}
</ul>
</div>
</aside>
{{/if}}
41 changes: 21 additions & 20 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{{#es-header}}
{{#es-navbar}}
{{/es-navbar}}
{{#es-navbar}}
{{/es-navbar}}
{{/es-header}}

<div class="site-wrapper container">


{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
<div class='main'>
{{outlet}}
</div>

{{tag-sidebar}}

{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
<div class='main'>
{{outlet}}
</div>

{{tag-sidebar tags=model.tags model=model.content}}

</div>

Expand All @@ -20,26 +20,27 @@
{{!-- The big email subscribe modal content --}}
{{#if labs.subscribers}}
<div id="subscribe" class="subscribe-overlay">
<a class="subscribe-overlay-close" href="#"></a>
<div class="subscribe-overlay-content">
{{#if blog.logo}}
<img class="subscribe-overlay-logo" src="{{blog.logo}}" alt="{{blog.title}}" />
{{/if}}
<h1 class="subscribe-overlay-title">Subscribe to {{blog.title}}</h1>
<p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight to your inbox</p>
{{subscribe_form placeholder="[email protected]"}}
</div>
<a class="subscribe-overlay-close" href="#"></a>
<div class="subscribe-overlay-content">
{{#if blog.logo}}
<img class="subscribe-overlay-logo" src="{{blog.logo}}" alt="{{blog.title}}" />
{{/if}}
<h1 class="subscribe-overlay-title">Subscribe to {{blog.title}}</h1>
<p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight
to your inbox</p>
{{subscribe_form placeholder="[email protected]"}}
</div>
</div>
{{/if}}

{{!-- <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script> --}}

{{#if pagination.pages}}
<script>
var maxPages = parseInt('{{pagination.pages}}');
var maxPages = parseInt('{{pagination.pages}}');
</script>
{{!-- <script src="{{asset "js/infinitescroll.js"}}"></script> --}}
{{/if}}

{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}}
{{ghost_foot}}
1 change: 0 additions & 1 deletion app/templates/error.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<section class="error-message">
{{log model}}
<h1 class="error-code">{{model.errors.0.status}}</h1>
<p class="error-description">{{model.errors.0.title}}</p>
{{#link-to 'index' class="error-link"}}Go to the front page →{{/link-to}}
Expand Down
20 changes: 10 additions & 10 deletions app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<h1 class="text-left">News & Updates</h1>
{{#each (sort-by 'date:asc' model) as |article|}}
{{post-card article=article}}
<hr>
{{post-card article=article}}
<hr>
{{/each}}
<div class="index-pagination">
{{#if model.links.prev}}
{{#link-to 'index' (query-params page=model.links.prev) class="newer-posts"}}
Newer articles
{{/link-to}}
{{#link-to 'index' (query-params page=model.links.prev) class="newer-posts"}}
Newer articles
{{/link-to}}
{{else}}
<a class="newer-posts disabled" href="javascript:void(0)" aria-disabled="true">Newer articles</a>
<a class="newer-posts disabled" href="javascript:void(0)" aria-disabled="true">Newer articles</a>
{{/if}}

<span class="page-number">Page {{pageNumber}} of {{numerOfPages}}</span>

{{#if model.links.next}}
{{#link-to 'index' (query-params page=model.links.next) class="older-posts"}}
Older articles
{{/link-to}}
{{#link-to 'index' (query-params page=model.links.next) class="older-posts"}}
Older articles
{{/link-to}}
{{/if}}
</div>
</div>
40 changes: 20 additions & 20 deletions app/templates/tag.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{if tag.feature_image 'no-cover'}}" style="{{if tag.feature_image coverImageStyle}}">
<div class="inner">
{{site-nav}}
<div class="site-header-content">
<h1 class="site-title">{{titleize model.tag}}</h1>
<h2 class="site-description">
{{#if tag.description}}
{{tag.description}}
{{else}}
A collection of {{model.posts.length}} posts
{{/if}}
</h2>
</div>
<div class="inner">
<div class="site-header-content">
{{log model}}
<h1 class="site-title">{{titleize model.name}}</h1>
<h2 class="site-description">
{{#if model.content}}
{{model.content}}
{{else}}
A collection of {{model.posts.length}} posts
{{/if}}
</h2>
</div>
</div>
</header>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="post-feed">
{{#each model.posts as |post|}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{post-card post=post}}
{{/each}}
</div>
<div class="inner">
<div class="post-feed">
{{#each model.posts as |post|}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{post-card article=post}}
{{/each}}
</div>
</main>
</div>
</main>
Loading