Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
mathisonian committed Apr 27, 2019
1 parent f4049ff commit badf618
Show file tree
Hide file tree
Showing 12 changed files with 2,106 additions and 64 deletions.
52 changes: 52 additions & 0 deletions _index.html
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
{{#title}}
<title>{{title}}</title>
<meta property="og:title" content="{{title}}" />
{{/title}} {{^title}}
<title>Idyll</title>
<meta property="og:title" content="Idyll Project" />
{{/title}}
<meta charset="utf-8" />
{{#favicon}}
<link rel="shortcut icon" type="image/x-icon" href="{{favicon}}" />
{{/favicon}} {{#shareImageUrl}}
<meta property="og:image" content="{{shareImageUrl}}" />
<meta name="twitter:image:src" content="{{shareImageUrl}}" />
<meta name="twitter:card" content="summary_large_image" />
{{/shareImageUrl}} {{#shareImageWidth}}
<meta property="og:image:width" content="{{shareImageWidth}}" />
{{/shareImageWidth}} {{#shareImageHeight}}
<meta property="og:image:height" content="{{shareImageHeight}}" />
{{/shareImageHeight}}
<meta property="og:type" content="article" />

{{#description}}
<meta property="og:description" content="{{description}}" />
<meta property="description" content="{{description}}" />
{{/description}} {{#url}}
<meta property="og:url" content="{{url}}" />
{{/url}} {{#twitterHandle}}
<meta property="twitter:creator" content="{{twitterHandle}}" />
{{/twitterHandle}} {{#usesTex}}
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"
/>
{{/usesTex}} {{#googleFontsUrl}}
<link rel="stylesheet" href="{{googleFontsUrl}}" />
{{/googleFontsUrl}}

<link rel="stylesheet" href="static/issue-01-theme.css" />
<link rel="stylesheet" href="static/idyll_styles.css" />
</head>
<body>
<div id="idyll-mount">{{{idyllContent}}}</div>
<script src="static/idyll_index.js"></script>
</body>
</html>
38 changes: 25 additions & 13 deletions components/article-title.js
Expand Up @@ -16,25 +16,29 @@ class ArticleTitle extends React.Component {
showMeta: false,
showHoverL: false,
showHoverM: false,
showHoverR: false
showHoverR: false,
clicked: false
}
}

componentDidMount() {
this.bgImage = d3.select('.parametric-bg-image');
this.titles = d3.selectAll('.article-title .container');
this.swup = require('./swup.js');
// this.swup = require('./swup.js');
loadFonts(() => {
this.handleRef(this.ref);
setTimeout(() => {
this.handleRef(this.ref);
}, 250);
if (isMobile()) {
this.setState({ showText: true });
}
});

}

handleSelectionOn(suffix) {
handleSelectionOn(suffix, url) {
return () => {
// this.swup.preloadPage(url);
this.bgImage.attr('src', this.props.image);
this.titles.style('animation-play-state', 'paused');
this.setState({
Expand Down Expand Up @@ -92,16 +96,24 @@ class ArticleTitle extends React.Component {

handleClick(url) {
return () => {
this.swup.loadPage({
url: url,
method: 'GET'
this.setState({
clicked: true
})
const html = document.getElementsByTagName('html')[0];
html.classList.add('is-leaving');
setTimeout(() => {
window.location = url;
}, 1500);
// this.swup.loadPage({
// url: url,
// method: 'GET'
// })
}
}

render() {
const { hasError, idyll, updateProps, ...props } = this.props;
const { x, y, width, height, showMeta, showText, showHoverL, showHoverM, showHoverR } = this.state;
const { x, y, width, height, showMeta, showText, showHoverL, showHoverM, showHoverR, clicked } = this.state;

const xFactor = this.getXFactor();

Expand All @@ -110,17 +122,17 @@ class ArticleTitle extends React.Component {
}

return (
<div key={isServer() ? 'server-title' : 'client-title'} className={`article-title animation-${this._animId} ${(showMeta && !isMobile()) ? 'animating' : ''}`} style={{opacity: showText ? 1 : 0}} ref={this.handleRef.bind(this)}>
<div key={isServer() ? 'server-title' : 'client-title'} className={`article-title animation-${this._animId} ${(showMeta && !isMobile()) ? 'animating' : ''} ${clicked ? 'transition-clicked' : ''}`} style={{opacity: showText ? 1 : 0}} ref={this.handleRef.bind(this)}>
{/* <a href="https://parametric.press"> */}
<svg style={{width: '100vw', maxHeight: 120}} viewBox="0 0 1000 120">
<svg className="transition-article-title" style={{width: '100vw', maxHeight: 120}} viewBox="0 0 1000 120">
<g className="container">
<text key={isServer() ? 'server-text' : 'client-text'} x={isMobile() ? 0 : 500} y="70" alignmentBaseline="baseline" textAnchor={isMobile() ? "start" : "middle"} fontSize="70" fill="none" strokeWidth={isMobile() ? 2 : 1} stroke="#fff" fontFamily="Graphik Web" fontWeight="bold">
{
(showMeta) ? <a onClick={this.handleClick(props.url)} ><tspan onMouseEnter={this.handleSelectionOn('L')} onMouseLeave={this.handleSelectionOff('L')}>{props.children}</tspan></a> : null
(showMeta) ? <a onClick={this.handleClick(props.url)} ><tspan onMouseEnter={this.handleSelectionOn('L', props.url)} onMouseLeave={this.handleSelectionOff('L')}>{props.children}</tspan></a> : null
}
<a onClick={this.handleClick(props.url)} ><tspan id={`parametric-title-mid-${this._id}`} dx={70} onMouseEnter={this.handleSelectionOn('M')} onMouseLeave={this.handleSelectionOff('M')}>{props.children}</tspan></a>
<a onClick={this.handleClick(props.url)} ><tspan id={`parametric-title-mid-${this._id}`} dx={70} onMouseEnter={this.handleSelectionOn('M', props.url)} onMouseLeave={this.handleSelectionOff('M')}>{props.children}</tspan></a>
{
(showMeta) ? <a onClick={this.handleClick(props.url)} ><tspan dx={70} onMouseEnter={this.handleSelectionOn('R')} onMouseLeave={this.handleSelectionOff('R')}>{props.children}</tspan></a> : null
(showMeta) ? <a onClick={this.handleClick(props.url)} ><tspan dx={70} onMouseEnter={this.handleSelectionOn('R', props.url)} onMouseLeave={this.handleSelectionOff('R')}>{props.children}</tspan></a> : null
}
</text>
<g style={{display: showHoverL ? 'block' : 'none'}}>
Expand Down
26 changes: 12 additions & 14 deletions components/swup.js
@@ -1,22 +1,20 @@


const Swup = require('swup').default;
const swupMergeHeadPlugin = require('swup/plugins/swupMergeHeadPlugin');
// const Swup = require('swup').default;
// const swupMergeHeadPlugin = require('../lib/swupMergeHeadPlugin');


console.log(swupMergeHeadPlugin);
const options = {
elements: ['#idyll-mount'],
plugins: [
swupMergeHeadPlugin
]
}
// console.log(swupMergeHeadPlugin);
// const options = {
// elements: ['#idyll-mount']
// }

const swup = new Swup(options);
// const swup = new Swup(options);
// swup.usePlugin(swupMergeHeadPlugin, { runScripts: true })


// swup.on('swup:contentReplaced', function () {
// console.log('head content replaced');
// });
// // swup.on('swup:contentReplaced', function () {
// // console.log('head content replaced');
// // });

module.exports = swup;
// module.exports = swup;
2 changes: 1 addition & 1 deletion components/utils.js
Expand Up @@ -9,7 +9,7 @@ module.exports = {
if (typeof window === 'undefined') {
return false;
}
return window.innerWidth <= 800;
return window.innerWidth <= 1000;
},

isServer: () => {
Expand Down
93 changes: 93 additions & 0 deletions lib/swupMergeHeadPlugin.js
@@ -0,0 +1,93 @@
'use strict';

module.exports = {
name: 'swupMergeHeadPlugin',
options: { runScripts: false },
exec: function exec(options, swup, getHTMLfromCache) {

console.log('adding event listener');
document.addEventListener('swup:willReplaceContent', function () {
console.log('on content replaced');
var currentHead = document.querySelector('head');
var newHead = getHTMLfromCache().querySelector('head');
replaceHeadWithoutReplacingExistingTags(currentHead, newHead);
});

var replaceHeadWithoutReplacingExistingTags = function replaceHeadWithoutReplacingExistingTags(currentHead, newHead) {
console.log('replacing head scripts');
var oldTags = currentHead.children;
var newTags = newHead.children;
var oldTagsToRemove = [];
var newTagsToRemove = [];

console.log('newHead', newHead);

for (var i = 0; i < oldTags.length; i++) {
var oldTag = oldTags[i];
var oldTagIdentifier = oldTag.outerHTML;
var foundInNewHead = false;
var newTag = void 0;
for (var j = 0; j < newTags.length; j++) {
newTag = newTags[j];
var newTagIdentifier = newTag.outerHTML;

if (newTagIdentifier === oldTagIdentifier) {
foundInNewHead = true;
break;
}
}

if (foundInNewHead) {
console.log('not inserting ', newTag);
newTagsToRemove.push(newTag);
} else {
console.log('old tag to remove ', oldTag);
oldTagsToRemove.push(oldTag);
}
}

for (var _i = 0; _i < newTagsToRemove.length; _i++) {
newHead.removeChild(newTagsToRemove[_i]);
}

for (var _i2 = 0; _i2 < oldTagsToRemove.length; _i2++) {
currentHead.removeChild(oldTagsToRemove[_i2]);
}

var added = newHead.children.length;
var removed = oldTagsToRemove.length;
console.log('added', added);
console.log(newHead.children);

var fragment = document.createDocumentFragment();
for (var _i3 = 0; _i3 < newHead.children.length; _i3++) {
console.log('adding', newHead.children[_i3]);
fragment.appendChild(newHead.children[_i3].cloneNode(true));
// fragment.appendChild(newHead.children[_i3]);
}
// console.log(fragment);
currentHead.appendChild(fragment);

if (options.runScripts) {
newHead.querySelectorAll('script').forEach(function (item) {
if (item.tagName == "SCRIPT" && (item.type == null || item.type == "" || item.type == "text/javascript")) {
var elem = document.createElement('script');
if (item.src != null && item.src != "") {
elem.src = item.src;
} else {
var inline = document.createTextNode(item.innerText);
elem.appendChild(inline);
}
if (item.type != null && item.type != "") {
elem.type = item.type;
}
currentHead.appendChild(elem);
} else {}
});
}

console.log('Removed ' + removed + ' / added ' + added + ' tags in head');
swup.log('Removed ' + removed + ' / added ' + added + ' tags in head');
};
}
};
44 changes: 10 additions & 34 deletions pages/about/index.idyll
Expand Up @@ -16,52 +16,28 @@ The **Parametric Press** is an experimental new project, a born-digital magazine

While it has never been easier for independent writers to share their ideas online, the current generation of publishing technology mimics tools that were designed during the era of the printing press. Past aspirational visions for the future of computing centered around [empowering individuals](http://www.newmediareader.com/book_samples/nmr-21-nelson.pdf) and [enhancing cognition](http://dougengelbart.org/content/view/138/000/), but many of these ideas fell to the wayside during the wildfire spread of internet connectivity and the commodification of publishing through platforms like WordPress and Facebook.

// [div className:"videoContainer"]
// [Youtube
// id:"5xEzjJQOihw"
// audio:true
// width:600
// height:335
// style:`{width: '100%', margin: '0 auto'}`
// options:`{ controls: 0, modestbranding: 1, showinfo: 0 }`
// /]
// [/div]

Alan Kay [imagined the Dynabook](https://history-computer.com/ModernComputer/Personal/Dynabook.html) in the hands of children across the world, while Neal Stephenson wrote of [interactive paper that could display videos and interfaces, and books that could teach their readers](https://en.wikipedia.org/wiki/The_Diamond_Age). The web offers rich dynamic capabilities, but to most authors these are off limits, residing outside the confines of restrictive content management systems. We are a group of designers, programmers, and researchers who want to change that. Together, we are building interactive publishing tools, supporting digital journalism, and pushing the boundaries of web design.

[h2 style:`{fontSize:48}`]Our Model[/h2]

Earlier this year, we put out a call for proposals for our first issue. [a href:"/"]Issue 01: *Science + Society*[/a] focuses on examining scientific and technological phenomena that stand to shape society at large, now or in the near future. We sought to cover topics that would benefit from using the interactive or otherwise dynamic capabilities of the web.

Publishing interactive content is tricky because it requires combining prose, code, and other media. Due to the nature of our publication, we did not expect authors to submit a fully developed article. Instead, we accepted idea submissions, and worked together with those accepted to develop the issue, by offering collective technical, design, and editorial assistance to those who needed it. Accepted authors were be compensated
Earlier this year, we put out a [call for proposals](/issue-01/call-for-proposals) for our first issue. [a href:"/"]Issue 01: *Science + Society*[/a] focuses on examining scientific and technological phenomena that stand to shape society at large, now or in the near future. We sought to cover topics that would benefit from using the interactive or otherwise dynamic capabilities of the web.

* Suggested headline
* A three-paragraph-max outline describing your article
* Why are you qualified to write this? What will you need help with?
* Any sketches, mockups, or code prototypes that you've made (optional)

Each published article will receive a unique Digital Object Identifier (DOI), and the code will be released under an open source license.
Publishing interactive content is tricky because it requires combining prose, code, and other media. Given this, we did not expect authors to submit a fully developed article. Instead, we accepted idea submissions, and worked together with those accepted to develop the issue, by offering collective technical, design, and editorial assistance to those who needed it.


[h2 style:`{fontSize:48}`]Team[/h2]

TK picture, bio, role?

Matthew Conlen

Fred Hohman

Sara Stalla

Victoria Uren

Andrew Sass
**Matthew Conlen** Editor-in-chief [br/]
**Fred Hohman** Editor [br/]
**Victoria Uren** Editor [br/]
**Sara Stalla** Editor [br/]
**Andrew Sass** Art Director[br/]

Friends of Parametric Press:

...
Thanks to

[h2 style:`{fontSize:48}`]Interactive Media[/h2]
[h2 style:`{fontSize:48}`]Interactive Publishing[/h2]

### Technology

Expand All @@ -77,7 +53,7 @@ archiving articles

[h2 style:`{fontSize:48}`]Contact[/h2]

Want to get in touch? Send us a an email at **cfp@parametric.press**.
Want to get in touch? Send us a an email at **editors@parametric.press**.

[br/]

Expand Down
3 changes: 3 additions & 0 deletions release.sh
Expand Up @@ -7,6 +7,9 @@
# mkdir public/articles/housing-data-science
# mkdir public/articles/particle-physics

cp ../parametric-styles/issue-01-theme.css static/
cp ../parametric-styles/issue-01-layout.css static/

npm link parametric-components parametric-styles
idyll build
cp -r build/* public/
Expand Down
Binary file added static/images/logo-nav.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit badf618

Please sign in to comment.