Improve quotations, anchors and readability

mockoon · Dec 19, 2023 · c86c18b · c86c18b
1 parent 11cafb8
commit c86c18b
Show file tree

Hide file tree

Showing 37 changed files with 239 additions and 241 deletions.
diff --git a/components/article.tsx b/components/article.tsx
@@ -1,7 +1,6 @@
 import { Fragment, FunctionComponent } from 'react';
 import { ArticleData } from '../models/common.model';
 import Markdown from './markdown';
-import Share from './share';
 
 const Article: FunctionComponent<{
   slug: string;
@@ -84,29 +83,24 @@ const Article: FunctionComponent<{
                 {props.articleData.title}
               </h1>
 
-              <p className='lead mb-7 text-center text-muted'>
+              <p className='lead mb-4 text-center text-gray-700'>
                 {props.articleData.excerpt}
               </p>
 
               <div
                 className={`row ${
                   props.articleData.date ? '' : 'd-flex justify-content-center'
-                } align-items-center py-5 border-top border-bottom`}
+                } align-items-center pb-5 border-bottom`}
               >
                 <div className='col-12 d-flex align-items-center flex-column text-center text-lg-start mb-2 mb-lg-0'>
                   {props.articleData.date && (
                     <time
-                      className='fs-sm text-muted'
+                      className='fs-sm text-gray-700'
                       dateTime={props.articleData.date}
                     >
                       Published on {props.articleData.date}
                     </time>
                   )}
-                  <Share
-                    url={`https://mockoon.com/${props.slug}/`}
-                    text={props.articleData.meta.description}
-                    showLabel={true}
-                  />
                 </div>
               </div>
             </div>

diff --git a/components/company-logos.tsx b/components/company-logos.tsx
@@ -27,7 +27,7 @@ const CompanyLogos = function () {
 
   return (
     <div className='container'>
-      <h4 className='text-muted text-center pb-6 fw-bold'>
+      <h4 className='text-gray-700 text-center pb-6 fw-bold'>
         Trusted by awesome teams
       </h4>
       <div className='row align-items-center justify-content-center'>

diff --git a/components/download-cta.tsx b/components/download-cta.tsx
@@ -5,8 +5,8 @@ const DownloadCTA: FunctionComponent = function () {
   return (
     <div className='row align-items-center text-center text-lg-start'>
       <div className='col-12 col-lg-9'>
-        <h3 className='fw-bold text-gray-700 mb-1'>Get started today</h3>
-        <p className='text-muted mb-6 mb-lg-0'>
+        <h3 className='fw-bold text-gray-800 mb-1'>Get started today</h3>
+        <p className='text-gray-700 mb-6 mb-lg-0'>
           Join thousands of IT professionals who are already using Mockoon to
           work with APIs better and faster
         </p>

diff --git a/components/download-section.tsx b/components/download-section.tsx
@@ -43,7 +43,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
             <i className='icon-windows'></i>
           </div>
 
-          <div className='text-muted mb-6 mb-lg-0'>
+          <div className='text-gray-700 mb-6 mb-lg-0'>
             <div className='btn-group'>
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
@@ -91,7 +91,10 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
               >
                 {' '}
                 <code>choco install mockoon</code>
-                <i className='text-muted icon-open ps-2' aria-hidden='true'></i>
+                <i
+                  className='text-gray-700 icon-open ps-2'
+                  aria-hidden='true'
+                ></i>
               </a>
               <br />
               <a
@@ -101,7 +104,10 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
                 rel='noopener'
               >
                 <code>winget install mockoon</code>
-                <i className='text-muted icon-open ps-2' aria-hidden='true'></i>
+                <i
+                  className='text-gray-700 icon-open ps-2'
+                  aria-hidden='true'
+                ></i>
               </a>
             </div>
           </div>
@@ -112,7 +118,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
             <i className='icon-linux'></i>
           </div>
 
-          <div className='text-muted mb-6 mb-lg-0'>
+          <div className='text-gray-700 mb-6 mb-lg-0'>
             <div className='btn-group'>
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
@@ -161,7 +167,10 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
                 rel='noopener'
               >
                 <code>sudo snap install mockoon</code>
-                <i className='text-muted icon-open ps-2' aria-hidden='true'></i>
+                <i
+                  className='text-gray-700 icon-open ps-2'
+                  aria-hidden='true'
+                ></i>
               </a>
               <br />
               <a
@@ -173,7 +182,10 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
                 <code className='mt-1 user-select-text'>
                   yay -S mockoon-bin
                 </code>
-                <i className='text-muted icon-open ps-2' aria-hidden='true'></i>
+                <i
+                  className='text-gray-700 icon-open ps-2'
+                  aria-hidden='true'
+                ></i>
               </a>
             </div>
           </div>
@@ -184,7 +196,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
             <i className='icon-apple'></i>
           </div>
 
-          <div className='text-muted mb-6 mb-lg-0'>
+          <div className='text-gray-700 mb-6 mb-lg-0'>
             <div className='btn-group'>
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
@@ -230,7 +242,10 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
                 rel='noopener'
               >
                 <code>brew install --cask mockoon</code>
-                <i className='text-muted icon-open ps-2' aria-hidden='true'></i>
+                <i
+                  className='text-gray-700 icon-open ps-2'
+                  aria-hidden='true'
+                ></i>
               </a>
             </div>
           </div>
@@ -240,7 +255,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
       <div className='row'>
         <div className='col-12 text-center'>
           <p className='text-center'>
-            <a className='text-gray-600' href={`/releases/${version}/`}>
+            <a className='text-gray-700' href={`/releases/${version}/`}>
               See the v{version} changelog
             </a>
           </p>

diff --git a/components/email-form.tsx b/components/email-form.tsx
@@ -39,7 +39,7 @@ const EmailForm: FunctionComponent<{ formType: keyof typeof groups }> =
           </button>
         </div>
 
-        <p className='text-muted text-center h6 pt-2'>
+        <p className='text-gray-700 text-center h6 pt-2'>
           Your email will not be shared or used for any other purpose.
         </p>
 

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -20,7 +20,7 @@ const Footer: FunctionComponent<{
                     Get our stories delivered
                   </h4>
 
-                  <p className='fs-lg text-muted mb-4 mb-lg-0'>
+                  <p className='fs-lg text-gray-700 mb-4 mb-lg-0'>
                     Enter your email address to receive Mockoon's latest updates
                   </p>
                 </div>

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -67,7 +67,7 @@ const Hero: FunctionComponent<{
                         </button>
                       </a>
                       {cta.subtitle && (
-                        <p className='m-0 text-muted fst-italic'>
+                        <p className='m-0 text-gray-700 fst-italic'>
                           <small>{cta.subtitle}</small>
                         </p>
                       )}

diff --git a/components/markdown.tsx b/components/markdown.tsx
@@ -27,45 +27,50 @@ const heading = (props) => {
   // add anchor link
   const container = (children: React.ReactNode): JSX.Element => (
     <>
-      {children}
       <a
         href={`#${linkSlug}`}
-        className='ms-2 fs-3 fw-bold text-muted text-decoration-none'
+        className='fw-bold text-gray-700 text-decoration-none anchor-link'
       >
-        <small>#</small>
+        &nbsp;
+        <i className='icon-link'></i>
       </a>
+      {children}
     </>
   );
   switch (props.node.tagName) {
     case 'h1':
-      return <h1 id={linkSlug}>{container(props.children)}</h1>;
+      return (
+        <h1 id={linkSlug} className='position-relative '>
+          {container(props.children)}
+        </h1>
+      );
     case 'h2':
       return (
-        <h2 id={linkSlug} className='mt-8'>
+        <h2 id={linkSlug} className='position-relative mt-8'>
           {container(props.children)}
         </h2>
       );
     case 'h3':
       return (
-        <h3 id={linkSlug} className='mt-6'>
+        <h3 id={linkSlug} className='position-relative mt-6'>
           {container(props.children)}
         </h3>
       );
     case 'h4':
       return (
-        <h4 id={linkSlug} className='mt-6'>
+        <h4 id={linkSlug} className='position-relative mt-6'>
           {container(props.children)}
         </h4>
       );
     case 'h5':
       return (
-        <h5 id={linkSlug} className='mt-4'>
+        <h5 id={linkSlug} className='position-relative mt-4'>
           {container(props.children)}
         </h5>
       );
     case 'h6':
       return (
-        <h6 id={linkSlug} className='mt-4'>
+        <h6 id={linkSlug} className='position-relative mt-4'>
           {container(props.children)}
         </h6>
       );
@@ -128,7 +133,7 @@ const Markdown: FunctionComponent<{
                 } rounded`}
               />
               {hasSub && (
-                <span className='d-block fs-6 text-center text-muted mb-8'>
+                <span className='d-block fs-6 text-center text-gray-700 mb-8'>
                   {altCleaned}
                 </span>
               )}

diff --git a/components/mock-samples/cards.tsx b/components/mock-samples/cards.tsx
@@ -38,7 +38,7 @@ const MockSampleCards: FunctionComponent<{
                     }`}
                   >
                     <h3 className={'fs-4 mb-0'}>{mockAPI.title}</h3>
-                    <div className='text-muted fs-6'>
+                    <div className='text-gray-700 fs-6'>
                       <ConditionalWrapper
                         condition={!!mockAPI.externalLink}
                         wrapper={(children) => (

diff --git a/components/plans.tsx b/components/plans.tsx
@@ -290,7 +290,7 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                           >
                             0
                           </span>
-                          <span className='h4 text-muted align-self-end mb-2'>
+                          <span className='h4 text-gray-700 align-self-end mb-2'>
                             /{suffixes[planFrequency]}
                           </span>
                         </div>
@@ -354,7 +354,7 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                         <span className='price display-2 mb-0'>
                           {pricing.SOLO[planFrequency].price}
                         </span>
-                        <span className='h4 text-muted align-self-end mb-2'>
+                        <span className='h4 text-gray-700 align-self-end mb-2'>
                           /{suffixes[planFrequency]}
                         </span>
                       </div>
@@ -455,7 +455,7 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                         <span className='price display-2 mb-0'>
                           {pricing.TEAM[planFrequency].price}
                         </span>
-                        <span className='h4 text-muted align-self-end mb-2'>
+                        <span className='h4 text-gray-700 align-self-end mb-2'>
                           /{suffixes[planFrequency]}/seat
                         </span>
                       </div>
@@ -566,7 +566,7 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                         <span className='price display-2 mb-0'>
                           {pricing.ENTERPRISE[planFrequency].price}
                         </span>
-                        <span className='h4 text-muted align-self-end mb-2'>
+                        <span className='h4 text-gray-700 align-self-end mb-2'>
                           /{suffixes[planFrequency]}/seat
                         </span>
                       </div>
@@ -679,7 +679,7 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                   </div>
                 </div>
               </div>
-              <p className='fs-sm text-muted text-center mt-1'>
+              <p className='fs-sm text-gray-700 text-center mt-1'>
                 Prices are in USD and exclude VAT where applicable. By
                 proceeding to payment you agree to our{' '}
                 <Link href={'/privacy/'}>privacy policy</Link> and{' '}
@@ -718,7 +718,9 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                     </div>
                     <div className='ps-5'>
                       <p className='fs-sm fw-bold mb-0'>Guillaume</p>
-                      <p className='fs-sm text-muted mb-0'>Founder @ Mockoon</p>
+                      <p className='fs-sm text-gray-700 mb-0'>
+                        Founder @ Mockoon
+                      </p>
                     </div>
                   </div>
                 </div>

diff --git a/components/quotation.tsx b/components/quotation.tsx
@@ -11,21 +11,21 @@ const Quotation: FunctionComponent<{ quotation: QuotationData }> = function ({
   quotation
 }) {
   return (
-    <div className='quotation p-6 m-8'>
-      <p className='text-gray-700 lead'>{quotation.citation}</p>
-      <div className='d-flex mt-5 align-items-center'>
-        <div className='avatar avatar-xl'>
-          <img
-            className='avatar-img img-thumbnail rounded-circle'
-            src={`/images/${quotation.pictureUrl}`}
-            alt={quotation.authorRole}
-            width={128}
-            height={128}
-          />
-        </div>
+    <div className='mx-md-8 my-8'>
+      <p className='quotation p-5 mb-0 text-gray-700 lead text-center'>
+        {quotation.citation}
+      </p>
+      <div className='d-flex align-items-center'>
+        <img
+          className='avatar avatar-xl img-thumbnail rounded-circle'
+          src={`/images/${quotation.pictureUrl}`}
+          alt={quotation.authorRole}
+          width={128}
+          height={128}
+        />
         <div className='ms-5'>
           <div className='fw-bold fs-sm'>{quotation.author}</div>
-          <div className='text-muted fs-sm'>{quotation.authorRole}</div>
+          <div className='text-gray-700 fs-sm'>{quotation.authorRole}</div>
         </div>
       </div>
     </div>