refactor(starter): upgrade and move to typescript

src/templates/PageTemplate/PageTemplate.tsx

@@ -25,7 +25,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage?.publicURL}
+      socialImage={socialImage}
     >
       <Sidebar />
       <Page title={title}>
@@ -36,7 +36,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
 };
 
 export const query = graphql`
-  query PageBySlug($slug: String!) {
+  query PageTemplate($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
@@ -44,9 +44,7 @@ export const query = graphql`
         title
         date
         description
-        socialImage {
-          publicURL
-        }
+        socialImage
       }
     }
   }

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -1,76 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageTemplate renders correctly 1`] = `
-<div
-  className="layout"
->
-  <div
-    className="sidebar"
-  >
-    <div
-      className="sidebar__inner"
-    >
-      <div
-        className="author"
-      >
+<div>
+  <div>
+    <div>
+      <div>
         <a
           href="/"
-        >
-          <img
-            alt="John Doe"
-            className="author__photo"
-            height="75"
-            src="/static/photo.jpg"
-            width="75"
-          />
-        </a>
-        <h2
-          className="author__title"
-        >
+        />
+        <h2>
           <a
-            className="author__title-link"
             href="/"
           >
             John Doe
           </a>
         </h2>
-        <p
-          className="author__subtitle"
-        >
+        <p>
           Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
         </p>
       </div>
-      <nav
-        className="menu"
-      >
-        <ul
-          className="menu__list"
-        >
-          <li
-            className="menu__list-item"
-          >
+      <nav>
+        <ul>
+          <li>
             <a
-              className="menu__list-item-link"
               href="/"
             >
               Articles
             </a>
           </li>
-          <li
-            className="menu__list-item"
-          >
+          <li>
             <a
-              className="menu__list-item-link"
               href="/pages/about"
             >
               About Me
             </a>
           </li>
-          <li
-            className="menu__list-item"
-          >
+          <li>
             <a
-              className="menu__list-item-link"
               href="/pages/contacts"
             >
               Contact Me
@@ -78,23 +44,15 @@ exports[`PageTemplate renders correctly 1`] = `
           </li>
         </ul>
       </nav>
-      <div
-        className="contacts"
-      >
-        <ul
-          className="contacts__list"
-        >
-          <li
-            className="contacts__list-item"
-          >
+      <div>
+        <ul>
+          <li>
             <a
-              className="contacts__list-item-link"
               href="#"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                className="icon"
                 viewBox="0 0 22 28"
               >
                 <title>
@@ -106,17 +64,13 @@ exports[`PageTemplate renders correctly 1`] = `
               </svg>
             </a>
           </li>
-          <li
-            className="contacts__list-item"
-          >
+          <li>
             <a
-              className="contacts__list-item-link"
               href="mailto:#"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                className="icon"
                 viewBox="0 0 28 28"
               >
                 <title>
@@ -128,17 +82,13 @@ exports[`PageTemplate renders correctly 1`] = `
               </svg>
             </a>
           </li>
-          <li
-            className="contacts__list-item"
-          >
+          <li>
             <a
-              className="contacts__list-item-link"
               href="https://github.com/#"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                className="icon"
                 viewBox="0 0 26 28"
               >
                 <title>
@@ -150,17 +100,13 @@ exports[`PageTemplate renders correctly 1`] = `
               </svg>
             </a>
           </li>
-          <li
-            className="contacts__list-item"
-          >
+          <li>
             <a
-              className="contacts__list-item-link"
               href="https://www.twitter.com/#"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                className="icon"
                 viewBox="0 0 26 28"
               >
                 <title>
@@ -172,17 +118,13 @@ exports[`PageTemplate renders correctly 1`] = `
               </svg>
             </a>
           </li>
-          <li
-            className="contacts__list-item"
-          >
+          <li>
             <a
-              className="contacts__list-item-link"
               href="https://t.me/#"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                className="icon"
                 viewBox="0 0 28 28"
               >
                 <title>
@@ -194,55 +136,23 @@ exports[`PageTemplate renders correctly 1`] = `
               </svg>
             </a>
           </li>
-          <li
-            className="contacts__list-item"
-          >
-            <a
-              className="contacts__list-item-link"
-              href="https://vk.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                className="icon"
-                viewBox="0 0 31 28"
-              >
-                <title>
-                  vkontakte
-                </title>
-                <path
-                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
-                />
-              </svg>
-            </a>
-          </li>
         </ul>
       </div>
-      <div
-        className="copyright"
-      >
+      <div>
         All rights reserved.
       </div>
     </div>
   </div>
-  <div
-    className="page"
-  >
-    <div
-      className="page__inner"
-    >
-      <h1
-        className="page__title"
-      >
+  <div>
+    <div>
+      <h1>
         Perfecting the Art of Perfection
       </h1>
-      <div
-        className="page__body"
-      >
+      <div>
         <div
           dangerouslySetInnerHTML={
             Object {
-              "__html": "",
+              "__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
             }
           }
         />

src/templates/PageTemplate/index.ts

@@ -1 +0,0 @@
-export { default as PageTemplate } from "./PageTemplate";