pimterry

var hashLinks = document.querySelectorAll("a[href^='#']");
[].forEach.call(hashLinks, function (link) {
  link.addEventListener("click", function (event) {
    event.preventDefault();
    history.pushState({}, "", link.href);
    
    // Update the URL again with the same hash, then go back
    history.pushState({}, "", link.href);
    history.back();
  });

pimterry

var hashLinks = document.querySelectorAll("a[href^='#']");
[].forEach.call(hashLinks, function (link) {
  link.addEventListener("click", function (event) {
    // Disable jumping around and URL updates
    event.preventDefault();
    // Update the URL only ourselves
    history.pushState({}, "", link.href);
  });
});

pimterry

Keybase proof

I hereby claim:

• I am pimterry on github.
• I am pimterry (https://keybase.io/pimterry) on keybase.
• I have a public key whose fingerprint is 6710 FEC7 856D 57B7 E812 76BC 0DDE 38AF D3AF 94F0

To claim this, I am signing this object:

pimterry

CFLAGS="-I$(brew --prefix readline)/include -I$(brew --prefix openssl)/include -I$(xcrun --show-sdk-path)/usr/include" \
LDFLAGS="-L$(brew --prefix readline)/lib -L$(brew --prefix openssl)/lib" \
PYTHON_CONFIGURE_OPTS=--enable-unicode=ucs2 \
pyenv install -v 2.7.11

pimterry

var fs = require("fs");
var express = require("express");
var components = require("server-components");

require("./linkify-example-component.js");
require("./google-analytics-example-component.js");

var html = fs.readFileSync("index.html");

var app = express();

pimterry

<linkify-urls>
    Hi there! Welcome to
    <a href="http://mywebsite.com" class="autolinked">mywebsite.com</a>
</linkify-urls>

<google-analytics tracking-id="UA-770734658-1">
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

pimterry

var components = require("server-components");

var GoogleAnalytics = components.newElement();

/**
 * A <google-analytics tracking-id="UA-7123123-1"> element, which adds the 
 * standard Google Analytics scripts to your page, for given the tracking id.
 */
GoogleAnalytics.createdCallback = function (document) {
    // Use the normal DOM API methods

pimterry

var components = require("server-components");

// We have a DOM simulation: quite a few client-side JS libraries will Just Work
var linkify = require("linkifyjs/element");

/**
 * A <linkify-urls> element, which finds plain text URLs within its content,
 * and automatically rerenders them wrapped in <a> tags.
 */
var LinkifyElement = components.newElement();

pimterry

var components = require("server-components");

var GoogleMap = components.newElement();

// Note: ES6 without build steps. On the server-side, we pick the JS engine.
GoogleMap.createdCallback = (document) => {
  this.innerHTML = `
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11969.1769064053!2d2.15484835!3d41.411131299999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2ses!4v1463576398125" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  `
};

pimterry

<linkify-urls>
    Hi there! Welcome to mywebsite.com
</linkify-urls>

<google-analytics tracking-id="UA-770734658-1"></google-analytics>