mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-26 09:44:32 +02:00
social, dev bar, github ear
This commit is contained in:
Pomax
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
docs/images/ribbon.png
Normal file
BIN
docs/images/ribbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
7742
docs/index.html
7742
docs/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -3,89 +3,84 @@
|
||||
* are updated to reflect the section someone is reading, rather than always pointing to
|
||||
* base article itself.
|
||||
*/
|
||||
(function tryToBind() {
|
||||
if (!document.querySelector(`map[name="rhtimap"]`)) {
|
||||
return setTimeout(tryToBind, 300);
|
||||
class Tracker {
|
||||
constructor() {
|
||||
this.name = `A Primer on Bézier Curves`;
|
||||
this.sectionTitle = false;
|
||||
this.hash = false;
|
||||
this.socials = ["rdt", "hn", "twt"];
|
||||
}
|
||||
|
||||
class Tracker {
|
||||
constructor() {
|
||||
this.section = false;
|
||||
this.hash = false;
|
||||
this.socials = ["rdt", "hn", "twt"];
|
||||
}
|
||||
|
||||
update(data) {
|
||||
this.section = data.section;
|
||||
this.hash = data.hash;
|
||||
this.socials.forEach((social) => {
|
||||
var area = document.querySelector(`map area.sclnk-${social}`);
|
||||
area.href = this[`get_${social}`]();
|
||||
});
|
||||
}
|
||||
|
||||
get url() {
|
||||
return encodeURIComponent(
|
||||
`https://pomax.github.io/bezierinfo${this.hash ? this.hash : ""}`
|
||||
update(section) {
|
||||
let a = section.querySelector(`h1 > a`);
|
||||
this.hash = a.hash;
|
||||
this.sectionTitle = a.textContent;
|
||||
this.socials.forEach((social) => {
|
||||
var area = document.querySelector(
|
||||
`map[name=rhtimap] area.sclnk-${social}`
|
||||
);
|
||||
}
|
||||
area.href = this[`get_${social}`]();
|
||||
});
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
var title = `A Primer on Bézier Curves`;
|
||||
if (this.section) {
|
||||
title = `${this.section}-${title}`;
|
||||
get url() {
|
||||
return encodeURIComponent(
|
||||
`https://pomax.github.io/bezierinfo${this.hash ? this.hash : ""}`
|
||||
);
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
let title = ``;
|
||||
if (this.sectionTitle) {
|
||||
title = `${this.name} — ${this.sectionTitle}`;
|
||||
}
|
||||
return encodeURIComponent(title);
|
||||
}
|
||||
|
||||
get_rdt() {
|
||||
var title = this.getTitle();
|
||||
var text = encodeURIComponent(
|
||||
`A free, online book for when you really need to know how to do Bézier things.`
|
||||
);
|
||||
return `https://www.reddit.com/submit?url=${this.url}&title=${title}&text=${text}`;
|
||||
}
|
||||
|
||||
get_hn() {
|
||||
var title = this.getTitle();
|
||||
return `https://news.ycombinator.com/submitlink?u=${this.url}&t=${title}`;
|
||||
}
|
||||
|
||||
get_twt() {
|
||||
var text =
|
||||
encodeURIComponent(
|
||||
`Reading "${this.sectionTitle}" by @TheRealPomax over on `
|
||||
) + this.url;
|
||||
return `https://twitter.com/intent/tweet?original_referer=${this.url}&text=${text}&hashtags=bezier,curves,maths`;
|
||||
}
|
||||
}
|
||||
|
||||
// we set the section and fragmentid based on which ever section's heading is nearest
|
||||
// the top of the screen, either just off-screen or in-screen
|
||||
const tracker = new Tracker();
|
||||
const sections = Array.from(document.querySelectorAll("#chapters section"));
|
||||
let prevScroll = 0;
|
||||
window.addEventListener(
|
||||
`scroll`,
|
||||
(evt) => {
|
||||
// which direction are we scrolling?
|
||||
const diff = window.scrollY - prevScroll;
|
||||
prevScroll = window.scrollY;
|
||||
const vh = window.innerHeight,
|
||||
t = 0.33,
|
||||
vht = t * vh,
|
||||
vhb = (1 - t) * vh;
|
||||
for (let s = 0, e = sections.length; s < e; s++) {
|
||||
let section = sections[s];
|
||||
let bbox = section.getBoundingClientRect();
|
||||
if (bbox.top < vht && bbox.bottom > vhb) {
|
||||
tracker.update(section);
|
||||
}
|
||||
return encodeURIComponent(title);
|
||||
}
|
||||
|
||||
get_rdt() {
|
||||
var title = this.getTitle();
|
||||
var text = encodeURIComponent(
|
||||
`A free, online book for when you really need to know how to do Bézier things.`
|
||||
);
|
||||
return `https://www.reddit.com/submit?url=${this.url}&title=${title}&text=${text}`;
|
||||
}
|
||||
|
||||
get_hn() {
|
||||
var title = this.getTitle();
|
||||
return `https://news.ycombinator.com/submitlink?u=${this.url}&t=${title}`;
|
||||
}
|
||||
|
||||
get_twt() {
|
||||
var text =
|
||||
encodeURIComponent(
|
||||
`Reading "${this.section}" by @TheRealPomax over on `
|
||||
) + this.url;
|
||||
return `https://twitter.com/intent/tweet?original_referer=${this.url}&text=${text}&hashtags=bezier,curves,maths`;
|
||||
}
|
||||
}
|
||||
|
||||
// we set the section and fragmentid based on which ever section's heading is nearest
|
||||
// the top of the screen, either just off-screen or in-screen
|
||||
var tracker = new Tracker();
|
||||
var anchors = Array.from(document.querySelectorAll("section h2 a"));
|
||||
var sections = anchors.map((a) => a.parentNode);
|
||||
var sectionData = sections.map((section) => {
|
||||
return {
|
||||
section: section.textContent,
|
||||
hash: section.querySelector("a").hash,
|
||||
};
|
||||
});
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function (evt) {
|
||||
var min = 99999999999999999;
|
||||
var element = false;
|
||||
sections.forEach((s, pos) => {
|
||||
var v = Math.abs(s.getBoundingClientRect().top);
|
||||
if (v < min) {
|
||||
min = v;
|
||||
element = pos;
|
||||
}
|
||||
});
|
||||
tracker.update(sectionData[element]);
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
})();
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
@@ -280,4 +280,62 @@ hr {
|
||||
border: none;
|
||||
border-top: 1px solid black;
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.scl img[usemap] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.dev, div.scl, div.github {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
div.dev {
|
||||
background: rgb(43, 49, 95);
|
||||
color: rgb(81, 181, 255);
|
||||
position: fixed;
|
||||
transform: rotate(-45deg);
|
||||
width: 22em;
|
||||
text-align: center;
|
||||
top: 4em;
|
||||
left: -6em;
|
||||
font-variant: small-caps;
|
||||
font-weight: bolder;
|
||||
font-family: Helvetica;
|
||||
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
div.scl {
|
||||
position:fixed;
|
||||
top: 0.25em;
|
||||
left: 0.25em;
|
||||
padding: 4px
|
||||
}
|
||||
|
||||
div.github {
|
||||
--scale: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: top right;
|
||||
transform: scale(var(--scale));
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
div.github { --scale: 0.4; }
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
div.github { --scale: 0.5; }
|
||||
}
|
||||
@media screen and (min-width: 1470px) {
|
||||
div.github { --scale: 0.75; }
|
||||
}
|
||||
@media screen and (min-width: 1600px) {
|
||||
div.github { --scale: 0.9; }
|
||||
}
|
||||
|
||||
div.github img area {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
12
src/fragments/dev-ribbon.html
Normal file
12
src/fragments/dev-ribbon.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="dev" style="display:none;">
|
||||
DEV PREVIEW ONLY
|
||||
<script>
|
||||
(function () {
|
||||
var loc = window.location.toString();
|
||||
if (loc.includes('localhost') || loc.includes('BezierInfo-2')) {
|
||||
var e = document.querySelector('div.dev');
|
||||
e.removeAttribute("style");
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
</div>
|
||||
6
src/fragments/github.html
Normal file
6
src/fragments/github.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="github">
|
||||
<img src="images/ribbon.png" alt="This page on GitHub" style="border:none;" useMap="#githubmap" width="200" height="149" />
|
||||
<map name="githubmap">
|
||||
<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
|
||||
</map>
|
||||
</div>
|
||||
23
src/fragments/meta.html
Normal file
23
src/fragments/meta.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!-- And a slew of SEO related meta elements, because being discoverable is important -->
|
||||
<meta name="description" content="{{ description }}" />
|
||||
|
||||
<!-- opengraph information -->
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta property="og:type" content="text" />
|
||||
<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta property="og:description" content="{{ description }}" />
|
||||
<meta property="og:locale" content="{{ locale }}}}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13 12:00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
<!-- twitter card information -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@TheRealPomax" />
|
||||
<meta name="twitter:creator" content="@TheRealPomax" />
|
||||
<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta name="twitter:description" content="{{ description }}" />
|
||||
28
src/fragments/noscript.html
Normal file
28
src/fragments/noscript.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<noscript>
|
||||
<div class="note">
|
||||
<header>
|
||||
<h2>This site (obviously) works best with JS enabled</h2>
|
||||
<h3>But it's not required.</h3>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
If you can read this <noscript> content, you have scripts disabled: thankfully,
|
||||
this site is not going to force you to turn it on just to see any content. Everything
|
||||
will work just fine, you can still read the text, navigate to sections, and see the
|
||||
graphics that are used to illustrate the concepts that individual sections talk about.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>However</strong>, a big part of this primer's experience is the fact that all
|
||||
graphics are interactive, and for that to work, HTML Custom Elements need to work,
|
||||
which requires Javascript to be enabled. If anything, you'll probably want to allow
|
||||
scripts to run just for this site, and keep blocking everything else (although that
|
||||
does mean you won't see comments, which use Disqus's comment syste, and you won't get
|
||||
convenient "share a link to the section you're reading right now" buttons, if that's
|
||||
something you like to do. You'll also be blocking my non-google pagehit tracker, which
|
||||
lets me see who's linking to the primer, which you probably don't care about, but lets
|
||||
me strike up conversations with folks who I would otherwise never know thought the
|
||||
primer was worth linking to, and I like talking to people who care enough to link)
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
17
src/fragments/share.html
Normal file
17
src/fragments/share.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!-- Because people probably want to share this article -->
|
||||
<div class="notforprint scl">
|
||||
<img src="images/icons.gif" usemap="#rhtimap" title="Share this on social media" />
|
||||
<map name="rhtimap">
|
||||
<area class="sclnk-rdt" shape="rect" coords="0, 0, 19, 15"
|
||||
href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things."
|
||||
alt="submit to reddit" title="submit to reddit">
|
||||
<area class="sclnk-hn" shape="rect" coords="0, 20, 19, 35"
|
||||
href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves"
|
||||
alt="submit to hacker news" title="submit to hacker news">
|
||||
<area class="sclnk-twt" shape="rect" coords="0, 40, 19, 55"
|
||||
href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo"
|
||||
alt="tweet your read" title="tweet your read">
|
||||
</map>
|
||||
</div>
|
||||
|
||||
<script src="./js/site/social-updater.js" async defer></script>
|
||||
@@ -13,29 +13,7 @@
|
||||
<link rel="preload" href="images/paper.png" as="image" />
|
||||
<link rel="stylesheet" href="placeholder-style.css" />
|
||||
|
||||
<!-- And a slew of SEO related meta elements, because being discoverable is important -->
|
||||
<meta name="description" content="{{ description }}" />
|
||||
|
||||
<!-- opengraph information -->
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta property="og:type" content="text" />
|
||||
<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta property="og:description" content="{{ description }}" />
|
||||
<meta property="og:locale" content="{{ locale }}}}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13 12:00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
<!-- twitter card information -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@TheRealPomax" />
|
||||
<meta name="twitter:creator" content="@TheRealPomax" />
|
||||
<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta name="twitter:description" content="{{ description }}" />
|
||||
{% include "./fragments/meta.html" %}
|
||||
|
||||
<!-- my own referral/page hit tracker, because Google knows enough -->
|
||||
<script src="./js/site/referrer.js" type="module" async></script>
|
||||
@@ -54,46 +32,19 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include "./fragments/dev-ribbon.html" %}
|
||||
{% include "./fragments/github.html" %}
|
||||
{% include "./fragments/share.html" %}
|
||||
<header>
|
||||
<h1>{{ title }}</h1>
|
||||
<h2>{{ subtitle }}</h2>
|
||||
|
||||
<span>{{ langSwitchLabel }}</span>
|
||||
|
||||
<ul class="lang-switcher">
|
||||
{{ langSwitcher }}
|
||||
</ul>
|
||||
|
||||
<p>{{ langHelpLabel }}</p>
|
||||
|
||||
<noscript>
|
||||
<div class="note">
|
||||
<header>
|
||||
<h2>This site (obviously) works best with JS enabled</h2>
|
||||
<h3>But it's not required.</h3>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
If you can read this <noscript> content, you have scripts disabled: thankfully,
|
||||
this site is not going to force you to turn it on just to see any content. Everything
|
||||
will work just fine, you can still read the text, navigate to sections, and see the
|
||||
graphics that are used to illustrate the concepts that individual sections talk about.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>However</strong>, a big part of this primer's experience is the fact that all
|
||||
graphics are interactive, and for that to work, HTML Custom Elements need to work,
|
||||
which requires Javascript to be enabled. If anything, you'll probably want to allow
|
||||
scripts to run just for this site, and keep blocking everything else (although that
|
||||
does mean you won't see comments, which use Disqus's comment syste, and you won't get
|
||||
convenient "share a link to the section you're reading right now" buttons, if that's
|
||||
something you like to do. You'll also be blocking my non-google pagehit tracker, which
|
||||
lets me see who's linking to the primer, which you probably don't care about, but lets
|
||||
me strike up conversations with folks who I would otherwise never know thought the
|
||||
primer was worth linking to, and I like talking to people who care enough to link)
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
{% include "./fragments/noscript.html" %}
|
||||
|
||||
<nav aria-labelledby="toc">
|
||||
<h1 id="toc">{{ tocLabel }}</h1>
|
||||
@@ -107,11 +58,9 @@
|
||||
<section id="changelog">
|
||||
<h1>{{ changelogTitle }}</h1>
|
||||
<p>{{ changelogDescription }}</p>
|
||||
|
||||
<!-- non-JS content reveals are nice -->
|
||||
<label for="changelogtoggle">{{ toggleLabel }}</label>
|
||||
<input type="checkbox" id="changelogtoggle">
|
||||
|
||||
<section>{{ changelog }}</section>
|
||||
</section>
|
||||
|
||||
@@ -126,6 +75,7 @@
|
||||
Go do something cool with it!
|
||||
</footer>
|
||||
|
||||
<!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
|
||||
<script src="./js/site/fix-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user