index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Substack Post Feed Component</title>
    <meta name="title" content="Substack Post Feed Component" />
    <meta
      name="description"
      content="A small and simple responsive Substack post feed component for your website."
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <script>
      !(function () {
        var i = "analytics",
          analytics = (window[i] = window[i] || []);
        if (!analytics.initialize)
          if (analytics.invoked)
            window.console &&
              console.error &&
              console.error("Segment snippet included twice.");
          else {
            analytics.invoked = !0;
            analytics.methods = [
              "trackSubmit",
              "trackClick",
              "trackLink",
              "trackForm",
              "pageview",
              "identify",
              "reset",
              "group",
              "track",
              "ready",
              "alias",
              "debug",
              "page",
              "screen",
              "once",
              "off",
              "on",
              "addSourceMiddleware",
              "addIntegrationMiddleware",
              "setAnonymousId",
              "addDestinationMiddleware",
              "register",
            ];
            analytics.factory = function (e) {
              return function () {
                if (window[i].initialized)
                  return window[i][e].apply(window[i], arguments);
                var n = Array.prototype.slice.call(arguments);
                if (
                  [
                    "track",
                    "screen",
                    "alias",
                    "group",
                    "page",
                    "identify",
                  ].indexOf(e) > -1
                ) {
                  var c = document.querySelector("link[rel='canonical']");
                  n.push({
                    __t: "bpc",
                    c: (c && c.getAttribute("href")) || void 0,
                    p: location.pathname,
                    u: location.href,
                    s: location.search,
                    t: document.title,
                    r: document.referrer,
                  });
                }
                n.unshift(e);
                analytics.push(n);
                return analytics;
              };
            };
            for (var n = 0; n < analytics.methods.length; n++) {
              var key = analytics.methods[n];
              analytics[key] = analytics.factory(key);
            }
            analytics.load = function (key, n) {
              var t = document.createElement("script");
              t.type = "text/javascript";
              t.async = !0;
              t.setAttribute("data-global-segment-analytics-key", i);
              t.src =
                "https://cdn.segment.com/analytics.js/v1/" +
                key +
                "/analytics.min.js";
              var r = document.getElementsByTagName("script")[0];
              r.parentNode.insertBefore(t, r);
              analytics._loadOptions = n;
            };
            analytics._writeKey = "G0CGc5ZYmqE56z9WETX4YnRJQ9jhRF1r";
            analytics.SNIPPET_VERSION = "5.2.0";
            analytics.load("G0CGc5ZYmqE56z9WETX4YnRJQ9jhRF1r");
            analytics.page();
          }
      })();
    </script>
    <script>
      window.onbeforeunload = function () {
        window.scrollTo(0, 0);
      };
      window.onload = function () {
        window.scrollTo(0, 0);
      };
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        font-family: "Roboto", sans-serif;
        width: 100%;
      }
      .header {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        background-color: #712cf9;
        color: #fff;
        padding: 1rem;
      }
      .github-logo {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
      }
      .header-title {
        padding-top: 5rem;
      }
      .header h1 {
        text-align: center;
        margin: 0;
        padding: 1rem;
      }
      .header-disclaimer {
        font-size: 0.6rem;
      }
      .header-version {
        font-size: 0.6rem;
        font-weight: 700;
      }
      .header-image {
        padding: 1rem;
      }
      .header-image .responsive-image {
        width: 100%;
        max-width: 1000px;
        border-radius: 10px;
      }
      .header-arrow {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .scroll-down {
        text-decoration: none;
        background: none;
        border: none;
      }

      .arrow {
        border: solid white;
        border-width: 0 10px 10px 0;
        display: inline-block;
        padding: 10px;
        transform: rotate(45deg);
        -webkit-animation: arrow-animation 2s infinite;
        animation: arrow-animation 2s infinite;
      }

      @keyframes arrow-animation {
        0% {
          transform: rotate(45deg) translate(0, 0);
        }
        50% {
          transform: rotate(45deg) translate(-10px, -10px);
        }
        100% {
          transform: rotate(45deg) translate(0, 0);
        }
      }
      #form-section {
        width: 100%;
      }
      .demo-title {
        padding-top: 2rem;
      }
      .input-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 1rem;
      }
      .input-container label {
        margin-bottom: 0.5rem;
      }
      #customCssFeed,
      #customCssLoader {
        width: 80%;
        height: 4rem;
      }

      /* Content Section */
      .content-description-wrapper {
        background-color: #712cf9;
        color: #fff;
      }
      .content-description {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
      }
      .feed-preview img {
        width: 100%;
        border-radius: 20px;
      }
      .alert-info {
        display: flex;
      }
      .alert-content {
        padding-left: 1rem;
      }
      code {
        display: inline-block;
        padding: 5px;
        margin: 0;
        border-radius: 0.25rem;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
      }
      pre {
        display: block;
        padding: 1rem;
        margin: 5rem 1rem;
        border-radius: 0.25rem;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        overflow-x: auto;
        color: #000;
      }
      pre {
        white-space: pre; /* Since CSS 2.1 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
        text-align: left;
      }
      hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      #pageNameInput.error {
        border-color: red;
      }
      .error-message {
        display: none;
        color: red;
        font-size: 0.8rem;
        margin-top: 0.5rem;
      }
      .accordion-header button {
        font-size: 20px;
        font-weight: 600;
      }
      .input-field-wrapper {
        padding-left: 1.5rem;
      }
      @media (max-width: 575.98px) {
        .demo-title-spacer {
          display: none;
        }
        .demo-title-section {
          padding-left: 1.5rem;
        }
      }
    </style>
    <script
      src="substack-post-feed.js"
      type="application/javascript"
      defer
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="github-logo">
        <a
          href="https://github.com/GionDesign/Substack-Post-Feed-Component"
          target="_blank"
        >
          <img
            src="./images/github-corner.png"
            alt="GitHub Logo"
            style="width: 100px"
          />
        </a>
      </div>

      <div class="header-title">
        <h1>Substack Post Feed Component</h1>
        <hr class="header-break" />
        <p class="lead lead-md">
          A small and simple responsive Substack post feed component for your
          website
        </p>
        <p class="header-disclaimer">
          * this is in Alpha and not fully production ready, please watch the
          FAQ's as some parts could change without notice
        </p>
        <p class="header-version">Version: 0.0.1-Alpha</p>
      </div>
      <div class="header-image">
        <picture>
          <source
            media="(max-width: 576px)"
            srcset="./images/mobile-header-feed-example.png"
          />
          <img
            src="./images/example-feed-header.png"
            alt="Substack Logo"
            class="responsive-image"
          />
        </picture>
      </div>
      <div class="header-arrow">
        <button
          onclick="document.getElementById('form-section').scrollIntoView();"
          class="scroll-down"
        >
          <span class="arrow"></span>
        </button>
      </div>
    </div>

    <hr />

    <form class="row g-3 needs-validation" novalidate id="form-section">
      <span class="col-2 demo-title-spacer"></span>
      <div class="demo-title-section col-12 col-sm-8">
        <h2 class="demo-title">Demo:</h2>
        <p>
          Edit the fields below and click on the "update Feed" button below and
          it will show the preview of the edited Substack feed component below
          it
        </p>
      </div>

      <span class="col-2 demo-title-spacer"></span>
      <span class="col-2"></span>
      <div class="col-md-4 input-field-wrapper">
        <div class="form-floating mb-3">
          <input
            type="text"
            class="form-control"
            id="pageNameInput"
            placeholder="sqeel404"
            value="sqeel404"
            oninput="checkInput()"
            required
          />
          <label for="pageNameInput">Substack page name:</label>
          <p id="pageNameInputError" class="error-message">
            Substack page name is required
          </p>
        </div>
      </div>
      <div class="col-md-4 input-field-wrapper">
        <div class="form-floating mb-3">
          <input
            type="text"
            class="form-control"
            id="feedAmountInput"
            placeholder="3"
            value="3"
            required
          />
          <label for="feedAmountInput">Feed amount to display:</label>
        </div>
      </div>
      <span class="col-2"></span>
      <!-- CSS textarea fields -->

      <span class="col-2"></span>
      <div class="col-md-8 input-field-wrapper">
        <div class="form-floating">
          <textarea
            class="form-control"
            placeholder="Inline css styling for substack feed"
            id="customCssFeed"
            style="height: 150px; width: 100%"
          ></textarea>
          <label for="customCssFeed">Custom CSS feed styling:</label>
        </div>
      </div>

      <span class="col-2"></span>
      <span class="col-2"></span>

      <div class="col-md-8 input-field-wrapper">
        <div class="form-floating">
          <textarea
            class="form-control"
            placeholder="Inline css styling for loading"
            id="customCssLoader"
            style="height: 150px; width: 100%"
          ></textarea>
          <label for="customCssLoader">Custom CSS loader styling:</label>
        </div>
      </div>

      <span class="col-2"></span>

      <div class="col-12 text-center">
        <button
          id="updateButton"
          type="submit"
          class="btn btn-primary"
          style="margin-top: 1rem; margin-bottom: 1rem"
        >
          Update Feed
        </button>
      </div>
    </form>

    <hr id="substack-demo-heading" />
    <h2 class="text-center">Substack Feed:</h2>
    <hr />

    <substack-posts-feed
      id="rssFeed"
      substack-page-name="sqeel404"
      feed-amount-displayed="3"
    ></substack-posts-feed>

    <hr />
    <div class="content-description-wrapper">
      <div class="content-description">
        <h2 class="display-5">Implementation Details:</h2>
        <p>
          This is a short explanation on how the substack rss feed component
          renderer can work and how it functions.
        </p>
        <br />
        <h3>Feed Preview:</h3>

        <p>An example of how the feed can render is displayed below:</p>

        <div class="feed-preview">
          <img
            src="./images/feed preview.png"
            alt="Substack RSS Feed Preview"
          />
        </div>

        <br />
        <hr />
        <br />
        <h3>FAQs:</h3>

        <p>A breakdown of how the component can work and function:</p>

        <div class="accordion" id="accordionFaq">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="false"
                aria-controls="collapseOne"
              >
                Component Usage:
              </button>
            </h2>
            <div
              id="collapseOne"
              class="accordion-collapse collapse"
              data-bs-parent="#accordionFaq"
            >
              <div class="accordion-body">
                <h3>How to use the component</h3>
                <p>
                  The <code>substack-posts-feed</code> is a custom HTML element
                  that fetches and displays an RSS feed from a specified
                  Substack page. It's a powerful tool that allows you to
                  integrate Substack content directly into your website.
                </p>
                <p>
                  To use this component, you need to include it in your HTML
                  file. Here's how you can do it:
                </p>
                <p>This component can be customized with several attributes:</p>
                <ol>
                  <li>
                    <code>substack-page-name</code>: This attribute is used to
                    specify the name of the Substack page from which the RSS
                    feed will be fetched. This is a required attribute for the
                    component to function.
                  </li>
                  <li>
                    <code>show-feed-description</code>: This attribute is a
                    boolean that determines whether the description of the feed
                    should be displayed. By default, it is set to
                    <code>false</code> and it doesn’t need to be provided for
                    default functionality. If you want to show the feed
                    description, set it to <code>true</code>
                  </li>
                  <li>
                    <code>feed-error-message</code>: This is optional and can be
                    used to provide a custom error message when the feed fails
                    to load
                  </li>
                  <li>
                    <code>feed-no-results-message</code>: This is optional and
                    can be used to provide a custom message when there are no
                    results returnd from the feed but the request has returned
                    successfully
                  </li>
                  <li>
                    <code>feed-amount-displayed</code>: This attribute is used
                    to specify the number of feed items to display. By default,
                    it is set to <code>6</code>. You can adjust this number to
                    your liking
                  </li>
                  <li>
                    <code>custom-css-feed</code>: This attribute is used to
                    provide custom CSS for the feed. Instead of a URL, you can
                    provide inline CSS
                  </li>
                  <li>
                    <code>custom-css-loader</code>: This attribute is used to
                    provide custom CSS for the loader. You can also provide
                    inline CSS
                  </li>
                  <li>
                    <code>custom-css-url</code>: You can provide the url of a
                    `.css` file and this will load that css stylesheet
                  </li>
                </ol>
                <p>Example of Full Component:</p>
                <div class="code-block">
                  <pre>
&lt;substack-posts-feed 
    substack-page-name="your-substack-page-name" 
    show-feed-description="true" 
    feed-amount-displayed="10" 
    custom-css-feed=".rss-feed { background-color: green; }"
    custom-css-loader=".rss-feed__loader { color: #ff0000; }"
    feed-error-message="There was an error loading the feed"
    feed-no-results-message="No results were found"
&gt;&lt;/substack-posts-feed&gt;
                </pre
                  >
                </div>
                <p>
                  Replace "your-substack-page-name" with the name of your
                  Substack page, and adjust the
                  <code>feed-amount-displayed</code> attribute to the number of
                  feed items you want to display. You can also replace the CSS
                  in <code>custom-css-feed</code> and
                  <code>custom-css-loader</code> with your own CSS to customize
                  the look of the feed and the loader.
                </p>
                <p>
                  Please note that the
                  <code>substack-posts-feed</code> component must be imported
                  into your HTML file before you can use it. You can do this by
                  adding a script tag pointing to the
                  <code>substack-carousel.js</code> file in your HTML file:
                </p>
                <pre>
&lt;script src="https://api.pascalcouturier.com/resources/scripts/components/substack-post-feed.js"&gt;&lt;/script&gt;
              </pre
                >
                <div class="alert alert-info rounded" role="alert">
                  <i class="bi bi-exclamation-triangle-fill mr-2 mt-1"></i>
                  <div class="alert-content">
                    <p>
                      <span style="font-weight: 600">NOTE:</span> The domain
                      that you are using needs to be added to the API access or
                      there will be errors and it will not be able to load.
                    </p>
                    <p>
                      Please notify the admin of
                      <a href="http://api.pascalcouturier.com/"
                        >api.pascalcouturier.com</a
                      >
                      to be able to have your domain added to the list for
                      access on your site.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo"
              >
                Styling and CSS Classes:
              </button>
            </h2>
            <div
              id="collapseTwo"
              class="accordion-collapse collapse"
              data-bs-parent="#accordionFaq"
            >
              <div class="accordion-body">
                <p>
                  You can customise the css classes to tyarget them directly, or
                  override them in the css attributes of the component.
                </p>
                <p>The classes that are available are below:</p>
                <ul>
                  <li>
                    <strong>rss-feed:</strong>
                    <ul>
                      <li>
                        This class is used for the main container of the feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the padding and color for
                        the feed.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__loader:</strong>
                    <ul>
                      <li>
                        This class is used for the loading state of the feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Centers the text and sets the
                        margin.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__error:</strong>
                    <ul>
                      <li>
                        This class is used for the error state of the feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Centers the text and sets the
                        margin.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__section-break:</strong>
                    <ul>
                      <li>
                        This class is used for the section break in the feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the width, height,
                        background, and margin.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__default-placeholder:</strong>
                    <ul>
                      <li>
                        This class is used for the default placeholder in the
                        feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Centers the text and sets the
                        margin.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__grid:</strong>
                    <ul>
                      <li>
                        This class is used for the grid layout of the feed
                        items.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the display to grid, sets
                        the margin, and defines the grid template columns.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__button:</strong>
                    <ul>
                      <li>This class is used for the button in the feed.</li>
                      <li>
                        <strong>Default:</strong> Centers the text, sets the
                        display to block, and sets the margin and max-width.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-container:</strong>
                    <ul>
                      <li>
                        This class is used for the container of each feed item.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the color, background,
                        margin, text decoration, display, flex direction, align
                        items, justify content, text align, height, border
                        radius, padding, box shadow, and transition.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-image-container:</strong>
                    <ul>
                      <li>
                        This class is used for the image container of each feed
                        item.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the width, height, and
                        margin-bottom.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-image:</strong>
                    <ul>
                      <li>
                        This class is used for the image of each feed item.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the max-width,
                        max-height, and border radius.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-title:</strong>
                    <ul>
                      <li>
                        This class is used for the title of each feed item.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the font weight and
                        margin-bottom.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-description:</strong>
                    <ul>
                      <li>
                        This class is used for the description of each feed
                        item.
                      </li>
                      <li><strong>Default:</strong> Sets the font size.</li>
                    </ul>
                  </li>
                  <li>
                    <strong>rss-feed__item-published:</strong>
                    <ul>
                      <li>
                        This class is used for the published date of each feed
                        item.
                      </li>
                      <li>
                        <strong>Default:</strong> Sets the font size,
                        margin-bottom, and font weight.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>no-results-message:</strong>
                    <ul>
                      <li>
                        This class is used for the message displayed when there
                        are no results.
                      </li>
                      <li>
                        <strong>Default:</strong> Centers the text and sets the
                        font weight.
                      </li>
                    </ul>
                  </li>
                  <li>
                    <strong>feed-description:</strong>
                    <ul>
                      <li>
                        This class is used for the description of the feed.
                      </li>
                      <li>
                        <strong>Default:</strong> Used to control the display
                        property of the feed description.
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseThree"
                aria-expanded="false"
                aria-controls="collapseThree"
              >
                Coming Soon:
              </button>
            </h2>
            <div
              id="collapseThree"
              class="accordion-collapse collapse"
              data-bs-parent="#accordionFaq"
            >
              <div class="accordion-body">
                More updates and changes are coming soon so keep posted!
                &#128513;
              </div>
            </div>
          </div>

          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseFour"
                aria-expanded="false"
                aria-controls="collapseFour"
              >
                Version History:
              </button>
            </h2>
            <div
              id="collapseFour"
              class="accordion-collapse collapse"
              data-bs-parent="#accordionFaq"
            >
              <div class="accordion-body">
                <ul>
                  <li>
                    <strong>0.0.1-Alpha:</strong>
                    <p style="float: right">9th June, 2024</p>
                    <ul>
                      <li>Initial release of the component</li>
                      <li>Basic functionality and styling</li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <hr />
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p class="text-center">
              &copy; <span id="currentYear"></span> - Substack Post Feed
              Component - <span style="font-weight: 700">V.0.0.1-Alpha</span>
              <br />
              <a
                href="https://pascalcouturier.com"
                target="_blank"
                style="color: #000"
                >Pascal Couturier</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <script>
      document.getElementById("currentYear").textContent =
        new Date().getFullYear();
    </script>

    <script>
      document
        .getElementById("updateButton")
        .addEventListener("click", function () {
          event.preventDefault();

          var pageName = document.getElementById("pageNameInput").value;
          var feedAmount = document.getElementById("feedAmountInput").value;
          var customCssFeed = document.getElementById("customCssFeed").value;
          var customCssLoader =
            document.getElementById("customCssLoader").value;

          var rssFeed = document.getElementById("rssFeed");
          var rssFeedDemoHeading = document.getElementById(
            "substack-demo-heading"
          );

          rssFeedDemoHeading.scrollIntoView();
          var newRssFeed = rssFeed.cloneNode(true);
          newRssFeed.setAttribute("substack-page-name", pageName);
          newRssFeed.setAttribute("feed-amount-displayed", feedAmount);
          newRssFeed.setAttribute("custom-css-feed", customCssFeed);
          newRssFeed.setAttribute("custom-css-loader", customCssLoader);
          rssFeed.parentNode.replaceChild(newRssFeed, rssFeed);
        });
    </script>
    <script>
      function checkInput() {
        var pageNameInput = document.getElementById("pageNameInput");
        var updateButton = document.getElementById("updateButton");
        var errorMessage = document.getElementById("pageNameInputError");

        if (pageNameInput.value.trim() === "") {
          updateButton.disabled = true;
          pageNameInput.classList.add("error");
          errorMessage.style.display = "block";
        } else {
          updateButton.disabled = false;
          pageNameInput.classList.remove("error");
          errorMessage.style.display = "none";
        }
      }

      // Call checkInput initially to set the button state based on the initial input value
      checkInput();
    </script>
  </body>
</html>