Merge pull request #2 from kelsS/feat/finish-design-pattern-content

added blog post setup

.eleventy.js

@@ -1,9 +1,32 @@
-module.exports = {
-    dir: {
-        input: "src",
-        output: "dist",
-        layouts: 'includes/layouts',
-        includes: "includes",
-		data: "data",
+const { DateTime } = require('luxon');
+
+module.exports = function (eleventyConfig) {
+    // Put robots.txt in root
+    eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
+
+    eleventyConfig.addPassthroughCopy({ 'src/styles.css': '/css/styles.css' });
+
+    eleventyConfig.addPassthroughCopy({ 'src/app.js': '/js/app.js' });
+
+    eleventyConfig.addPassthroughCopy({ 'src/assets': '/assets' });
+
+    // Convert gmt date to locale string
+    eleventyConfig.addFilter('postDate', (dateObj) => {
+        return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED)
+    });
+
+    // Display year
+    eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
+
+	// Input directory: src
+	// Output directory: dist
+    return {
+        dir: {
+            input: "src",
+            output: "dist",
+            layouts: 'includes/layouts',
+            includes: "includes",
+            data: "data",
+        }
     }
 };

src/app.js

@@ -0,0 +1,5 @@
+/**
+ * App JS
+ */
+
+console.log('Hello from App JS');

src/blog.njk

@@ -0,0 +1,12 @@
+---
+layout: 'base.njk'
+title: Blog
+---
+
+<h2>Recent blog posts</h2>
+
+<ul>
+    {%- for post in collections.post | reverse -%}
+        {% include 'blog-post-snippet.njk' %}
+    {%- endfor -%}
+</ul>

src/blog/2024-11-08-first-blog-post.md

@@ -0,0 +1,15 @@
+---
+layout: 'blog-post.njk'
+title: First blog post
+author: Kelsey S.
+date: 2024-11-08
+image: /assets/blog/snarling-kitty.webp
+imageAlt: Example alt text
+figCaption: Example fig caption
+tags: ["post", "featured"]
+description: here is an example blog post description
+---
+
+# {{ title }}
+
+Example text, there isn't a rule. You just practice and find out which way works best for you. Even the worst thing we can do here is good. We'll make some happy little bushes here. We'll put a happy little sky in here. It's almost like something out of a fairytale book. Let's have a nice tree right here.

src/blog/blog.json

@@ -0,0 +1,4 @@
+{
+    "layout": "blog-post.njk",
+    "tags": "post"
+}

src/includes/blog-post-snippet.njk

@@ -0,0 +1,12 @@
+<li>
+    <article>
+        <img src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}">
+        <h3>{{ post.data.title }}</h3>
+        <p>by <span>{{ post.data.author }}</span></p>
+        <p>
+            <span>{{ post.data.date | postDate }}</span>
+        </p>
+        <p>{{ post.data.description }}</p>
+        <a href="{{ post.url }}">Continue reading</a>
+    </article>
+</li>

src/includes/footer.njk

@@ -0,0 +1,5 @@
+<footer tabindex="-1" class="layout-center-column">
+    <h2>This is the <code>footer</code> content</h2>
+
+    <p>Copyright {% year %}</p>
+</footer>

src/includes/header.njk

@@ -0,0 +1,12 @@
+<header tabindex="-1" class="layout-center-column">
+    <nav aria-label="main nav">
+        <ul>
+            <li>
+                <a href="/">Home</a>
+            </li>
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+        </ul>
+    </nav>
+</header>

src/includes/layouts/base.njk

@@ -8,8 +8,29 @@ title: A11y Detective
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&display=swap" rel="stylesheet">
+
+    <!-- Styles -->
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+
+    <!-- Scripts entry point -->
+    <script src="/js/app.js" defer></script>
   </head>
-  <body>
-    {{ content | safe }}
+  <body id="app">
+    {% include 'header.njk' %}
+
+    <main tabindex="-1" class="layout-center-column">
+      {{ content | safe }}
+    </main>
+
+    {% include 'footer.njk' %}
   </body>
 </html>

src/includes/layouts/blog-post.njk

@@ -0,0 +1,15 @@
+---
+layout: 'base.njk'
+---
+
+<article>
+    <h2>{{ title }}</h2>
+    <figure>
+        <img src="{{ image }}" alt="{{ imageAlt }}">
+        <figcaption>
+            {{ figCaptionnm }}
+        </figcaption>
+    </figure>
+
+    {{ content | safe }}
+</article>

src/index.njk

@@ -0,0 +1,18 @@
+---
+layout: 'base.njk'
+title: Welcome A11y Detectives!
+---
+
+<h1>{{ title }}</h1>
+
+<h2>Excited you are here!</h2>
+
+<p>
+    Here is an example paragraph. This is more text in the paragraph.
+</p>
+
+<section id="featured-blog-post">
+    {%- for post in collections.featured | reverse -%}
+        {% include 'blog-post-snippet.njk' %}
+    {%- endfor -%}
+</section>

robots.txt → src/robots.txt

@@ -46,3 +46,23 @@ Disallow: /
 User-agent: OpenAI
 Disallow: /
 
+User-agent: OAI-SearchBot
+Disallow: /
+
+User-agent: AmazonBot
+Disallow: /
+
+User-agent: meta-externalagent
+Disallow: /
+
+User-agent: PerplexityBot
+Disallow: /
+
+User-agent: YouBot
+Disallow: /
+
+User-agent: cohere-ai
+Disallow: /
+
+User-agent: DuckAssistBot
+Disallow: /

src/styles.css

@@ -0,0 +1,84 @@
+/**
+* App styles
+*/
+
+/* Colors */
+:root {
+    --pink: #e75480;
+    --purple: purple;
+    --magenta: magenta;
+}
+
+/* !important is required */
+[hidden] {
+    display: none !important;
+}
+
+/* Screen reader only text */
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+.visually-hidden:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+    /* Why we need this rule: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
+}
+
+#app {
+    height: 100vh;
+    margin: 0;
+    font-family: "JetBrains Mono", monospace;
+    font-weight: bold;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto 1fr auto;
+    /* grid-template-rows: 1fr 1fr 1fr; */
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "header header header"
+        "main main main"
+        "footer footer footer";
+}
+
+header {
+    grid-area: header;
+    align-self: stretch;
+    background-color: var(--pink);
+}
+
+main {
+    grid-area: main;
+    background-color: var(--purple);
+    overflow: auto;
+    padding: 16px 5px 10px 5px;
+}
+
+footer {
+    grid-area: footer;
+    align-self: stretch;
+    background-color: var(--magenta);
+}
+
+.layout-center-column {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    align-items: center;
+}
+