From 4927baa0bbc873664913f22660ad75d2763db2c8 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Mon, 29 Aug 2022 14:55:21 -0700 Subject: [PATCH 1/2] Add Edit this page link --- .../site/_includes/articles.html | 15 +++++++++- .../lit-dev-content/site/_includes/docs.html | 13 ++++++++- packages/lit-dev-content/site/css/docs.css | 29 ++++++++++++++++--- .../site/images/icons/open-in-new-arrow.svg | 5 ++++ 4 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg diff --git a/packages/lit-dev-content/site/_includes/articles.html b/packages/lit-dev-content/site/_includes/articles.html index bf8f49f8d..67faaccaa 100644 --- a/packages/lit-dev-content/site/_includes/articles.html +++ b/packages/lit-dev-content/site/_includes/articles.html @@ -99,7 +99,20 @@

{{ title }}

{% endif %} {% endfor %} + {% set editableDocumentsRegex = r/articles\/article\/.+/ %} + {% if editableDocumentsRegex.test(page.inputPath) %} +

+ + Edit this page + + + +

+ {% endif %} - {% endblock %} diff --git a/packages/lit-dev-content/site/_includes/docs.html b/packages/lit-dev-content/site/_includes/docs.html index 35a256688..4a93eb86a 100644 --- a/packages/lit-dev-content/site/_includes/docs.html +++ b/packages/lit-dev-content/site/_includes/docs.html @@ -40,6 +40,7 @@

Contents: {{ title }}

{% endif %} +
@@ -99,7 +100,17 @@

{{ title }}

{% endif %} {% endfor %} +

+ + Edit this page + + + +

- {% endblock %} diff --git a/packages/lit-dev-content/site/css/docs.css b/packages/lit-dev-content/site/css/docs.css index 5560db9b2..0ba28256b 100644 --- a/packages/lit-dev-content/site/css/docs.css +++ b/packages/lit-dev-content/site/css/docs.css @@ -14,6 +14,7 @@ main { --docs-nav-color: #242424; --playground-code-background: #fafafa; --code-border: 1px solid #ddd; + --docs-on-surface-color: #3e3e3e; /* IMPORTANT: If any of the following variables change, one or both of the @media query thresholds below need to be updated. */ @@ -50,7 +51,7 @@ article { var(--docs-article-margin-horizontal); line-height: 1.8em; font-size: 0.88889em; /* 16px / 18px basis */ - color: #3e3e3e; + color: var(--docs-on-surface-color); background: white; box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%); margin-right: 2em; @@ -59,13 +60,33 @@ article { } /* ------------------------------------ - * Body text + * Exit externally link * ------------------------------------ */ -article { - color: #3E3E3E; +#edit-page-link { + height: 24px; + margin-block: 16px; + margin-block-end: 16px; + text-align: center; +} + +#edit-page-link a { + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--docs-on-surface-color); } +#edit-page-link lazy-svg::part(svg) { + height: 24px; + width: 24px; + margin-inline-start: 8px; +} + +/* ------------------------------------ + * Body text + * ------------------------------------ */ + article :not(litdev-aside) p { margin-block-start: 1.5em; margin-block-end: 1.5em; diff --git a/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg b/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg new file mode 100644 index 000000000..e3a244459 --- /dev/null +++ b/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg @@ -0,0 +1,5 @@ + + + From f93c1339f9b767d51c54ce83d806f62889c58f4a Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Mon, 29 Aug 2022 22:22:55 -0700 Subject: [PATCH 2/2] implement suggestions --- .../site/_includes/articles.html | 29 +++++++++--------- .../lit-dev-content/site/_includes/docs.html | 24 ++++++++------- packages/lit-dev-content/site/css/docs.css | 30 +++++++++---------- .../site/images/icons/edit-square.svg | 5 ++++ .../site/images/icons/open-in-new-arrow.svg | 5 ---- 5 files changed, 47 insertions(+), 46 deletions(-) create mode 100644 packages/lit-dev-content/site/images/icons/edit-square.svg delete mode 100644 packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg diff --git a/packages/lit-dev-content/site/_includes/articles.html b/packages/lit-dev-content/site/_includes/articles.html index 67faaccaa..3beccf0fb 100644 --- a/packages/lit-dev-content/site/_includes/articles.html +++ b/packages/lit-dev-content/site/_includes/articles.html @@ -55,6 +55,21 @@

{{ title }}

{% block articleContent %}{{ content | safe }}{% endblock %} + {% set editableDocumentsRegex = r/articles\/article\/.+/ %} + {% if editableDocumentsRegex.test(page.inputPath) %} +

+ + Edit this page + + + +

+ {% endif %} + {% set navItems = collections[collection] | eleventyNavigation | flattenNavigationAndAddNextPrev %} {% for item in navItems %} {% if item.url === page.url and item.parent %} @@ -99,20 +114,6 @@

{{ title }}

{% endif %} {% endfor %} - {% set editableDocumentsRegex = r/articles\/article\/.+/ %} - {% if editableDocumentsRegex.test(page.inputPath) %} -

- - Edit this page - - - -

- {% endif %} {% endblock %} diff --git a/packages/lit-dev-content/site/_includes/docs.html b/packages/lit-dev-content/site/_includes/docs.html index 4a93eb86a..0d36ecc2b 100644 --- a/packages/lit-dev-content/site/_includes/docs.html +++ b/packages/lit-dev-content/site/_includes/docs.html @@ -58,6 +58,19 @@

{{ title }}

{{ content | safe }} + +

+ + Edit this page + + + +

+ {% set navItems = collections[collection] | eleventyNavigation | flattenNavigationAndAddNextPrev %} {% for item in navItems %} {% if item.url === page.url and item.parent %} @@ -100,17 +113,6 @@

{{ title }}

{% endif %} {% endfor %} -

- - Edit this page - - - -

{% endblock %} diff --git a/packages/lit-dev-content/site/css/docs.css b/packages/lit-dev-content/site/css/docs.css index 0ba28256b..8945abfa4 100644 --- a/packages/lit-dev-content/site/css/docs.css +++ b/packages/lit-dev-content/site/css/docs.css @@ -23,8 +23,8 @@ main { --docs-toc-min-width: 5em; --docs-article-min-width: 30em; --docs-article-max-width: 49em; - --docs-article-margin-horizontal: 3em; - --docs-margin-top: 32px; + --docs-article-margin-inline: 3em; + --docs-margin-block: 32px; display: grid; grid-template-columns: @@ -38,7 +38,7 @@ main { font-family: "Open Sans", sans-serif; background: var(--color-light-gray); - padding-top: var(--docs-margin-top); + padding-block: var(--docs-margin-block); } /* ------------------------------------ @@ -47,8 +47,8 @@ main { article { max-width: var(--docs-article-max-width); - padding: var(--docs-margin-top) var(--docs-article-margin-horizontal) var(--docs-margin-top) - var(--docs-article-margin-horizontal); + padding-block: var(--docs-margin-block); + padding-inline: var(--docs-article-margin-inline); line-height: 1.8em; font-size: 0.88889em; /* 16px / 18px basis */ color: var(--docs-on-surface-color); @@ -65,16 +65,14 @@ article { #edit-page-link { height: 24px; - margin-block: 16px; - margin-block-end: 16px; - text-align: center; + margin-block-start: 2rem; + margin-block-end: 1rem; } #edit-page-link a { display: inline-flex; align-items: center; justify-content: center; - color: var(--docs-on-surface-color); } #edit-page-link lazy-svg::part(svg) { @@ -412,7 +410,7 @@ table.directory tr.subheading { #prevAndNextLinks { display: flex; justify-content: space-between; - margin-top: 3em; + margin-block-start: 0; padding-top: 1.5em; border-top: 1px solid rgb(223, 223, 223); } @@ -474,7 +472,7 @@ table.directory tr.subheading { #docsNavWrapper { position: sticky; - top: calc(var(--header-height) + var(--docs-margin-top)); + top: calc(var(--header-height) + var(--docs-margin-block)); margin-bottom: 1.5em; height: calc(100vh - var(--header-height)); display: flex; @@ -605,7 +603,7 @@ table.directory tr.subheading { #rhsToc { padding: 10px 1em 0 0; position: sticky; - top: calc(var(--header-height) + var(--docs-margin-top)); + top: calc(var(--header-height) + var(--docs-margin-block)); } /* "Contents" heading */ @@ -715,14 +713,14 @@ litdev-banner > a { * * (14 + 49 + 5 + (3 * 2)) * 18 = 1332 * | | | | +--- font-size - * | | | +------------- docs-article-margin-horizontal + * | | | +------------- docs-article-margin-inline * | | +------------------ docs-toc-min-width * | +----------------------- docs-article-max-width * +---------------------------- docs-nav-min-width */ @media (max-width: 1332px) { main { - --docs-article-margin-horizontal: 2.5em; + --docs-article-margin-inline: 2.5em; } #rhsTocWrapper { @@ -771,7 +769,7 @@ litdev-banner > a { * * (14 + 30 + 3) * 18 = 846 * | | | +------------- font-size - * | | +------------------ docs-article-margin-horizontal + * | | +------------------ docs-article-margin-inline * | +----------------------- docs-article-min-width * +---------------------------- docs-nav-min-width */ @@ -786,7 +784,7 @@ litdev-banner > a { } article { margin: auto; - --docs-article-margin-horizontal: 1.5em; + --docs-article-margin-inline: 1.5em; } .anchor { left: -1.1rem; diff --git a/packages/lit-dev-content/site/images/icons/edit-square.svg b/packages/lit-dev-content/site/images/icons/edit-square.svg new file mode 100644 index 000000000..84a3e8898 --- /dev/null +++ b/packages/lit-dev-content/site/images/icons/edit-square.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg b/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg deleted file mode 100644 index e3a244459..000000000 --- a/packages/lit-dev-content/site/images/icons/open-in-new-arrow.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -