The Cookie Machine - Click here to drag window

DUMMY TEXT - Real text set in assets/js/theCookieMachine.js

If you can read me, I'm broken!

ToC Skip

Introduction

Just click a few buttons to paste clipboard contents into Hyperlink Recipe Baker ingredient fields. Then select “Bake” option for a Hyperlink in HTML format or a Hyperlink in Markdown format copied to your clipboard.

Then simply paste the “baked recipe” into your document with Ctrl + V.

Top ToS Skip

Table of Contents

Top ToS ToC Skip

Using Hyperlink Recipe Baker (HRB)

Below is the Hyperlink Recipe Baker which you can easily drop into your own webpage.

DUMMY TEXT - Real text set in User Script

Usage

  1. Right-click on your target address bar and select “copy”.
  2. Click URL (href) above to paste.
  3. Highlight title from target. Right-click and select “copy”.
  4. Click Name (text) above to paste. Or, type in a name.
  5. Highlight excerpt from target. Right-click and select “copy”.
  6. Click Tooltip (title) above to paste. Or, type in tooltip.
  7. Click HTML or Markdown to “bake” Hyperlink Recipe into clipboard.
  8. Go to your document, and insert the hyperlink using Ctrl + V.

Important note for Stack Exchange Users

Do NOT use the New Window/Tab option. Stack Exchange will not render the final HTML whatsoever. Even the link name and href will be lost.

Samples

Below is sample HTML baked recipe:

Below is sample Markdown baked recipe:

Voila! You are now a master baker.

Top ToS ToC Skip

Read Clipboard Special Permissions

Modern browsers will let any program write to the clipboard without user permission. Reading from the clipboard though, is a high security featured requiring explicit user permission.

Reason for high security to read the Clipboard

A user may have a document with their passwords in it. When they need to sign on they may open the document, copy their password and paste it into the sign on screen. If you do that remember to immediately copy some random sentence into your clipboard immediately after pasting your password.

Chrome

Chrome will ask you for permission to allow the copied; URL, Name and Tooltip to be read.

Firefox

Firefox requires you to grant permission with these steps:

If You Don’t Want to Give Special Permission

If you don’t want to grant permissions you can still use HRB by using Control + V to paste clipboard contents directly in the input field instead of using the button to insert clipboard contents.

Top ToS ToC Skip

Install Hyperlink Recipe Baker on a Website

You can install Hyperlink Recipe Baker, HRB for short, on your own website. For this purpose a scaled down version has been created for you to include on your own website.

The easiest way is highlight the code in the the GitHub Repository and paste into a new file in your website.

Follow these steps:

Now modify your Jekyll layout, or use stub program _layouts/hrb.html in the above repo.

Also modify your JavaScript, or use the stub program assets/js/hrb.js in the above repo.

Finally create a markdown document with the HRB, or use the stub markdown hrb.md in the above repo.

Top ToS ToC Skip

Add JavaScript Filename to Top Level HTML

A scaled down version of your webpage top level _layout file:

<!DOCTYPE html>
<!--  https://github.com/pippim/pippim.github.io/new/main/_layhouts/hrb.html

      Stripped down default.html version without searchbar, buttons and tcm.

      Requires:
        hrb.js (Stub JavaScript that imports hyperlinkRecipe.js)
        hyperlinkRecipe.js (imported by hrb.js)
        hrb.md (Stub markdown that renders to https://pippim.github.io/hrb.html
-->

<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#157878">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="stylesheet"
          href="/assets/css/style.css?v=0819070f08f0d1738f94c2a9e70b20b671e89ad5">
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
  </head>

  <body>
    <header class="page-header" role="banner">
      <h1 class="project-name"
        >Hyperlink Recipe Baker</h1>

      <!-- Top level JavaScript defined as module so it can import hyperlinkRecipe.js -->
      <script type="module" src="/assets/js/hrb.js"></script>

    </header>
    <main id="content" class="main-content" role="main">
     <!-- Diet version - hrb.md - No buttons, search bar, footer, TCM or notes 
     Full version - hyperlink.md - All the bells and whistles
-->

<!-- The div below is populated by /assets/js/hrb.js -->
<div id="hrb_body">
<p> DUMMY TEXT - Real text set in User Script </p>
</div>

<h2 id="usage">Usage</h2>

<ol>
  <li>Right-click on your target address bar and select “copy”.</li>
  <li>Click <kbd>URL (href)</kbd> above to paste.</li>
  <li>Highlight title from target. Right-click and select “copy”.</li>
  <li>Click <kbd>Name (text)</kbd> above to paste. Or, type in a name.</li>
  <li>Highlight excerpt from target. Right-click and select “copy”.</li>
  <li>Click <kbd>Tooltip (title)</kbd> above to paste. Or, type in tooltip.</li>
  <li>Click <kbd>HTML</kbd> or <kbd>Markdown</kbd> to “bake” Hyperlink Recipe into clipboard.</li>
  <li>Go to your document, and insert the hyperlink using <kbd>Ctrl</kbd> + <kbd>V</kbd>.</li>
</ol>

<p>This is the “Diet” version for Hyperlink Recipe Baker (HRB). See the
<a href="https://pippim.github.io/programs/hyperlink.html#" title="Complete guide for using and installing Hyperlink Recipe Baker" target="_blank">Full Version</a>.
for more details. You will also find instructions for creating
an HRB version on your own website.</p>

<blockquote>
  <p><strong>Important note for Stack Exchange Users</strong></p>

  <p>Do <strong>NOT</strong> use the <em>New Window/Tab</em> option. Stack Exchange will 
not render the final HTML whatsoever. Even the link name and
href will be lost.</p>
</blockquote>

    </main>
  </body>
</html>

<!-- End of _layouts/hrb.html -->

For HRB installation, The only lines of particular interest are:

<!-- Top level JavaScript defined as module so it can import hyperlinkRecipe.js -->
<script type="module" src="/assets/js/hrb.js"></script>

You may already have a JavaScript file setup in your top level HTML. In this case simply change the type from applicatdion/javascript to module. Then proceed to the next section.

Top ToS ToC Skip

Modify JavaScript File to Import hyperlinkRecipe.js

Then in one of your javaScript files (in this case we used hrb.js) setup the code to invoke HRB:

/* /assets/js/hrb.js - Stub for importing Hyperlink Recipe Baker

  Drop this code into your main JavaScript file

*/

import {processHyperlinkRecipe} from './hyperlinkRecipe.js';

// Webpage may have <div id="hrb_body" defined. If so populate it
window.addEventListener('DOMContentLoaded', (event) => {
    // https://stackoverflow.com/a/42526074/6929343
    var myEle = document.getElementById("hrb_body");
    if(myEle != null){
        processHyperlinkRecipe('hrb_body');
    }
});

/* End of /assets/js/hrb.js */

NOTE: The javascript file must be called by your toplevel markdown file such as _layouts/default.html, _layouts/post.html, etc.

Top ToS ToC Skip

Sample Markdown File with HRB Body

The hrb.html markdown file is rendered to HTML:

---
title: Hyperlink Recipe Baker
layout: hrb
---

<!-- The div below is populated by /assets/js/hrb.js -->
<div id="hrb_body">
<p> DUMMY TEXT - Real text set in User Script </p>
</div>

## Usage

1. Right-click on your target address bar and select "copy".
2. Click <kbd>URL (href)</kbd> above to paste.
3. Highlight title from target. Right-click and select "copy".
4. Click <kbd>Name (text)</kbd> above to paste.
5. Highlight excerpt from target. Right-click and select "copy".
6. Click <kbd>Tooltip (title)</kbd> above to paste.
7. Click <kbd>HTML</kbd> or <kbd>Markdown</kbd> to copy Hyperlink into clipboard.
8. Insert the clipboard containing hyperlink into your document.

For more details, including dropping this page into your own
website, see the 
[complete instructions](https://pippim.github.io/programs/hyperlink.html# "Complete guide for using and installing Hyperlink Recipe Baker"){:target="_blank"}.

If you have cloned the entire Pippim website, edit the hyperlink with your own website address.

Top ToS ToC Skip

Customizing Hyperlink Recipe Baker

“out of the box”, HRB will automatically resize <textarea> fields for URL (href), Recipe HTML and Recipe Markdown. That is to say, as the text grows, so does the size of the box it is in. As the text shrinks, so does the size of the box they it is in.

Turn Off Auto-Resizing <textarea>

At the top of HRB’s /assets/js/hyperlinkRecipe.js file you see:

        autoRows:   "0" = No auto resizing
                  > "0" = maximum number of auto-resized rows

*/

var autoRows = '5';     // Override using -data-max="5"
var autoMinRows = "1";  // Override using -data-min="1"

If you wish to have manually resize the <textare> element, then set autoRows = '0'. If you are interested, here is the function called to automatically resize <textarea>:

export function setTextAreaRows (textarea) {
    var minRows = Number(autoMinRows)       // autoMinRows must be declared globally above
    var maxRows = Number(autoRows)          // E.G. var autoRows = "5"; sets 5 maximum rows
    // CSS overrides 'data-min = "_"' or 'data-max = "_"'.  Where _ = number of rows.
    if (textarea.dataset.hasOwnProperty('min')) { minRows = Number(textarea.dataset.min) }
    if (textarea.dataset.hasOwnProperty('max')) { maxRows = Number(textarea.dataset.max) }
    var clone = textarea.cloneNode(true);   // Make clone of <textarea> element
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    clone.left = String(w * -2) + "px";     // Set clone position left off of screen
    clone.style.width = textarea.offsetWidth.toString() + 'px';
    clone.rows = minRows.toString();        // Set clone # of rows to minimum required
    document.body.appendChild(clone);       // Add clone to webpage but it's out of view
    if (clone.offsetHeight < clone.scrollHeight) {
        for (var rows = minRows; rows <= maxRows; rows++) {
            clone.rows = rows.toString();   // Set new number of rows then test height
            if (clone.offsetHeight >= clone.scrollHeight) { break; }}}
    textarea.rows = clone.rows;             // Update real <textarea>
    clone.remove();                         // Remove cloned <textarea>
}

Override Auto-Resizing <textarea> By Element

Notice maxRows = Number(textarea.dataset.max. You can have autoRows = "5" defined which causes scroll bars to appear when <textarea> fields hit maximum of 5 rows. Using .dataset.max though you can override a given <textarea> for fewer or more rows as the maximum. That is controlled in the CSS:

'<td><textarea id="hrRecipeHtml" class="hrInput" cols="45" rows="1"\n' +
' data-min="1" data-max="6"\n' +
'placeholder="HTML Recipe will be built here"></textarea></td></tr>\n'

Here the minimum number of rows override is “1” and the maximum number of rows override is “6”.

Top ToS ToC