autonomic-cooperative/kcl-digital-humanities-garden
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design update

Browse Source
This commit is contained in:
Garry Ing 2021-03-24 22:18:10 -04:00
parent 186a1d0164
commit 7dc9269989
No known key found for this signature in database
GPG Key ID: 3B379B1F2193CC3E
8 changed files with 132 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/header.html
View File

@ -1,15 +1,15 @@
<header class="f-6 flex anthony"> <header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline">
{%- assign default_paths = site.pages | map: "path" -%} {%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%} {%- assign page_paths = site.header_pages | default: default_paths -%}
{%- assign titles_size = site.pages | map: 'title' | join: '' | size -%} {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
<a class="no-underline-hover" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a> <a class="no-underline f4 dark-green anthony" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
{%- if titles_size > 0 -%} {%- if titles_size > 0 -%}
<nav> <nav>
{%- for path in page_paths -%} {%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%} {%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%} {%- if my_page.title -%}
, <a class="no-underline-hover" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a> <a class="f7 no-underline dark-green" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%} {%- endif -%}
{%- endfor -%} {%- endfor -%}
</nav> </nav>

4
_includes/link-previews.html
View File

@ -1,6 +1,6 @@
<!-- That file is not particularly elegant. This will need a refactor at some point. --> <!-- That file is not particularly elegant. This will need a refactor at some point. -->
<div class="hide-child"> <div class="hide-child links-dark-green">
<div id='tooltip-wrapper' class="bg-white lh-copy dn o-0 pa2 w5 f6 overflow-hidden absolute child"> <div id='tooltip-wrapper' class="bg-white br4 shadow-1 lh-copy dn o-0 pa2 w5 f6 overflow-hidden absolute child">
<div id='tooltip-content'> <div id='tooltip-content'>
</div> </div>
</div> </div>

9
_includes/notes_graph.html
View File

@ -1,9 +1,8 @@
<div class="absolute bottom-1"> <div id="graph-wrapper" class="relative vh-100 code f6">
<p class="ma0 f7 measure-narrow lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
</div>
<div id="zoom" class="absolute code f7 bottom-1 right-1"></div>
<div id="graph-wrapper" class="code f6">
<script> <script>
window.graphData = {% include notes_graph.json %} window.graphData = {% include notes_graph.json %}
</script> </script>
<div class="absolute bottom-1 left-1">
<p class="ma0 f7 measure-wide lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
</div>
</div> </div>

4
_layouts/default.html
View File

@ -1,9 +1,9 @@
<!doctype html> <!doctype html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}"> <html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%} {%- include head.html -%}
<body class="dark-green sans-serif links-dark-green bg-washed-green"> <body class="dark-green sans-serif bg-washed-green">
{%- include header.html -%} {%- include header.html -%}
<main aria-label="Content"> <main class="links-dark-green" aria-label="Content">
{{ content }} {{ content }}
</main> </main>
{%- include footer.html -%} {%- include footer.html -%}

76
_layouts/note.html
View File

@ -2,49 +2,53 @@
layout: default layout: default
--- ---
<div class="flex"> <div class="flex">
<article class="w-50"> <article class="w-50 pa3 pr0">
<header class="mb2"> <div class="container bg-white pa3 br4">
<h1>{{ page.title }}</h1> <header class="mb2 b--washed-green">
{% if page.date_created %} <div class="note-meta flex justify-between">
<time class="code dib f7 ph3 pv2 ba br-pill" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %} {% if page.date_created %}
Created on {{ page.date_created | date: "%B %-d, %Y" }} <time class="code dib f7 pb2 flex" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
Created on {{ page.date_created | date: "%B %-d, %Y" }}
{% endif %}
</time>
{% endif %} {% endif %}
</time> <time class="code dib f7 pb2" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
{% endif %} Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
<time class="code dib f7 ph3 pv2 ba br-pill" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %} {% endif %}
Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }} </time>
{% endif %} </div>
</time> <h1 class="normal f-6 lh-solid">{{ page.title }}</h1>
</header> </header>
<div id="notes-entry-container"> <div id="notes-entry-container">
<div class="note-contents lh-copy"> <div class="note-contents f6 lh-copy">
{{ content }} {{ content }}
</div> </div>
<aside class="bt b--dark-green"> <aside class="bt b--dark-green mt5">
<h3 class="mb3">Notes mentioning this note</h3> <h3 class="normal f1 mv5">Notes mentioning this note</h3>
{% if page.backlinks.size > 0 %} {% if page.backlinks.size > 0 %}
<div class="flex"> <div class="flex">
{% for backlink in page.backlinks %} {% for backlink in page.backlinks %}
<div class="w-50 mr2 pa2 ba b--dark-green br3"> <div class="w-50 mr2 pa3 ba b--dark-green br4">
<h4 class="mt0 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4> <h4 class="mt0 normal f3 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
<div class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div> <div class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
</div>
{% endfor %}
</div> </div>
{% endfor %} {% else %}
</div> <div>
{% else %} <p class="f7">
<div> There are no notes linking to this note.
<p class="f7"> </p>
There are no notes linking to this note. </div>
</p> {% endif %}
</div> </aside>
{% endif %} </div>
</aside>
</div> </div>
</article> </article>
<div class="w-50"> <div class="fixed top-0 right-0 w-50 vh-100">
{% include notes_graph.html %} {% include notes_graph.html %}
</div> </div>
</div> </div>

2
_notes/garry.md
View File

@ -2,4 +2,4 @@
title: Garry Ing title: Garry Ing
--- ---
[Garry Ing](https://garrying.com) is a designer in Toronto. [Garry Ing](https://garrying.com) is a designer and researcher residing in Toronto. He is a member of [[Hypha|Hypha Worker Co-operative]] and sessional faculty at OCAD University teaching interactive media. Previous work and collaborations has been with the Strategic Innovation Lab (sLab) at OCAD University, the Technologies for Aging Gracefully Lab at the University of Toronto, Normative, Format.com, and Pivotal Software. He is a co-organizer of Our Networks, a conference on building distributed network [[infrastructure|infrastructures]], and A-B-Z-TXT, an autonomous school for art, design and computation in Toronto and Montréal.

38
_sass/_digital-garden.scss
View File

@ -7,6 +7,22 @@
text-decoration: none; text-decoration: none;
} }
// Header
#header {
transition: transform 100ms ease-in-out;
}
.header-inactive {
transform: translateY(-100%);
}
// Sticky helper
.sticky {
position: sticky;
}
// Fonts helper // Fonts helper
.anthony { .anthony {
@ -28,6 +44,17 @@
.links path { .links path {
stroke: $accent-color; stroke: $accent-color;
fill: transparent; fill: transparent;
&.active {
stroke-dasharray: 10;
animation: dash 20s linear;
}
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
} }
.nodes circle { .nodes circle {
@ -45,11 +72,12 @@
.nodes [active], .nodes [active],
.text [active] { .text [active] {
cursor: pointer; cursor: pointer;
fill: $accent-color; fill: #ff6300;
stroke: transparent;
} }
.inactive { .inactive {
opacity: 0.25; opacity: 0.45;
transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out;
} }
@ -58,9 +86,9 @@
.internal-link { .internal-link {
padding: 0 0.1em; padding: 0 0.1em;
text-decoration: none; text-decoration: none;
background: rgba($highlight-color, 0.35); background: rgba($highlight-color, 0.25);
border: 1px solid rgba($highlight-color, 0.45); border: 1px solid rgba($highlight-color, 0.45);
border-radius: 3px; border-radius: 4px;
} }
.invalid-link { .invalid-link {
@ -68,7 +96,7 @@
text-decoration: none; text-decoration: none;
background: rgba($highlight-color, 0.1); background: rgba($highlight-color, 0.1);
border: 1px solid rgba($highlight-color, 0.25); border: 1px solid rgba($highlight-color, 0.25);
border-radius: 3px; border-radius: 4px;
} }
// Link previews // Link previews

66
assets/js/scripts.js
View File

@ -1,3 +1,33 @@
// Header interaction
const headerEle = document.querySelector('#header')
let headerElePosStore = 0
const debounce = (fn) => {
let frame
return (...params) => {
if (frame) {
window.cancelAnimationFrame(frame)
}
frame = window.requestAnimationFrame(() => {
fn(...params)
})
}
}
const storeScroll = (event) => {
const bodyRect = document.body.getBoundingClientRect()
if (bodyRect.top < headerElePosStore &&
-headerEle.offsetHeight > bodyRect.top) {
headerEle.classList.add('header-inactive')
} else {
headerEle.classList.remove('header-inactive')
}
headerElePosStore = bodyRect.top
}
document.addEventListener('scroll', debounce(storeScroll), { passive: true })
// Link preview // Link preview
let opacityTimeout let opacityTimeout
@ -7,17 +37,17 @@ const transitionDurationMs = 100
const tooltipWrapper = document.getElementById('tooltip-wrapper') const tooltipWrapper = document.getElementById('tooltip-wrapper')
const tooltipContent = document.getElementById('tooltip-content') const tooltipContent = document.getElementById('tooltip-content')
function hideTooltip () { const hideTooltip = () => {
opacityTimeout = setTimeout(function () { opacityTimeout = setTimeout(() => {
tooltipWrapper.style.opacity = 0 tooltipWrapper.style.opacity = 0
contentTimeout = setTimeout(function () { contentTimeout = setTimeout(() => {
tooltipContent.innerHTML = '' tooltipContent.innerHTML = ''
tooltipWrapper.style.display = 'none' tooltipWrapper.style.display = 'none'
}, transitionDurationMs + 1) }, transitionDurationMs + 1)
}, transitionDurationMs) }, transitionDurationMs)
} }
function showTooltip (event) { const showTooltip = (event) => {
const elem = event.target const elem = event.target
const elemProps = elem.getClientRects()[elem.getClientRects().length - 1] const elemProps = elem.getClientRects()[elem.getClientRects().length - 1]
const top = window.pageYOffset || document.documentElement.scrollTop const top = window.pageYOffset || document.documentElement.scrollTop
@ -35,7 +65,7 @@ function showTooltip (event) {
tooltipContent.innerHTML = tooltipContentHtml tooltipContent.innerHTML = tooltipContentHtml
tooltipWrapper.style.display = 'block' tooltipWrapper.style.display = 'block'
setTimeout(function () { setTimeout(() => {
tooltipWrapper.style.opacity = 1 tooltipWrapper.style.opacity = 1
}, 1) }, 1)
}) })
@ -55,22 +85,22 @@ function showTooltip (event) {
} }
} }
function setupListeners (linkElement) { const setupListeners = (linkElement) => {
linkElement.addEventListener('mouseleave', function (_event) { linkElement.addEventListener('mouseleave', _event => {
hideTooltip() hideTooltip()
}) })
tooltipWrapper.addEventListener('mouseleave', function (_event) { tooltipWrapper.addEventListener('mouseleave', _event => {
hideTooltip() hideTooltip()
}) })
linkElement.addEventListener('mouseenter', function (event) { linkElement.addEventListener('mouseenter', event => {
clearTimeout(opacityTimeout) clearTimeout(opacityTimeout)
clearTimeout(contentTimeout) clearTimeout(contentTimeout)
showTooltip(event) showTooltip(event)
}) })
tooltipWrapper.addEventListener('mouseenter', function (event) { tooltipWrapper.addEventListener('mouseenter', event => {
clearTimeout(opacityTimeout) clearTimeout(opacityTimeout)
clearTimeout(contentTimeout) clearTimeout(contentTimeout)
}) })
@ -118,7 +148,7 @@ if (typeof window.graphData !== 'undefined') {
window.location = d3.select(d.target).data()[0].path window.location = d3.select(d.target).data()[0].path
} }
const onMouseover = function (d) { const onMouseover = (d) => {
const relatedNodesSet = new Set() const relatedNodesSet = new Set()
const destinationID = d3.select(d.target).data()[0].id const destinationID = d3.select(d.target).data()[0].id
linksData linksData
@ -138,7 +168,7 @@ if (typeof window.graphData !== 'undefined') {
if (linkD.source.id !== destinationID && linkD.target.id !== destinationID) { if (linkD.source.id !== destinationID && linkD.target.id !== destinationID) {
return 'inactive' return 'inactive'
} }
return '' return 'active'
}) })
link.attr('stroke-width', (linkD) => { link.attr('stroke-width', (linkD) => {
@ -155,7 +185,7 @@ if (typeof window.graphData !== 'undefined') {
}) })
} }
const onMouseout = function (d) { const onMouseout = (d) => {
node.attr('class', '') node.attr('class', '')
link.attr('class', '') link.attr('class', '')
text.attr('class', '') text.attr('class', '')
@ -165,8 +195,8 @@ if (typeof window.graphData !== 'undefined') {
const graphWrapper = document.getElementById('graph-wrapper') const graphWrapper = document.getElementById('graph-wrapper')
const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg') const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
element.setAttribute('width', graphWrapper.getBoundingClientRect().width) element.setAttribute('width', graphWrapper.getBoundingClientRect().width)
element.setAttribute('height', window.innerHeight * 0.8) element.setAttribute('height', window.innerHeight)
element.classList.add('absolute', 'vh-100', 'grab', 'grabbing') element.classList.add('grab', 'grabbing')
graphWrapper.appendChild(element) graphWrapper.appendChild(element)
const reportWindowSize = () => { const reportWindowSize = () => {
@ -205,7 +235,7 @@ if (typeof window.graphData !== 'undefined') {
const resize = (event) => { const resize = (event) => {
if (event) { if (event) {
const scale = event.transform const scale = event.transform
zoomLevel = scale.k // zoomLevel = scale.k
g.attr('transform', scale) g.attr('transform', scale)
} }
@ -222,8 +252,6 @@ if (typeof window.graphData !== 'undefined') {
.selectAll('circle') .selectAll('circle')
.filter((_d, i, nodes) => d3.select(nodes[i]).attr('active')) .filter((_d, i, nodes) => d3.select(nodes[i]).attr('active'))
.attr('r', (d) => zoomOrKeep(ACTIVE_RADIUS_FACTOR * nodeSize[d.id])) .attr('r', (d) => zoomOrKeep(ACTIVE_RADIUS_FACTOR * nodeSize[d.id]))
document.getElementById('zoom').innerHTML = zoomLevel.toFixed(2)
} }
const ticked = () => { const ticked = () => {
@ -293,7 +321,7 @@ if (typeof window.graphData !== 'undefined') {
ticked() ticked()
} }
const zoomHandler = d3.zoom().scaleExtent([0.2, 3]).on('zoom', resize) const zoomHandler = d3.zoom().scaleExtent([1, 1]).on('zoom', resize)
zoomHandler(svg) zoomHandler(svg)
restart() restart()