[OCTANE] change ember-core-concepts.png to use </> syntax

[muziejus]

The original png used curlies for a component. I've changed that here. I've also made an editable svg out of the file, so hopefully it'll be easier to update in the future

that said, I think this image can be made better. I think it's still confusing:

• why does findAll lead to an arrow going to the Model but not coming back?
• why does findAll talk about persisting to the web server; no changes have been made
• It's not clear that the route handler loads a template

etc. I can try to make a few changes to try and make it a bit clearer, but I want this minimum change in as a PR.

[muziejus]

Also, this version uses "free" fonts (Roboto and Source Code Pro), but it'd probably be best if the svg inherited the css from the site proper.

[rwjblue]

Would you mind sharing before/after screenshots too?

[Frozenfire92]

I love the switch to an svg in regards to maintainability. However by using non standard fonts, there is potential for it not to be consistent on every screen. For example this is how it looks for me

I suspect we also want to update this code to be in the new format

import Route from '@ember/routing/route';

export default class RentalsRoute extends Route {
  model() {
    return this.store.findAll('rental');
  }
}

<RentalTile @rental={{rental-unit}} />

[muziejus]

@Frozenfire92: I agree. I think it should adopt the fonts used in the css for the guides. I haven't yet done that. Let me try that now.

[muziejus]

As for the native class syntax on the Route, I left it as is because the octane guides so far also don't have native class syntax in Routing. See, for example,

https://github.com/ember-learn/guides-source/blob/octane/guides/release/routing/specifying-a-routes-model.md

[Frozenfire92]

looking at the Routing section in #588 nothing is completed. I suspect class syntax is desired, but would like confirmation from ember core team :)

[muziejus]

That was my thinking too!

I'm working on the text spacing stuff now to see if I can get it to play nicely w/ different fonts.

[muziejus]

OK, here are the before and after, now that I've cleaned up the svg somewhat.

[Frozenfire92]

Noting this looks ok on Chrome and Safari on OSX but looks weird in Firefox

[muziejus]

I added text anchors for the first lines of the code, so hopefully that should fix the firefox problem (this is how the image looks in firefox to me).

[muziejus]

OK I took away WIP since I think this is ready for review?

[mixonic]

@muziejus thanks for this work! Can you also make the variable in the template rentalUnit instead of rental-unit? I'm not sure why the latter is being suggested, we commonly use javaScriptStandardCamelCase for variables in templates.

[Frozenfire92]

Didn't mean to suggest that, just was fixing up the already there example

100% right though, should be rentalUnit

[muziejus]

Good catch, @mixonic . As @Frozenfire92 suggested, that was already in the original. I was more reacting to the lack of angle bracket syntax and completely overlooked the kebab-case!

[jenweber]

This is such an improvement! Thanks @muziejus for your patience with the back & forth. I'm merging this, and if there are any other outstanding changes people were looking for (browser compatibility), let's hit those in separate PRs.

Nice work!