Merge pull request #39 from empress/on-this-page

Implement "on this page"
empress · Apr 21, 2023 · b9674b6 · b9674b6
2 parents aee79da + 6635f9b
commit b9674b6
Show file tree

Hide file tree

Showing 13 changed files with 998 additions and 519 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -57,14 +57,11 @@ jobs:
           - ember-lts-3.24
           - ember-lts-3.28
           - ember-release
-          - ember-beta
-          - ember-canary
           - ember-default-with-jquery
           - ember-classic
           - embroider-safe
           - embroider-optimized
           - no-deprecations
-          - ember-release-no-deprecations
 
     steps:
       - uses: actions/checkout@v2
@@ -78,3 +75,39 @@ jobs:
 
       - name: test
         run: npx ember try:one ${{ matrix.ember-try-scenario }} --skip-cleanup
+
+  allow-fail-try-scenarios:
+    name: ${{ matrix.try-scenario }} - Allowed to fail
+    runs-on: ubuntu-latest
+    needs: 'test'
+
+    permissions:
+      pull-requests: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        try-scenario:
+          - ember-canary
+          - ember-beta
+          - ember-release-no-deprecations
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 14.x
+          cache: npm
+      - run: npm i -g npm@8
+      - run: npm ci
+
+      - run: npm run build
+      - name: test
+        id: tests
+        run: node_modules/.bin/ember try:one ${{ matrix.ember-try-scenario }} --skip-cleanup
+        continue-on-error: true
+      - uses: mainmatter/continue-on-error-comment@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          outcome: ${{ steps.tests.outcome }}
+          test-id: ${{ matrix.try-scenario }}
diff --git a/addon/components/on-this-page.hbs b/addon/components/on-this-page.hbs
@@ -0,0 +1,14 @@
+{{#if @toc}}
+  <div class="on-this-page-wrapper">
+    On this page
+    <hr>
+    <ul>
+      {{#each @toc as |toc|}}
+        <li>
+          <a href="#{{toc.id}}">{{toc.text}}</a>
+        </li>
+      {{/each}}
+    </ul>
+    {{yield}}
+  </div>
+{{/if}}
diff --git a/addon/styles/_layout.scss b/addon/styles/_layout.scss
@@ -1,4 +1,89 @@
-body > div.ember-view {
+main {
+  display: grid;
+  grid-template-columns: 22em 1fr;
+}
+
+article {
+  padding: 3em 0 3em 2em;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 30em) and (max-width: 85em) {
+  main {
+    grid-template-columns: 18em 1fr;
+  }
+}
+
+.guides-article-wrapper {
+  display: grid;
+  gap: 2em;
+  grid-template-columns: 1fr 18em;
+}
+
+.guides-article-content {
+  max-width: 100%;
+}
+
+.on-this-page-wrapper {
+  margin-top: .6em;
+}
+
+@media (max-width: 95em) {
+  .guides-article-wrapper {
+    display: flex;
+  }
+
+  .on-this-page-wrapper {
+    display: none;
+  }
+}
+
+@media (max-width: 54em) {
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  article {
+    padding: 3em 0;
+  }
+}
+
+@media screen and (min-width: 54em) {
+  .sidebar {
+    border-bottom: 0;
+    border-right: 1px solid #F8E7CF;
+    padding: 3em 1.618em 3em 0;
+  }
+
+  .sidebar:last-child {
+    margin-right: 0;
+  }
+
+  label[for="toc-toggle"] {
+    display: none;
+  }
+
+  .toc-container {
+    display: block;
+  }
+
+  .toc-container[style] {
+    display: block !important;
+  }
+}
+
+.container {
+  // max-width: 80em;
+  // margin-left: auto;
+  // margin-right: auto;
+  padding: 0 2em;
+}
+
+body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;

diff --git a/addon/styles/_on-this-page.scss b/addon/styles/_on-this-page.scss
@@ -0,0 +1,8 @@
+.on-this-page-wrapper ul {
+  list-style: none;
+  padding: 0;
+}
+
+.on-this-page-wrapper a {
+  text-decoration: none;
+}
diff --git a/addon/styles/_table-of-contents.scss b/addon/styles/_table-of-contents.scss
@@ -65,11 +65,6 @@ label[for="toc-toggle"]:after {
   border-color: transparent transparent #b67d47 transparent;
   border-width: 0 4px 5px 4px;
 }
-@media screen and (min-width: 53.75em) {
-  label[for="toc-toggle"] {
-    display: none;
-  }
-}
 
 .toc-container.versions {
   border-top: 1px solid #F8E7CF;
@@ -83,15 +78,7 @@ label[for="toc-toggle"]:after {
 .toc-toggle:checked ~ .toc-container {
   display: block;
 }
-@media screen and (min-width: 53.75em) {
-  .toc-container {
-    display: block;
-  }
 
-  .toc-container[style] {
-    display: block !important;
-  }
-}
 
 .toc-container a {
   text-decoration: none;

diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
@@ -1210,18 +1210,6 @@ body {
   background-color: #FDFDFD;
   margin: 0;
 }
-@media screen and (min-width: 53.75em) {
-  main {
-    display: flex;
-  }
-}
-
-.container {
-  max-width: 80em;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 1em;
-}
 
 .space-between {
   justify-content: space-between;
@@ -1242,51 +1230,12 @@ body {
   position: relative;
   z-index: 1;
 }
-@media screen and (min-width: 53.75em) {
-  .sidebar {
-    float: left;
-    display: block;
-    margin-right: 2.35765%;
-    width: 27.49666%;
-    border-bottom: 0;
-    border-right: 1px solid #F8E7CF;
-    padding: 3em 1.618em 3em 0;
-  }
-
-  .sidebar:last-child {
-    margin-right: 0;
-  }
 
-  .sidebar::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: -100vw;
-    content: "";
-    display: block;
-    background-color: #FFFDF9;
-    z-index: -1;
-  }
-}
 
 .sidebar .ember-power-select-trigger {
   margin-bottom: 1em;
 }
 
-article {
-  padding: 3em 0;
-  @media screen and (min-width: 53.75em) {
-    float: left;
-    display: block;
-    margin-right: 2.35765%;
-    width: 70.14568%;
-  }
-  &:last-child {
-    margin-right: 0;
-  }
-}
-
 article .edit-page {
   height: 18px;
   width: 24px;
@@ -1555,3 +1504,4 @@ article.x404 img {
 @import "footer";
 @import "layout";
 @import "code";
+@import "on-this-page";
diff --git a/app/components/on-this-page.js b/app/components/on-this-page.js
@@ -0,0 +1 @@
+export { default } from 'guidemaker-default-template/components/on-this-page';
diff --git a/app/templates/components/guides-article.hbs b/app/templates/components/guides-article.hbs
@@ -1,22 +1,30 @@
 {{! template-lint-disable link-rel-noopener simple-unless no-curly-component-invocation }}
-{{#unless (eq @version @currentVersion)}}
-  <div class="old-version-warning">
-    <i class="icon-attention-circled"></i><strong>Old Guides - </strong>You are viewing the guides for {{this.guidemaker.title}} {{@version}}.
+<div class="guides-article-wrapper">
+  <div class="guides-article-content">
+    {{#unless (eq @version @currentVersion)}}
+      <div class="old-version-warning">
+        <i class="icon-attention-circled"></i><strong>Old Guides - </strong>You are viewing the guides for {{this.guidemaker.title}} {{@version}}.
 
-    <LinkTo @route='version.show' @models={{array 'release' @path}} class="btn"> VIEW {{@currentVersion}} </LinkTo>
-  </div>
-{{/unless}}
+        <LinkTo @route='version.show' @models={{array 'release' @path}} class="btn"> VIEW {{@currentVersion}} </LinkTo>
+      </div>
+    {{/unless}}
+
+    {{#if this.guidemaker.sourceRepo}}
+      <a href="{{this.guidemaker.sourceRepo}}/edit/master/guides/{{unless (eq this.page.currentVersion 'release') (concat this.page.currentVersion '/')}}{{@model.id}}.md"
+      target="_blank" class="edit-page icon-pencil">Edit Page</a>
+    {{/if}}
 
-{{#if this.guidemaker.sourceRepo}}
-  <a href="{{this.guidemaker.sourceRepo}}/edit/master/guides/{{unless (eq this.page.currentVersion 'release') (concat this.page.currentVersion '/')}}{{@model.id}}.md"
-  target="_blank" class="edit-page icon-pencil">Edit Page</a>
-{{/if}}
+    <h1>
+      {{this.page.currentPage.title}}
+    </h1>
+    <hr>
 
-<h1>
-  {{this.page.currentPage.title}}
-</h1>
-<hr>
+    {{markdown-to-html @model.content extensions='showdown-section-groups'}}
 
-{{markdown-to-html @model.content extensions='showdown-section-groups'}}
+    {{chapter-links pages=@pages}}
+  </div>
 
-{{chapter-links pages=@pages}}
+  <div class="guides-article-toc">
+    <OnThisPage @toc={{@model.toc}} />
+  </div>
+</div>
diff --git a/app/templates/version/index.hbs b/app/templates/version/index.hbs
@@ -1,2 +1,2 @@
 {{!-- template-lint-disable no-curly-component-invocation --}}
-{{guides-article model=@model.content pages=@model.pages path='index' version=@model.version currentVersion=@model.currentVersion}}
+{{guides-article model=@model.content pages=@model.pages path='index' version=@model.version currentVersion=@model.currentVersion}}
diff --git a/app/templates/version/show.hbs b/app/templates/version/show.hbs
@@ -1,2 +1,2 @@
 {{!-- template-lint-disable no-curly-component-invocation no-implicit-this --}}
-{{guides-article model=@model.content pages=@model.pages path=@model.path version=@model.version currentVersion=@model.currentVersion}}
+{{guides-article model=@model.content pages=@model.pages path=@model.path version=@model.version currentVersion=@model.currentVersion}}
diff --git a/config/ember-try.js b/config/ember-try.js
@@ -11,6 +11,7 @@ module.exports = async function () {
         npm: {
           devDependencies: {
             'ember-source': '~3.16.0',
+            'ember-maybe-in-element': '2.0.3',
           },
         },
       },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from 'guidemaker-default-template/components/on-this-page';
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ module.exports = async function () { @@
             npm: {
               devDependencies: {
                 'ember-source': '~3.16.0',
+                'ember-maybe-in-element': '2.0.3',
               },
             },
           },
@@ Expand Down @@