
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="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

# Implementation

```js
<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </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&amp;utm_medium=referral&amp;utm_content=creditCopyText)
  on
  [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
</div>
<div>
  Mountains photo by [John
  Lee](https://unsplash.com/@john_artifexfilms?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
  on
  [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
</div>
<div>
  Lake photo by [Tj
  Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
  on
  [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
</div>
<div>
  Toronto photo by [Matthew
  Henry](https://unsplash.com/@matthewhenry?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
  on
  [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
</div>



# The Time Machine by H. G. Wells

_Title_: The Time Machine

_Author_: H. G. Wells

_Subject_: Science Fiction

_Language_: English

_Source_: [Project Gutenberg](https://www.gutenberg.org/ebooks/35)

## Introduction

The Time Traveller (for so it will be convenient to speak of him) was
expounding a recondite matter to us. His pale grey eyes shone and
twinkled, and his usually pale face was flushed and animated. The fire
burnt brightly, and the soft radiance of the incandescent lights in the
lilies of silver caught the bubbles that flashed and passed in our
glasses. Our chairs, being his patents, embraced and caressed us rather
than submitted to be sat upon, and there was that luxurious
after-dinner atmosphere, when thought runs gracefully free of the
trammels of precision. And he put it to us in this way—marking the
points with a lean forefinger—as we sat and lazily admired his
earnestness over this new paradox (as we thought it) and his fecundity.

“You must follow me carefully. I shall have to controvert one or two
ideas that are almost universally accepted. The geometry, for instance,
they taught you at school is founded on a misconception.”

“Is not that rather a large thing to expect us to begin upon?” said
Filby, an argumentative person with red hair.

“I do not mean to ask you to accept anything without reasonable ground
for it. You will soon admit as much as I need from you. You know of
course that a mathematical line, a line of thickness _nil_, has no real
existence. They taught you that? Neither has a mathematical plane.
These things are mere abstractions.”

“That is all right,” said the Psychologist.

“Nor, having only length, breadth, and thickness, can a cube have a
real existence.”

“There I object,” said Filby. “Of course a solid body may exist. All
real things—”

“So most people think. But wait a moment. Can an _instantaneous_ cube
exist?”

“Don’t follow you,” said Filby.

“Can a cube that does not last for any time at all, have a real
existence?”

Filby became pensive. “Clearly,” the Time Traveller proceeded, “any
real body must have extension in _four_ directions: it must have
Length, Breadth, Thickness, and—Duration. But through a natural
infirmity of the flesh, which I will explain to you in a moment, we
incline to overlook this fact. There are really four dimensions, three
which we call the three planes of Space, and a fourth, Time. There is,
however, a tendency to draw an unreal distinction between the former
three dimensions and the latter, because it happens that our
consciousness moves intermittently in one direction along the latter
from the beginning to the end of our lives.”

“That,” said a very young man, making spasmodic efforts to relight his
cigar over the lamp; “that . . . very clear indeed.”

“Now, it is very remarkable that this is so extensively overlooked,”
continued the Time Traveller, with a slight accession of cheerfulness.
“Really this is what is meant by the Fourth Dimension, though some
people who talk about the Fourth Dimension do not know they mean it. It
is only another way of looking at Time. _There is no difference between
Time and any of the three dimensions of Space except that our
consciousness moves along it_. But some foolish people have got hold of
the wrong side of that idea. You have all heard what they have to say
about this Fourth Dimension?”

“_I_ have not,” said the Provincial Mayor.

“It is simply this. That Space, as our mathematicians have it, is
spoken of as having three dimensions, which one may call Length,
Breadth, and Thickness, and is always definable by reference to three
planes, each at right angles to the others. But some philosophical
people have been asking why _three_ dimensions particularly—why not
another direction at right angles to the other three?—and have even
tried to construct a Four-Dimensional geometry. Professor Simon Newcomb
was expounding this to the New York Mathematical Society only a month
or so ago. You know how on a flat surface, which has only two
dimensions, we can represent a figure of a three-dimensional solid, and
similarly they think that by models of three dimensions they could
represent one of four—if they could master the perspective of the
thing. See?”

“I think so,” murmured the Provincial Mayor; and, knitting his brows,
he lapsed into an introspective state, his lips moving as one who
repeats mystic words. “Yes, I think I see it now,” he said after some
time, brightening in a quite transitory manner.

“Well, I do not mind telling you I have been at work upon this geometry
of Four Dimensions for some time. Some of my results are curious. For
instance, here is a portrait of a man at eight years old, another at
fifteen, another at seventeen, another at twenty-three, and so on. All
these are evidently sections, as it were, Three-Dimensional
representations of his Four-Dimensioned being, which is a fixed and
unalterable thing.

“Scientific people,” proceeded the Time Traveller, after the pause
required for the proper assimilation of this, “know very well that Time
is only a kind of Space. Here is a popular scientific diagram, a
weather record. This line I trace with my finger shows the movement of
the barometer. Yesterday it was so high, yesterday night it fell, then
this morning it rose again, and so gently upward to here. Surely the
mercury did not trace this line in any of the dimensions of Space
generally recognised? But certainly it traced such a line, and that
line, therefore, we must conclude, was along the Time-Dimension.”

“But,” said the Medical Man, staring hard at a coal in the fire, “if
Time is really only a fourth dimension of Space, why is it, and why has
it always been, regarded as something different? And why cannot we move
in Time as we move about in the other dimensions of Space?”

The Time Traveller smiled. “Are you so sure we can move freely in
Space? Right and left we can go, backward and forward freely enough,
and men always have done so. I admit we move freely in two dimensions.
But how about up and down? Gravitation limits us there.”

“Not exactly,” said the Medical Man. “There are balloons.”

“But before the balloons, save for spasmodic jumping and the
inequalities of the surface, man had no freedom of vertical movement.”

“Still they could move a little up and down,” said the Medical Man.

“Easier, far easier down than up.”

“And you cannot move at all in Time, you cannot get away from the
present moment.”

“My dear sir, that is just where you are wrong. That is just where the
whole world has gone wrong. We are always getting away from the present
moment. Our mental existences, which are immaterial and have no
dimensions, are passing along the Time-Dimension with a uniform
velocity from the cradle to the grave. Just as we should travel _down_
if we began our existence fifty miles above the earth’s surface.”

“But the great difficulty is this,” interrupted the Psychologist. ’You
_can_ move about in all directions of Space, but you cannot move about
in Time.”

“That is the germ of my great discovery. But you are wrong to say that
we cannot move about in Time. For instance, if I am recalling an
incident very vividly I go back to the instant of its occurrence: I
become absent-minded, as you say. I jump back for a moment. Of course
we have no means of staying back for any length of Time, any more than
a savage or an animal has of staying six feet above the ground. But a
civilised man is better off than the savage in this respect. He can go
up against gravitation in a balloon, and why should he not hope that
ultimately he may be able to stop or accelerate his drift along the
Time-Dimension, or even turn about and travel the other way?”

“Oh, _this_,” began Filby, “is all—”

“Why not?” said the Time Traveller.

“It’s against reason,” said Filby.

“What reason?” said the Time Traveller.

“You can show black is white by argument,” said Filby, “but you will
never convince me.”

“Possibly not,” said the Time Traveller. “But now you begin to see the
object of my investigations into the geometry of Four Dimensions. Long
ago I had a vague inkling of a machine—”

“To travel through Time!” exclaimed the Very Young Man.

“That shall travel indifferently in any direction of Space and Time, as
the driver determines.”

Filby contented himself with laughter.

“But I have experimental verification,” said the Time Traveller.

“It would be remarkably convenient for the historian,” the Psychologist
suggested. “One might travel back and verify the accepted account of
the Battle of Hastings, for instance!”

“Don’t you think you would attract attention?” said the Medical Man.
“Our ancestors had no great tolerance for anachronisms.”

“One might get one’s Greek from the very lips of Homer and Plato,” the
Very Young Man thought.

“In which case they would certainly plough you for the Little-go. The
German scholars have improved Greek so much.”

“Then there is the future,” said the Very Young Man. “Just think! One
might invest all one’s money, leave it to accumulate at interest, and
hurry on ahead!”

“To discover a society,” said I, “erected on a strictly communistic
basis.”

“Of all the wild extravagant theories!” began the Psychologist.

“Yes, so it seemed to me, and so I never talked of it until—”

“Experimental verification!” cried I. “You are going to verify _that_?”

“The experiment!” cried Filby, who was getting brain-weary.

“Let’s see your experiment anyhow,” said the Psychologist, “though it’s
all humbug, you know.”

The Time Traveller smiled round at us. Then, still smiling faintly, and
with his hands deep in his trousers pockets, he walked slowly out of
the room, and we heard his slippers shuffling down the long passage to
his laboratory.

The Psychologist looked at us. “I wonder what he’s got?”

“Some sleight-of-hand trick or other,” said the Medical Man, and Filby
tried to tell us about a conjuror he had seen at Burslem, but before he
had finished his preface the Time Traveller came back, and Filby’s
anecdote collapsed.



# Introduction

Markdown and Mdx parsing is supported via `unified`, and other remark and rehype packages. `next-mdx-remote` allows us to parse `.mdx` and `.md` files in a more flexible manner without touching webpack.

GitHub flavored markdown is used. `mdx-prism` provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.

The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/

# What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`.

# Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

## Headers

```
# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag
```

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

## Emphasis

```
_This text will be italic_

**This text will be bold**

_You **can** combine them_
```

_This text will be italic_

**This text will be bold**

_You **can** combine them_

## Lists

### Unordered

```
- Item 1
- Item 2
  - Item 2a
  - Item 2b
```

- Item 1
- Item 2
  - Item 2a
  - Item 2b

### Ordered

```
1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b
```

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

## Images

```
![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Format: ![Alt Text](url)
```

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

## Links

```
http://github.com - automatic!
[GitHub](http://github.com)
```

http://github.com - automatic!
[GitHub](http://github.com)

## Blockquotes

```
As Kanye West said:

> We're living the future so
> the present is our past.
```

As Kanye West said:

> We're living the future so
> the present is our past.

## Inline code

```
I think you should use an
`<addr>` element here instead.
```

I think you should use an
`<addr>` element here instead.

## Syntax highlighting

Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/):

````
```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```
````

And here's how it looks - nicely colored with styled code titles!

```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

## Footnotes

```
Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.
```

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

## Task Lists

```
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
```

- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

## Tables

You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`:

```
| First Header                | Second Header                |
| --------------------------- | ---------------------------- |
| Content from cell 1         | Content from cell 2          |
| Content in the first column | Content in the second column |
```

| First Header                | Second Header                |
| --------------------------- | ---------------------------- |
| Content from cell 1         | Content from cell 2          |
| Content in the first column | Content in the second column |

## Strikethrough

Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~.



# Nested Routes

The blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series. This post is itself an example of a nested route! It's located in the `/data/blog/nested-route` folder.

## How

Simplify create multiple folders inside the main `/data/blog` folder and add your `.md`/`.mdx` files to them. You can even create something like `/data/blog/nested-route/deeply-nested-route/my-post.md`

We use Next.js catch all routes to handle the routing and path creations.

## Use Cases

Here are some reasons to use nested routes

- More logical content organisation (blogs will still be displayed based on the created date)
- Multi-part posts
- Different sub-routes for each author
- Internationalization (though it would be recommended to use [Next.js built-in i8n routing](https://nextjs.org/docs/advanced-features/i18n-routing))

## Note

- The previous/next post links at bottom of the template are currently sorted by date. One could explore modifying the template to refer the reader to the previous/next post in the series, rather than by date.



# Introduction

The tailwind starter blog has out of the box support for [Next.js's built-in image component](https://nextjs.org/docs/api-reference/next/image) and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.

# Usage

To use in a new page route / javascript file, simply import the image component and call it e.g.

```js
import Image from "next/image";

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  );
}

export default Home;
```

For a markdown file, the default image tag can be used and the default `img` tag gets replaced by the `Image` component in the build process.

Assuming we have a file called `ocean.jpg` in `data/img/ocean.jpg`, the following line of code would generate the optimized image.

```
![ocean](/static/images/ocean.jpg)
```

Alternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The `img` tag method parses the dimension automatically.

```js
<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />
```

_Note_: If you try to save the image, it is in webp format, if your browser supports it!

![ocean](/static/images/ocean.jpeg)

Photo by [YUCAR FotoGrafik](https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
on [Unsplash](https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

# Benefits

- Smaller image size with Webp (~30% smaller than jpeg)
- Responsive images - the correct image size is served based on the user's viewport
- Lazy loading - images load as they are scrolled to the viewport
- Avoids [Cumulative Layout Shift](https://web.dev/cls/)
- Optimization on demand instead of build-time - no increase in build time!

# Limitations

- Due to the reliance on `next/image`, unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN.

  If you do not want to be tied to Vercel, you can remove `imgToJsx` in `remarkPlugins` in `lib/mdx.js`. This would avoid substituting the default `img` tag.

  Alternatively, one could wait for image optimization at build time to be supported. A different library, [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) does that, although it requires transforming the images through webpack which is not done here.

- Images from external links are not passed through `next/image`
- All images have to be stored in the `public` folder e.g `/static/images/ocean.jpeg`



A sample post with markdown.

## Inline Highlighting

Sample of inline highlighting `sum = parseInt(num1) + parseInt(num2)`

## Code Blocks

Some Javascript code

```javascript
var num1, num2, sum;
num1 = prompt("Enter first number");
num2 = prompt("Enter second number");
sum = parseInt(num1) + parseInt(num2); // "+" means "add"
alert("Sum = " + sum); // "+" means combine into a string
```

Some Python code 🐍

```python
def fib():
    a, b = 0, 1
    while True:            # First iteration:
        yield a            # yield 0 to start with and then
        a, b = b, a + b    # a will now be 1, and b will also be 1, (0 + 1)

for index, fibonacci_number in zip(range(10), fib()):
     print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))
```


Subset Softwares

articles with tag

web-development

Here is the title of article eighty eight

Here is the title of article eighty two

Here is the title of article fifty eight

Here is the title of article fifty two

Here is the title of article forty one

Here is the title of article four

Here is the title of article nine

Here is the title of article nineteen

Here is the title of article ninety five

Here is the title of article ninety seven

Knowledge grows only when its shared