Merge pull request #2 from mashupgarage/hamburger-menu

Hamburger menu

package.json

@@ -20,6 +20,7 @@
     "@fontsource/space-grotesk": "^5.0.16",
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.16",
+    "date-fns": "^3.3.1",
     "gatsby": "^5.12.12",
     "gatsby-plugin-image": "^3.13.0",
     "gatsby-plugin-manifest": "^5.13.0",

src/components/Card.tsx

@@ -3,6 +3,7 @@ import PageHeading from './PageHeading'
 import Tag from './Tag'
 import BlitzType from '../types/blitz'
 import { Link } from 'gatsby'
+import { format } from 'date-fns'
 
 type CardProps = {
   date: string
@@ -16,10 +17,23 @@ type CardProps = {
 }
 
 const Card = ({ date, slug, title, type, image, author }: CardProps) => {
+  const getDate = (): React.ReactNode => {
+    const newDate = date
+    const splittedDate = newDate.split('-')
+
+    if (`${splittedDate[1]}-${splittedDate[2]}` === '02-29') {
+      return `Feb 29, ${splittedDate[0]}`
+    }
+
+    return format(newDate, 'MMM dd, yyyy')
+  }
+
   return (
     <Link to={`/${type}${slug}`}>
       <article className='px-4 py-8 w-96 hover:bg-white hover:shadow-lg transition-all duration ease-out rounded'>
-        <p className='uppercase text-sm text-gray-400 tracking-widest font-semibold leading-none'>{date}</p>
+        <p className='uppercase text-sm text-gray-400 tracking-widest font-semibold leading-none'>
+          {getDate()}
+        </p>
         <PageHeading level={2} classes='mb-2'>{title}</PageHeading>
         <p>{author}</p>
         <img src={image.publicURL} alt={title} className='h-96 w-auto object-cover mb-4' />

src/content/hamburger-menu.md

@@ -0,0 +1,40 @@
+---
+slug: '/hamburger-menu'
+date: '2023-02-29'
+title: 'Hamburger Menu'
+type: 'css'
+image: '../images/hamburger-menu.gif'
+codepen: 'https://codepen.io/redlpd-mg/pen/vYMYNVM'
+author: 'Red Lapida'
+github: 'https://github.com/mashupgarage/css-blitz/pull/2'
+entries:
+  - name: 'Raims'
+    url: 'https://codepen.io/raaims/pen/oNONLrm?editors=1100'
+  - name: 'Kirbs'
+    url: https://codepen.io/kerdaddyb/pen/RwOwRmz?editors=1100'
+  - name: 'Patrick'
+    url: 'https://codepen.io/janpatrick-dev/pen/YzMzWob'
+  - name: 'Ady'
+    url: 'https://codepen.io/adycastueras/pen/RwOwRzX?editors=1100'
+  - name: 'Ash'
+    url: 'https://codepen.io/ashleeeeeeyyyyy/pen/VwNwjJN'
+  - name: 'Via'
+    url: 'https://codepen.io/Vianca-Andrea-Maulion/pen/OJGJXKy'
+  - name: 'Kennedy'
+    url: 'https://codepen.io/Kennedy-De-Vera/pen/rNbNLXJ'
+---
+
+* ⌛ You have 15 minutes to implement this, take your time (but not too much)!
+* 💅 Feel free to embellish and make it pretty!
+* 📦 Some basic CSS is provided for you. There are some `TODO` comments in there to help you out.
+* 🧙 You can search online if you get stuck.
+* 🎉 When you're done, `Fork` 🍴 the Codepen page and share with us the URL.
+
+<p align='center'>* * *</p>
+
+## Tips and hints
+
+- Use checkbox.
+- Clicking the label should activate the input.
+- Visibilty (`display` and `opacity`).
+- Use `transform` with `translate` and `rotate`.

src/pages/css/{markdownRemark.frontmatter__slug}.tsx

@@ -90,7 +90,7 @@ export const pageQuery = graphql`
     ) {
       html
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
+        date
         author
         github
         slug

src/pages/index.tsx

@@ -64,7 +64,7 @@ export const pageQuery = graphql`
         frontmatter {
           title
           slug
-          date(formatString: "MMM DD, YYYY")
+          date
           type
           author
           image {