83 lines
3.3 KiB
Plaintext
83 lines
3.3 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">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</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">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
With MDX v2, one can interleave markdown in jsx as shown in the example code.
|
||
|
|
|
||
|
|
### Photo Credits
|
||
|
|
|
||
|
|
<div>
|
||
|
|
Maple photo by [Guillaume
|
||
|
|
Jaillet](https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
on
|
||
|
|
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Mountains photo by [John
|
||
|
|
Lee](https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
on
|
||
|
|
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Lake photo by [Tj
|
||
|
|
Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
on
|
||
|
|
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Toronto photo by [Matthew
|
||
|
|
Henry](https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
on
|
||
|
|
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
||
|
|
</div>
|