extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-03-13 06:49:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Deps update & minor UI adjustments

Browse Source
This commit is contained in:
Bastien Wirtz 2018-11-12 21:14:38 -08:00
parent 9ca12a40f4
commit e41196e76e
6 changed files with 152 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -8,7 +8,7 @@ If you need authentication support, you're on your own (it can be secured using
**How to build / install it? Where is the webpack config?** **How to build / install it? Where is the webpack config?**
There is no build system (😱), use it like that! It'meant to be stupid simple & zero maintenance required. just copy the static files somewhere, and visit the `index.html`. There is no build system (😱), use it like that! It'meant to be stupid simple & zero maintenance required. just copy the static files somewhere, and visit the `index.html`.
## configuration ## configuration
@ -18,11 +18,13 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
```yaml ```yaml
--- ---
# Homepage configuration # Homepage configuration
# See https://fontawesome.com/v4.7.0/icons/ for icons options # See https://fontawesome.com/icons for icons options
title: "Simple homepage" title: "Simple homepage"
subtitle: "Homer" subtitle: "Homer"
logo: "assets/homer.png" logo: "assets/homer.png"
# Alternatively a fa icon can be provided:
# icon: "fas fa-skull-crossbones"
# Optional message # Optional message
message: message:
@ -48,6 +50,8 @@ services:
items: items:
- name: "Jenkins" - name: "Jenkins"
logo: "/assets/tools/jenkins.png" logo: "/assets/tools/jenkins.png"
# Alternatively a fa icon can be provided:
# icon: "fab fa-jenkins"
subtitle: "Continuous integration server" subtitle: "Continuous integration server"
tag: "CI" tag: "CI"
url: "#" url: "#"
@ -79,4 +83,4 @@ services:
tag: "CI" tag: "CI"
url: "#" url: "#"
``` ```

35
app.css
View File

@ -1,3 +1,6 @@
html {
height: 100%; }
body { body {
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
background-color: #F5F5F5; background-color: #F5F5F5;
@ -10,9 +13,8 @@ body {
font-size: 1.7rem; font-size: 1.7rem;
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 1rem; } margin-bottom: 1rem; }
body h2 .fa { body h2 .fas, body h2 .fab, body h2 .far {
margin-right: 10px; margin-right: 10px; }
color: #4285f4; }
body h2 span { body h2 span {
font-weight: bold; font-weight: bold;
color: #4285f4; } color: #4285f4; }
@ -35,15 +37,20 @@ body {
body #bighead .first-line .container { body #bighead .first-line .container {
height: 80px; height: 80px;
padding: 10px 0; } padding: 10px 0; }
body #bighead .first-line img { body #bighead .first-line .logo {
float: left; float: left; }
max-height: 70px; body #bighead .first-line .logo i {
max-width: 70px; vertical-align: top;
padding: 10px; } padding: 8px 15px;
font-size: 50px; }
body #bighead .first-line .logo img {
padding: 10px;
max-height: 70px;
max-width: 70px; }
body #bighead .navbar { body #bighead .navbar {
background-color: #4285f4; } background-color: #4285f4; }
body #bighead .navbar a { body #bighead .navbar a {
color: #152138; } color: #ffffff; }
body #bighead .navbar a:hover { body #bighead .navbar a:hover {
background-color: #5a95f5; } background-color: #5a95f5; }
body #main-section { body #main-section {
@ -55,7 +62,10 @@ body {
body #main-section .title { body #main-section .title {
font-size: 1.1em; } font-size: 1.1em; }
body #main-section .subtitle { body #main-section .subtitle {
font-size: .9em; } font-size: .9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
body #main-section .column { body #main-section .column {
padding: 1.2rem .75rem; } padding: 1.2rem .75rem; }
body #main-section .message { body #main-section .message {
@ -90,7 +100,8 @@ body {
color: #ffffff; color: #ffffff;
padding: 0 0.75em; } padding: 0 0.75em; }
body .card-content { body .card-content {
height: 110px; } height: 85px;
padding: 1.3rem; }
body .footer { body .footer {
position: fixed; position: fixed;
left: 0; left: 0;
@ -126,5 +137,3 @@ body {
height: 20px; } height: 20px; }
body .search-bar:focus-within .search-label::before { body .search-bar:focus-within .search-label::before {
color: #4a4a4a; } color: #4a4a4a; }
/*# sourceMappingURL=app.css.map */

13
app.js
View File

@ -4,13 +4,12 @@ var app = new Vue({
config: null, config: null,
filter: '' filter: ''
}, },
beforeCreate () { beforeCreate() {
let that = this; let that = this;
return getConfig().then(function (config) { return getConfig().then(function (config) {
console.log(config);
const size = 3; const size = 3;
config.services.forEach(function(service) { config.services.forEach(function (service) {
service.rows = []; service.rows = [];
items = service.items; items = service.items;
while (items.length) { while (items.length) {
@ -18,7 +17,7 @@ var app = new Vue({
} }
if (service.rows.length) { if (service.rows.length) {
let last = service.rows.length-1; let last = service.rows.length - 1;
service.rows[last] = service.rows[last].concat(Array(size - service.rows[last].length)); service.rows[last] = service.rows[last].concat(Array(size - service.rows[last].length));
} }
}); });
@ -31,13 +30,13 @@ var app = new Vue({
function getConfig() { function getConfig() {
return fetch('config.yml').then(function(response) { return fetch('config.yml').then(function (response) {
if (response.status !== 200) { if (response.status !== 200) {
return; return;
} }
return response.text().then(function(body){ return response.text().then(function (body) {
return jsyaml.load(body); return jsyaml.load(body);
}); });
}); });
} }

30
app.scss
View File

@ -1,6 +1,8 @@
$primary-color: #3367d6; $primary-color: #3367d6;
$secondary-color: #4285f4; $secondary-color: #4285f4;
html { height: 100%; }
body { body {
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
background-color: #F5F5F5; background-color: #F5F5F5;
@ -19,9 +21,8 @@ body {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
.fa { .fas, .fab, .far {
margin-right: 10px; margin-right: 10px;
color: $secondary-color;
} }
span { span {
@ -61,19 +62,26 @@ body {
padding: 10px 0; padding: 10px 0;
} }
img { .logo {
float: left; float: left;
max-height: 70px; i {
max-width: 70px; vertical-align: top;
padding: 10px; padding: 8px 15px;
font-size: 50px
}
img {
padding: 10px;
max-height: 70px;
max-width: 70px;
}
} }
} }
.navbar { .navbar {
background-color: $secondary-color; background-color: $secondary-color;
a { a {
color: #152138; color: #ffffff;
&:hover { &:hover {
background-color: lighten( $secondary-color, 5% ); background-color: lighten( $secondary-color, 5% );
} }
@ -96,6 +104,9 @@ body {
.subtitle { .subtitle {
font-size: .9em; font-size: .9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.column { .column {
@ -151,7 +162,8 @@ body {
} }
.card-content { .card-content {
height: 110px; height: 85px;
padding: 1.3rem;
} }
.footer { .footer {

9
config.yml
View File

@ -5,6 +5,7 @@
title: "Simple homepage" title: "Simple homepage"
subtitle: "Homer" subtitle: "Homer"
logo: "assets/homer.png" logo: "assets/homer.png"
icon: "fas fa-skull-crossbones"
# Optional message # Optional message
# See https://bulma.io/documentation/components/message/#colors for styling options. # See https://bulma.io/documentation/components/message/#colors for styling options.
@ -16,10 +17,10 @@ message:
# Optional navbar # Optional navbar
links: links:
- name: "ansible" - name: "ansible"
icon: "fa-github" icon: "fab fa-github"
url: "https://github.com/xxxxx/ansible/" url: "https://github.com/xxxxx/ansible/"
- name: "Wiki" - name: "Wiki"
icon: "fa-book" icon: "fas fa-book"
url: "https://wiki.xxxxxx.com/" url: "https://wiki.xxxxxx.com/"
# Services # Services
@ -27,7 +28,7 @@ links:
# Leave only a "items" key if not using group (group name & icon are optional, section separation will not be displayed). # Leave only a "items" key if not using group (group name & icon are optional, section separation will not be displayed).
services: services:
- name: "DevOps" - name: "DevOps"
icon: "fa-code-fork" icon: "fas fa-code-branch"
items: items:
- name: "Jenkins" - name: "Jenkins"
logo: "/assets/tools/jenkins.png" logo: "/assets/tools/jenkins.png"
@ -40,7 +41,7 @@ services:
tag: "haproxy" tag: "haproxy"
url: "#" url: "#"
- name: "Monitoring" - name: "Monitoring"
icon: "fa-heartbeat" icon: "fas fa-heartbeat"
items: items:
- name: "M/Monit" - name: "M/Monit"
logo: "/assets/tools/monit.png" logo: "/assets/tools/monit.png"

167
index.html
View File

@ -1,107 +1,122 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="icon" type="image/png" href="assets/favicon.png"> <link rel="icon" type="image/png" href="assets/favicon.png">
<title>Homer</title> <title>Homer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
</head> </head>
<body> <body>
<div id="app" v-if="config"> <div id="app" v-if="config">
<div id="bighead"> <div id="bighead">
<section class="first-line"> <section class="first-line">
<div class="container">
<img v-if="config.logo" :src="config.logo" />
<div class="dashboard-title">
<span v-cloak class="headline">{{ config.subtitle }}</span>
<h1 v-cloak>{{ config.title }}</h1>
</div>
</div>
</section>
<div v-if="config.links" class="container-fluid">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container"> <div class="container">
<div class="navbar-menu"> <div class="logo">
<div class="navbar-start"> <img v-if="config.logo" :src="config.logo" />
<a v-for="link in config.links" class="navbar-item" :href="link.url"> <i v-if="config.icon" :class="config.icon"></i>
<i v-if="link.icon" style="margin-right: 6px;" class="fa" :class="link.icon"></i> </div>
{{ link.name }} <div class="dashboard-title">
</a> <span v-cloak class="headline">{{ config.subtitle }}</span>
</div> <h1 v-cloak>{{ config.title }}</h1>
<div class="end"> </div>
<div class="search-bar"> </div>
<label for="search" class="search-label"></label> </section>
<input type="text" id="search" v-model="filter"/> <div v-if="config.links" class="container-fluid">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-menu">
<div class="navbar-start">
<a v-for="link in config.links" class="navbar-item" :href="link.url">
<i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
{{ link.name }}
</a>
</div>
<div class="end">
<div class="search-bar">
<label for="search" class="search-label"></label>
<input type="text" id="search" v-model="filter" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav> </div>
</div> </div>
</div>
<section id="main-section" class="section"> <section id="main-section" class="section">
<div class="container"> <div class="container">
<!-- Optional messages --> <!-- Optional messages -->
<article v-cloak v-if="config && config.message" class="message" :class="config.message.style"> <article v-cloak v-if="config && config.message" class="message" :class="config.message.style">
<div v-if="config.message.title" class="message-header"> <div v-if="config.message.title" class="message-header">
<p>{{ config.message.title }}</p> <p>{{ config.message.title }}</p>
</div> </div>
<div v-if="config.message.content" class="message-body"> <div v-if="config.message.content" class="message-body">
{{ config.message.content }} {{ config.message.content }}
</div> </div>
</article> </article>
<h2 v-cloak v-if="filter"><i class="fa fa-search"></i> Search</h2> <h2 v-cloak v-if="filter"><i class="fas fa-search"></i> Search</h2>
<div v-for="(group, index) in config.services"> <div v-for="(group, index) in config.services">
<h2 v-if="!filter && group.name"><i v-if="group.icon" class="fa" :class="group.icon"></i><span v-else>#</span> {{ group.name }}</h2> <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
<div v-for="items in group.rows"> {{ group.name }}</h2>
<div class="columns"> <div v-for="items in group.rows">
<div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))" class="column"> <div class="columns">
<div> <div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))"
<div v-if='item' class="card"> class="column">
<a :href="item.url"> <div>
<div class="card-content"> <div v-if='item' class="card">
<div class="media"> <a :href="item.url">
<div v-if="item.logo" class="media-left"> <div class="card-content">
<figure class="image is-48x48"> <div class="media">
<img :src="item.logo" /> <div v-if="item.logo" class="media-left">
</figure> <figure class="image is-48x48">
</div> <img :src="item.logo" />
<div class="media-content"> </figure>
<p class="title is-4">{{ item.name }}</p> </div>
<p class="subtitle is-6">{{ item.subtitle }}</p> <div v-if="item.icon" class="media-left">
<figure class="image is-48x48">
<i style="font-size: 35px" :class="item.icon"></i>
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">{{ item.subtitle }}</p>
</div>
</div> </div>
<strong v-if="item.tag" class="tag">#{{ item.tag }}</strong>
</div> </div>
<strong v-if="item.tag" class="tag">#{{ item.tag }}</strong> </a>
</div> </div>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section>
</div>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>Created with <span class="has-text-danger">❤️</span> with <a href="#">bulma</a>, <a href="#">vuejs</a> & <a href="#">font awesome</a>// Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fa fa-github-alt"></i></a>.</p>
</div>
</div> </div>
</footer>
<script src="https://unpkg.com/vue"></script> <footer class="footer">
<script src="vendors/js-yaml.min.js"></script> <div class="container">
<script src="app.js"></script> <div class="content has-text-centered">
<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a>
& <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>
</div>
</div>
</footer>
<script src="https://unpkg.com/vue"></script>
<script src="vendors/js-yaml.min.js"></script>
<script src="app.js"></script>
</body> </body>
</html>
</html>