update pages

src/pages/about.md

@@ -3,7 +3,6 @@ title: About
 permalink: /about/index.html
 description: 'Eleventy Excellent is inspired bythe companion website of Andy Bell’s talk "Be the browser’s mentor, not its micromanager".'
 layout: page
-youtube: true
 ---
 
 This starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template.
@@ -20,4 +19,5 @@ The aim is to spread the idea and use of this _excellent_ workflow. To work with
 
 ## Watch the talk
 
-{% youtube 'JqnMI1AXl6w', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}
+<div><custom-youtube @slug="JqnMI1AXl6w" @label="Andy Bell – Be the browser’s mentor, not its micromanager"> </custom-youtube></div>
+

src/pages/blog.md

@@ -3,7 +3,7 @@ title: Blog
 description: 'All blog posts can be found here'
 layout: blog
 pagination:
-  data: collections.posts
+  data: collections.allPosts
   size: 6
 permalink: 'blog/{% if pagination.pageNumber >=1  %}page-{{ pagination.pageNumber + 1 }}/{% endif %}index.html'
 ---

src/pages/built-with.njk

@@ -8,9 +8,11 @@ widths: [400, 520]
 ---
 
 <p>
-  A list of sites based on / built with Eleventy Excellent. This uses Eleventy's
+  Honestly, I made this starter for myself, based on how I want to start a project and how I like to organize
-  <a href="https://www.11ty.dev/docs/services/screenshots/">screenshot API </a>. New
+  everything. I am delighted that so many of you find it useful too! This is a list of sites based on / built
-  screenshots are fetched in development only.
+  with Eleventy Excellent. This uses Eleventy's
+  <a href="https://www.11ty.dev/docs/services/screenshots/">screenshot API </a>. New screenshots are fetched
+  in development only.
 </p>
 
 <p>
@@ -20,29 +22,33 @@ widths: [400, 520]
     rel="noopener"
     >pull request</a
   >
-  and add it to the list! You find the data in <code>src/_data/builtwith.json</code> (Not
+  and add it to the list! Add your data in <code>src/_data/builtwith.json</code>, then run
-  related to "Build with Jason" 🥁).
+  <code>npm run screenshots</code> to add or update the screenshots.
 </p>
-<article class="full section" style="--spot-color: var(--color-bg-accent)">
-  {% include 'svg/divider-soft-top.svg' %}
 
-  <section class="section__inner wrapper">
+<article class="full  section" style="--spot-color: var(--color-bg-accent)">
+  {% svg "divider/soft-top", null, "seperator" %}
+
+  <section class="feature section__inner wrapper">
     <h2>Based on, or built with Eleventy Excellent:</h2>
-    <ul class="feature grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
+    <div
+      class="feature grid region"
+      style="--region-space-top: var(--space-xl); --gutter: var(--space-xl) var(--space-xs)"
+    >
       <!-- you find tha data for that in src/_data/builtwith.json -->
       {% for site in builtwith | shuffle %}
-        <li class="grid-card | text-step-min-1">
+        <custom-card clickable img-square class="text-step-min-1" style="--card-bg: var(--color-bg)">
-          {% eleventyImage "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, sizes, widths %}
+          {% image "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, sizes, widths %}
+          <h3 class="text-step-0" slot="headline">{{ site.name }}</h3>
 
-          <p>{{ site.description }}</p>
+          <p slot="content">{{ site.description }}</p>
-
+          <footer slot="footer">
-          <p>
+            <a class="no-indicator" href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
-            <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
+          </footer>
-          </p>
+        </custom-card>
-        </li>
       {% endfor %}
-    </ul>
+    </div>
   </section>
 
-  {% include 'svg/divider-soft-bottom.svg' %}
+  {% svg "divider/soft-bottom", null, "seperator" %}
 </article>

src/pages/get-started.md

@@ -3,29 +3,20 @@ title: Get started
 permalink: /get-started/index.html
 description: 'You can use this starter as a template for your blog and you are ready to go! But there are some adjustments you have to make.'
 layout: page
-preloads:
-  href: '/assets/fonts/robotomono/robotomono-regular.woff2'
-  as: 'font'
-  type: 'font/woff2'
-  crossorigin: true
 ---
 
 You can use this starter as a template for your blog and you are ready to go! But there are some **adjustments you have to make**.
 
 - `src/_data/meta.js` - sets different "hard coded" text values all over the template, you can change the language, etc.
 - edit your personal details and social media in `src/_data/personal.yaml`.
-- Open `src/assets/css/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule.
+- Open `src/assets/css/global/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule.
 
 If you are working with **VS Code** I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I explain this in [one of the blog posts](/blog/what-is-tailwind-css-doing-here/).
 
-The [blog posts](/blog/page-0/) also explain / show some features that aren't covered here.
+The [blog posts](/blog/) also explain / show some features that aren't covered here.
 
 ## "Docs" lol
 
 <!-- loop docs -->
-
 {% set itemList = collections.docs %}
-
+{% include 'partials/details.njk' %}
-<!-- details -->
-
-{% include 'components/details.njk' %}

src/pages/index.md

@@ -16,7 +16,5 @@ The aim is to create frontends that look good to everyone, regardless of device,
 
 I have tried to [document a few things](/get-started/).
 
-I keep a [branch of v1](https://github.com/madrilene/eleventy-excellent/tree/v1) because I have changed a lot of things.
-At the same time, I'm already [working on v3](https://github.com/madrilene/eleventy-excellent/tree/v3), where I'm switching to ESM and building components with webC where it makes sense.
-
 **Have fun** and let me know if you find any issues or have ideas for improvements!
+

src/pages/legal.md

@@ -1,6 +1,6 @@
 ---
 title: Legal notice
-seo:
+discover:
   title: Legal notice
 permalink: /imprint/index.html
 description: Imprint infos

src/pages/privacy.md

@@ -1,6 +1,6 @@
 ---
 title: Privacy Policy
-seo:
+discover:
   title: Privacy Policy
 permalink: /privacy/index.html
 description: I respect the EU General Data Protection Regulation (GDPR). This policy document explains how I collect and handle any information you provide to me.

src/pages/styleguide.njk

@@ -86,9 +86,7 @@ customGradients:
     <ul class="fonts flow">
       {%- for font in designTokens.fonts.items -%}
         <li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
-          <h3 style="font-family: var(--font-{{ font.name | slugify }})">
+          <h3 style="font-family: var(--font-{{ font.name | slugify }})">{{ font.name }}</h3>
-            {{ font.name }}
-          </h3>
           <p>{{ font.description }}</p>
           <p><strong>Font Families</strong>: {{ font.value | join(', ') }}</p>
           <code>var(--font-{{ font.name | slugify }})</code>
@@ -103,9 +101,7 @@ customGradients:
 
       <p>
         {{ designTokens.textSizes.description }}. Fluid type and space scales were
-        <a href="{{ designTokens.textSizes.meta.scaleGenerator }}"
+        <a href="{{ designTokens.textSizes.meta.scaleGenerator }}">generated with Utopia</a>.
-          >generated with Utopia</a
-        >.
       </p>
 
       <table class="sizes flow">
@@ -121,9 +117,7 @@ customGradients:
               </span>
             </td>
             <td class="sizes-example">
-              <p style="font-size:var(--size-{{ size.name | slugify }})">
+              <p style="font-size:var(--size-{{ size.name | slugify }})">{{ size.name }}</p>
-                {{ size.name }}
-              </p>
             </td>
           </tr>
         {%- endfor -%}