template.hbs

{{! template-lint-disable quotes }}
<div id='index'>
  <header>
    <h1>
      {{inline-svg 'icon'}} ember-page-title
    </h1>
    <nav>
      <a href='#usage'>
        Usage
      </a>
      <a href='#playground'>
        Playground
      </a>
      <a
        href='https://github.com/adopted-ember-addons/ember-page-title'
        target='__blank'
      >
        GitHub
      </a>
    </nav>
  </header>

  <div class='hero'>
    <p>
      Page title management
      <br />
      for {{inline-svg 'ember-logo' title='Ember'}} apps
    </p>
    <a class='more' href='#installation'>
      {{inline-svg 'arrow'}}
    </a>
  </div>

  <main>
    <section id='installation'>
      <h2>
        Installation
      </h2>
      <div class='grid'>
        <WindowPane>
          <span class='ps1'>
            &gt;
          </span>
          ember install ember-page-title
        </WindowPane>
      </div>
    </section>

    <section id='playground'>
      <h2>
        Playground
      </h2>
      <div class='grid'>
        <PageTitlePane as |p|>
          <p.matryoshka @items={{@model.tokens}} as |token|>
            <code>
              {{page-title
                token.value
                replace=token.replace
                prepend=token.prepend
                separator=token.separator
              }}
              \{{<span class='helper'>page-title</span>
              "
              <TextField
                class='string'
                @value={{token.value}}
                @onchange={{fn (mut token.value)}}
                @autoresize={{true}}
              />
              "
              <span class='literal'>
                separator
              </span>
              ="
              <TextField
                class='string'
                @value={{token.separator}}
                @onchange={{fn (mut token.separator)}}
                @autoresize={{true}}
              />
              "
              <span class='literal'>
                prepend
              </span>
              =
              <BooleanField
                class='attribute'
                @value={{token.prepend}}
                @onchange={{fn (mut token.prepend)}}
              />
              <span class='literal'>
                replace
              </span>
              =
              <BooleanField
                class='attribute'
                @value={{token.replace}}
                @onchange={{fn (mut token.replace)}}
              />
              }}
            </code>
          </p.matryoshka>
          <button type='button' {{on 'click' (fn this.add @model.tokens)}}>
            Add title
          </button>
        </PageTitlePane>
      </div>
    </section>

    <section id='usage'>
      <h2>
        Usage
      </h2>
      <div class='grid'>
        <div class='info'>
          <p>
            To start using ember-page-title, add the name of your application into
            <code class='inline'>
              application.hbs
            </code>
          </p>
          <p>
            This sets the title for your application. When your application loads, you should see the title &ldquo;{{@model.title
            }}&rdquo; appear in the window. Try changing the value below to change the title of this page.
          </p>

          <Input type='text' value={{@model.title}} placeholder='My App' />
        </div>

        <WindowPane @title='templates/application.hbs'>
          <code>
            {{highlight '{{page-title "' @model.title '"}}'}}
          </code>
        </WindowPane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            By default, using the helper will allow an interaction where additional titles are appended to the root:
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}}>
            <code>
              {{highlight '{{page-title "' @model.title '"}}'}}
            </code>
            <p.template title='Posts'>
              <code>
                {{highlight '{{page-title "Posts"}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            You can change the separator by specifying the
            <code class='inline'>
              <span class='attribute'>
                separator
              </span>
            </code>
            attribute.
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}} @separator='>'>
            <code>
              {{highlight
                '{{page-title "'
                @model.title
                '" separator=" > "}}'
              }}
            </code>
            <p.template @title='Posts'>
              <code>
                {{highlight '{{page-title "Posts"}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            Separators can be changed at arbitrary levels:
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}} @separator=':'>
            <code>
              {{highlight
                '{{page-title "'
                @model.title
                '" separator=": "}}'
              }}
            </code>
            <p.template @title='Posts' @separator='>'>
              <code>
                {{highlight '{{page-title "Posts" separator=" > "}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            Titles can be prepended to the parent, by setting the
            <code class='inline'>
              <span class='attribute'>
                prepend
              </span>
            </code>
            attribute to
            <code class='inline'>
              {{highlight 'true'}}
            </code>
            .
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}} @prepend={{true}}>
            <code>
              {{highlight '{{page-title "' @model.title '" prepend=true}}'}}
            </code>
            <p.template @title='Posts'>
              <code>
                {{highlight '{{page-title "Posts"}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            This allows one to swap the order at arbitrary levels:
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}}>
            <code>
              {{highlight '{{page-title "' @model.title '"}}'}}
            </code>
            <p.template @title='Posts' @prepend={{true}}>
              <code>
                {{highlight '{{page-title "Posts" prepend=true}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            And for special templates that need to complete control over the title, set the
            <code class='inline'>
              <span class='attribute'>
                replace
              </span>
            </code>
            attribute to
            <code class='inline'>
              {{highlight 'true'}}
            </code>
            . This will only apply for that level.
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}}>
            <code>
              {{highlight '{{page-title "' @model.title '"}}'}}
            </code>
            <p.template @title='Posts' @replace={{true}}>
              <code>
                {{highlight '{{page-title "Posts" replace=true}}'}}
              </code>
              <p.template @title={{@model.post.title}}>
                <code>
                  {{highlight '{{page-title @model.post.title}}'}}
                </code>
              </p.template>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            In addition, there's no limit to the amount of titles you can put in a route:
          </p>
        </div>

        <PageTitlePane as |p|>
          <p.template @title={{@model.title}}>
            <code>
              {{highlight '{{page-title "' @model.title '"}}'}}
            </code>
            <p.template @title={{concat 'Posts | ' @model.post.title}}>
              <code>
                {{highlight '{{page-title "Posts"}}'}}
              </code>
              <code>
                {{highlight '{{page-title @model.post.title}}'}}
              </code>
            </p.template>
          </p.template>
        </PageTitlePane>
      </div>

      <div class='grid'>
        <div class='info'>
          <p>
            Dynamic tokens are available by providing multiple parameters to the helper:
          </p>
        </div>
        <PageTitlePane as |p|>
          <p.template @title='Tim Evans (@timmyce)'>
            <code>
              {{highlight
                '{{page-title blogger.name " (" blogger.handle ")"}}'
              }}
            </code>
          </p.template>
        </PageTitlePane>
      </div>
    </section>
  </main>
</div>