setup blog still need to do models

updating models added a serializer to make the magic work extracted footer to component fixes models and adds index to articles adding basic layout to article templates update styling Adds blogpost + Anne-Greeth as author changing targets in config ran linters and fixed prettier complaints updating readme more updates added missing tag more updates adding author model to route added dynamic page title article template extracting primary navbar to component tweak to navbar working on some spacing working on the card element for the article links more work on article card trying to fix the error that is causing build failure tadjusting prember urls added prember-middleware removed pagination from in-repo addon config tweaking primary nav added links to homepage few small tweaks updating styles updating styles ember-data forced attribute rename trying again
the-zen-dev · Apr 19, 2021 · 451ffff · 451ffff
1 parent 30afe37
commit 451ffff
Show file tree

Hide file tree

Showing 51 changed files with 9,552 additions and 4,381 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 /.pnp*
 /.sass-cache
 /.eslintcache
+/.vscode/
 /connect.lock
 /coverage/
 /libpeerconnection.log

diff --git a/.netlifyredirects b/.netlifyredirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # thezendevapp
 
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
+[![Netlify Status](https://api.netlify.com/api/v1/badges/a7442467-a3d9-4762-be34-8167aa8f5878/deploy-status)](https://app.netlify.com/sites/the-zen-dev/deploys)
 
+The Zen Dev is a project to bring more zen to the life of all developers.
 ## Prerequisites
 
 You will need the following things properly installed on your computer.

diff --git a/app/adapters/application.js b/app/adapters/application.js
@@ -0,0 +1,13 @@
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
+
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  urlForFindAll(modelName) {
+    const path = this.pathForType(modelName);
+    return `/${path}/all.json`;
+  }
+
+  urlForFindRecord(id, modelName) {
+    const path = this.pathForType(modelName);
+    return `/${path}/${id}.json`;
+  }
+}
diff --git a/app/components/page-footer.hbs b/app/components/page-footer.hbs
@@ -0,0 +1,8 @@
+<footer>
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-8xl">
+    <div class="border-t border-gray-200 py-8 text-sm text-center sm:text-left">
+      <span class="block sm:inline">An open-source project made <span class="emoji">with ❤️</span> by <a href="https://twitter.com/agvanherwijnen" class="underline" rel="external">Anne-Greeth</a> & <a href="https://twitter.com/melaniersumner" class="underline" rel="external">Melanie</a>. Hosted by <a href="https://www.netlify.com" class="underline" rel="external">Netlify</a>.</span>
+      <span class="block sm:inline mt-4 md:mt-0">Have a problem, question or suggestion? Let us know by filing an issue in this project's <a href="https://github.com/the-zen-dev/thezendevapp/issues" class="underline" rel="external">GitHub repository</a>.</span>
+    </div>
+  </div>
+</footer>
diff --git a/app/components/primary-nav.hbs b/app/components/primary-nav.hbs
@@ -0,0 +1,15 @@
+<nav>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-center h-16">
+        <div class="sm:ml-6 sm:flex sm:space-x-8">
+          <a href="/" class="border-transparent text-yellow-100  hover:border-yellow-300 hover:text-yellow-300 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium">
+            The Zen Dev
+          </a>
+          <a href="/articles" class="border-transparent text-yellow-100 hover:border-yellow-300 hover:text-yellow-300 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium">
+            Articles
+          </a>
+
+        </div>
+    </div>
+  </div>
+</nav>
diff --git a/app/models/application.js b/app/models/application.js
@@ -0,0 +1,5 @@
+import Model from '@ember-data/model';
+
+export default class ApplicationModel extends Model {
+
+}
diff --git a/app/models/article.js b/app/models/article.js
@@ -0,0 +1,20 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+
+export default class articleModel extends Model {
+  @attr content;
+  @attr created;
+  @attr html;
+  @attr image;
+  @attr title;
+  @attr unsplashtext;
+  @attr unsplashurl;
+  @hasMany('author') authors;
+  @hasMany('tag') tags;
+
+  @attr('date', {
+    defaultValue() {
+      return new Date();
+    },
+  })
+  createdAt;
+}
diff --git a/app/models/author.js b/app/models/author.js
@@ -0,0 +1,9 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+
+export default class AuthorModel extends Model {
+  @attr first;
+  @attr last;
+  @attr site;
+  @attr url;
+  @hasMany('article') articles;
+}
diff --git a/app/models/tag.js b/app/models/tag.js
@@ -0,0 +1,6 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+
+export default class TagModel extends Model {
+  @attr title;
+  @hasMany('article') articles;
+}
diff --git a/app/router.js b/app/router.js
@@ -6,4 +6,8 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('articles', function () {
+    this.route('article', { path: '/:id' });
+  });
+});
diff --git a/app/routes/articles.js b/app/routes/articles.js
@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+export default class ArticlesRoute extends Route {
+  @service store;
+
+  model() {
+    return this.store.findAll('article');
+  }
+}
diff --git a/app/routes/articles/article.js b/app/routes/articles/article.js
@@ -0,0 +1,24 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class ArticlesArticleRoute extends Route {
+  @service store;
+
+  model(params) {
+    let article = this.store.peekAll('article', params.id);
+    if (!article) {
+      console.log('sorry, no article for this one ' + params.id);
+    }
+    console.log(`found it: ${article}`);
+    return this.store.findRecord('article', params.id);
+  }
+
+  // make sure that tags are loaded in ember-data before template is rendered
+  // to ensure fastboot has all data on time
+  // (note: "before the template is rendered" meaning it pauses the render of the route)
+  async afterModel(model) {
+    await model.get('tags');
+    await model.get('authors');
+    return model;
+  }
+}
diff --git a/app/routes/articles/index.js b/app/routes/articles/index.js
@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class ArticlesIndexRoute extends Route {
+  @service store;
+  model() {
+    return this.store.findAll('article');
+  }
+}
diff --git a/app/routes/index.js b/app/routes/index.js
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class IndexRoute extends Route {}
diff --git a/app/serializers/application.js b/app/serializers/application.js
@@ -0,0 +1,3 @@
+import JSONAPISerializer from '@ember-data/serializer/json-api';
+
+export default class ApplicationSerializer extends JSONAPISerializer {}
diff --git a/app/styles/components.css b/app/styles/components.css
@@ -1,15 +1,23 @@
-main {
+main.homepage {
   display: flex;
+  flex-flow: column;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  padding-bottom: 3em;
+}
+.container-homepage-links {
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 2px;
+  max-width: 768px;
+  text-decoration: none;
+  text-transform: uppercase;
 }
 
 h1 {
   @apply text-5xl;
   line-height: 1;
   @apply text-center;
-  @apply font-serif;
   @apply mt-8;
   @apply mb-0;
 }
@@ -20,11 +28,20 @@ p {
   @apply py-2;
 }
 
-.emoji {
-  @apply mr-1;
+/* article styling */
+.article-text {
+  @apply pt-3;
+}
+.article-text p {
+  @apply font-serif;
+  font-size: 20px;
+  line-height: 1.5;
+}
+.article-author {
+  font-family: 'Roboto', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
-
-
 /* play icon */
 .icon-play {
   cursor: pointer;

diff --git a/app/styles/utilities.css b/app/styles/utilities.css
@@ -13,3 +13,6 @@ body {
   font-family: 'Merienda', cursive;
 }
 
+.author-separator {
+  background-color: var(--deep-space-sparkle);
+}
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -1,6 +1,7 @@
 /* global module */
 
-const colors = require('tailwindcss/colors')
+// eslint-disable-next-line no-undef
+const colors = require('tailwindcss/colors');
 
 module.exports = {
   purge: [],
@@ -86,13 +87,17 @@ module.exports = {
     backgroundImage: {
       none: 'none',
       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
-      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
+      'gradient-to-tr':
+        'linear-gradient(to top right, var(--tw-gradient-stops))',
       'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
-      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
+      'gradient-to-br':
+        'linear-gradient(to bottom right, var(--tw-gradient-stops))',
       'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
-      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
+      'gradient-to-bl':
+        'linear-gradient(to bottom left, var(--tw-gradient-stops))',
       'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
-      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
+      'gradient-to-tl':
+        'linear-gradient(to top left, var(--tw-gradient-stops))',
     },
     backgroundOpacity: (theme) => theme('opacity'),
     backgroundPosition: {
@@ -159,10 +164,14 @@ module.exports = {
     },
     boxShadow: {
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      DEFAULT:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md:
+        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg:
+        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl:
+        '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
       none: 'none',
@@ -192,7 +201,10 @@ module.exports = {
     divideWidth: (theme) => theme('borderWidth'),
     dropShadow: {
       sm: '0 1px 1px rgba(0,0,0,0.05)',
-      DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
+      DEFAULT: [
+        '0 1px 2px rgba(0, 0, 0, 0.1)',
+        '0 1px 1px rgba(0, 0, 0, 0.06)',
+      ],
       md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
       lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
       xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
@@ -252,7 +264,14 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      serif: [
+        'ui-serif',
+        'Georgia',
+        'Cambria',
+        '"Times New Roman"',
+        'Times',
+        'serif',
+      ],
       mono: [
         'ui-monospace',
         'SFMono-Regular',
@@ -837,16 +856,44 @@ module.exports = {
     backgroundAttachment: ['responsive'],
     backgroundBlendMode: ['responsive'],
     backgroundClip: ['responsive'],
-    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    backgroundColor: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
     backgroundImage: ['responsive'],
-    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    backgroundOpacity: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     blur: ['responsive'],
     borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    borderColor: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
+    borderOpacity: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
@@ -941,9 +988,29 @@ module.exports = {
     strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    textColor: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
+    textDecoration: [
+      'responsive',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
+    textOpacity: [
+      'responsive',
+      'dark',
+      'group-hover',
+      'focus-within',
+      'hover',
+      'focus',
+    ],
     textOverflow: ['responsive'],
     textTransform: ['responsive'],
     transform: ['responsive'],
@@ -961,5 +1028,5 @@ module.exports = {
     wordBreak: ['responsive'],
     zIndex: ['responsive', 'focus-within', 'focus'],
   },
-  plugins: [],
-}
+  plugins: [require('@tailwindcss/aspect-ratio')],
+};