101 lines
4.2 KiB
Plaintext
101 lines
4.2 KiB
Plaintext
---
|
|
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&utm_medium=referral&utm_content=creditCopyText">
|
|
Guillaume Jaillet
|
|
</a>{' '}
|
|
on{' '}
|
|
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Unsplash
|
|
</a>
|
|
</div>
|
|
<div>
|
|
Mountains photo by{' '}
|
|
<a href="https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
John Lee
|
|
</a>{' '}
|
|
on{' '}
|
|
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Unsplash
|
|
</a>
|
|
</div>
|
|
<div>
|
|
Lake photo by{' '}
|
|
<a href="https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Tj Holowaychuk
|
|
</a>{' '}
|
|
on{' '}
|
|
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Unsplash
|
|
</a>
|
|
</div>
|
|
<div>
|
|
Toronto photo by{' '}
|
|
<a href="https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Matthew Henry
|
|
</a>{' '}
|
|
on{' '}
|
|
<a href="https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
|
|
Unsplash
|
|
</a>
|
|
</div>
|