joshua/generative
1
0
Fork 0
mirror of https://github.com/seigler/generative synced 2025-07-26 14:56:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use handlebars templates, add openGraph tags

Browse source
This commit is contained in:
Joshua Seigler 2019-11-11 12:37:24 -05:00
parent 1f945dab9d
commit 641de02e53
24 changed files with 920 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

0
app/sketches/1.js → app/1/index.js
View file

7
app/1/index.static.hbs Normal file
View file

@ -0,0 +1,7 @@
---
title: Gradient Burst
created: 2019-11-05
index: 1
_options:
layout: app/layouts/sketch.hbs
---

0
app/sketches/2.js → app/2/index.js
View file

7
app/2/index.static.hbs Normal file
View file

@ -0,0 +1,7 @@
---
title: Gradient Jungle
created: 2019-11-07
index: 2
_options:
layout: app/layouts/sketch.hbs
---

0
app/sketches/3.js → app/3/index.js
View file

7
app/3/index.static.hbs Normal file
View file

@ -0,0 +1,7 @@
---
title: Peanut Butter and Jelly
created: 2019-11-09
index: 3
_options:
layout: app/layouts/sketch.hbs
---

0
app/sketches/4.js → app/4/index.js
View file

7
app/4/index.static.hbs Normal file
View file

@ -0,0 +1,7 @@
---
title: Lenses
created: 2019-11-10
index: 4
_options:
layout: app/layouts/sketch.hbs
---

BIN
app/assets/1/example.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 99 KiB

1
app/assets/1/index.html
View file

@ -1 +0,0 @@
../../sketch-template.html

BIN
app/assets/2/example.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 143 KiB

1
app/assets/2/index.html
View file

@ -1 +0,0 @@
../../sketch-template.html

BIN
app/assets/3/example.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 189 KiB

1
app/assets/3/index.html
View file

@ -1 +0,0 @@
../../sketch-template.html

BIN
app/assets/4/example.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 123 KiB

1
app/assets/4/index.html
View file

@ -1 +0,0 @@
../../sketch-template.html

22
app/assets/index.html
View file

@ -9,12 +9,22 @@
<body>
<main>
<h1>P5.js generative art</h1>
<ul>
<li>2019-11-05 - <a class="sketch" href="1/">gradient burst</a></li>
<li>2019-11-07 - <a class="sketch" href="2/">gradient jungle</a></li>
<li>2019-11-09 - <a class="sketch" href="3/">peanut butter and jelly</a></li>
<li>2019-11-10 - <a class="sketch" href="4/">lenses</a></li>
</ul>
<figure>
<a class="sketch" href="4/"><img src="4/example.jpg" alt="colored pinstripes distorted by a field of smoothed lenses of varying strength"></a>
<figcaption>2019-11-10 - lenses</figcaption>
</figure>
<figure>
<a class="sketch" href="3/"><img src="3/example.jpg" alt="purple jelly stripes covered with swirling swarms of peanut butter colored lines"></a>
<figcaption>2019-11-09 - peanut butter and jelly</figcaption>
</figure>
<figure>
<a class="sketch" href="2/"><img src="2/example.jpg" alt="multicolored gradients revealing and concealing jungle leaves"></a>
<figcaption>2019-11-07 - gradient jungle</figcaption>
</figure>
<figure>
<a class="sketch" href="1/"><img src="1/example.jpg" alt="multicolored gradients revealing and concealing bars and circles"></a>
<figcaption>2019-11-05 - gradient burst</figcaption>
</figure>
</main>
</body>
</html>

2
app/initialize.js
View file

@ -1,6 +1,6 @@
document.addEventListener('DOMContentLoaded', function() {
let path = document.location.pathname.split('/');
if (path.length > 1) {
require('./sketches/' + path[path.length - 2]);
require(`${path[path.length - 2]}/index`);
}
});

25
app/layouts/sketch.hbs Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{#if title}}{{title}} -{{/if}} Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="DIGEST(../app.css)">
<meta property="og:title" content="{{title}}" />
<meta property="og:description" content="Algorithmic art generated with P5.js. See more art in this style." />
<meta property="og:image" content="{{baseURL}}/{{index}}/example.jpg" />
<meta property="og:site_name" content="Generative Art - seigler.github.io" />
<meta name="twitter:creator" content="@seiglerj">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:site" content="@seiglerj">
<meta name="twitter:description" content="Algorithmic art generated with P5.js. See more art in this style.">
<meta property="og:image" content="{{baseURL}}/{{index}}/example.jpg" />
</head>
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="DIGEST(../app.js)"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body>
</html>

16
app/sketch-template.html
View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="DIGEST(../app.css)">
</head>
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/p5.sound.min.js"></script>
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="DIGEST(../app.js)"></script>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body>
</html>

6
app/styles.css
View file

@ -3,7 +3,7 @@
}
html, body {
height: 100%;
min-height: 100%;
box-sizing: border-box;
}
@ -50,3 +50,7 @@ footer {
padding: 0.5em 1em;
border-top-right-radius: 0.5em;
}
img {
max-width: 100%;
}