404 copy.html

---

layout: default

---

    <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

      <header class="post-header">
        <h1 id="title" class="post-title p-name" itemprop="name headline">
          <span id="htmlTitle" onclick="this.contentEditable = 'true';" contenteditable="true">Error 404</span>
        </h1>

        <div id="htmlSubtitle" onclick="this.contentEditable = 'true';" contenteditable="true" class="sub-title">What is this page about?</div>

      </header>

      <div id="htmlBody" class="post-content e-content" itemprop="articleBody">

      </div>

    </article>



    <script src="https://gyanl.com/assets/pell.js"></script>

    <script type="text/javascript">
    

      // Initialize pell on an HTMLElement
  pell.init({
    // <HTMLElement>, required
    element: document.getElementById('htmlBody'),

    // <Function>, required
    // Use the output html, triggered by element's `oninput` event
    onChange: html => console.log(html),

    // <string>, optional, default = 'div'
    // Instructs the editor which element to inject via the return key
    defaultParagraphSeparator: 'p',

    // <boolean>, optional, default = false
    // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
    styleWithCSS: false,

    // <Array[string | Object]>, string if overwriting, object if customizing/creating
    // action.name<string> (only required if overwriting)
    // action.icon<string> (optional if overwriting, required if custom action)
    // action.title<string> (optional)
    // action.result<Function> (required)
    // Specify the actions you specifically want (in order)
    actions: [
      'bold',
      'italic',
      'underline',
      'heading1',
      'heading2',
      'heading3',
      'heading4',
      'paragraph',
      'olist',
      'ulist',
      'todo'
    ],

    // classes<Array[string]> (optional)
    // Choose your custom class names
    classes: {
      actionbar: 'pell-actionbar',
      button: 'pell-button',
      content: 'pell-content',
      selected: 'pell-button-selected'
    }
  })

    </script>

    <script type="module">

    // Get pageName = gyanl.com/string

    var pageName = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    console.log(pageName);

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
    import { getDatabase, ref, set, onValue, update } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-database.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "AIzaSyCLkh1I6haUU51EslRGSlXkXiYqOkvcCKA",
      authDomain: "idea-cbd6c.firebaseapp.com",
      databaseURL: "https://idea-cbd6c-default-rtdb.asia-southeast1.firebasedatabase.app",
      projectId: "idea-cbd6c",
      storageBucket: "idea-cbd6c.appspot.com",
      messagingSenderId: "965624401030",
      appId: "1:965624401030:web:accca7b65fddd344591507",
      measurementId: "G-CVF81V77DF"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const db = getDatabase();

    const reference = ref(db, pageName + '/');

    var vtitle = document.getElementById('htmlTitle');
    var vsubtitle = document.getElementById('htmlSubtitle');
    var vbody = document.getElementsByClassName("pell-content")[0];

    var actionbar = document.getElementsByClassName("pell-actionbar")[0];
    hideActionBar();

    // One time run
      onValue(reference, (snapshot) => {

    // If snapshot exists, get the values and populate the page.
        if (snapshot.exists()) {
          console.log(snapshot.val());
          vtitle.innerHTML = snapshot.val().title;
          vsubtitle.innerHTML = snapshot.val().subtitle;
          vbody.innerHTML = snapshot.val().body;
        } else {
        // If no snapshot, fill values and create record.
          console.log("Creating new record.");
          vtitle.innerHTML = pageName;
          vbody.innerHTML = "Write something epic.<br><br><br><br><br><br><br>";
          vbody.style.opacity = "0.5";

    // Create new log
          set(ref(db, pageName + "/"), {
            title: vtitle.innerHTML,
            subtitle: vsubtitle.innerHTML,
            body : vbody.innerHTML
          });
        }
      });

    function updateValues() {
      const updates = {};
      updates[pageName + "/"] = {
        title: vtitle.innerHTML,
        subtitle: vsubtitle.innerHTML,
        body: vbody.innerHTML
      };
      update(ref(db), updates);
      console.log("Update sent");
      hideActionBar();
    }

    function showActionBar() {
        actionbar.classList.remove("hidden");
        vbody.style.opacity = "1.0";
    }

    function hideActionBar() {
        actionbar.classList.add("hidden");
    }

    // Add event listeners

    vtitle.addEventListener("blur", updateValues);
    vsubtitle.addEventListener("blur", updateValues);
    vbody.addEventListener("blur", updateValues);
    vbody.addEventListener("focus", showActionBar);

    </script>