new pages: get started and built with

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
   "author": "Lene Saile",
   "license": "ISC",

src/_data/builtwith.json

@@ -0,0 +1,50 @@
+[
+  {
+    "name": "Lene Saile",
+    "description": "My personal site! Really, this website came before the starter, and I built the starter based on it.",
+    "screenshot": "./src/assets/images/screenshots/lenesaile.jpg",
+    "link": "https://www.lenesaile.com"
+  },
+  {
+    "name": "Old man yelling at tech",
+    "description": "Former software engineer turned manager rediscovers his love for coding and infrastructure.",
+    "screenshot": "./src/assets/images/screenshots/krgr.jpg",
+    "link": "https://krgr.dev"
+  },
+  {
+    "name": "FigCat",
+    "description": "FigCat is a repository of lists of creative works, games, and other items, compiled by hand from various sources.",
+    "screenshot": "./src/assets/images/screenshots/figcat.jpg",
+    "link": "https://figcat.com"
+  },
+  {
+    "name": "Andy Stitt",
+    "description": "Web developer specializing in accessibility",
+    "screenshot": "./src/assets/images/screenshots/andystitt.png",
+    "link": "https://andystitt.com"
+  },
+  {
+    "name": "deimidis.me",
+    "description": "Apuntes del mundo con medio siglo de vida",
+    "screenshot": "./src/assets/images/screenshots/deimidis.png",
+    "link": "https://deimidis.me"
+  },
+  {
+    "name": "fLaMEdFURY",
+    "description": "Personal website of 'fLaMEd'. Thoughts about the current and past state of the web.",
+    "screenshot": "./src/assets/images/screenshots/flamedfury.png",
+    "link": "https://flamedfury.com"
+  },
+  {
+    "name": "Joe writes",
+    "description": "Joe works on the Technical Content team at Starburst Data and contribute to the Trino OSS project.",
+    "screenshot": "./src/assets/images/screenshots/joewrites.jpg",
+    "link": "https://joewrites.io"
+  },
+  {
+    "name": "Misremembered",
+    "description": "Misremembered is the brain-child of Jon Michaels, a long-time sound editor, maker of tacos, and generally tech-minded fellow",
+    "screenshot": "./src/assets/images/screenshots/misremembered.jpg",
+    "link": "https://misremembe.red/"
+  }
+]

src/_data/navigation.js

@@ -4,6 +4,14 @@ module.exports = {
       text: 'About',
       url: '/about/'
     },
+    {
+      text: 'Get started',
+      url: '/get-started/'
+    },
+    {
+      text: 'Built with',
+      url: '/built-with/'
+    },
     {
       text: 'Blog',
       url: '/blog/'

src/_includes/partials/footer.njk

@@ -3,7 +3,7 @@
 <footer class="site-foot" role="contentinfo">
   <div class="wrapper">
     <div class="site-foot__inner">
-      <nav id="footernav" class="site-foot__inner" aria-label="Footer">
+      <nav id="footernav" class="site-foot__inner text-step-0" aria-label="Footer">
 
         &copy; {% year %} <a href="/" {% if activePage === '/' %} aria-current="page" {% endif %}>{{ meta.siteName }} <small>{% packageVersion %}</small> </a>
 

src/assets/css/blocks/menu.css

@@ -35,7 +35,7 @@ nav.navbar ul {
   box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
   display: flex;
   flex-direction: var(--nav-list-layout, column);
-  gap: 0.9rem;
+  gap: var(--space-s);
   block-size: var(--nav-list-height, 100vh);
   list-style: none;
   margin: 0;

src/assets/css/blocks/page.css

@@ -1,4 +1,5 @@
 .page img {
   max-inline-size: var(--max-img-width, 100%);
   block-size: auto;
+  border: 1px solid var(--color-dark);
 }

src/assets/css/blocks/prose.css

@@ -17,3 +17,11 @@
 .prose mark {
   background: var(--color-primary-glare);
 }
+
+.prose :not(.grid) li + li {
+  margin-top: var(--space-s);
+}
+
+.prose :is(ul, ol) {
+  padding-inline-start: 0.15ch;
+}

src/assets/css/blocks/site-foot.css

@@ -7,9 +7,7 @@
 .site-foot__inner {
   display: flex;
   gap: var(--space-xs-s);
-  align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
 }
 
 .site-foot svg {

src/pages/built-with.njk

@@ -0,0 +1,30 @@
+---
+title: Built with
+permalink: /built-with/index.html
+description: Websites built with this starter
+layout: page
+youtube: false
+---
+
+<p>
+  A list of sites based on / built with Eleventy Excellent. Add your site by submitting a
+  pull request! :)
+</p>
+
+<ul class="grid mt-l-xl" role="list">
+  <!-- you find tha data for that in src/_data/builtwith.json -->
+  {% for site in builtwith | reverse %}
+
+  <li class="flow mb-m">
+    {% imagePlaceholder site.screenshot, "Screenshot of {{ site.name }}" %}
+
+    <p class="text-step-0">
+      {{ site.description }}<br />
+
+      <strong>
+        <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
+      </strong>
+    </p>
+  </li>
+  {% endfor %}
+</ul>

src/pages/get-started.md

@@ -0,0 +1,20 @@
+---
+title: Get started
+permalink: /get-started/index.html
+description: Websites built with this starter
+layout: page
+youtube: false
+---
+
+- **Important:** edit meta data in `src/_data/meta.js`, it's being used all over the template.
+- Have a look at the [blog posts](/blog/), they explain some basic features that aren't covered here.
+- Search for 'eleventy-excellent.netlify.app'. You'll find an entry in `src/assets/css/global/global-styles.css`. Replace 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, delete the whole style rule.
+- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". By default you have RSS, mastodon, twitter, ko-fi, linkedin and github. Great resource: https://lucide.dev/
+- Edit your navigation items in `src/_data/navigation.js`.
+- Not required, but recommended: Delete `github.js` in `src/_data/github.js` and the blog posts, as these serve only as an example.
+- Edit your preferences (colors, fluid text sizes etc.) in `src/assets/design-tokens`.
+- Optional: set your custom (favicon) icons in `src/assets/images/favicon`.
+- Optional: rename `.env-sample` to `.env` and set custom URL for local development.
+- Optional: Change fonts. This starter uses three fonts, Red Hat Display, Inter and Roboto Mono. You can add or delete fonts in `src/assets/fonts`. I recommend creating font subsets for performance, for example using the [Fontsquirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator). Next, edit `src/assets/css/global/fonts.css`. Add your new font aliases in `src/assets/design-tokens/fonts.json`. Finally, in `src/_layouts/base.njk` edit the font preloads. Roboto Mono is only used for code blocks. It's preload is set directly in the post layout: `src/_layouts/post.njk`.
+- If you don't want to feature any code examples, you may delete the whole stylesheet for syntax highlighting: `src/assets/css/blocks/code.css`.
+- Add and delete your custom block stylesheets in `src/assets/css/blocks/*.css`, they get pulled in your output stylesheet automatically.