• Implement proper design for the header of the overlay no changes for now
• decide on a closing animation decided to not add one
• add a proper icon for the close button (rather than just an X)

This is a requirement that will allow for the proper implementation of features like #26 without the need for the data to be loaded via a different means.

Currently the Tag model has a hasMany relationship with posts (content). We want to be able to get the latest 3 posts directly from the Tag model without having to load all of the content and relying on implicit inverses to stitch the content together.

This may require us to finish empress/empress-blog#23

when you're in PST looking at https://deploy-preview-7--ember-blog-legacy.netlify.app/ember-homepage-survey/ shows the 29th but in GMT it shows the 20th

We can probably get rid of moment-format and just use toLocaleDateString https://dockyard.com/blog/2020/02/14/you-probably-don-t-need-moment-js-anymore

They stand out a bit too much and should probably be toned down a bit (maybe more of a link?)

Should probably be done after the extra padding is added to the <hr> on the index page #105

Current state:

• Use post-card component from #7
• Get rid of RHS tag thing
• Restyle picture, author, bio and put in middle, refer to styles in https://github.com/empress/empress-blog-casper-template/blob/master/addon/styles/addon.css

We are trying to standardise the code-sample view for the Ember websites. Currently we have a code-sample that is powered by Prism with a few extra features:

Can be seen on https://guides.emberjs.com/release/components/

There has been some work done on a newer refined design: abstract link but it needs some more work to communicate the clarity of the type of file that you are displaying

We are standardising on using https://github.com/empress/ember-showdown-prism to power all of our websites' code views so the changes to the design should likely go there 👍

There are some blogs that are making use of Markdown "blockquotes" in their content, but it seems like we don't have any design other than the default User Agent design (which is applying some indent) for blockquotes. Example:
https://empress-blog-ember-template.netlify.app/the-emberjs-times-issue-49/

We need a default design that will work with the blockquote that is produced from Markdown (i.e. no classes)

Here is the current HTML for a blockquote:

<blockquote>
  <p>Translate a directory (or set of directories) of Markdown documents into a static JSON:API.</p>
</blockquote>

and this is what it currently looks like in context of a blog:

I think we should implement this initially on the blog repo and then probably move it to ember-styleguide as we will likely need this for other sites that are making use of Markdown as their input 👍

All of the Ember blogs tend to have multiple authors. ember-ghost needs to support this so that we can 👍

We are currently using the {{excerpt}} helper to take the first 40 words to use as an "intro" on the index page.

We should be able to specify the description/intro in post yaml and if it is not present it should fallback to using `{{excerpt}}``

note: this needs to work with SEO description in ember-ghost too 👍

Older blogs need to use disqus and newer ones need to use the discourse implementation

Description

Implement the <PostCard /> component, which is used to give a summary of a particular post on the index page and also the author page.

Abstract link: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionLayerId=fb616254-a983-410a-b31b-254bee8a68c3&mode=build&selected=3275462493-E0A95F80-C807-445E-BE41-DCF99C21C86D

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

Now that we're using empress-blog we finally have author pages 🎉 which also means that we can give the authors a bit of a place to display some of their profile (if they want)

This is what we have right now: https://deploy-preview-7--ember-blog-legacy.netlify.app/author/jessica-jordan and this is an example of what you have in the empress-blog-casper-template: https://chris.manson.ie/author/chris/

Currently page 2 has a crazy query param: https://deploy-preview-7--ember-blog-legacy.netlify.app/?page=%2Fcontent%2Fcontent-1.json

We should make it work like this: https://deploy-preview-7--ember-blog-legacy.netlify.app/page/2

This work needs to actually happen in empress-blog, I have just created the issue in this repo so we can track the work

Overview

We are in the process of "Emberifying" the Ember Blog using empress-blog and this issue is related to implementing the Ember specific template that makes the new blog look the same as the old one 👍

If you run this repo locally you will see some example posts, the point of this issue is to make the site look like the existing blog:

Todo

• add enough example posts to cover the tags required in the right-hand side of the above screenshot
• copy the styles so that it has each of the sections available
• list each of the last 3 posts from the tag under the tag header
  • This will likely require some hacking on broccoli-static-site-json and it is worth taking to Chris Manson (real_ate) in the #dev-ember-learning channel in Discord

We have made sure that pagination works as expected for content accessed from the index page, but we need to make sure that content accessed from the tag and author pages also support the same form of pagination.

This will likely be something that will need to be implemented upstream in empress-blog

Instead of doing the strange pagination implementation let's show the top 3 posts as "Post cards" and just show the titles for all the rest of the posts

This is a follow on from ember-learn/ember-styleguide#209

Instead of implementing a generic sidebar component in the styleguide in one step, we should design a specific sidebar that will work for one project, and then extract the documentation and any useful components into the styleguide so that we can then move on to implement the various other sidebars in other projects.

It is possible that we might end up with a single sidebar that can cover all aspects necessary for all applications, but we shouldn't set out to try and do this as a first step 👍

In the <TagPanel /> component the listed posts are currently indented form the title of the tag section. Apparently this was a bit of a bug with the design file and they were never intended to be indented.

The design should look more like this: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionId=3dd6309b-7cfa-4735-85b2-3b10305b19ae&collectionLayerId=494a5919-3bdc-437f-8971-8a947fe05e81&present=true&preview=false&sha=9fae4344280180d331d3c43c1738b89881fa0b63

where you can see that the title of the tag section and the posts in that section are flush with each other

Description

Implement the <TagSidebar /> component. The tag sidebar consists of 3 <TagPostList /> components (see #26) with 3 following sections 'By Year', 'By Major Version', and 'By subject'

The By year section is just a list of "year based" tag links. i.e. the 2019 link will just link to /tag/2019. The same is the case for the By major version section.

the by subject is also list of links to particular tags, essentially all other tags that don't have a dedicated section. Because tags can be created later, we won't make this a static list. Instead we will filter out tags that are already shown above this section from the all tags collection 👍

Abstract link: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionLayerId=fb616254-a983-410a-b31b-254bee8a68c3&mode=build&selected=2417309410-C899CB5A-0D1F-488E-B994-7624B84ED51A

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

We are missing green padding here. Is minor but should be applied to every post page.

WAS:

IS:

Note: This is better at smaller breakpoints.

CSS conversion was: https://github.com/ember-learn/ember-blog/blob/master/source/stylesheets/blog.css.scss was copied into https://github.com/ember-learn/empress-blog-ember-template/blob/master/addon/styles/blog.scss

Do we care much about keeping the overall CSS as it was, or can I just add a padding and refine later?

Would be cool to have a link at the bottom/top of a blog post with an Edit on GitHub link/button that links to the markdown and allows easy editing for creating PRs to fix mistakes :)

Related to:
https://github.com/ember-learn/guidemaker-ember-template/blob/master/app/templates/components/guides-article.hbs#L9 is essentially the same feature but for the guides
ember-learn/ember-website#23

Description

Implement the Author page design. This is mostly there but the author name and details need to be moved slightly to match the design in Abstract

Abstract link: https://share.goabstract.com/a0507989-278d-4684-9c1c-c436eddbba2b?collectionLayerId=494a5919-3bdc-437f-8971-8a947fe05e81&mode=design

Here is an example of what it looks like currently: https://deploy-preview-7--ember-blog-legacy.netlify.app/author/matthew-beale

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

**Notes: **

• the pagination on this page has a "read more" button which does not match the Abstract. This is expected and is not part of this issue
• There is a different issue to properly style the <hr> tags ember-learn/ember-styleguide#329
• you should make sure that the tag sidebar that is available on other pages shows up on the author page (I think there is some code that is telling it to hide itself which can be removed)

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

Use same component for index page and author "index" page

right now the scroll seems to be fixed at the bottom of the page and when you click load more it gets loaded above.

we might be able to temporarily hide the button while we're loading the new data.

this might only be an issue on Android 🤔

Description

Pagination has already been implemented into empress-blog for this project, and a previous implementation of this template even had it working but it was accidentally removed during the recent changes.

Here is the code that used to be in app/templates/index.hbs:

<div class="index-pagination">
  {{#if model.links.prev}}
    {{#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>
  {{/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}}
  {{/if}}
</div>

The challenge for this issue is to implement the pagination (using the above code as an example) with the new design.

Abstract link: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionId=3dd6309b-7cfa-4735-85b2-3b10305b19ae&collectionLayerId=fb616254-a983-410a-b31b-254bee8a68c3&mode=build&selected=root-2C82C3DC-0696-49DD-B429-6953C081AF8A&sha=9fae4344280180d331d3c43c1738b89881fa0b63

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

A simple gradient box using the defined greyscale we have in ember-styleguide

bottom-right var(--color-gray-100)
top-left var(--color-gray-200)

discuss if we should allow markdown in description in data and also discuss if we should allow html from excerpt

This will be fixed in empress/empress-blog#108

This is a follow on issue to #23 that aims to list of of the things necessary to get the sidebar ready for release 👍

• Make sure everything is accessible on mobile (on desktop this component does nothing, it is just a nav)
• Implement proper design for the header of the overlay moved to #47
• decide on a closing animation moved to #47

For some reason the meta implementation is broken. Maybe we just need to make sure the {{head-data}} component is in the template but it needs to be investigated

Description

Implement the main "post" page. If you click on one of the articles in the index page you will be directed to the post page that shows the full content of a post.

Note: this page does not have a defined design for it. You should be able to implement it using the styleguide documentation (see link below). If you feel like you need some guidance please feel free to ask us in the comments on this issue, or by reaching out to us on the #st-website channel on Discord.

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

We need more space above and below the <hr> in the post-card component

You can see the start of this discussion in this issue: #26 but essentially the problem is that currently @tag.posts is not an array that is in the order of most recent to oldest.

This would ideally be something that we should fix on the "model-level" so that template authors shouldn't need to worry about it, but if that is proving too difficult before release we could always fall back to adding some logic to TagPostList that deals with this 👍

Just to be clear: the preferred solution to this is solving it on a model-level upstream in empress-blog

Description

Implement the <TagPostList /> component that takes a @tag as an argument and shows the title of that tag, a list of the latest 3 posts in that tag and a link to the tag page as the More <tagname>... link

Abstract link: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionLayerId=fb616254-a983-410a-b31b-254bee8a68c3&mode=build&selected=3275462493-2CB5668F-A874-4797-A23D-83C28BF247AC

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

Description

Implement the index page for desktop view

Abstract link: https://app.abstract.com/share/a0507989-278d-4684-9c1c-c436eddbba2b?collectionLayerId=fb616254-a983-410a-b31b-254bee8a68c3&mode=build&selected=root-79814B20-2D73-4442-9882-2450E5C85FF3

If you would like to work on this issue you can "claim" it by commenting and letting us know that you would like to work on it 👍

Note: this issue only refers to the desktop view of the index page. The mobile view is blocked by #24

Also blocked by #7 and #31

Supporting information - please read if you are new to this project

This redesign effort is powered by the new version of the Ember Styleguide. You should be able to implement everything you need for this feature by following the new documentation for the ember-styleguide but if you think there is not enough documentation please let us know and we will point you in the right direction.

In most cases you should not need any CSS to implement this issue for the blog template, you should instead be trying to make use of the helpers and components that are documented in the ember-styleguide. This is not a strict rule, there may be cases where the documentation in the ember-styleguide is lacking or some custom CSS is actually needed. If you have any questions please comment on this issue or reach out to us on the #st-website channel on the Ember Community Discord

if article.canonical 
  display this way 

Use pzuraq posts e.g. https://blog.emberjs.com/2019/03/06/coming-soon-in-ember-octane-part-4.html as a template

Currently, if you click the Ember logo in the top left of the page when you are on a blog post you will go back to the emberjs.com homepage. This is expected because of the nature of the Navbar that we have.

The problem, however, is that even though we have a lot of cross-links to certain tags in the sidebar we currently have no good way to get back to the index of the Blog 🤔

This is a general problem we will face with all of our designs but if we can find a specific solution in this project we can worry about generalising it later.

On the ember blog there is a "pinned" Featured Post: Octane is Here

We need to have a design for these sorts of posts so that they are sufficiently "visually different" so as to bring our attention to them

currently we are limited by ember-ghost's data structure. We need the ability to define random data (maybe under JSON:API meta? or just a any meta attribute) so that we can consume that metadata from the template

we should show the Ember Times logo on a post (with a conditional) if the primary tag is newsletter

We should do the same on the tag page if the tag's id is newsletter

As there are so many existing blogs on the Ember blog we need pagination to be working for this project!

Currently ember-ghost doesn't support pagination but it is something that we would like to have 👍

The main place where we would need pagination is the creation of a "collection" in the broccoli code https://github.com/empress/ember-ghost/blob/master/index.js#L76 it is creating a single "collection" from all the content (posts) using the functionality of broccoli-static-site-json https://github.com/stonecircle/broccoli-static-site-json#collections

We need to extend the implementation of collections so that it produces multiple "pages" of collections and then fix the ember-ghost implementation so that it makes use of these pages correctly 👍

We need to detect and force a reload/re-render of the comment section if the blog post we're viewing changes. If you switch to another blog post from a blog post, this does not happen meaning you see the old comment section.

In some cases the blog titles in the sidebar can be just long enough to wrap exactly one word onto the next line, which looks pretty bad. This is sometimes called a "widow" or an "orphan" and we can prevent it by replacing the last space in the line with a non breaking space  

Here is what it currently looks like:

And here is what it looks like with the fix applied to the first line:

To Do

• create a no-widow helper that will replace the last space in the text passed to it with a non-breaking space
• apply this helper to the titles of the tag sidebar

If you want to read more about widows and orphans you can see more here: https://en.wikipedia.org/wiki/Widows_and_orphans

On a small screen Safari will render the pagination in a single column instead of a double one as specified by the classes we implemented. This is an issue that needs to be solved in styleguide.

We should update styleguide when ember-learn/ember-styleguide#356 has landed.

https://empress-blog-ember-template.netlify.com/the-editor