Split out the CSS for default templates

[ErisDS]

This issue comes from PR #8105 and is also related to TryGhost/Admin#574.

In the Ghost server-side code we have 3 "default" templates, which provide some basic styles for a special page, and are allowed to be overridden by a theme.

At the moment, all 3 of these default templates get their styles by importing the ghost.css stylesheet from Ghost-Admin. However, we're trying very hard to separate out the server-side theme part of Ghost and the admin panel, and so we'd like those templates to have their own styles, which can be loaded separately.

To make it possible for us to not load the admin css for these templates, the CSS required to display these templates needs to be split out into a separate file, which can live in shared/ for now.

---

The 3 templates are:

1. The Error page: core/server/views/user-error.hbs

2. The "private" blog login page:

3. Subscribe to this blog page: core/server/apps/subscribers/lib/views/subscribe.hbs

[TienSFU25]

I'm a beginner looking to contribute. it will take a while for me to ramp up on Ember and Ghost, but can I sign up for this one anyway?

[ErisDS]

@TienSFU25 it would be great to have someone look at this - although please be aware we will need it within the next week or two. You shouldn't need to learn ember as the templates that need the styling separated are all rendered server-side. If you need a hand with anything, we all hang out in the #dev channel on our slack.

[TienSFU25]

alright, thanks!

[TienSFU25]

how do I make a new asset file that will be built and served under built/assets? I see the css files in client/app/styles but don't understand how they get bundled and end up in built.

[ErisDS]

@TienSFU25 The /built/assets folder is the output folder for the client-side code. The purpose of this issue is to move the CSS needed for these templates out of the client side (i.e. the admin panel code), into the server-side (i.e. the blog code). The new CSS file should use plain CSS & live in /shared.

[TienSFU25]

I don't have write access to the repo. Can you help with this?

[kevinansfield]

As noted in #8187, the default 404 page is also pulling the ghost-404.png image from the client built files - I think we should look at copying that too so that any front-end resources are kept in Ghost?

I don't have write access to the repo. Can you help with this?

@TienSFU25 you don't need write access to this repo, you should fork the project, make your changes on a branch and push to your fork then open a Pull Request https://help.github.com/articles/creating-a-pull-request-from-a-fork/ - If you need any help swing by our Slack channel

[ErisDS]

@TienSFU25 have you got some code for us? This change is needed before we can make others

[TienSFU25]

Yes, I will create a pr before the end of today.

[TienSFU25]

So I made 3 new CSS files, put them under /shared, and used serveSharedFile under blog/app. Then I had the .hbs files point to these CSS.

If these three template files are the only ones that need to be migrated from the client side then this should be the correct subset of CSS required. If there are more template files, I think splitting these CSS files into things like layout.css, text.css might make more sense?

If there's a better, more "Ghosty" way to do this let me know.
Also this PR doesn't handle images (there are 2 icons missing). Should I make a new issue for that?

[aileen]

Also this PR doesn't handle images (there are 2 icons missing). Should I make a new issue for that?

Thanks for pointing that out! I will update the existing #8107 to include the new svg icons in those templates as well!