change how passthrough works
This commit is contained in:
N-Upchurch
parent
2fff7685e8
commit
233e3e6e43
@ -10,7 +10,7 @@ module.exports = {
|
||||
url: "https://nathanupchurch.com/me",
|
||||
profilePic: "/img/CN20191025_301_Srt_SQUARE.jpg"
|
||||
},
|
||||
defaultPostImageURL: "/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",
|
||||
defaultPostImageURL: "/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",
|
||||
defaultPostImageAlt: "The default post image: a close picture of the dark green leaves of a plant.",
|
||||
socialLinks: [
|
||||
{
|
||||
|
||||
@ -76,7 +76,7 @@ function setup() {
|
||||
}
|
||||
```
|
||||
Now if we click the play icon at the top left of the Processing IDE, a browser window should open and load a page showing our sketch so far. We ought to see a viewport entirely covered with one large black canvas.
|
||||
[](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)
|
||||
[](../../img/circle-grid-canvas.webp)
|
||||
|
||||
## Random results
|
||||
To meet conditions two and three of our goal, we'll need a way to get random numbers. Let's write a quick function inside `setup()` to provide us with random integers:
|
||||
@ -214,7 +214,7 @@ We can check that everything is working by calling our new function at the botto
|
||||
``` javascript
|
||||
generateCircleLine(10, 10, 20, 0, 5, 10, 10, 'x', [[255,255,255]]);
|
||||
```
|
||||
[](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)
|
||||
[](../../img/circle-grid-line.webp)
|
||||
And look at that! We have a line!
|
||||
|
||||
## Repeating rows
|
||||
@ -287,7 +287,7 @@ generateCircleGrid(
|
||||
);
|
||||
```
|
||||
...to see the result:
|
||||
[](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)
|
||||
[](../../img/circle-grid-grid.webp)
|
||||
|
||||
## SVG export
|
||||
Looking back on our goals, we've accomplished all but one: SVG export. Happily, there's [a library](https://github.com/zenozeng/p5.js-svg) that makes this trivial. All we need to do is link the script in the `<head>` of index.html,
|
||||
@ -447,5 +447,5 @@ function draw() {
|
||||
|
||||
## Et voilà
|
||||
And we're done! Now you can tweak the parameters and make grids with all sorts of colors and size variations, and even export and edit them in Inkscape!
|
||||
[](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)
|
||||
[](../../img/circle-grid-complete.webp)
|
||||
If you'd like to make this project even better, maybe consider implementing a GUI to adjust your grid paramaters, or adding some interactivity.
|
||||
|
||||
@ -6,7 +6,7 @@ tags:
|
||||
- FOSS/FLOSS
|
||||
- Digital Privacy
|
||||
synopsis: Tech giants aren't meeting the needs of SMEs and nonprofits. Combined with digital privacy concerns, a perfect storm is brewing for increased adoption of free and open source software for these organizations.
|
||||
imageURL: /img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp
|
||||
imageURL: /img/pedro-lastra-Nyvq2juw4_o-unsplash.webp
|
||||
imageAlt: A stylized illustration of a terminal prompt.
|
||||
---
|
||||
If you're a cottage industry solopreneur, a cricut hobbyist, or a makerspace regular, you've probably heard of Inkscape. Often dismissed by design professionals as a poor substitute for fully fleshed out design tools or simply "not industry standard," this 19 year old vector graphics powerhouse allows artists, designers, scrapbookers and makers alike to create high quality graphics and illustrations that can be used anywhere, from the browser to printed collateral and laser-etched goods. Inkscape, like many other free and open source software (FOSS) projects, has been taking great strides in recent years to match, if not surpass, commercial alternatives in terms of features, output, and usability. FOSS users have long been privy to a a world of software all but unknown to those who have never ventured from the comfort of Microsoft, Adobe, Alphabet, and Oracle, or the shimmering walled-garden of the Apple ecosystem. It hasn't always been easy, pretty, or even stable, but these days free and open source software projects are more organized, better funded, and more accountable than ever before, and people are starting to take notice.
|
||||
|
||||
@ -8,10 +8,10 @@ tags:
|
||||
- Meat Alternatives
|
||||
- Chicago
|
||||
- Restaurants
|
||||
imageURL: /img/posts/seitan.webp
|
||||
imageURL: /img/seitan.webp
|
||||
imageAlt: Two wee logs of seitan wrapped tightly in cheesecloth and kitchen twine on a piece of foil next top a pair of kitchen tongs.
|
||||
---
|
||||
[](/img/posts/seitan.webp)
|
||||
[](/img/seitan.webp)
|
||||
|
||||
|
||||
Seitan: carnists tremble at the sight of it, and sadly, due to the difficulty in its culinary execution, so do many of my fellow leaf-loving, tofu-eating, [nooch](https://en.wikipedia.org/wiki/Nutritional_yeast)-sprinkling vegans. Little known in the west, seitan is a food comprised almost entirely of wheat gluten that was invented hundreds of years ago by Buddhist monks as a protein-rich meat substitute. While fundamentally a simple dough of wheat gluten and water, then steamed or simmered, seitan is notoriously tricky to get right. Even here in Chicago where there are a wealth of vegan restaurants, some of which have been operating for decades, there is a dearth of good seitan; too chewy, not chewy enough, spongy, and flavorless seitan is endemic to the western vegan foodservice canon. Now, I'm no expert, but I've certainly picked up a few tricks over the years, and I prefer my seitan to just about any restaurant here in Chicago, with a single exception, *but I'll spill that tea at the end*.
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
permalink: /feed/feed.xml
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<?xml-stylesheet href="../xsl/basic.xsl" type="text/xsl"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
|
||||
<title>{{ metadata.title }}</title>
|
||||
<subtitle>{{ metadata.description }}</subtitle>
|
||||
|
||||
@ -10,9 +10,6 @@ const pluginBundle = require("@11ty/eleventy-plugin-bundle");
|
||||
const pluginNavigation = require("@11ty/eleventy-navigation");
|
||||
const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
|
||||
|
||||
const pluginDrafts = require("./eleventy.config.drafts.js");
|
||||
const pluginImages = require("./eleventy.config.images.js");
|
||||
|
||||
const figoptions = {
|
||||
figcaption: true
|
||||
};
|
||||
@ -21,10 +18,6 @@ module.exports = function(eleventyConfig) {
|
||||
|
||||
eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
|
||||
|
||||
// App plugins
|
||||
eleventyConfig.addPlugin(pluginDrafts);
|
||||
eleventyConfig.addPlugin(pluginImages);
|
||||
|
||||
// Official plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
|
||||
@ -46,7 +39,9 @@ module.exports = function(eleventyConfig) {
|
||||
});
|
||||
|
||||
// Passthrough
|
||||
eleventyConfig.addPassthroughCopy({ 'public/css/*': "/css/" });
|
||||
eleventyConfig.addPassthroughCopy({ 'public/xsl/*': "/xsl/" });
|
||||
eleventyConfig.addPassthroughCopy({ 'public/img/*': "/img/" });
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
|
||||
@ -128,11 +128,16 @@ h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-l);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p, li {
|
||||
line-height: 1.75;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-n);
|
||||
}
|
||||
|
||||
@ -333,7 +338,7 @@ nav ul {
|
||||
border-radius: var(--card-radius);
|
||||
margin-right: var(--single-gap);
|
||||
overflow: hidden;
|
||||
height: 10em;
|
||||
max-height: 15rem;
|
||||
}
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
@ -350,6 +355,7 @@ nav ul {
|
||||
text-decoration: none;
|
||||
}
|
||||
.postlist-link h3 {
|
||||
font-size: var(--font-l);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.postlist-item-active .postlist-link {
|
||||
@ -360,42 +366,12 @@ nav ul {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.post-image {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
|
||||
@media(max-width: 556px) {
|
||||
.postlist {
|
||||
padding-top: 0;
|
||||
}
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.postlist-link {
|
||||
padding: 0;
|
||||
}
|
||||
.post-copy a h3 {
|
||||
margin-top: .5em;
|
||||
}
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-right: 0;
|
||||
height: 10em;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.postlist-item {
|
||||
background-color: var(--card-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag, a.post-tag, .taglist li a {
|
||||
display: inline-flex;
|
||||
@ -461,17 +437,11 @@ a.post-tag:hover {
|
||||
font-size: var(--font-n);
|
||||
}
|
||||
|
||||
@media(max-width: 556px) {
|
||||
.post-metadata {
|
||||
margin-bottom: var(--single-gap);
|
||||
}
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
.header-anchor {
|
||||
a.header-anchor {
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
font-size: var(--font-n);
|
||||
/* font-size: var(--font-n); */
|
||||
margin-left: .1em;
|
||||
}
|
||||
a[href].header-anchor,
|
||||
@ -491,6 +461,12 @@ h2 + .header-anchor {
|
||||
font-size: var(--font-l);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.postlist-item {
|
||||
background-color: var(--card-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media(max-width: 556px) {
|
||||
body {
|
||||
@ -511,6 +487,30 @@ h2 + .header-anchor {
|
||||
h3, .post-copy a h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.post-copy a h3 {
|
||||
margin-top: .5em;
|
||||
}
|
||||
.postlist {
|
||||
padding-top: 0;
|
||||
}
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.postlist-link {
|
||||
padding: 0;
|
||||
}
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-right: 0;
|
||||
height: 10em;
|
||||
min-width: 100%;
|
||||
}
|
||||
.post-metadata {
|
||||
margin-bottom: var(--single-gap);
|
||||
}
|
||||
header {
|
||||
padding: 0rem .5rem var(--single-gap) .5rem;
|
||||
margin-bottom: var(--single-gap);
|
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 624 KiB After Width: | Height: | Size: 624 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
35
public/xsl/basic.xsl
Normal file
35
public/xsl/basic.xsl
Normal file
@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<xsl:stylesheet version="3.0"
|
||||
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||
xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
||||
<xsl:template match="/">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<title>
|
||||
RSS Feed | <xsl:value-of select="/atom:feed/atom:title"/>
|
||||
</title>
|
||||
<link rel="stylesheet" href="../css/index.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? Visit
|
||||
<a href="https://aboutfeeds.com">About Feeds</a>
|
||||
to learn more and get started. It’s free.
|
||||
</p>
|
||||
<h1>RSS Feed Preview</h1>
|
||||
<h2>Recent blog posts</h2>
|
||||
<xsl:for-each select="/atom:feed/atom:entry">
|
||||
<h3><a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</a></h3>
|
||||
Last updated:
|
||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||
</xsl:for-each>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
Loading…
x
Reference in New Issue
Block a user