Introduce an "Edit this page" link

[e111077]

Fixes #450

There is now a link at the bottom of every doc and article Links to test:

https://pr919-f93c133---lit-dev-5ftespv5na-uc.a.run.app//docs/
https://pr919-f93c133---lit-dev-5ftespv5na-uc.a.run.app//articles/lit-for-polymer-users

[github-actions]

A live preview of this PR will be available at the URL(s) below.
The latest URL will be appended to this comment on each push.
Each build takes ~5-10 minutes, and will 404 until finished.

https://pr919-613d21e---lit-dev-5ftespv5na-uc.a.run.app/
https://pr919-4927baa---lit-dev-5ftespv5na-uc.a.run.app/
https://pr919-f93c133---lit-dev-5ftespv5na-uc.a.run.app/

[justinfagnani]

I feel like the edit button is a bit too prominent. Given that our pages are mostly flat, and this button looks like a raised FAB, in the Material paradigm this would be the primary action of a page.

Do we have some other examples of an edit link that's more subtle? Could maybe also combine this with a "lasted updated on..." text? (I know that may be harder because we need to look at file write times, but maybe 11ty already pipes that through?)

[augustjk]

Most other call to edits I've seen are a bit more subtle, and require scrolling all the way to the bottom of the page. Last updated probably needs to grab the last git commit date for the file which seems extra.

[e111077]

Can create a link at the bottom of the page. Also "last edited x" we added it to the articles but I think only because that info can actually get stale which I don't think is necessarily the case for the docs.

[justinfagnani]

Can create a link at the bottom of the page.

The bottom of docs pages looks a little weird to me currently, with the page content background just running right into the footer. Can we fix this up a little at the same time? ie, add a bit of margin so that the bottom of the content area looks like the top, then put the edit link below:

cc @aomarks @arthurevans

[e111077]

Updated to a link at the bottom of the page. LMK what you think. Esp about the text e.g. should it be Suggest an edit to this page

[aomarks]

The bottom of docs pages looks a little weird to me currently, with the page content background just running right into the footer. Can we fix this up a little at the same time? ie, add a bit of margin so that the bottom of the content area looks like the top, then put the edit link below:

How about putting the link inside the white part of the page, above the table of contents? That's how Vue does it: https://vuejs.org/guide/reusability/custom-directives.html#directive-hooks I think the left aligned looks a bit better too.

[aomarks]

The bottom of docs pages looks a little weird to me currently, with the page content background just running right into the footer. Can we fix this up a little at the same time? ie, add a bit of margin so that the bottom of the content area looks like the top, then put the edit link below:

How about putting the link inside the white part of the page, above the table of contents? That's how Vue does it: https://vuejs.org/guide/reusability/custom-directives.html#directive-hooks I think the left aligned looks a bit better too.

The "Edit Square" icon (square with pencil in it) (https://fonts.google.com/icons) also seems better than the "Open in New" icon used in the latest commit, since we want to suggest an "edit" action. The current icon just reads as "external link" to me.

[justinfagnani]

How about putting the link inside the white part of the page, above the table of contents?

That looks pretty good there. I like the left alignment and "Edit this page on GitHub" text too.

[e111077]

Did the changes. Also added justin's suggestion for the padding on the docs

[e111077]

quick ping on this to move up your inbox for tomorrow