Begin to workout resume and its layout. NOTE: Server Error for non-blog!

TypeError: String.prototype.replace called on null or undefined Call Stack: generateRssItem lib/generate-rss.js (8:20) Array.map <anonymous> generateRss lib/generate-rss.js (28:14) getStaticProps pages/[...page_slug].js (35:28)
Jeff-Russ · Apr 6, 2022 · 1681b0b · 1681b0b
1 parent 9cff3c2
commit 1681b0b
Show file tree

Hide file tree

Showing 16 changed files with 419 additions and 35 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -6,7 +6,7 @@ import SocialIcon from '@/components/social-icons'
 export default function Footer() {
   return (
     <footer>
-      <div className="mt-16 flex flex-col items-center">
+      <div className="site-footer mt-16 flex flex-col items-center">
         <div className="mb-3 flex space-x-4">
           <SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
           <SocialIcon kind="github" href={siteMetadata.github} size="6" />

diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
@@ -12,7 +12,7 @@ const LayoutWrapper = ({ children }) => {
   return (
     <SectionContainer>
       <div className="flex h-screen flex-col justify-between">
-        <header className="flex items-center justify-between py-10">
+        <header className="site-navbar flex items-center justify-between py-10">
           <div>
             <Link href="/" aria-label={siteMetadata.headerTitle}>
               <div className="flex items-center justify-between">

diff --git a/css/tailwind.css b/css/tailwind.css
@@ -11,7 +11,7 @@
 }
 
 .footnotes {
-  @apply pt-8 mt-12 border-t border-gray-200 dark:border-gray-700;
+  @apply mt-12 border-t border-gray-200 pt-8 dark:border-gray-700;
 }
 
 .csl-entry {
@@ -23,3 +23,197 @@ input:-webkit-autofill,
 input:-webkit-autofill:focus {
   transition: background-color 600000s 0s, color 600000s 0s;
 }
+
+@layer components {
+  .my-border-spacing-x-3 {
+    border-spacing: theme('spacing.2') 0px;
+  }
+}
+
+/** Obfuscation Email and Phone (from bots) 
+
+https://www.nelsonpires.com/development/protect-your-email-and-phone-number-from-spam-bots
+ They will be displayed but not in HTML
+"moc.etisbew"emos"@nhoj :liamE" RESULT-> john@somewebsite.com
+"987 654 "321" 153+ :enohP" RESULT-> +351 123 456 789
+
+As for the <a>'s href='mailto:...' and href='tel:...', see obfuscations.js */
+a.nobot {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+a.nobot.jeff-e-mail:before {
+  content: 'moc.liamg@';
+}
+a.nobot.jeff-e-mail:after {
+  content: 'nnylyerffej';
+}
+a.nobot.jeff-ph-num:before {
+  content: '5433-';
+}
+a.nobot.jeff-ph-num:after {
+  content: '-237';
+}
+
+/** Grid Areas  */
+
+.grid-area-A {
+  grid-area: A;
+} /* .main-head   { grid-area: header; } */
+.grid-area-B {
+  grid-area: B;
+} /* .content     { grid-area: content; } */
+.grid-area-C {
+  grid-area: C;
+} /* .main-nav    { grid-area: nav; } */
+.grid-area-D {
+  grid-area: D;
+} /* .side        { grid-area: sidebar; } */
+.grid-area-E {
+  grid-area: E;
+} /* .ad          { grid-area: ad; } */
+.grid-area-F {
+  grid-area: F;
+} /* .main-footer { grid-area: footer; }  */
+
+/** TestLayout 
+
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout */
+
+/* .grid-area-A { grid-area: A; } is .main-head   { grid-area: header; } */
+/* .grid-area-B { grid-area: B; } is .content     { grid-area: content; } */
+/* .grid-area-C { grid-area: C; } is .main-nav    { grid-area: nav; } */
+/* .grid-area-D { grid-area: D; } is .side        { grid-area: sidebar; } */
+/* .grid-area-E { grid-area: E; } is .ad          { grid-area: ad; } */
+/* .grid-area-F { grid-area: F; } is .main-footer { grid-area: footer; }  */
+
+.test-layout .wrapper {
+  /* .test-layout .wrapper { */
+  display: grid; /* display: grid; */
+  gap: 20px; /* gap: 20px; */
+  grid-template-areas:    /* grid-template-areas: */
+    'A' /* "header" */
+    'C' /* "nav" */
+    'B' /* "content" */
+    'D' /* "sidebar" */
+    'E' /* "ad" */
+    'F'; /* "footer"; */
+} /* } */
+
+@media (min-width: 500px) {
+  /* @media (min-width: 500px) { */
+  .test-layout .wrapper {
+    /* .test-layout  .wrapper { */
+    grid-template-columns: 1fr 3fr; /* grid-template-columns: 1fr 3fr; */
+    grid-template-areas:               /* grid-template-areas: */
+      'A A' /* "header  header" */
+      'C C' /* "nav     nav" */
+      'D B' /* "sidebar content" */
+      'E F'; /* "ad      footer"; */
+  } /* } */
+  .test-layout nav ul {
+    /* .test-layout  nav ul { */
+    display: flex; /* display: flex; */
+    justify-content: space-between; /* justify-content: space-between; */
+  } /* } */
+} /* } */
+
+@media (min-width: 700px) {
+  /* @media (min-width: 700px) { */
+  .test-layout .wrapper {
+    /* .test-layout  .wrapper { */
+    grid-template-columns: 1fr 4fr 1fr; /* grid-template-columns: 1fr 4fr 1fr; */
+    grid-template-areas:                    /* grid-template-areas: */
+      'A A A' /* "header header  header" */
+      'C B D' /* "nav    content sidebar" */
+      'C B E' /* "nav    content ad" */
+      'F F F'; /* "footer footer  footer" */
+  } /* } */
+  .test-layout nav ul {
+    /* .test-layout nav ul { */
+    flex-direction: column; /* flex-direction: column; */
+  } /* } */
+}
+
+/** ResumeLayout  */
+
+.resume-layout-old table {
+  @apply text-left/* */  min-w-full rounded-md border-2 border-gray-500;
+}
+
+.resume-layout-old thead {
+  @apply bg-gray-400 dark:bg-gray-700;
+}
+
+.resume-layout-old tr {
+  @apply /*  */ border-b-2 border-gray-500;
+}
+
+.resume-layout-old tr:nth-child(even) {
+  @apply bg-gray-400/30 dark:bg-gray-700/30;
+}
+
+.resume-layout-old td,
+th {
+  white-space: nowrap;
+  @apply p-1.5;
+}
+
+.resume-layout br.responsive {
+  display: none; /*  Hide BR tag for narrow screens */
+}
+
+@media (min-width: 760px) {
+  .resume-layout br.responsive {
+    display: inline; /* Show BR tag for wider screens */
+  }
+}
+
+.resume-layout ul {
+  all: unset;
+  padding: none;
+}
+
+.resume-layout ul > li {
+  margin-left: 1.5em;
+}
+
+.resume-layout .education-grid-template-areas-wrapper {
+  /* all: unset; */
+  display: grid;
+  gap: 0em;
+  grid-template-areas:
+    'A'
+    'B'
+    'C';
+}
+
+.resume-layout .A {
+  height: fit-content;
+}
+
+@media (min-width: 500px) {
+  .resume-layout .education-grid-template-areas-wrapper {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'A'
+      'B'
+      'C';
+  }
+}
+
+@media (min-width: 760px) {
+  .resume-layout .education-grid-template-areas-wrapper {
+    grid-template-columns: 3fr 4fr;
+    grid-template-rows: min-content auto;
+    /* grid-auto-rows: minmax(auto, auto); */
+
+    grid-template-areas:
+      'A B'
+      'C B';
+  }
+}
+
+.resume-layout .education-grid-template-areas-wrapper > * {
+  /* @apply border-2 border-red-800 */
+}
diff --git a/data/wrapperOverrides.js b/data/wrapperOverrides.js
@@ -7,6 +7,9 @@ module.exports = {
       '/Tailwind-CSS-flex-grid-test',
       '/Tailwind-Grids-test',
       '/Simple-Tailwind-CSS-starter-test',
+      // '/tailwind-test',
+      // '/resume',
+      '/learning-tests/Realizing-common-layouts-using-CSS-Grid-Layout',
     ],
   },
   appOverrides: {
@@ -17,6 +20,9 @@ module.exports = {
       '/Tailwind-CSS-flex-grid-test',
       'Tailwind-Grids-test',
       '/Simple-Tailwind-CSS-starter-test',
+      // '/tailwind-test',
+      // '/resume',
+      '/learning-tests/Realizing-common-layouts-using-CSS-Grid-Layout',
     ],
   },
 }
diff --git a/layouts/OldResumeLayout.js b/layouts/OldResumeLayout.js
@@ -3,7 +3,7 @@ import Image from '@/components/Image'
 import { PageSEO } from '@/components/SEO'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
 
-export default function ResumeLayout({ children, frontMatter, authorDetails }) {
+export default function OldResumeLayout({ children, frontMatter, authorDetails }) {
   const {
     name,
     summary,

diff --git a/layouts/PageLayout.js b/layouts/PageLayout.js
@@ -0,0 +1,12 @@
+import { PageSEO } from '@/components/SEO'
+
+export default function EmptyLayout({ frontMatter, children }) {
+  const { title, summary } = frontMatter
+
+  return (
+    <>
+      <PageSEO title={title} description={summary} />
+      <div>{children}</div>
+    </>
+  )
+}
diff --git a/layouts/ResumeLayout.js b/layouts/ResumeLayout.js
@@ -0,0 +1,39 @@
+import PageTitle from '@/components/PageTitle'
+import { PageSEO } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+
+const editUrl = (fileName) => `${siteMetadata.siteRepo}/blob/master/data/blog/${fileName}`
+const discussUrl = (slug) =>
+  `https://mobile.twitter.com/search?q=${encodeURIComponent(
+    `${siteMetadata.siteUrl}/blog/${slug}`
+  )}`
+
+const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+
+export default function ResumeLayout({ frontMatter, authorDetails, next, prev, children }) {
+  // console.log(frontMatter)
+  const { summary, title } = frontMatter
+
+  return (
+    <div className="resume-layout">
+      <PageSEO title={`Resume`} description={summary} />
+      {/* <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700"> */}
+      {/* <header className="pt-6 xl:pb-6">
+          <div className="space-y-1">
+            <PageTitle>{title}</PageTitle>
+          </div>
+        </header> */}
+      {/* <div
+          className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
+          style={{ gridTemplateRows: 'auto 1fr' }}
+        > */}
+      <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
+        <div className="max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
+      </div>
+      {/*  </div> */}
+      {/* </div> */}
+      <script async src="scripts/obfuscations.js" type="text/javascript"></script>
+      {/* <script async src="scripts/printable-doc.js" type="text/javascript"></script> */}
+    </div>
+  )
+}