Build system integration using vue-cli.

[bastienwirtz]

Description

👋 Hi!
This pull request introduce a build system, which will, among others, makes new features & maintainability easier.
The whole project structure must have been reworked (laaarge diff but was necessary) and I took the opportunity to add some requested features:

• Theme & colors customization (Allows for config.yml to control header colors. #24, Feature Request: Dark mode update #45)
• Optional header ([FEATURE] Removal of the Top "Blue Bar" and option to retain the search, theme and view switch options without having the Page link option #21, Added Feature to Hide the Header #26)
• Message can now accept html content (Linebreak in message #61)
• PWA support (PWA Possibilities #31)

Anyone willing to test this full rework on the project, give some feedbacks or contribute in any way will be more than welcome! ❤️

Credits goes to @traeblain for the CSS variables & optionnal header part, thanks a lot! (I integrated the idea of the default configuration, see src/assets/defaults.yml).

Usage

Before build, the config file is located in the public/ directory.

Build command

Use the following command to build and run the project.

yarn install

# run locally (for testing or developement purposes)
yarn serve

# Build the static dashboard:
yarn build

# Alternatively, npm can be used (npm install, npm run serve, npm run build)

New configuration options

header: true
theme: default
colors:
  light:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    highlight-hover: "#5a95f5"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
    text-header: "#ffffff"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link-hover: "#363636"
  dark:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    highlight-hover: "#5a95f5"
    background: "#131313"
    card-background: "#2b2b2b"
    text: "#eaeaea"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link-hover: "#ffdd57"

[fbartels]

Hi,

I gave the pr a quick read and made a really quick test with my current config.yml.

With my current config.yml I have the following error:

title: "Overview page"
subtitle: "Home"
icon: "fas fa-home"

It looks like using the font for the icon does no longer replace the image.

Initially I wanted to simply expose the /public directory with my local webserver, but the realized that the directory only holds some template files used during build like your config.yml. Maybe the directory could be renamed in case others would make the same connection.

What is a bit of a pity is that the way this pr is right now I always need to run a build at least once to have the final result in the dist directory. The main system I am running Homer on is an openwrt router (no yarn, no docker), which means that I would need to run the build on another system and then copy the dist folder to the final device afterwards.

Another small thing. Scrolling through the source it seems that there are now defaults coded into the files, which means whatever I don't override in the config.yml is using default values (this is great!). To make management a bit easier it would be great if the example config.yml is renamed to config.yml.dist and the actual file added to .gitignore. This would make it easier to manage local changes to it. (and in a similar vein I would drop the example config.yml from the readme and simply link to the actual file, makes management easier imho).

[fbartels]

Example

[fbartels]

Themes (capital t)

[fbartels]

Themes are meant..

[fbartels]

drop the "a"

[bastienwirtz]

Thanks so much for the review @fbartels!
Just fixed typos & moved config.yml to dist. I'll look at the icon issue soon.

Regarding the build, I'm pretty sure I can automate the creation of github releases with the build result attached as assets, you would be able to just download a tar.gz or something like that. Would that works?

[fbartels]

You're welcome. I cannot comment much on the Vue parts, though.

Yes, having release assets would probably do the trick.

[bastienwirtz]

@fbartels I fixed the icon issue, and automated the build & ready to use release, you can find a homer.zip file for each new versions here https://github.com/bastienwirtz/homer/releases.