index.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, initial-scale=1">
   7   <meta name="robots" content="noindex">
   8   <link rel="icon" type="image/png" href="assets/favicon.png">
   9   <title>Homer</title>
  10   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
  11     crossorigin="anonymous">
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
  13   <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
  14   <link rel="stylesheet" href="app.css">
  15 </head>
  16
  17 <body>
  18   <div id="app" v-if="config">
  19     <div id="bighead">
  20       <section class="first-line">
  21         <div class="container">
  22           <div class="logo">
  23             <img v-if="config.logo" :src="config.logo" />
  24             <i v-if="config.icon" :class="config.icon"></i>
  25           </div>
  26           <div class="dashboard-title">
  27             <span v-cloak class="headline">{{ config.subtitle }}</span>
  28             <h1 v-cloak>{{ config.title }}</h1>
  29           </div>
  30         </div>
  31       </section>
  32       <div v-if="config.links" class="container-fluid">
  33         <nav class="navbar" role="navigation" aria-label="main navigation">
  34           <div class="container">
  35             <div class="navbar-menu">
  36               <div class="navbar-start">
  37                 <a v-for="link in config.links" class="navbar-item" :href="link.url">
  38                   <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
  39                   {{ link.name }}
  40                 </a>
  41               </div>
  42               <div class="end">
  43                 <div class="search-bar">
  44                   <label for="search" class="search-label"></label>
  45                   <input type="text" id="search" v-model="filter" />
  46                 </div>
  47               </div>
  48             </div>
  49           </div>
  50         </nav>
  51       </div>
  52     </div>
  53
  54     <section id="main-section" class="section">
  55       <div class="container">
  56         <!-- Optional messages -->
  57         <article v-cloak v-if="config && config.message" class="message" :class="config.message.style">
  58           <div v-if="config.message.title" class="message-header">
  59             <p>{{ config.message.title }}</p>
  60           </div>
  61           <div v-if="config.message.content" class="message-body">
  62             {{ config.message.content }}
  63           </div>
  64         </article>
  65
  66         <h2 v-cloak v-if="filter"><i class="fas fa-search"></i> Search</h2>
  67
  68         <div v-for="(group, index) in config.services">
  69           <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
  70             {{ group.name }}</h2>
  71           <div v-for="items in group.rows">
  72             <div class="columns">
  73               <div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))"
  74                 class="column">
  75                 <div>
  76                   <div v-if='item' class="card">
  77                     <a :href="item.url">
  78                       <div class="card-content">
  79                         <div class="media">
  80                           <div v-if="item.logo" class="media-left">
  81                             <figure class="image is-48x48">
  82                               <img :src="item.logo" />
  83                             </figure>
  84                           </div>
  85                           <div v-if="item.icon" class="media-left">
  86                             <figure class="image is-48x48">
  87                               <i style="font-size: 35px" :class="item.icon"></i>
  88                             </figure>
  89                           </div>
  90                           <div class="media-content">
  91                             <p class="title is-4">{{ item.name }}</p>
  92                             <p class="subtitle is-6">{{ item.subtitle }}</p>
  93                           </div>
  94                         </div>
  95                         <strong v-if="item.tag" class="tag">#{{ item.tag }}</strong>
  96                       </div>
  97                     </a>
  98                   </div>
  99                 </div>
 100               </div>
 101             </div>
 102           </div>
 103         </div>
 104       </div>
 105     </section>
 106   </div>
 107
 108   <footer class="footer">
 109     <div class="container">
 110       <div class="content has-text-centered">
 111         <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a>
 112           & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>
 113       </div>
 114     </div>
 115   </footer>
 116
 117   <script src="https://unpkg.com/vue"></script>
 118   <script src="vendors/js-yaml.min.js"></script>
 119   <script src="app.js"></script>
 120 </body>
 121
 122 </html>