reeseschultz / 11r Goto Github PK
View Code? Open in Web Editor NEWAmerica's favorite Eleventy blog template.
Home Page: https://reeseschultz.github.io/11r/
License: MIT License
America's favorite Eleventy blog template.
Home Page: https://reeseschultz.github.io/11r/
License: MIT License
First, thank you for this project - it's fantastic. Fun to use and the output is beautiful.
Bug description:
Two issues here, regarding the updatedDate
property on posts. If it's not included, I'm seeing the following error:
`TemplateWriterWriteError` was thrown
> (./src/includes/layouts/post.njk) [Line 3, Column 3]
TypeError: Cannot read property 'toString' of undefined
`Template render error` was thrown:
Template render error: (./src/includes/layouts/post.njk) [Line 3, Column 3]
TypeError: Cannot read property 'toString' of undefined
It appears to be related to this line: {% if updatedDate | string in date | string %}
, in which the | string in date | string
doesn't appear to be needed (but I could be mistaken).
Removing that filter then results in the second issue - the post template outputting: Last updated on Invalid Date.
This appears to be because the logic on the Nunjucks if statement is backwards, checking for updatedDate
but then only displaying the created date, and then the template tries to use updatedDate
when it's not defined.
Bug reproduction:
Steps to reproduce the behavior:
updatedDate
from a post in the projectnpx @11ty/eleventy
Expected behavior:
The project to build without a problem.
Describe alternatives or workarounds you've considered:
Reversing the Nunjucks logic and removing the filter resolves the issue:
{% if updatedDate %}
<p class="text-sm italic">Last updated on
<span datetime="{{ date }}">{{ updatedDate | dateDisplay }}</span>. Created on
<span datetime="{{ date }}">{{ date | dateDisplay }}</span>.</p>
{% else %}
<p class="text-sm italic">Created on
<span datetime="{{ date }}">{{ date | dateDisplay }}</span>.</p>
{% endif %}
Happy to put in a PR to fix this if you like.
If there could be an search feature it would be easy to find posts .
Adding comment feature is the main thing because people comment on post. So adding disqus to the this amazing website will be cool.
Code blocks end up doubly nested due to error in copy.js (throws off CSS and triggers application of :not(pre) > code
in my base.css).
Bug reproduction:
Inspect the source of a code block (after the JS runs) at https://reeseschultz.github.io/11r/post/deadbeef-decrementation/.
<div class="content post">
<pre class="language-nasm">
<div class="copy">copy</div>
<code class="language-nasm">
<code class="language-nasm"> <-- extra!
<span class="token comment">
... etc. ...
The copy.js code does this (lines 12-14):
preTags[
i
].innerHTML = `<div class="copy">copy</div><code class="${preTags[i].className}">${preTags[i].innerHTML}</code>`;
instead of (I believe) this (just insert the copy div):
preTags[
i
].innerHTML = `<div class="copy">copy</div>${preTags[i].innerHTML}`;
If there was a reason to create the extra nested <code>
block, I couldn't figure it out (the original Codepen had it, but I'm not sure it's necessary here.)
There many changes involved in this upgrade. I'm looking into it.
I was checking out the template and found that indentation is not working for the code blocks. After removing the Prism.js's CSS file it works fine but elsewise there is an issue.
Bug description:
Post dates displayed are off by one day. That is, the date 2016-10-09
is displayed as October 8, 2016.
I believe this has to due with how JavaScript handles dates - I was live-coding when I encountered this and one of the people watching documented the issue here: https://www.bockensm.com/2021/03/13/javascript-dates-off-by-one/. Quoting from his post:
JavaScript is storing the date internally as midnight UTC but converting it to the browser's local time when rendering. In other words, if my UTC offset is -5, then 00:00 on March 12, 2021 in UTC is actually 17:00 on March 11, 2021 in my time zone.
Bug reproduction:
Steps to reproduce the behavior:
npm run dev
.Expected behavior:
The date displayed should match the date in the post markdown.
Describe alternatives or workarounds you've considered:
I think we can fix this by added the timeZone
option to date-display.js
, like this:
module.exports = (date) =>
new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC',
});
Additional context:
Here's a screenshot of the markdown file and how the post is generated:
This template is no longer maintained, as I'm moving away from the Node/NPM ecosystem, among other things.
So, what now? Perhaps you just found this template, so you feel slighted. Understandable, but I have an alternative for you:
๐ฅ My personal website repo, now available as open source, which you can use as a template. It's made with Deno + Lume! ๐ฅ
Its code is far cleaner than that of 11r, which feels super hacky and thrown-together at this point. Worse, 11r's styling is appalling to my current sensibilities. You'll find that forking and modifying my Lume-based site is a dream compared to doing the same with 11r. If you like Eleventy, you're going to love Lume even more.
Contributors, thank you for the time you've put into making 11r better. Design considerations arising out of our interactions have influenced the successor.
-Reese
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.