HowTo: Build Panel links "Your site's URL" and "Your account"

Kirby 3 Solutions 🎉
1

Pointer

Running Kirby Version 2 we had two links (“Your site’s URL” and “Your account”) on the dashboard (start page) of the Panel.

The plugin “twoPanelLinks” offers these links for Kirby Version 3 websites, where ever you need these links in the Panel:

twoPanelLinks_k3
twoPanelLinks_k3930Ă—337 11.6 KB

Plugin “twoPanelLinks”:

Required files

  • index.css:
/* file:        site/plugins/heineref_twoPanelLinks/index.css */
/* last update: 23.04.2020 by HeinerEF - https://forum.getkirby.com/u/heineref */

.k-twoPanelLinks-section{
  padding-bottom: 2rem;
}
.k-twoPanelLinks-section .twoPanelLinks a {
  display: block;
  background: white;
  line-height: 1.25em;
  box-shadow: 0 2px 5px rgba(22, 23, 26, .05);
  margin-bottom: 2px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.k-twoPanelLinks-section .twoPanelLinks a span{
  font-size: 14px;
  padding: .5rem .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.k-twoPanelLinks-section .twoPanelLinks a span:nth-child(2){
  flex: 1;
}
.k-twoPanelLinks-section .twoPanelLinks a div:nth-child(3){
  width: 10em;
  text-align: right;
}
.k-twoPanelLinks-section .twoPanelLinks a div{
  padding: .5rem .75rem;
  color: #777;
  font-size: 12px;
  line-height: 21px;
}
.k-twoPanelLinks-section .twoPanelLinks .k-icon {
  width: 38px;
  height: 38px;
}
.k-twoPanelLinks-section .twoPanelLinks .k-icon svg {
  opacity: .5;
}
.k-twoPanelLinks-section .k-collection-help {
  padding-left: 0;
}
.k-twoPanelLinks-section .k-role{
}
  • index.js:
// file:        site/plugins/heineref_twoPanelLinks/index.js
// last update: 23.04.2020 by HeinerEF - https://forum.getkirby.com/u/heineref

panel.plugin('heineref/twoPanelLinks', {
  sections: {
    panelhomepage: {
      data: function () {
        return {
          headline: null,
          help: null,
          homepage: null,
        }
      },
      created: function() {
        this.load().then(response => {
          this.headline = response.headline;
          this.help = response.help;
          this.homepage = response.homepage;
        });
      },
      template: `
        <section class="k-twoPanelLinks-section">
          <header class="k-section-header">
            <h2 class="k-headline">{{ headline }}</h2>
          </header>
          <div class="twoPanelLinks">
            <a v-for="page in homepage" :href="page.link" target="_blank"><span aria-hidden="true" data-back="pattern" class="k-icon k-icon-home"><svg viewBox="0 0 16 16" style="color: rgb(197, 201, 198);"><use xlink:href="#icon-home"></use></svg></span><span>{{ page.name }}</span></a>
          </div>
          <div data-theme="help" class="k-text k-collection-help">{{ help }}</div>
        </section>
      `
    },
    paneluser: {
      data: function () {
        return {
          headline: null,
          help: null,
          latestUser: null,
        }
      },
      created: function() {
        this.load().then(response => {
          this.headline = response.headline;
          this.help = response.help;
          this.latestUser = response.latestUser;
        });
      },
      template: `
        <section class="k-twoPanelLinks-section">
          <header class="k-section-header">
            <h2 class="k-headline">{{ headline }}</h2>
          </header>
          <div class="twoPanelLinks">
            <a v-for="user in latestUser" :href="user.link"><span aria-hidden="true" data-back="pattern" class="k-icon k-icon-user"><svg viewBox="0 0 16 16" style="color: rgb(197, 201, 198);"><use xlink:href="#icon-user"></use></svg></span><span>{{ user.name }}</span><div class="k-role">{{ user.role }}</div></a>
          </div>
          <div data-theme="help" class="k-text k-collection-help">{{ help }}</div>
        </section>
      `
    }
  }
});
  • index.php:
<?php // file:        site/plugins/heineref_twoPanelLinks/index.php
      // last update: 23.04.2020 by HeinerEF - https://forum.getkirby.com/u/heineref

Kirby::plugin('heineref/twoPanelLinks', [
  'sections' => [
    'panelhomepage' => [
      'props' => [
        'headline' => function($headline = "") {
          if ($headline == "") {
            $headline = t("view.site");
          };
          return $headline;
        },
        'help' => function($help = "") {
         return $help;
        },
      ],
      'computed' => [
        'homepage' => function() {
          $homepage = array();
          $homepage['page'] = [
            'link' => url('/'),
            'name' => kirbytextinline(site()->title()->value()),
          ];
          return $homepage;
        },
      ],
    ],
    'paneluser' => [
      'props' => [
        'headline' => function($headline = "") {
          if ($headline == "") {
            $headline = t("view.account");
          };
          return $headline;
        },
        'help' => function($help = "") {
          if ($help == "") { // to avoid the role-description: delete the whole "if ... ];" statement
            $help = kirby()->user()->role()->description();
          };
          return $help;
        },
      ],
      'computed' => [
        'latestUser' => function() {
          $latestUser = array();
          $name = kirby()->user()->name()->value();
          if ($name == '') $name = t("link");
          $latestUser['user'] = [
            'link' => 'account',
            'name' => kirbytextinline($name),
            'role' => kirbytextinline(kirby()->user()->role()->title()),
          ];
          return $latestUser;
        },
      ],
    ]
  ]
]);

Installation

  1. Put all files into a new “site/plugins/heineref_twoPanelLinks” folder:
  • index.css
  • index.js
  • index.php
  1. In the existing file “site/blueprints/site.yml” e.g. add these lines:
  - width: 1/2
    sections:
      panelhomepage:
      paneluser:

May be you have to adapt these lines to your YML code of this file if you get errors in the Panel.

You can use this at every Panel page you want. The “site.yml” is only an example (to look like Kirby 2).

Hints

  • You can also use one of these links only!
  • You can change the headline text and/or can add a help text for both add-ons:
  - width: 1/2
    sections:
      panelhomepage:
        headline: Some text 1
        help: Another text 1
      paneluser:
        headline: Some text 2
        help: Another text 2

If the case arises

If you cannot remove panel error messages, use the following file site\blueprints\site.yml:

title: Website
### site\blueprints\site.yml
columns:
  # left
  - width: 1/2
    sections:
      # a list of **all** subpages of the first level
      pages:
        type: pages
        headline:
          de: Seiten
          en: Pages
        create: # show all page types, but create only these:
          - default
          - another
        image: false
      # a list of the **site** files
      files:
        type: files
        headline:
          de: Globale Dateien
          en: Global files
        help:  "These files can be found at:  &quot;<code>/content/&lt;filename.ext&gt;</code>&quot;.<br>Use e.g.: (image&#x3a; /content/example.jpg alt&#x3a; this is an example alt text)"
  # right
  - width: 1/2
    sections:
      panelhomepage:
      paneluser:

Author

HeinerEF

Credits

Thank you for your contributions!

Disclaimer

This plugin is provided “as is” with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment.

License

MIT

It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any form of hate speech.

3 Likes