From 233e3e6e43a9db5a4ba03caf1d480a8ecbbd9048 Mon Sep 17 00:00:00 2001 From: N-Upchurch Date: Sun, 6 Aug 2023 19:52:01 -0500 Subject: [PATCH] change how passthrough works --- _data/metadata.js | 2 +- .../build-an-svg-circle-grid-with-p5js.md | 8 +- content/blog/floss-and-smes.md | 2 +- .../blog/the-secrets-of-scrumptious-seitan.md | 4 +- content/feed/feed.njk | 1 + eleventy.config.js | 9 +- public/css/index.css | 84 +++++++++--------- .../circle-grid-canvas.webp | Bin .../circle-grid-complete.webp | Bin .../circle-grid-grid.webp | Bin .../circle-grid-line.webp | Bin .../circle-grid-post-image.webp | Bin .../pedro-lastra-Nyvq2juw4_o-unsplash.webp | Bin public/img/{posts => }/seitan.webp | Bin ...na-sirotina-1NMPvajSt9Q-unsplash_copy.avif | Bin public/xsl/basic.xsl | 35 ++++++++ 16 files changed, 88 insertions(+), 57 deletions(-) rename public/img/{posts/build-an-svg-circle-grid-with-p5js => }/circle-grid-canvas.webp (100%) rename public/img/{posts/build-an-svg-circle-grid-with-p5js => }/circle-grid-complete.webp (100%) rename public/img/{posts/build-an-svg-circle-grid-with-p5js => }/circle-grid-grid.webp (100%) rename public/img/{posts/build-an-svg-circle-grid-with-p5js => }/circle-grid-line.webp (100%) rename public/img/{posts/build-an-svg-circle-grid-with-p5js => }/circle-grid-post-image.webp (100%) rename public/img/{posts/floss-and-smes => }/pedro-lastra-Nyvq2juw4_o-unsplash.webp (100%) rename public/img/{posts => }/seitan.webp (100%) rename public/img/{default_post_image => }/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif (100%) create mode 100644 public/xsl/basic.xsl diff --git a/_data/metadata.js b/_data/metadata.js index 8850765..95ddec7 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -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: [ { diff --git a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md index 35708f3..69c72f2 100644 --- a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md +++ b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md @@ -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. -[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp) +[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/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]]); ``` -[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp) +[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/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: -[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp) +[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/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 `` 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! -[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp)](../../img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp) +[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/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. diff --git a/content/blog/floss-and-smes.md b/content/blog/floss-and-smes.md index f34ce60..f2e883e 100644 --- a/content/blog/floss-and-smes.md +++ b/content/blog/floss-and-smes.md @@ -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. diff --git a/content/blog/the-secrets-of-scrumptious-seitan.md b/content/blog/the-secrets-of-scrumptious-seitan.md index d375621..a1f0dc1 100644 --- a/content/blog/the-secrets-of-scrumptious-seitan.md +++ b/content/blog/the-secrets-of-scrumptious-seitan.md @@ -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. --- -[![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 "Some homemade seitan, originally posted on [my pixelfed account](https://pixelfed.social/p/nathanu/395090346005279712).")](/img/posts/seitan.webp) +[![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/seitan.webp "Some homemade seitan, originally posted on [my pixelfed account](https://pixelfed.social/p/nathanu/395090346005279712).")](/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*. diff --git a/content/feed/feed.njk b/content/feed/feed.njk index 4912d24..84c8e84 100755 --- a/content/feed/feed.njk +++ b/content/feed/feed.njk @@ -3,6 +3,7 @@ permalink: /feed/feed.xml --- + {{ metadata.title }} {{ metadata.description }} diff --git a/eleventy.config.js b/eleventy.config.js index 5e2c0ba..f68a859 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -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) => { diff --git a/public/css/index.css b/public/css/index.css index 2e11b71..ec64f0e 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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); diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp b/public/img/circle-grid-canvas.webp similarity index 100% rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-canvas.webp rename to public/img/circle-grid-canvas.webp diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp b/public/img/circle-grid-complete.webp similarity index 100% rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-complete.webp rename to public/img/circle-grid-complete.webp diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp b/public/img/circle-grid-grid.webp similarity index 100% rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-grid.webp rename to public/img/circle-grid-grid.webp diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp b/public/img/circle-grid-line.webp similarity index 100% rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-line.webp rename to public/img/circle-grid-line.webp diff --git a/public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp b/public/img/circle-grid-post-image.webp similarity index 100% rename from public/img/posts/build-an-svg-circle-grid-with-p5js/circle-grid-post-image.webp rename to public/img/circle-grid-post-image.webp diff --git a/public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp b/public/img/pedro-lastra-Nyvq2juw4_o-unsplash.webp similarity index 100% rename from public/img/posts/floss-and-smes/pedro-lastra-Nyvq2juw4_o-unsplash.webp rename to public/img/pedro-lastra-Nyvq2juw4_o-unsplash.webp diff --git a/public/img/posts/seitan.webp b/public/img/seitan.webp similarity index 100% rename from public/img/posts/seitan.webp rename to public/img/seitan.webp diff --git a/public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif b/public/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif similarity index 100% rename from public/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif rename to public/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif diff --git a/public/xsl/basic.xsl b/public/xsl/basic.xsl new file mode 100644 index 0000000..c1e6b5d --- /dev/null +++ b/public/xsl/basic.xsl @@ -0,0 +1,35 @@ + + + + + + + + RSS Feed | <xsl:value-of select="/atom:feed/atom:title"/> + + + + +

+ This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? Visit + About Feeds + to learn more and get started. It’s free. +

+

RSS Feed Preview

+

Recent blog posts

+ +

+ + + + +

+ Last updated: + + + + + +