Adds multiple pages based on different config files #177

luixal · 2021-01-07T08:54:45Z

Description

As proposed in the related issue, this PR allows to have multiple pages based on different config files.

How does this work?

In the links section, you can add a page with a related path, for example (look at the "Second page"):

links:
  - name: "Contribute"
    icon: "fab fa-github"
    url: "https://github.com/bastienwirtz/homer"
    target: "_blank" # optional html a tag target attribute
  - name: "Second Page"
    icon: "fas fa-file-alt"
    url: "/page2"

When you navigate to this link, Homer will load the assets/config.yml file and the assets/page2.yml file; then it overwrites the fields present on the second config over the first one. This way you can keep the config presets from the main config and only include the ones you want to be different in the second.

For example, if your page2.yml file is like this:

# this config is used by a page linked in the navbar
# this pages will use the same configuration from config.yml, but will overwrite fields present here

# this overwrites title and subtitle:
title: "Page2"
subtitle: "this is the second page"

# this overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
message:

# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
links:
  - name: "Home"
    icon: "fas fa-home"
    url: "/"
  - name: "Contribute"
    icon: "fab fa-github"
    url: "https://github.com/bastienwirtz/homer"
    target: "_blank" # optional html a tag target attribute
  - name: "Wiki"
    icon: "fas fa-book"
    url: "https://www.wikipedia.org/"

# we keep the first group from the main page, but remove the second group. We need to replicate that first group or it will be removed:
services:
  - name: "NEW"
    icon: "fas fa-cloud"
    items:
      - name: "Awesome app"
        logo: "assets/tools/sample.png"
        subtitle: "Bookmark example"
        tag: "app"
        url: "https://www.reddit.com/r/selfhosted/"
        target: "_blank"
      - name: "Another one"
        logo: "assets/tools/sample2.png"
        subtitle: "Another application"
        tag: "app"
        url: "#"

It will overwrite fields title, subtitle, message(gets removed as it's empty), linksand services with config from this file, but kill keep other fields from the default config.yml file.

Considerations

For this to work without errors, I had to change line (36@ConnectivityChecker.vue)[https://github.com/bastienwirtz/homer/blob/3786f80dae2df7780d19ba8ffd9374ef3c2fc30f/src/components/ConnectivityChecker.vue#L36] so it refers to window.location.origin instead of window.location.href' or it would try to use /page2?alive` for checking connectivity. Seems to work fine this way.

Fixes #152

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

I've read & comply with the contributing guidelines
I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
I have made corresponding changes the documentation (README.md).
I've checked my modifications for any breaking changes, especially in the config.yml file

bastienwirtz · 2021-01-13T19:41:24Z

Hi @luixal!

Thanks for your contribution! Same here, that sounds great, I will look more closely into it soon!

pdevq

This introduces a breaking change for #8 (subdir hosting). The quickest fix I could think of is using a query string instead of a path for additional pages. I've added the corresponding suggestions in the review.

Personally using #page2 instead of ?page2 in the config seems more visually pleasing (and intuitive) to me, but as anchor links don't reload the page an additional mechanism would be needed.

On a side note and please correct me if I'm wrong, even ignoring the breaking change, doesn't a path like /page2 require additional configuration on the server? This would than also not work on the current docker image. For this to work on nginx I had to configure:

location /page2 {
    alias /usr/share/nginx/html;
    try_files $uri $uri/index.html $uri/ =404;
}

More importantly one has to be careful that the server does not add a trailing slash, which breaks the config file retrieval.

pdevq · 2021-01-29T22:05:24Z

src/components/ConnectivityChecker.vue

@@ -33,7 +33,7 @@ export default {
  methods: {
    checkOffline: function () {
      let that = this;
-      return fetch(window.location.href + "?alive", {
+      return fetch(window.location.origin + "?alive", {


This will break #8 as window.location.origin only returns http://localhost if the website is located in a subdirectory; eg: http://localhost/homer.

With a query string this can reverted back to href.

Suggested change

return fetch(window.location.origin + "?alive", {

return fetch(window.location.href + "?alive", {

pdevq · 2021-01-29T22:08:38Z

src/App.vue

@@ -13,7 +13,7 @@
      <section v-if="config.header" class="first-line">
        <div v-cloak class="container">
          <div class="logo">
-            <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
+            <a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>


Again breaks #8 as this will return to http://localhost and not the subdirectory the page is hosted on (http://localhost/homer).

If using a query string, just clear it.

Suggested change

<a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

<a href="?"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

pdevq · 2021-01-29T23:09:07Z

src/App.vue

@@ -153,6 +153,13 @@ export default {
    let config;
    try {
      config = await this.getConfig();
+      const path = (window.location.pathname != '/') ? window.location.pathname : null;


Instead of using a path, maybe use a query string instead, which allows for subdirectory hosting.

Suggested change

const path = (window.location.pathname != '/') ? window.location.pathname : null;

const path = (window.location.search.substring(1) != '') ? window.location.search.substring(1) : null;

pdevq · 2021-01-29T23:09:10Z

src/App.vue

@@ -153,6 +153,13 @@ export default {
    let config;
    try {
      config = await this.getConfig();
+      const path = (window.location.pathname != '/') ? window.location.pathname : null;
+      if (path) {
+        let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname


When using a query string the slash is no longer part of the pathname and needs to be added.

Suggested change

let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname

let pathConfig = await this.getConfig(`assets/${path}.yml`);

pdevq · 2021-01-29T23:23:30Z

docs/configuration.md

+  # see url field and assets/page.yml used in this example:
+  - name: "Second Page"
+    icon: "fas fa-file-alt"
+    url: "/page2"


Suggested change

url: "/page2"

url: "?page2"

luixal · 2021-01-30T20:16:46Z

Changes sound good to me. Didn't notice the #8 feature. Maybe a doc with all features will be nice to have :)

pdevq

To be fair, I only checked for the feature after the fact. Still running an old fork locally that does not support it. I've just had my fair share of fights with applications that don't play well with relative paths and noticed that this change may be problematic in a subdir deployment. Some features are listed under Features in the README.md, maybe hosting in a subdir could be added?

I'm still more fond of using #page2 rather than ?page2. Not just visually, but also because using the query string could block or make it harder for future additions to make use of it. I've added another review with changes for using #page2.

pdevq · 2021-01-31T17:59:42Z

docs/configuration.md

+  # see url field and assets/page.yml used in this example:
+  - name: "Second Page"
+    icon: "fas fa-file-alt"
+    url: "/page2"


Suggested change

url: "/page2"

url: "#page2"

pdevq · 2021-01-31T18:00:27Z

src/App.vue

@@ -13,7 +13,7 @@
      <section v-if="config.header" class="first-line">
        <div v-cloak class="container">
          <div class="logo">
-            <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
+            <a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>


Suggested change

<a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

<a href="#"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

pdevq · 2021-01-31T18:02:18Z

src/App.vue

@@ -153,6 +153,13 @@ export default {
    let config;
    try {
      config = await this.getConfig();
+      const path = (window.location.pathname != '/') ? window.location.pathname : null;


Suggested change

const path = (window.location.pathname != '/') ? window.location.pathname : null;

const path = (window.location.hash.substring(1) != '') ? window.location.hash.substring(1) : null;

pdevq · 2021-01-31T18:02:53Z

src/App.vue

@@ -153,6 +153,13 @@ export default {
    let config;
    try {
      config = await this.getConfig();
+      const path = (window.location.pathname != '/') ? window.location.pathname : null;
+      if (path) {
+        let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname


Suggested change

let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname

let pathConfig = await this.getConfig(`assets/${path}.yml`);

pdevq · 2021-01-31T18:03:30Z

src/components/ConnectivityChecker.vue

@@ -33,7 +33,7 @@ export default {
  methods: {
    checkOffline: function () {
      let that = this;
-      return fetch(window.location.href + "?alive", {
+      return fetch(window.location.origin + "?alive", {


Suggested change

return fetch(window.location.origin + "?alive", {

return fetch(window.location.href + "?alive", {

src/App.vue

luixal · 2021-02-23T19:49:07Z

Just tested your suggested changes and it works great. Just cleanning up and will push for merge. Thanks! :)

bastienwirtz · 2021-03-07T06:57:35Z

Thanks for the great work @luixal & @pdevq !

I merged that as is to just modified a few thing:

Little clean (commented code, lint, ...)
Renamed page2.yml to another-page.yml.dist (important thing is the .dist, all "templates" config in this repo follows this convention) & added a bit more description.
Made possible to switch page without a full reload!

Hope that sounds good to you!

btw, I updated the demo to show the second page feature.
Thanks again!

pdevq · 2021-03-07T07:12:08Z

Awesome work! The 'no full reload' is a lot better. Guess I'll have to finally update my local copy, don't know yet what I need the multipages for, but I really like them.

luixal · 2021-03-07T08:21:59Z

Great! Avoiding full reload was a next stage I had on mind but I didn't found the moment to do it, awesome you could!

Adds multiple pages based on different config files

e3bd2ec

pdevq reviewed Jan 29, 2021

View reviewed changes

pdevq mentioned this pull request Jan 30, 2021

Fix ConnectivityChecker to evaluate the response status codes #186

Merged

7 tasks

pdevq reviewed Jan 31, 2021

View reviewed changes

pdevq mentioned this pull request Feb 11, 2021

[Feature Request] Multiple users #187

Closed

Changes relative paths to hash. Avoids problems with #8

c626729

bastienwirtz merged commit 00b46a6 into bastienwirtz:main Mar 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds multiple pages based on different config files #177

Adds multiple pages based on different config files #177

luixal commented Jan 7, 2021

bastienwirtz commented Jan 13, 2021

pdevq left a comment

pdevq Jan 29, 2021

pdevq Jan 29, 2021

pdevq Jan 29, 2021

pdevq Jan 29, 2021

pdevq Jan 29, 2021

pdevq Jan 29, 2021

pdevq Jan 29, 2021

luixal commented Jan 30, 2021

pdevq left a comment •

edited

Loading

pdevq Jan 31, 2021

pdevq Jan 31, 2021

pdevq Jan 31, 2021

pdevq Jan 31, 2021

pdevq Jan 31, 2021

luixal commented Feb 23, 2021

bastienwirtz commented Mar 7, 2021

pdevq commented Mar 7, 2021

luixal commented Mar 7, 2021

	return fetch(window.location.origin + "?alive", {
	return fetch(window.location.href + "?alive", {

	<a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>
	<a href="?"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

	const path = (window.location.pathname != '/') ? window.location.pathname : null;
	const path = (window.location.search.substring(1) != '') ? window.location.search.substring(1) : null;

	let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname
	let pathConfig = await this.getConfig(`assets/${path}.yml`);

	<a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>
	<a href="#"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>

	const path = (window.location.pathname != '/') ? window.location.pathname : null;
	const path = (window.location.hash.substring(1) != '') ? window.location.hash.substring(1) : null;

Adds multiple pages based on different config files #177

Adds multiple pages based on different config files #177

Conversation

luixal commented Jan 7, 2021

Description

How does this work?

Considerations

Type of change

Checklist:

bastienwirtz commented Jan 13, 2021

pdevq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luixal commented Jan 30, 2021

pdevq left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luixal commented Feb 23, 2021

bastienwirtz commented Mar 7, 2021

pdevq commented Mar 7, 2021

luixal commented Mar 7, 2021

pdevq left a comment •

edited

Loading