reeseschultz / 11r Goto Github PK

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

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.

Hi, thanks for the nice and simple theme. I noticed that performance is slow right off the bat. Any ideas whats taking so long to load? is it only local dev issue? seems like main.bundle.css and some other things that is holding it back

If there could be an search feature it would be easy to find posts .

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.

Adding comment feature is the main thing because people comment on post. So adding disqus to the this amazing website will be cool.

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:

1. This happens when I simply run 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:

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:

1. Remove the updatedDate from a post in the project
2. npx @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.