Self Hosting

Greeting / Search bar for Organizr

Add a personalized time based greeting (ex.Good morning, Jesse) and Google search bar to your Organizr home page.

Jesse Torres

• 2 min read

Introduction

Organizr is a unique bookmarks dashboard desired for self hosters. It already comes with a bunch of pre-canned items (ex. Plex, iCal, weather) to customize its home page. And if you can't find the one you need, you can always inject one with the custom HTML item. This post will review my custom HTML greeting / search bar item for Organizr and how you can easily install it.

Organizr Greeting / Search Bar (above the Weather item)

Features

My greeting / search bar includes the following features:

  • Time based greeting (ex. Good morning, Good afternoon, etc)
  • Your username in the greeting (ex. Good Morning, Jesse)
  • Live day, date, time under the greeting
  • Google search form
  • All stylized to match the look and feel of your current theme
  • Optimized for desktop and mobile screens

Installation

  1. Go to Organizr > Settings > Tab Editor > Homepage Items
  2. Click the CustomHTML item
  3. Paste the code below into the "Custom HTML Code" textbox:
<!-- Jesseweb.com Greeting / Search Bar -->
<!DOCTYPE html>
<html>
<head>
  <style>
    .search-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .search-input {
      width: 300px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      margin-bottom: 10px;
      margin-right: 5px;
    }

    .search-button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      transition: background-color 0.3s;
    }

    .search-button:hover {
      background-color: #45a049;
    }

    /* Additional styles */
    .name {
      text-transform: capitalize;
      margin-left: 10px;
    }

    /* Media query for smaller screens */
    @media (max-width: 600px) {
      .search-container {
        flex-direction: column;
        align-items: flex-start;
      }

      .search-input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
      }
    }
  </style>
</head>
<body>
  <div class="search-container">
    <div>
      <h1 class="weather" id="greeting">
        Good morning<span id="name" class="name"></span>
      </h1>
      <h4 class="weather" id="current-time"></h4>
    </div>
    <div>
      <h3 for="search-input" class="weather">Search Google</h3>
      <form action="https://www.google.com/search" method="get" target="_self">
        <input type="text" id="search-input" name="q" placeholder="Enter your search query" class="search-input" />
        <input type="submit" value="Search" class="search-button" />
      </form>
    </div>
  </div>

  <script>
    // Function to update the current time
    function updateTime() {
      const currentTimeElement = document.getElementById('current-time');
      const now = new Date();
      const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
      const formattedTime = now.toLocaleString('en-US', options);
      currentTimeElement.textContent = formattedTime;
    }

    // Update the time every second
    setInterval(updateTime, 1000);

    // Function to update the greeting based on the time of day
    function updateGreeting() {
      const greetingElement = document.getElementById('greeting');
      const now = new Date();
      const hour = now.getHours();
      let greeting = '';

      if (hour >= 5 && hour < 12) {
        greeting = 'Good morning';
      } else if (hour >= 12 && hour < 18) {
        greeting = 'Good afternoon';
      } else {
        greeting = 'Good evening';
      }

      const bElement = document.querySelector('a.dropdown-toggle.profile-pic b');
      if (bElement) {
        const name = bElement.textContent;
        const titleCaseName = titleCase(name);
        greetingElement.innerHTML = `${greeting}, <span class="name">${titleCaseName}</span>`;
      } else {
        greetingElement.textContent = greeting;
      }
    }

    // Helper function to title case a string
    function titleCase(str) {
      return str.toLowerCase().replace(/^(.)|\s+(.)/g, function (c) {
        return c.toUpperCase();
      });
    }

    // Initial update
    updateTime();
    updateGreeting();

    // Update the greeting every 5 seconds
    setInterval(updateGreeting, 5000);
  </script>
</body>
</html>

4. Set your "Minimum Authentication" (ex. User)
5.  Click the Save icon

Conclusion

Now just refresh the browser window and visit your new and improved Organizr homepage.