auto-generated application menu for proxied services #4519

wjcarpenter · 2025-04-30T20:12:13Z

wjcarpenter
Apr 30, 2025

I configured NPM to be able to show a menu of my proxied services. I used the default site custom page option and supplied the static HTML content. If I add/delete/modify any of the proxied services, I'll edit that custom HTML. Since NPM already knows what services it can proxy, it would be pretty nice if it could auto-generate that menu page.

For my menu page, I have an icon and a couple of pieces of text for each service. If we had auto-generation, I could make do with less. I'm using a hand-edited suggestion from Google Gemini. Here's what that looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Menu</title>
    <style>
        .menu-container {
            display: flex; /* Enable Flexbox for the container */
            flex-wrap: wrap; /* Allow items to wrap to the next line */
            padding: 20px; /* Optional: Add some padding around the menu */
            background-color: #f0f0f0; /* Optional: Background color for the menu area */
            gap: 15px; /* Spacing between the tiles */
        }

        .menu-tile {
            background-color: #fff; /* Background color for each tile */
            border: 1px solid #ccc; /* Optional: Border for the tiles */
            border-radius: 5px; /* Optional: Rounded corners */
            padding: 15px;
            width: 200px; /* Initial width of each tile */
            box-sizing: border-box; /* Include padding and border in the width */
            text-align: center; /* Center the content within the tile */
        }

        .menu-tile img {
            width: 48px; /* Adjust icon size */
            height: 48px; /* Adjust icon size */
            margin-bottom: 10px;
            display: block; /* Prevent extra space below inline images */
            margin-left: auto;
            margin-right: auto; /* Center the image horizontally */
        }

        .menu-tile h3 {
            margin-top: 0;
            margin-bottom: 5px;
            font-size: 1.2em;
        }

        .menu-tile p {
            margin-top: 0;
            font-size: 0.9em;
            color: #666;
        }

        .menu-tile a {
            text-decoration: none; /* Remove underlines from links */
            color: inherit; /* Inherit text color from the tile */
            display: block; /* Make the entire tile clickable */
            height: 100%; /* Ensure the link covers the entire tile */
        }

        /* Optional: Hover effect */
        .menu-tile:hover {
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px); /* Slightly move up on hover */
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
    </style>
</head>
<body>

    <div class="menu-container">
        <div class="menu-tile">
            <a href="https://paperless.example.org">
                <img src="https://pub-dd718437d7574f3fabb08b553d7b7f94.r2.dev/paperless.png" alt="Paperless Icon">
                <h3>Paperless</h3>
                <p>Document archiving</p>
            </a>
        </div>

        <div class="menu-tile">
            <a href="https://homeassistant.example.org">
                <img src="https://upload.wikimedia.org/wikipedia/en/4/49/Home_Assistant_logo_%282023%29.svg" alt="Home Assistant Icon">
                <h3>Home Assistant</h3>
                <p>Smart home automation</p>
            </a>
        </div>

    </div>

</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

auto-generated application menu for proxied services #4519

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

auto-generated application menu for proxied services #4519

Uh oh!

Uh oh!

wjcarpenter Apr 30, 2025

Replies: 0 comments

wjcarpenter
Apr 30, 2025