Giter VIP home page Giter VIP logo

madrilene / eleventy-excellent Goto Github PK

View Code? Open in Web Editor NEW
342.0 14.0 52.0 10.71 MB

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.

Home Page: https://eleventy-excellent.netlify.app/

License: ISC License

JavaScript 29.75% CSS 37.94% Nunjucks 32.31%
11ty eleventy eleventy-starter 11ty-starter buildexcellentwebsites css every-layout javascript netlify fluid-typography

eleventy-excellent's Introduction

Lene Saile, frontend developer

I'm a developer and designer who has been building for the web professionally since 2008. I specialize in custom creative websites with accessibility and performance in mind.

More about me: www.lenesaile.com


eleventy-excellent's People

Contributors

agtlucas avatar b2m9 avatar bentechcoder avatar cjerrington avatar dbellomo avatar flamedfury avatar httpsterio avatar krgr avatar madrilene avatar maltebaer avatar nhoizey avatar projectmb avatar theapplegates avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eleventy-excellent's Issues

Draft Posts

Hi Lene,

Can draft post support to be added to eleventy-excellent?
I've had a look at Draft Posts and Scheduled and draft 11ty posts, but their configuration is slightly different โ€” enough to trip me up.

Let me know what you think and if there is anything else that I could provide to support you.

~fLaMEd

How to link to full size image?

I would like to make images link to the full size original.

In HTML something like:

<a href="/path/to/full-size-image.png"><img src="/path/to/optimised-image"></a>

I'm not sure how to do this within the syntax of a shortcode like:

{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Any suggestions on the best way to do it?

Plugin Warning

Hey Lene,

Any idea what plugin is tripping this warning?

flamed@flamedfury:~/Projects/eleventy-excellent$ npm run start

> [email protected] start
> run-p dev:*


> [email protected] dev:11ty
> eleventy --serve --watch


warn - Your plugin must set `modifiers: true` in its options to support modifiers.

Incorrect URL on the about page

I am not sure how to make a pull request since I am not a developer. So I am just opening an issue.

I discovered an incorrect URL on your about page.
The example "src/assets/css/design-tokens" is not correct according to your source code.
It should be "src/assets/design-tokens"

Thanks for a great starter kit.
Paul

Middle-click usability issue with clickable cards

Hi @madrilene! Thanks for your truly amazing and inspiring work on Eleventy Excellent. I'm using a heavily modified and adapted version of it on my website FigCat (you are credited on the About page).

I noticed an issue with Heydon Pickering's "redundant click event" solution for making the whole area of cards clickable (without sacrificing the ability to select text). When a card is middle-clicked (as in to open a new tab in a desktop browser), the link is opened in the current tab instead. I tested this on Firefox and Chromium.

I'm a heavy middle-clicker myself and I found this tremendously frustrating, so on my site I reverted to the pure CSS "pseudo-content trick" (also from Inclusive Components).

Unfortunately, I'm not knowledgeable enough to suggest a JavaScript alternative that would be guaranteed to work in all contexts and remain accessible.

On the issue of dependencies vs devDependencies

Hi, thanks for the amazing Eleventy template!

I've been scanning Eleventy projects and I noticed that many put all of the packages in devDependencies. This project keeps some in dependencies. I wonder if there is any reason to put a particular package into one or the other place. To me, the devDependencies should contain packages used only by developers on their local machines, e.g. dotenv or linting/code formatting packages, testing utils etc. Yet, I see many tutorials and eleventy packages that add everything into devDependencies, thus making it impossible not to install dev tools in production i.e. on build. Am I missing something here?

Remove Minification

Hello @madrilene ๐Ÿ‘‹

What steps can I take to remove the HTML/CSS minification?

The communities that I am in love to view source and look at how websites are constructed, and I would love not to obscure the structure of my website.

Is this as straight forward as removing the various npm packages?

Let me know ~fLaMEd

Partial -> Meta-info.njk (Description and Personal.Platforms Corrections)

Hi Lene,
You will need to update your meta description as there is an error in the elseif. States elif instead of elseif.

Also your Mastodon link states personal.social where it should be personal.platforms.

Also in your theme-switch.css you will need to add the following to ensure outline.

.theme-switch .button[aria-pressed='false']:focus-visible {
outline: 3px solid var(--color-base-light);
outline-offset: 0.3ch;
}

Thanks!

imagePlaceholder fallback doesn't work

Hi!

I recently revised the code of my Eleventy-Excellent-based website and wanted to test whether it worked at all in older browsers, including Internet Explorer. I was surprised to discover that no images at all were displayed there. This appeared to be true for vanilla Eleventy Excellent as well, e.g., the Post with an image demo. I thought this was odd because the whole idea of the <picture>/srcset markup is that it contains a fallback <img> element that should serve the image in a traditional way to browsers that don't support newer features.

I looked into the imagePlaceholder shortcode responsible for generating the image markup, and I believe I found the culprit. The generated code inserts a 1px placeholder in the src attribute of the <img> and the location of the actual image in a data-src attribute. However, the custom data-src does nothing on its own, and older browsers diligently display the 1px .png. As far as I can tell based on various tutorials on the web, the data-src thing is used only in conjunction with libraries such as vanilla-lazyload or lazysizes, which provide lazy loading functionality to browsers that lack native support. Unfortunately, your app.js does not seem to have an equivalent capability. The effect is a fallback element that fails to work as a fallback, and no 'minimum viable experience' is provided.

I still haven't decided how to fix it in my own code yet, but I thought this was something you might want to know (even if support for older browsers isn't a priority for the starter).

Have a happy new year!

Broken OG Images

Heya, I noticed that the OG images were not displaying correctly. Checking out the formatting in partials/meta-info.njk

<meta
  property="og:image"
  content="{{ meta.url }}{% if (layout == 'post') %}
    /assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.opengraph_default }}
  {% endif %}"
/>

Produces broken HTML when the page is built

<meta
  property="og:image"
  content="https://eleventy-excellent.netlify.app
    /assets/images/template/opengraph-default.jpg
  "
/>

And the OG images do not display, check https://www.opengraph.xyz/url/https%3A%2F%2Feleventy-excellent.netlify.app%2F

I updated the nunjucks loop to the following to get them to render correctly

<meta
  property="og:image"
  content="{% if (layout == 'post') %}
    {{ meta.url }}/assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.url }}{{ meta.opengraph_default }}
  {% endif %}"
/>

Which now renders the URL on a single line, and the OG images load correctly

<meta
  property="og:image"
  content="
    https://flamedfury.com/assets/images/template/opengraph-default.png
  "
/>

Check https://www.opengraph.xyz/url/https%3A%2F%2Fflamedfury.com%2F

Post Tags on Blog Cards

Hey again ๐Ÿ‘‹

Throwing it out there if you might know why the blog cards is just rendering posts as the tag rather than the tags defined in each posts front matter?

Have I configured something somewhere to cause this?

See post grid on main page and the posts page

Date language

Is there any way to change the language of the blog post dates from english to something else? I tried things for some time now but I can't seem to figure out any solution. Thanks

Dark theme custom colors don't render.

While working with this template I found that iOS Safari or Firefox do not render the custom color variables while in the dark theme appropriately. I have looked on the demo site as it also shows this issue. I am trying to track down what might be causing it but thought to bring it up.

Screenshot of iPhone with Firefox iOS.

iPhone-FirefoxiOS

adding a license?

Hello @madrilene , thank you so much for creating and sharing this beautiful 11ty starter! And also for the resources you share in the README.

To know under what conditions this starter can be reused, I was wondering if you could add a LICENSE to the repository? Sorry if there is already one and I missed it

Tailwind classes in HTML markup don't work

Hey!

Loving the starter so far. I really like the approaches you've taken. I've just had a bit of a hard time understanding how some things work as they're not really documented, which is why I'd like to ask how Tailwind works with this starter :)

I'm trying to use some basic Tailwind classes in the HTML markup like px-8 etc. but they're not included with the built CSS. Could you help me understand how Tailwind is setup and customized?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.