design build 1.0

kelvinlockwood · Mar 23, 2021 · d559d62 · d559d62
1 parent ea7a170
commit d559d62
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 211 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,14 @@
+[build]
+  publish = "dist"
+  # Allows overriding metadata.json via env var
+  command = "[ \"$METADATA_JSON\" ] && echo $METADATA_JSON > _data/metadata.json; npm run build"
+  functions = "functions/"
+
+[[plugins]]
+  package = "@netlify/plugin-functions-install-core"
+
+[[headers]]
+  for = "*.avif"
+    [headers.values]
+      Content-Type = "image/avif"
+      Content-Disposition = "inline"
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "A starter template for the TEA stack.",
   "main": "index.js",
   "scripts": {
+    "start": "npm-run-all dev:*",
     "build": "cross-env NODE_ENV=production npm-run-all clean -p build:*",
     "build:eleventy": "eleventy",
     "build:webpack": "webpack",

diff --git a/src/_bundle/styles/base.pcss b/src/_bundle/styles/base.pcss
@@ -1 +1,13 @@
 /* Custom Base Styles Go Here. */
+li {
+  position: relative;
+  left: 26px;
+}
+li::before {
+  content: url(/images/icons/bx-arrow.svg);
+  margin-left: -26px;
+  @apply absolute left-0 top-0;
+}
+li + li {
+  @apply mt-4;
+}
diff --git a/src/_bundle/styles/components.pcss b/src/_bundle/styles/components.pcss
@@ -1 +1,4 @@
 /* Custom Components Go Here. */
+.button {
+  @apply inline-block bg-myred-500 rounded-lg text-white  hover:bg-white hover:text-mydark-500 px-4 py-2 my-5;
+}
diff --git a/src/_data/notes.js b/src/_data/notes.js
@@ -0,0 +1,16 @@
+module.exports = [
+  {
+    url: 'matthiasott.com',
+    title: 'Saving Your Web Workflows with Prototyping',
+    tags: ['UI', 'UX', 'Code'],
+    description:
+      'A brilliant post by Matthias Ott on common UI and design / engineering problems and how trying to solve them is often a greater lesson than only learning about a new technology. “Learning comes from exploring the problem space and trying different possible tradeoffs.”',
+  },
+  {
+    url: 'matthiasott.com',
+    title: 'Saving Your Web Workflows with Prototyping',
+    tags: ['UI', 'UX', 'Code'],
+    description:
+      'A brilliant post by Matthias Ott on common UI and design / engineering problems and how trying to solve them is often a greater lesson than only learning about a new technology. “Learning comes from exploring the problem space and trying different possible tradeoffs.”',
+  },
+];
diff --git a/src/_data/products.js b/src/_data/products.js
@@ -0,0 +1,30 @@
+module.exports = [
+  {
+    title: 'Frankly Books',
+    subtitle: 'Book Marketplace',
+    details: '2021 - Product Creation',
+    description:
+      'DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.',
+    features: [
+      'DIY tote bag drinking ',
+      'DIY tote bag drinking ',
+      'DIY tote bag drinking ',
+    ],
+    url: 'https://url.com',
+    image: 'https://source.unsplash.com/random/200',
+  },
+  {
+    title: 'Project 2',
+    subtitle: 'Subtitle',
+    details: '2021 - Product Creation',
+    description:
+      'DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.',
+    features: [
+      'DIY tote bag drinking ',
+      'DIY tote bag drinking ',
+      'DIY tote bag drinking ',
+    ],
+    url: 'https://url.com',
+    image: 'https://source.unsplash.com/random/300',
+  },
+];
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
@@ -6,16 +6,20 @@
   </a>
   <div class="flex items-center">
     {% for item in collections.all | eleventyNavigation %}
-    <a
+      <a
       class="mx-2 {{ 'font-black' if page.url == item.url }}"
       href="{{ item.url | url }}"
     >
-      {{ item.title }}
-    </a>
+        {{ item.title }}
+      </a>
     {% endfor %}
   </div>
+  {# {% if page
+    .url
+    .indexOf('/articles/') == 0 %} #}
   <div
     id="reading-progress"
     class="-left-4 bottom-0 h-0.5 w-screen absolute bg-myred-500"
   ></div>
-</nav>
+  {# {% endif %} #}
+</nav>
diff --git a/src/_includes/layouts/article.njk b/src/_includes/layouts/article.njk
@@ -3,41 +3,39 @@ layout: layouts/base.njk
 ---
 
 {% block body %}
-<main class="w-full bg-mydark-300 flex justify-center">
-  <section class="container sm:w-8/12 mx-auto w-full m-0 flex py-10">
-    <div class="w-1/3 pr-12 text-sm">
-      <div class="flex flex-col border-b-4 border-mygray-500 pb-5">
-        <span class="my-2 text-gray-400 flex items-center font-light">
-          <img class="w-3 mr-2" src="/images/icons/bxs-pencil.svg" alt="link" />
-          {{ date | displayDate }}
-        </span>
-        <span class="my-2 text-gray-400 flex items-center font-light">
-          <img
+  <main class="w-full bg-mydark-300 flex justify-center ">
+    <section class="container justify-center sm:w-8/12 flex flex-col sm:flex-row mx-auto w-full m-0  py-10">
+      <div class="w-full flex justify-between sm:justify-start sm:flex-col text-center mb-5 sm:w-1/3 pr-12 text-sm">
+        <div class="flex flex-col border-b-4 border-mygray-500 pb-5">
+          <span class="my-2 text-gray-400 flex items-center font-light">
+            <img class="w-3 mr-2" src="/images/icons/bxs-pencil.svg" alt="link"/>
+            {{ date | displayDate }}
+          </span>
+          <span class="my-2 text-gray-400 flex items-center font-light">
+            <img
             class="w-3 mr-2"
             src="/images/icons/bxs-stopwatch.svg"
-            alt="link"
-          />
-          {% set wc = content | striptags | wordcount %} {% set wPerMinute = (wc
-          / 200) + 1 %}
-          {{ wPerMinute | round }} min read.
+            alt="link"/>
+            {% set wc = content | striptags | wordcount %}
+            {% set wPerMinute = (wc / 200) + 1 %}
+            {{ wPerMinute | round }} min read.
         </span>
-      </div>
-      <div class="flex flex-col items-start mt-3">
-        <span
-          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
-        >
+        </div>
+        <div class="flex flex-col items-start">
+          <span
+          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest">
           technology
         </span>
-        <span
+          <span
           class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
         >
           ui-ux
         </span>
+        </div>
+      </div>
+      <div class="flex flex-col md:w-2/3 markdown text-white">
+        {{ content | safe }}
       </div>
-    </div>
-    <div class="flex flex-col w-2/3 markdown text-white">
-      {{ content | safe }}
-    </div>
-  </section>
-</main>
-{% endblock %}
+    </section>
+  </main>
+{% endblock %}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -1,21 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/assets/main.bundle.css" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="/assets/main.bundle.css"/>
     <script src="/assets/main.bundle.js" defer></script>
     <title>{{ title }} | TEA Stack</title>
     {% block head %}{% endblock %}
   </head>
   <body class="text-white bg-mydark-500 {{ 'debug-screens' if env.devMode }}">
-    {% include 'header.njk' %} {% if banner %} {% include "banner.njk" %} {%
-    endif %} {% block body %}
-    <div
-      class="py-8 m-0 w-full bg-mydark-300 {% if container %} px-48 {% endif %}"
+    {% include 'header.njk' %}
+    {% if banner %}
+      {% include "banner.njk" %}
+    {% endif %}
+    {% block body %}
+      <div
+      class="py-8 m-0 bg-mydark-300"
     >
-      {{ content | safe }}
-    </div>
+        {% if page.url == '/pages/about/' %}
+          <div class=" markdown container max-w-6xl">
+            {{ content | safe }}
+          </div>
+        {% endif %}
+        {% if page.url != '/pages/about/' %}
+          {{ content | safe }}
+        {% endif %}
+      </div>
     {% endblock %}
     <footer
       class="text-gray-400 bg-mydark-500 body-font"
@@ -41,11 +51,12 @@
             Ac odio tempor orci dapibus ultrices in. Posuere urna nec tincidunt
             praesent semper feugiat nibh. Massa sed elementum tempus.
           </p>
-          <button
-            class="bg-myred-500 rounded-lg text-white hover:bg-white hover:text-myred-500 px-4 py-2 mt-10 w-1/2"
+          <a
+          href="/pages/products"
+            class="button w-1/2"
           >
             Check it out!
-          </button>
+          </a>
         </div>
         <div class="w-full md:w-full">
           <div class="bg-mydark-100 h-80 rounded-3xl"></div>
@@ -64,21 +75,21 @@
 
           <span class="inline-flex sm:mt-0 mt-4 justify-between items-center">
             <a class="text-gray-400 mx-3">
-              <img src="/images/icons/bxl-github.svg" alt="github" />
+              <img src="/images/icons/bxl-github.svg" alt="github"/>
             </a>
             <a class="text-gray-400 mx-3">
-              <img src="/images/icons/bxl-twitter.svg" alt="twitter" />
+              <img src="/images/icons/bxl-twitter.svg" alt="twitter"/>
             </a>
             <a class="text-gray-400 mx-3">
-              <img src="/images/icons/bxs-paper-plane.svg" alt="telegram" />
+              <img src="/images/icons/bxs-paper-plane.svg" alt="telegram"/>
             </a>
           </span>
           <div class="tracking-tight">⚪⚪⚪</div>
         </div>
       </div>
     </footer>
     <script defer>
-      if (window.ResizeObserver) {
+      if (window.ResizeObserver && document.getElementById('reading-progress')) {
         const progress = document.getElementById('reading-progress');
 
         let timeOfLastScroll = 0;
@@ -96,25 +107,23 @@
         let bottom = 10000;
         function updateProgress() {
           requestedAniFrame = false;
-          const percent = Math.min(
-            (document.scrollingElement.scrollTop / (bottom - winHeight)) * 100,
-            100
-          );
-          progress.style.transform = `translate(-${100 - percent}vw, 0)`;
+          const percent = Math.min((document.scrollingElement.scrollTop / (bottom - winHeight)) * 100, 100);
+          progress.style.transform = `translate(-${ 100 - percent}vw, 0)`;
           if (Date.now() - timeOfLastScroll < 3000) {
             requestAnimationFrame(updateProgress);
             requestedAniFrame = true;
           }
         }
 
         new ResizeObserver(() => {
-          bottom =
-            document.scrollingElement.scrollTop +
-            document.querySelector('footer').getBoundingClientRect().top;
+          bottom = document.scrollingElement.scrollTop + document
+            .querySelector('footer')
+            .getBoundingClientRect()
+            .bottom;
           winHeight = window.innerHeight;
           scroll();
         }).observe(document.body);
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/src/articles/article1.md b/src/articles/article1.md
@@ -3,7 +3,8 @@ title: This is my first post.
 description: This is a post on My Blog about agile frameworks.
 date: 2018-05-01
 tags:
-  - another-tag
+  - dd
+  - dd
 image: https://cdn.pixabay.com/photo/2020/08/30/20/54/rice-field-5530707_1280.jpg
 layout: layouts/article.njk
 banner:
@@ -17,7 +18,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
 
-![An image](https://cdn.pixabay.com/photo/2020/08/30/20/54/rice-field-5530707_1280.jpg)
+![An image](https://source.unsplash.com/random/720)
 
 ## Section Header