use different name in frontmatter

Author: chriscoyier

src/components/card/card.jsx

@@ -4,23 +4,21 @@ const Card = (props) => {
   return (
     <div className={`${styles.root} ${props.extraClasses}`}>
       {props.logo && (
-        <a href={props.url} className={styles.logoHeader}>
+        <a href={props.link} className={styles.logoHeader}>
           <img
             className={styles.logoImage}
             src={`/logos/${props.logo}`}
             alt={`Logo for ${props.title}`}
           />
         </a>
       )}
-
       {props.icon && (
         <img className={styles.icon} src={`/images/${props.icon}`} alt="" />
       )}
-
       <div className={styles.cardContent}>
         <h3 className={styles.homePageLink}>
-          {props.url && <a href={props.url}>{props.title}</a>}
-          {!props.url && <>{props.title}</>}
+          {props.link && <a href={props.link}>{props.title}</a>}
+          {!props.link && <>{props.title}</>}
         </h3>
         {props.author && (
           <p>

src/components/card/card.module.scss

@@ -58,16 +58,16 @@
     &::after {
       top: 12px;
       right: 12px;
-      mask: url(/img/arrow-up-right.svg);
-      mask-size: cover;
+      -webkit-mask: url(/images/arrow-up-right.svg);
+      mask: url(/images/arrow-up-right.svg);
+      mask-size: 100px;
       background: black;
       width: 12px;
       height: 12px;
     }
     &:hover,
     &:focus,
     [data-focus] {
-      outline: 2px solid blue;
       &::before {
         background: linear-gradient(to bottom left, #9253be, #f0954d);
       }
@@ -93,7 +93,7 @@
     width: 1rem;
     height: 1rem;
     background: #4caa9f;
-    mask: url(/img/netlify-cms.png);
+    mask: url(/images/netlify-cms.png);
     mask-size: cover;
     position: relative;
     top: 2px;

src/components/footer/footer.jsx

@@ -14,7 +14,7 @@ const Footer = (props) => (
     )}
 
     <br />
-    <img src="/img/footer-sep.svg" alt="" className={styles.footerSep} />
+    <img src="/images/footer-sep.svg" alt="" className={styles.footerSep} />
     <p>
       I'm a serverless noob. Got a correction? Something to add?{" "}
       <a href="https://github.com/CSS-Tricks/serverless">

src/components/servicePage/servicePage.astro

@@ -20,7 +20,7 @@ const { data, pageTitle, pageHeader, pageSubHeader, intro } = Astro.props;
         title={post.title}
         key={post.title}
         html={post.content.html}
-        url={post.url}
+        link={post.link}
         extraClasses="service-card"
       />
     ))}
@@ -36,7 +36,7 @@ const { data, pageTitle, pageHeader, pageSubHeader, intro } = Astro.props;
     background-image: url("https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_800/v1558127391/satellite_wezm7k.png"),
       url("https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_1200/v1558127158/cloud3_v43wo8.png"),
       url("https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_1200/v1558127567/earth_zxu0ww.png"),
-      url("/img/stars.svg");
+      url("/images/stars.svg");
     background-size: 30%, 60%, 50%, 90%;
     background-position: top right 15%, top right -40px, top 85% right,
       top center;

src/content/auth/amplify.md

@@ -1,7 +1,7 @@
 ---
 path: "services/auth/amplify"
 title: "Amplify Framework"
-url: "https://aws-amplify.github.io/docs/js/authentication"
+link: "https://aws-amplify.github.io/docs/js/authentication"
 logo: "amplify.jpg"
 ---
 

src/content/auth/auth0.md

@@ -1,7 +1,7 @@
 ---
 path: "services/auth/auth0"
 title: "Auth0"
-url: "https://auth0.com/"
+link: "https://auth0.com/"
 logo: "auth0.png"
 ---
 

src/content/auth/firebase-auth.md

@@ -1,7 +1,7 @@
 ---
 path: "services/auth/firebase"
 title: "Firebase Authentication"
-url: "https://firebase.google.com/products/auth"
+link: "https://firebase.google.com/products/auth"
 logo: "firebase.png"
 ---
 

src/content/auth/netlify.md

@@ -1,7 +1,7 @@
 ---
 path: "services/auth/netlify"
 title: "Netlify Identity"
-url: "https://www.netlify.com/docs/identity/"
+link: "https://www.netlify.com/docs/identity/"
 logo: "netlify.png"
 ---
 

src/content/auth/okta.md

@@ -1,7 +1,7 @@
 ---
 path: "services/auth/okta"
 title: "Okta"
-url: "https://developer.okta.com/"
+link: "https://developer.okta.com/"
 logo: "okta.png"
 ---
 

src/content/auth/userfront.md

@@ -1,7 +1,7 @@
 ---
 path: services/auth/userfront
 title: Userfront
-url: https://userfront.com
+link: https://userfront.com
 logo: userfront.png
 ---
 

src/content/cicd/begin.md

@@ -1,7 +1,7 @@
 ---
 path: "services/major/begin"
 title: "Begin"
-url: "https://begin.com/"
+link: "https://begin.com/"
 logo: "begin-logo.png"
 tags: ["Cloud Functions", "Hosting", "Local Development", "Open core"]
 ---

src/content/cicd/netlify.md

@@ -1,7 +1,7 @@
 ---
 path: "services/major/netlify"
 title: "Netlify"
-url: "https://www.netlify.com/"
+link: "https://www.netlify.com/"
 logo: "netlify.png"
 tags: ["Cloud Functions", "Hosting", "Local Development"]
 ---

src/content/cicd/vercel.md

@@ -1,7 +1,7 @@
 ---
 path: services/major/vercel
 title: Vercel
-url: "https://vercel.com/"
+link: "https://vercel.com/"
 logo: vercel.svg
 ---
 

src/content/cmss/agilitycms.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/agilitycms"
 title: "Agility CMS"
-url: "https://agilitycms.com/"
+link: "https://agilitycms.com/"
 logo: "agilitycms.svg"
 ---
 

src/content/cmss/bloomreach.md

@@ -1,7 +1,7 @@
 ---
 path: services/cmss/bloomreach
 title: Bloomreach
-url: https://developers.bloomreach.com/
+link: https://developers.bloomreach.com/
 logo: bloomreach.png
 ---
 

src/content/cmss/buttercms.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/buttercms"
 title: "ButterCMS"
-url: "https://buttercms.com/"
+link: "https://buttercms.com/"
 logo: "buttercms.png"
 ---
 

src/content/cmss/cloudcannon.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/cloudcannon"
 title: "CloudCannon"
-url: "https://cloudcannon.com/"
+link: "https://cloudcannon.com/"
 logo: "cloudcannon.svg"
 ---
 

src/content/cmss/contentful.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/contentful"
 title: "Contentful"
-url: "https://www.contentful.com/"
+link: "https://www.contentful.com/"
 logo: "contentful.png"
 ---
 

src/content/cmss/cosmicjs.md

@@ -1,7 +1,7 @@
 ---
 path: services/cmss/cosmicjs
 title: Cosmic
-url: https://www.cosmicjs.com
+link: https://www.cosmicjs.com
 logo: cosmicjs.svg
 ---
 

src/content/cmss/craftcms.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/craftcms"
 title: "Craft CMS"
-url: "https://craftcms.com/"
+link: "https://craftcms.com/"
 logo: "craft_cms.svg"
 ---
 

src/content/cmss/datocms.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/datocms"
 title: "DatoCMS"
-url: "https://www.datocms.com/"
+link: "https://www.datocms.com/"
 logo: "datocms.png"
 ---
 

src/content/cmss/flamelink.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/flamelink"
 title: "Flamelink"
-url: "https://flamelink.io/"
+link: "https://flamelink.io/"
 logo: "flamelink.png"
 ---
 

src/content/cmss/flotiq.md

@@ -1,7 +1,7 @@
 ---
 path: services/cmss/flotiq
 title: Flotiq
-url: https://flotiq.com/
+link: https://flotiq.com/
 logo: flotiq.svg
 ---
 

src/content/cmss/forestry.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/forestry"
 title: "Forestry"
-url: "https://forestry.io/"
+link: "https://forestry.io/"
 logo: "forestry.svg"
 ---
 

src/content/cmss/graphcms.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/graphcms"
 title: "GraphCMS"
-url: "https://graphcms.com/"
+link: "https://graphcms.com/"
 logo: "GraphCMS.svg"
 ---
 

src/content/cmss/kenticocloud.md

@@ -1,7 +1,7 @@
 ---
 path: services/cmss/kenticokontent
 title: Kentico Kontent
-url: "https://www.kontent.ai/"
+link: "https://www.kontent.ai/"
 logo: kentio-kontent.svg
 ---
 

src/content/cmss/lexascms.md

@@ -1,7 +1,7 @@
 ---
 path: services/cmss/lexascms
 title: LexasCMS
-url: https://www.lexascms.com/
+link: https://www.lexascms.com/
 logo: lexascms.svg
 ---
 

src/content/cmss/netlify.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/netlify"
 title: "Netlify CMS"
-url: "https://www.netlifycms.org/"
+link: "https://www.netlifycms.org/"
 logo: "netlify.png"
 ---
 

src/content/cmss/prismic.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/prismic"
 title: "Prismic"
-url: "https://prismic.io/"
+link: "https://prismic.io/"
 logo: "prismic.png"
 ---
 

src/content/cmss/publii.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/publii"
 title: "Publii"
-url: "https://getpublii.com/"
+link: "https://getpublii.com/"
 logo: "publii.svg"
 ---
 

src/content/cmss/sanity.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/sanity"
 title: "Sanity"
-url: "https://www.sanity.io/"
+link: "https://www.sanity.io/"
 logo: "sanity.png"
 ---
 

src/content/cmss/shifter.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/shifter"
 title: "Shifter"
-url: "https://getshifter.io/"
+link: "https://getshifter.io/"
 logo: "shifter.png"
 ---
 

src/content/cmss/storyblok.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/storyblok"
 title: "Storyblok"
-url: "https://www.storyblok.com/"
+link: "https://www.storyblok.com/"
 logo: "storyblok.png"
 ---
 

src/content/cmss/strapi.md

@@ -1,8 +1,8 @@
 ---
-path: 'services/cmss/strapi'
-title: 'Strapi'
-url: 'https://strapi.io/'
-logo: '/images/strapi.png'
+path: "services/cmss/strapi"
+title: "Strapi"
+link: "https://strapi.io/"
+logo: "/images/strapi.png"
 ---
 
 Strapi is an open source Headless CMS that is open source MIT licensed, self-hosted, customizable, has RESTful or GraphQL APIs, is 100% JavaScript (built on Node.js) and extensible by design.

src/content/cmss/takeshape.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/takeshape"
 title: "Take Shape"
-url: "https://www.takeshape.io/"
+link: "https://www.takeshape.io/"
 logo: "takeshape.png"
 ---
 

src/content/cmss/webiny.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/webiny"
 title: "Webiny"
-url: "https://www.webiny.com/"
+link: "https://www.webiny.com/"
 logo: "webiny.svg"
 ---
 

src/content/cmss/wordpress.md

@@ -1,7 +1,7 @@
 ---
 path: "services/cmss/wordpress"
 title: "WordPress (REST API)"
-url: "https://developer.wordpress.com/docs/api/"
+link: "https://developer.wordpress.com/docs/api/"
 logo: "wordpress.svg"
 ---
 

src/content/data/8base.md

@@ -1,7 +1,7 @@
 ---
 path: "services/data/8base"
 title: "8base"
-url: "https://www.8base.com/"
+link: "https://www.8base.com/"
 logo: "8base.svg"
 ---