jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload starter template

Browse Source
This commit is contained in:
Timothy Lin
2021-01-09 17:50:45 +08:00
parent e332766d0f
commit 9a6f4efbb8
72 changed files with 11703 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
data/blog/pictures-of-canada.mdx Normal file
View File

@@ -0,0 +1,100 @@
---
title: O Canada
date: '2017-07-15'
tags: ['holiday', 'canada', 'images']
draft: false
summary: The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
---
# O Canada
The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
Features images served using `next/image` component. The locally stored images are located in a folder with the following path: `/static/images/canada/[filename].jpg`
Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.
---
# Gallery
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
</div>
</div>
# Implementation
```js
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
</div>
</div>
```
_Note_: Currently, one has to use the `Image` component instead of the markdown syntax between jsx. Thankfully, it's one of the default components passed to the MDX Provider and can be used directly.
When MDX v2 is ready, one could potentially interleave markdown in jsx directly! Follow [MDX v2 issues](https://github.com/mdx-js/mdx/issues/1041) for updates.
### Photo Credits
<div>
Maple photo by{' '}
<a href="https://unsplash.com/@i_am_g?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Guillaume Jaillet
</a>{' '}
on{' '}
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Unsplash
</a>
</div>
<div>
Mountains photo by{' '}
<a href="https://unsplash.com/@john_artifexfilms?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
John Lee
</a>{' '}
on{' '}
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Unsplash
</a>
</div>
<div>
Lake photo by{' '}
<a href="https://unsplash.com/@tjholowaychuk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Tj Holowaychuk
</a>{' '}
on{' '}
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Unsplash
</a>
</div>
<div>
Toronto photo by{' '}
<a href="https://unsplash.com/@matthewhenry?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Matthew Henry
</a>{' '}
on{' '}
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
Unsplash
</a>
</div>