From 39db2274fe5716bc98e91e9607094fab29ff8f2d Mon Sep 17 00:00:00 2001 From: olayway Date: Thu, 11 Aug 2022 22:45:39 +0200 Subject: [PATCH 1/9] [docs/mdx][m]: extend MDX doc page Add: - basic info about MDX - how to utilize `import` and `export` statements supported by MDX to import and define custom components and data - note about JS expressions --- site/content/docs/custom-components.md | 68 ------ site/content/docs/mdx.md | 199 ++++++++++++++++++ site/content/test/components-import.mdx | 8 +- templates/default/components/Demo.js | 9 - templates/default/components/MDX.js | 2 - templates/default/components/MyComponent.jsx | 13 ++ templates/default/components/TestChild.jsx | 3 - .../default/components/TestComponent.jsx | 22 -- templates/default/data/exampleData.json | 4 + 9 files changed, 220 insertions(+), 108 deletions(-) delete mode 100644 site/content/docs/custom-components.md create mode 100644 site/content/docs/mdx.md delete mode 100644 templates/default/components/Demo.js create mode 100644 templates/default/components/MyComponent.jsx delete mode 100644 templates/default/components/TestChild.jsx delete mode 100644 templates/default/components/TestComponent.jsx create mode 100644 templates/default/data/exampleData.json diff --git a/site/content/docs/custom-components.md b/site/content/docs/custom-components.md deleted file mode 100644 index 2d072f482..000000000 --- a/site/content/docs/custom-components.md +++ /dev/null @@ -1,68 +0,0 @@ -# Adding custom components to your markdown - -## Steps - -1. Create a component in `/components` folder: -```js -// Demo.js -export default function DemoComponent() { - return ( -
-

I'm a custom component!

-
- ) -} -``` - -2. Import it in `components/MDX.js` file and add it to `components` object. -```javascript -// MDX.js -import DemoComponent from './DemoComponent.js' - -const components = { - ... - DemoComponent, - ... -} -``` - -3. Use directly in your markdown file. -```md -# Here is an example of a custom component - - -``` - -## Passing data to your custom components - -1. Add the data in `pages/[[slug]].js` -```javascript -// [[slug.js]] -const testData = [ - { title: "First", value: 1 }, - { title: "Second", value: 2 }, - { title: "Third", value: 3 }, -] - -export default function Page({ body, ...rest }) { - const Component = useMDXComponent(body.code, { testData }); - // ... -} -``` - -2. Use as props value in markdown -```javascript - -``` - -## Example -Note, that the code we've used for the above examples was simplified, so the component below will be slightly different. - -```md - -``` - -This will render as: - - - diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md new file mode 100644 index 000000000..5afd2697a --- /dev/null +++ b/site/content/docs/mdx.md @@ -0,0 +1,199 @@ +# MDX + +All of your markdown files are parsed as MDX files by Flowershow. This means you not only can write your content using Markdown syntax, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! + +## What is MDX? + +From the official [MDX docs](https://mdxjs.com/docs/what-is-mdx/): + +> MDX can be explained as a format that combines markdown with JSX. + +It looks like this: +```md +# Hello, world! + +
+ > Some notable things in a block quote! +
+``` + +In the above example, the heading and the block quote are written in markdown. However, the HTML-like looking `
` tag is not HTML. It's **JSX** - a React syntax extension to JavaScript that looks like HTML. + +
+❕Note, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className`, since Flowershow internally uses React. +
+ +## MDX syntax + +The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more. + +
+❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow parses all Markdown files as MDX files. Don't worry, this doesn't affect the rendering of your pages in anyway, since MDX supports Markdown and HTML will be converted to equivalent JSX component. So, even though you may have only written your content with Markdown and maybe some custom HTML in it - e.g. using Obsidian - now HTML parts will be treated as JSX. To learn more about how to take advantage of it, read the sections below. +
+ +### Markdown + +MDX supports CommonMark syntax by default. Check our [syntax] guide to see which other Markdown syntax elements are supported by Flowershow. + +### JSX + +JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your markdown, and/or you use the same HTML code and copy it again and again to different markdown pages. You soon may find it difficult to tell what's this part of HTML container is supposed to do. And what was supposed to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these repeated HTML parts 🀯. + +Fortunatelly, thanks to JSX you can extract common HTML parts and enclose it in reusable components to separate content writing from its structuring and styling 😌. + +### ESM + +MDX support's ESM (ECMAScript Modules) `import` and `export` statements, which you can use to import custom React component or data directly into your MDX files, and define them locally. + +#### Importing components + +To see this in action, let's create a React component in the `/components` folder: + +```js +// MyComponent.jsx +export const MyComponent = ({ list }) => { + return ( +
+

I'm a custom react component imported into this page!

+
+

And here is a list of some things passed to me through props:

+
    + { list.map((x, i) =>
  • {x}
    • ) } +
+
+
+ ) +} +``` + +
+❕ Note, that you should use a `.jsx` extension for any components you want to import into markdown files. +
+ +Now, let's import `MyComponent` into this page's markdown. + +```md +import { MyComponent } from '../components/MyComponent.jsx' + + + +Hooray! 🎊 +``` + +The above MDX code renders as: + +import { MyComponent } from '../components/MyComponent.jsx' + + + +Hooray! 🎊 + +#### Importing data + +Another powerful thing you can to with `import` statements is loading data from external files. + +Let's create another locally defined componet and pass data loaded from a JSON file as its prop. + +import data from '../data/exampleData.json' + +export const PrimaryColors = ({ colors }) => { + return ( +
+

The three primary colors are:

+
    + { colors.map((c) =>
  • ) } +
+
+ ) +} + +The above is just a simple example, but imagine creating a custom `Chart` component for which you could import an external dataset and use it to plot data for your research notes πŸ”₯! + +#### Defining components locally + + +Example: + +```md +##### My local component + +Instead of importing from file, let's define MyComponent from the example above locally. + +export const MyComponent = ({ myList }) => { + return ( +
+

I'm a custom component!

+
    + { myList.map((x) =>
  • {x}
    • ) } +
+
+ ) +} + + +``` + + +Renders as: + +##### My local component + +Instead of importing from file, let's define MyComponent from the example above locally. + + +### Defining variables +ESM `export` statement can also be used to locally define variables in your MDX files. + +Let's take `MyComponent` from the examples above and define a list that we'll pass as it's `myList` prop value: + +```md +import +``` + +## Expressions +MDX also allows you to evaluate JavaScript expressions inside curly braces: + +Example: +```md +It's { (new Date()).getDate() } day of month. +``` + +Renders as: + +Today's day of month: { (new Date()).getDate() }. + +You can even run whole programs by enclosing them in JavaScript's [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) (Immediately Invoked Function Expression): + +```md +{(function () { + + if (Math.random() > 0.5) { + return Grater than 0.5 + } + + return Less or equal than 0.5 +})()} +``` + +Renders as: + +{(function () { + + if (Math.random() > 0.5) { + return Grater than 0.5 + } + + return Less or equal than 0.5 +})()} + + +You can also use comments in expressions with JavaScript's multiline comment syntax, like so: + +```md +{/* A comment! */} +``` + + + + + diff --git a/site/content/test/components-import.mdx b/site/content/test/components-import.mdx index bffd5edce..faffbe858 100644 --- a/site/content/test/components-import.mdx +++ b/site/content/test/components-import.mdx @@ -6,16 +6,16 @@ title: Testing component import Example: ```md -import { TestComponent } from "../components/TestComponent.jsx" +import { MyComponent } from "../components/MyComponent.jsx" - + ``` Renders as: -import { TestComponent } from "../components/TestComponent.jsx" +import { MyComponent } from "../components/MyComponent.jsx" - + ### What doesn't work: diff --git a/templates/default/components/Demo.js b/templates/default/components/Demo.js deleted file mode 100644 index 5372a7dd4..000000000 --- a/templates/default/components/Demo.js +++ /dev/null @@ -1,9 +0,0 @@ -export default function DemoComponent(props) { - return ( -
-

I'm a demo component

-

Below data is coming from my "data" prop

- 
{JSON.stringify(props.data, null, 2)}
-
- ) -} diff --git a/templates/default/components/MDX.js b/templates/default/components/MDX.js index 2a6d51a7a..4c945dd79 100644 --- a/templates/default/components/MDX.js +++ b/templates/default/components/MDX.js @@ -1,10 +1,8 @@ import Head from 'next/head' -import DemoComponent from './Demo' import { Pre } from './Pre' const components = { Head, - DemoComponent, pre: Pre, wrapper: ({ layout, ...rest }) => { const Layout = require(`../layouts/${layout}`).default diff --git a/templates/default/components/MyComponent.jsx b/templates/default/components/MyComponent.jsx new file mode 100644 index 000000000..9edbf518f --- /dev/null +++ b/templates/default/components/MyComponent.jsx @@ -0,0 +1,13 @@ +export const MyComponent = ({ list }) => { + return ( +
+

I'm a custom react component imported into this page!

+
+

And here is a list of some things passed to me through props:

+
    + { list.map((x, i) =>
  • {x}
    • ) } +
+
+
+ ) +} diff --git a/templates/default/components/TestChild.jsx b/templates/default/components/TestChild.jsx deleted file mode 100644 index 05b04bfab..000000000 --- a/templates/default/components/TestChild.jsx +++ /dev/null @@ -1,3 +0,0 @@ -export const TestChild = () => { - return "This is a component that returns only a string" -} diff --git a/templates/default/components/TestComponent.jsx b/templates/default/components/TestComponent.jsx deleted file mode 100644 index 934d6567f..000000000 --- a/templates/default/components/TestComponent.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import { TestChild } from './TestChild.jsx' - -export const TestComponent = ({ simpleList }) => { - return ( -
-

I'm a custom react component imported in this page

-
-

Here is my child component:

-
- -
-
-
-

And here is data passed to me through props:

-
-
    - { simpleList.map((x, i) =>
  • {x}
    • ) } -
-
-
-
) -} diff --git a/templates/default/data/exampleData.json b/templates/default/data/exampleData.json new file mode 100644 index 000000000..67f0ca4ec --- /dev/null +++ b/templates/default/data/exampleData.json @@ -0,0 +1,4 @@ +{ + "pets": ["badger", "lizard", "parrot"], + "colors": ["magenta", "yellow", "cyan"] +} From d659f5888a9cf3200f86a2a9aaa02a0b5281b2fe Mon Sep 17 00:00:00 2001 From: olayway Date: Thu, 11 Aug 2022 23:57:28 +0200 Subject: [PATCH 2/9] [docs/mdx][s]: add note on importing data --- site/content/docs/mdx.md | 29 ++++++------------------- templates/default/data/exampleData.json | 2 +- 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md index 5afd2697a..c7b741766 100644 --- a/site/content/docs/mdx.md +++ b/site/content/docs/mdx.md @@ -92,25 +92,16 @@ Hooray! 🎊 Another powerful thing you can to with `import` statements is loading data from external files. -Let's create another locally defined componet and pass data loaded from a JSON file as its prop. +Let's render the above componet and pass data loaded from a JSON file as its prop. import data from '../data/exampleData.json' -export const PrimaryColors = ({ colors }) => { - return ( -
-

The three primary colors are:

-
    - { colors.map((c) =>
  • ) } -
-
- ) -} + The above is just a simple example, but imagine creating a custom `Chart` component for which you could import an external dataset and use it to plot data for your research notes πŸ”₯! #### Defining components locally - +If the component you're creating will be mostly Example: @@ -166,24 +157,18 @@ You can even run whole programs by enclosing them in JavaScript's [IIFE](https:/ ```md {(function () { + const myLuckyNumber = 5; - if (Math.random() > 0.5) { - return Grater than 0.5 - } - - return Less or equal than 0.5 + return My lucky number is {myLuckyNumber} })()} ``` Renders as: {(function () { + const myLuckyNumber = 5; - if (Math.random() > 0.5) { - return Grater than 0.5 - } - - return Less or equal than 0.5 + return My lucky number is {myLuckyNumber} })()} diff --git a/templates/default/data/exampleData.json b/templates/default/data/exampleData.json index 67f0ca4ec..22ff669d7 100644 --- a/templates/default/data/exampleData.json +++ b/templates/default/data/exampleData.json @@ -1,4 +1,4 @@ { "pets": ["badger", "lizard", "parrot"], - "colors": ["magenta", "yellow", "cyan"] + "colors": ["fuchsia", "yellow", "blue"] } From 7d13cb48323472dac0e665f88163a1c223073f11 Mon Sep 17 00:00:00 2001 From: olayway Date: Fri, 12 Aug 2022 13:25:37 +0200 Subject: [PATCH 3/9] [docs/mdx][s]: improve content re MDX and its flow --- site/content/docs/mdx.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md index c7b741766..ab6101b1f 100644 --- a/site/content/docs/mdx.md +++ b/site/content/docs/mdx.md @@ -1,6 +1,8 @@ # MDX -All of your markdown files are parsed as MDX files by Flowershow. This means you not only can write your content using Markdown syntax, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! +Flowershow parses all of your Markdown files as MDX. This means you not only can write your content with your old friend Markdown, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! + +Let's see what exactly is MDX and what's so cool about it! ## What is MDX? @@ -12,15 +14,21 @@ It looks like this: ```md # Hello, world! -
+
> Some notable things in a block quote!
``` -In the above example, the heading and the block quote are written in markdown. However, the HTML-like looking `
` tag is not HTML. It's **JSX** - a React syntax extension to JavaScript that looks like HTML. +You may be thinking: "Hold on, but isn't it just some Markdown with an HTML block wrapping around some more Markdown... which is a standard CommonMark syntax?" + +The answer to this question is - yes... and no Β―\_(ツ)_/Β―. + +**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - don't worry, it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and even some Obsidian-specifix syntax elements (see our guide on [syntax|Supported syntax] to learn more). + +**No**, because Flowershow will parse all your content files as if it was MDX (no matter if you use `.md` or `.mdx` extension). This means that in our example above, the heading and the block quote will be treated as a good old Markdown, however the HTML-like looking `
` tag will not be treated as a raw HTML. For compilers used by Flowershow under the hood now it's **JSX** - a React syntax extension to JavaScript that looks like HTML, which will allow you to create and use components in your Markdown files.
-❕Note, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className`, since Flowershow internally uses React. +❕You may have notice, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX elements, which will then be used by React runtime to render your pages.
## MDX syntax @@ -28,7 +36,7 @@ In the above example, the heading and the block quote are written in markdown. H The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more.
-❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow parses all Markdown files as MDX files. Don't worry, this doesn't affect the rendering of your pages in anyway, since MDX supports Markdown and HTML will be converted to equivalent JSX component. So, even though you may have only written your content with Markdown and maybe some custom HTML in it - e.g. using Obsidian - now HTML parts will be treated as JSX. To learn more about how to take advantage of it, read the sections below. +❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective you may have only used Markdown to write your content so far, but Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world it's understood as JSX.
### Markdown From 74570ab9510f8f1477486906cb140bd90ce81f31 Mon Sep 17 00:00:00 2001 From: olayway Date: Fri, 12 Aug 2022 16:01:02 +0200 Subject: [PATCH 4/9] docs on mdx almost finished --- site/content/docs/mdx.md | 173 +++++++++++++++---- templates/default/components/TempCallout.jsx | 7 + 2 files changed, 145 insertions(+), 35 deletions(-) create mode 100644 templates/default/components/TempCallout.jsx diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md index ab6101b1f..870d36720 100644 --- a/site/content/docs/mdx.md +++ b/site/content/docs/mdx.md @@ -1,9 +1,15 @@ +import { Callout } from '../components/TempCallout.jsx' + # MDX Flowershow parses all of your Markdown files as MDX. This means you not only can write your content with your old friend Markdown, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! Let's see what exactly is MDX and what's so cool about it! + + A basic familiarity with JSX (React components) and JavaScript might help you understand this chapter, but you can also learn by example and start by tweaking some of our code. Opening this page in your text editor may also be helpful. + + ## What is MDX? From the official [MDX docs](https://mdxjs.com/docs/what-is-mdx/): @@ -19,39 +25,79 @@ It looks like this:
``` -You may be thinking: "Hold on, but isn't it just some Markdown with an HTML block wrapping around some more Markdown... which is a standard CommonMark syntax?" +You may be thinking: *"Hold on, but isn't it just some Markdown with an HTML block wrapping around some more Markdown... which is a standard CommonMark syntax?"* The answer to this question is - yes... and no Β―\_(ツ)_/Β―. -**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - don't worry, it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and even some Obsidian-specifix syntax elements (see our guide on [syntax|Supported syntax] to learn more). +**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - don't worry, it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and even some Obsidian-specifix syntax elements. (See our [[syntax|Syntax]] guide to learn more.) **No**, because Flowershow will parse all your content files as if it was MDX (no matter if you use `.md` or `.mdx` extension). This means that in our example above, the heading and the block quote will be treated as a good old Markdown, however the HTML-like looking `
` tag will not be treated as a raw HTML. For compilers used by Flowershow under the hood now it's **JSX** - a React syntax extension to JavaScript that looks like HTML, which will allow you to create and use components in your Markdown files. -
-❕You may have notice, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX elements, which will then be used by React runtime to render your pages. -
+ + ❕You may have noticed, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX elements, which will then be used by React runtime to render your pages. + + +## How it works? + +In short, packages used by Flowershow under the hood will compile MDX to JavaScript, which will then be used by React. -## MDX syntax +## MDX supported syntax The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more. -
-❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective you may have only used Markdown to write your content so far, but Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world it's understood as JSX. -
+ + ❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective you may have only used Markdown syntax to write your content, but Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world it's JSX. + ### Markdown -MDX supports CommonMark syntax by default. Check our [syntax] guide to see which other Markdown syntax elements are supported by Flowershow. +Like we've mentioned, MDX supports CommonMark syntax by default. On top of that Flowershow provides support for GFM and some Obsidian-specifix extensions. Check our [syntax|Syntax guide] to learn which other Markdown syntax elements are supported by Flowershow. + +### JSX and custom components -### JSX +JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your markdown, and/or you use the same HTML code parts and copy it again and again to different markdown pages. You soon may find it difficult to tell what's this part of HTML container is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used in many different pages 🀯. -JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your markdown, and/or you use the same HTML code and copy it again and again to different markdown pages. You soon may find it difficult to tell what's this part of HTML container is supposed to do. And what was supposed to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these repeated HTML parts 🀯. +Fortunatelly, thanks to JSX you can extract common HTML parts and enclose them in components, that you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling 😌. -Fortunatelly, thanks to JSX you can extract common HTML parts and enclose it in reusable components to separate content writing from its structuring and styling 😌. +For example, by creating a component out of a part of HTML code you repeat all over again, you could turn this... + +```md +# Some page heading + +Some content here... + + + + + +Some more content here... +``` + +...into to this: + + +```md +# Some page heading -### ESM +Some content here... -MDX support's ESM (ECMAScript Modules) `import` and `export` statements, which you can use to import custom React component or data directly into your MDX files, and define them locally. + + +Some more content here... +``` + +Looks much better! And it's much easier to update, if you're using this button on many different pages. + +(We'll learn more about how to create, import and use your custom components in the sections below.) + +### ESM `import` and `export` statements + +This is where a lot of MDX power comes from: support for ESM (ECMAScript Modules) `import` and `export` statements, which you can use to import custom JSX (React) components or even define them locally, as well as import and locally define data (variables), that can then be passed to your JSX components. #### Importing components @@ -75,7 +121,7 @@ export const MyComponent = ({ list }) => { ```
-❕ Note, that you should use a `.jsx` extension for any components you want to import into markdown files. +❕ Note, that you should use a `.jsx` extension for any components you want to import into markdown files to make it work.
Now, let's import `MyComponent` into this page's markdown. @@ -90,76 +136,133 @@ Hooray! 🎊 The above MDX code renders as: +--- + import { MyComponent } from '../components/MyComponent.jsx' Hooray! 🎊 +--- + #### Importing data -Another powerful thing you can to with `import` statements is loading data from external files. +Another powerful thing you can to thanks to `import` statements is loading data from external files. + +Let's try to load a list of colors from a JSON file and pass it as a `list` prop value to our component `MyComponent`: + +```md +import data from '../data/exampleData.json' + + +``` + +This will render as: -Let's render the above componet and pass data loaded from a JSON file as its prop. +--- import data from '../data/exampleData.json' +--- + The above is just a simple example, but imagine creating a custom `Chart` component for which you could import an external dataset and use it to plot data for your research notes πŸ”₯! #### Defining components locally -If the component you're creating will be mostly +If the component you're creating will be used only on one of your pages, but either it will be repeated multiple times or it's a complex one and you want to keep it at the very top/bottom of your page so that it doesn't clutter your content, you could define a component locally. To do this you can use ESM `export` statement. -Example: +For example, instead of creating the above component `MyComponent` in a separate `.jsx` file, let's the following: ```md -##### My local component +export const MyComponent2 = ({ list }) => { + return ( +
+

I'm a custom component!

+
    + { list.map((x) =>
  • {x}
    • ) } +
+
+ ) +} + + +Some content... -Instead of importing from file, let's define MyComponent from the example above locally. + -export const MyComponent = ({ myList }) => { +Some more content... +``` + +This will render as: + +--- +export const MyComponent2 = ({ list }) => { return (

I'm a custom component!

    - { myList.map((x) =>
  • {x}
    • ) } + { list.map((x) =>
  • {x}
    • ) }
) } - -``` +Some content... -Renders as: + -##### My local component +Some more content... -Instead of importing from file, let's define MyComponent from the example above locally. +--- +#### Defining variables -### Defining variables -ESM `export` statement can also be used to locally define variables in your MDX files. +ESM `export` statement can also be used to locally define variables in your MDX files. -Let's take `MyComponent` from the examples above and define a list that we'll pass as it's `myList` prop value: +Let's take `MyComponent` from the examples above and define a list that we'll pass as it's `list` prop value: ```md -import +export const myFavFlowersList = ['tulip', 'water lily', 'iris'] + + ``` +Which renders as: + +--- + +export const myFavFlowersList = ['tulip', 'water lily', 'iris'] + + + +--- + ## Expressions MDX also allows you to evaluate JavaScript expressions inside curly braces: Example: ```md +Some content... + It's { (new Date()).getDate() } day of month. -``` +Some more content... +``` Renders as: -Today's day of month: { (new Date()).getDate() }. +--- + + +Some content... + +It's { (new Date()).getDate() } day of month. + +Some more content... + +--- You can even run whole programs by enclosing them in JavaScript's [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) (Immediately Invoked Function Expression): diff --git a/templates/default/components/TempCallout.jsx b/templates/default/components/TempCallout.jsx new file mode 100644 index 000000000..4d93e5129 --- /dev/null +++ b/templates/default/components/TempCallout.jsx @@ -0,0 +1,7 @@ +export const Callout = ({ children }) => { + return ( +
+ {children} +
+ ) +} From 32f4375e02caf9988fd777b7ad0b49fe65cfa919 Mon Sep 17 00:00:00 2001 From: olayway Date: Fri, 12 Aug 2022 16:51:34 +0200 Subject: [PATCH 5/9] test page for MDX components --- site/content/components/test.mdx | 1 + site/content/components/test2.mdx | 5 ++ site/content/components/test3.mdx | 1 + site/content/components/test4.mdx | 4 ++ site/content/test/mdx-components.md | 77 +++++++++++++++++++++++++++++ 5 files changed, 88 insertions(+) create mode 100644 site/content/components/test.mdx create mode 100644 site/content/components/test2.mdx create mode 100644 site/content/components/test3.mdx create mode 100644 site/content/components/test4.mdx create mode 100644 site/content/test/mdx-components.md diff --git a/site/content/components/test.mdx b/site/content/components/test.mdx new file mode 100644 index 000000000..a8e79e001 --- /dev/null +++ b/site/content/components/test.mdx @@ -0,0 +1 @@ +*Hi! I'm and MDX component!* diff --git a/site/content/components/test2.mdx b/site/content/components/test2.mdx new file mode 100644 index 000000000..e25cbd5c0 --- /dev/null +++ b/site/content/components/test2.mdx @@ -0,0 +1,5 @@ +Hello {props.name.toUpperCase()} + +*I'm a MDX component!* + +The current year is {props.year} diff --git a/site/content/components/test3.mdx b/site/content/components/test3.mdx new file mode 100644 index 000000000..faeca6807 --- /dev/null +++ b/site/content/components/test3.mdx @@ -0,0 +1 @@ +Hello ** diff --git a/site/content/components/test4.mdx b/site/content/components/test4.mdx new file mode 100644 index 000000000..5408ee7d8 --- /dev/null +++ b/site/content/components/test4.mdx @@ -0,0 +1,4 @@ +import Test1 from '../content/components/test.mdx' + +I'm an MDX component and here is my child component: +** diff --git a/site/content/test/mdx-components.md b/site/content/test/mdx-components.md new file mode 100644 index 000000000..6773b8013 --- /dev/null +++ b/site/content/test/mdx-components.md @@ -0,0 +1,77 @@ +# Testing MDX components (not React/JSX components) + +See [this page](https://mdxjs.com/docs/using-mdx/) for from MDX docs for reference. + +## Importing MDX components into Markdown + +MDX files are compiled to components and can be imported as such! + +### Simple components + +(The main content of `.mdx` is exported as the default export.) + +**Example:** + +```md +import ExampleMDXComponent from "../content/components/test.mdx" + + +``` + +**Renders as:** + +import ExampleMDXComponent from "../content/components/test.mdx" + + + +--- + +### Components with props + +**Example:** + +```md +import ExampleMDXComponent2 from "../content/components/test2.mdx" + + +``` + +**Renders as:** + +import ExampleMDXComponent2 from "../content/components/test2.mdx" + + + +--- + +### Passing components to components + +**Example:** + +```md +import ExampleMDXComponent3 from "../content/components/test3.mdx" + + Pluto}} /> +``` + +**Renders as:** + +import ExampleMDXComponent3 from "../content/components/test3.mdx" + + Pluto}} /> + +### Components with children + +**Example:** + +```md +import ExampleMDXComponent4 from "../content/components/test4.mdx" + + +``` + +**Renders as:** + +import ExampleMDXComponent4 from "../content/components/test4.mdx" + + From 81c7136657dd24c77e2ff1d1ad9ed9e1f2529579 Mon Sep 17 00:00:00 2001 From: olayway Date: Sun, 14 Aug 2022 19:16:37 +0200 Subject: [PATCH 6/9] testing MDX components --- site/content/components/test.mdx | 2 +- site/content/components/test2.mdx | 2 +- site/content/docs/mdx.md | 21 +++++--------- site/content/test/mdx-components.md | 43 +++++++++++++++++++++++++++-- templates/default/components/MDX.js | 1 + 5 files changed, 50 insertions(+), 19 deletions(-) diff --git a/site/content/components/test.mdx b/site/content/components/test.mdx index a8e79e001..5e5fc3e53 100644 --- a/site/content/components/test.mdx +++ b/site/content/components/test.mdx @@ -1 +1 @@ -*Hi! I'm and MDX component!* +*Hi! I'm an MDX component!* diff --git a/site/content/components/test2.mdx b/site/content/components/test2.mdx index e25cbd5c0..564e5df8f 100644 --- a/site/content/components/test2.mdx +++ b/site/content/components/test2.mdx @@ -1,5 +1,5 @@ Hello {props.name.toUpperCase()} -*I'm a MDX component!* +*I'm an MDX component!* The current year is {props.year} diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md index 870d36720..2d5b1a119 100644 --- a/site/content/docs/mdx.md +++ b/site/content/docs/mdx.md @@ -7,7 +7,7 @@ Flowershow parses all of your Markdown files as MDX. This means you not only can Let's see what exactly is MDX and what's so cool about it! - A basic familiarity with JSX (React components) and JavaScript might help you understand this chapter, but you can also learn by example and start by tweaking some of our code. Opening this page in your text editor may also be helpful. + A basic familiarity with JSX (React components) and JavaScript might be helpful to understand this chapter, but you can also learn by example and start by tweaking some of our code. Opening this page in your text editor may also help. ## What is MDX? @@ -29,24 +29,22 @@ You may be thinking: *"Hold on, but isn't it just some Markdown with an HTML blo The answer to this question is - yes... and no Β―\_(ツ)_/Β―. -**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - don't worry, it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and even some Obsidian-specifix syntax elements. (See our [[syntax|Syntax]] guide to learn more.) +**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and some Obsidian-specifix syntax elements. (See our [[syntax|Syntax]] guide to learn more.) -**No**, because Flowershow will parse all your content files as if it was MDX (no matter if you use `.md` or `.mdx` extension). This means that in our example above, the heading and the block quote will be treated as a good old Markdown, however the HTML-like looking `
` tag will not be treated as a raw HTML. For compilers used by Flowershow under the hood now it's **JSX** - a React syntax extension to JavaScript that looks like HTML, which will allow you to create and use components in your Markdown files. +**No**, because Flowershow will parse all your Markdown files as MDX (no matter if you use `.md` or `.mdx` file extension). This means that in the example above, the heading and the block quote will be treated as Markdown, however the HTML-like looking `
` tag will be understood as **JSX** - a React syntax extension to JavaScript that looks like HTML, which allows you to create and use components in your Markdown files. - ❕You may have noticed, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX elements, which will then be used by React runtime to render your pages. + ❕You may have noticed, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX, which will then be used by React's runtime to render your pages. -## How it works? - -In short, packages used by Flowershow under the hood will compile MDX to JavaScript, which will then be used by React. +How does it work? In short, packages used by Flowershow under the hood compile MDX to JavaScript, which is then be used by React to create your website. ## MDX supported syntax The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more. - ❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective you may have only used Markdown syntax to write your content, but Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world it's JSX. + ❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective it may be only Markdown that you're using to write your content. However, Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world is JSX. ### Markdown @@ -55,7 +53,7 @@ Like we've mentioned, MDX supports CommonMark syntax by default. On top of that ### JSX and custom components -JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your markdown, and/or you use the same HTML code parts and copy it again and again to different markdown pages. You soon may find it difficult to tell what's this part of HTML container is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used in many different pages 🀯. +JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your Markdown, and/or you use the same HTML code parts and copy them again and again to different markdown pages. You soon may find it difficult to tell what's a given part of HTML block is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used in many different pages 🀯. Fortunatelly, thanks to JSX you can extract common HTML parts and enclose them in components, that you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling 😌. @@ -288,8 +286,3 @@ You can also use comments in expressions with JavaScript's multiline comment syn ```md {/* A comment! */} ``` - - - - - diff --git a/site/content/test/mdx-components.md b/site/content/test/mdx-components.md index 6773b8013..cb20abc5d 100644 --- a/site/content/test/mdx-components.md +++ b/site/content/test/mdx-components.md @@ -1,17 +1,23 @@ # Testing MDX components (not React/JSX components) -See [this page](https://mdxjs.com/docs/using-mdx/) for from MDX docs for reference. +See [this page](https://mdxjs.com/docs/using-mdx/) from MDX docs for reference. ## Importing MDX components into Markdown MDX files are compiled to components and can be imported as such! +(The main content of `.mdx` is exported as the default export.) ### Simple components -(The main content of `.mdx` is exported as the default export.) - **Example:** +`test.mdx` file: + +```md +*Hi! I'm an MDX component!* +``` +Import in another MDX file: + ```md import ExampleMDXComponent from "../content/components/test.mdx" @@ -30,6 +36,18 @@ import ExampleMDXComponent from "../content/components/test.mdx" **Example:** +`test2.mdx` file: + +```md +Hello {props.name.toUpperCase()} + +*I'm an MDX component!* + +The current year is {props.year} +``` + +Import in another MDX file: + ```md import ExampleMDXComponent2 from "../content/components/test2.mdx" @@ -48,6 +66,14 @@ import ExampleMDXComponent2 from "../content/components/test2.mdx" **Example:** +`test3.mdx` file: + +```md +Hello ** +``` + +Import in another MDX file: + ```md import ExampleMDXComponent3 from "../content/components/test3.mdx" @@ -64,6 +90,17 @@ import ExampleMDXComponent3 from "../content/components/test3.mdx" **Example:** +`test4.mdx` file: + +```md +import Test1 from '../content/components/test.mdx' + +I'm an MDX component and here is my child component: +** +``` + +Import in another MDX file: + ```md import ExampleMDXComponent4 from "../content/components/test4.mdx" diff --git a/templates/default/components/MDX.js b/templates/default/components/MDX.js index 4c945dd79..b913b1df2 100644 --- a/templates/default/components/MDX.js +++ b/templates/default/components/MDX.js @@ -4,6 +4,7 @@ import { Pre } from './Pre' const components = { Head, pre: Pre, + GlobalTest: ({children}) =>

{children}

, wrapper: ({ layout, ...rest }) => { const Layout = require(`../layouts/${layout}`).default return From 6deb9b914becbe87c8da37770e820ca335bfec29 Mon Sep 17 00:00:00 2001 From: olayway Date: Sun, 14 Aug 2022 19:28:28 +0200 Subject: [PATCH 7/9] grammar and spelling --- site/content/docs/mdx.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/site/content/docs/mdx.md b/site/content/docs/mdx.md index 2d5b1a119..2302f2c4c 100644 --- a/site/content/docs/mdx.md +++ b/site/content/docs/mdx.md @@ -2,12 +2,12 @@ import { Callout } from '../components/TempCallout.jsx' # MDX -Flowershow parses all of your Markdown files as MDX. This means you not only can write your content with your old friend Markdown, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! +Flowershow parses all of your Markdown files as MDX. This means you not only can write your content using good old Markdown, but also extend it with JSX, JavaScript expressions, and `import` and `export` statements. It's basically Markdown on steroids πŸ˜€πŸ’ͺ! Let's see what exactly is MDX and what's so cool about it! - A basic familiarity with JSX (React components) and JavaScript might be helpful to understand this chapter, but you can also learn by example and start by tweaking some of our code. Opening this page in your text editor may also help. + A basic familiarity with JSX (React components) and JavaScript might be helpful to understand this chapter, but you can also learn by example and start by tweaking some of our code. Opening this page in your text editor side by side with the rendered version in your browser may also help. ## What is MDX? @@ -29,33 +29,33 @@ You may be thinking: *"Hold on, but isn't it just some Markdown with an HTML blo The answer to this question is - yes... and no Β―\_(ツ)_/Β―. -**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - it will all work! This is because MDX supports CommonMark by default. Additionally Flowershow provides support for GFM (GitHub Flavored Markdown) and some Obsidian-specifix syntax elements. (See our [[syntax|Syntax]] guide to learn more.) +**Yes**, because it really is a CommonMark syntax, which allows you to add HTML parts and even intertwine them with Markdown like in our example. You may have written something similar without even hearing about MDX and if you're starting your new Flowershow project with your existing Markdown content - it will all work! This is because MDX supports CommonMark by default. Additionally, Flowershow provides support for GFM (GitHub Flavored Markdown) and some Obsidian-specific syntax elements. (See our [[syntax|Syntax]] guide to learn more.) -**No**, because Flowershow will parse all your Markdown files as MDX (no matter if you use `.md` or `.mdx` file extension). This means that in the example above, the heading and the block quote will be treated as Markdown, however the HTML-like looking `
` tag will be understood as **JSX** - a React syntax extension to JavaScript that looks like HTML, which allows you to create and use components in your Markdown files. +**No**, because Flowershow will parse all your Markdown files as MDX (no matter if you use `.md` or `.mdx` file extension). This means that in the example above, the heading and the block quote will be treated as Markdown, however, the HTML-like looking `
` tag will be understood as **JSX** - a React syntax extension to JavaScript that looks like HTML, which allows you to create and use components in your Markdown files. ❕You may have noticed, that we haven't used an HTML `class` attribute on the `
` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX, which will then be used by React's runtime to render your pages. -How does it work? In short, packages used by Flowershow under the hood compile MDX to JavaScript, which is then be used by React to create your website. +How does it work? In short, packages used by Flowershow under the hood compile MDX to JavaScript, which is then used by React to create your website. ## MDX supported syntax -The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more. +The following sections are just short summaries of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more. - ❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective it may be only Markdown that you're using to write your content. However, Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world is JSX. + ❕In this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective, it may be only Markdown that you're using to write your content. However, Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world is JSX. ### Markdown -Like we've mentioned, MDX supports CommonMark syntax by default. On top of that Flowershow provides support for GFM and some Obsidian-specifix extensions. Check our [syntax|Syntax guide] to learn which other Markdown syntax elements are supported by Flowershow. +As we've mentioned, MDX supports CommonMark syntax by default. On top of that Flowershow provides support for GFM and some Obsidian-specific extensions. Check our [syntax|Syntax guide] to learn which other Markdown syntax elements are supported by Flowershow. ### JSX and custom components -JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your Markdown, and/or you use the same HTML code parts and copy them again and again to different markdown pages. You soon may find it difficult to tell what's a given part of HTML block is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used in many different pages 🀯. +JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your Markdown, and/or you use the same HTML code parts and copy them again and again to different markdown pages. You soon may find it difficult to tell what a given part of HTML block is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used many different pages 🀯. -Fortunatelly, thanks to JSX you can extract common HTML parts and enclose them in components, that you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling 😌. +Fortunately, thanks to JSX you can extract common HTML parts and enclose them in components, which you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling 😌. For example, by creating a component out of a part of HTML code you repeat all over again, you could turn this... @@ -89,9 +89,9 @@ Some content here... Some more content here... ``` -Looks much better! And it's much easier to update, if you're using this button on many different pages. +Looks much better! And it's much easier to update if you're using this button on many different pages. -(We'll learn more about how to create, import and use your custom components in the sections below.) +(We'll learn more about how to create, import, and use your custom components in the sections below.) ### ESM `import` and `export` statements @@ -146,7 +146,7 @@ Hooray! 🎊 #### Importing data -Another powerful thing you can to thanks to `import` statements is loading data from external files. +Another powerful thing you can do thanks to `import` statements is loading data from external files. Let's try to load a list of colors from a JSON file and pass it as a `list` prop value to our component `MyComponent`: @@ -171,7 +171,7 @@ The above is just a simple example, but imagine creating a custom `Chart` compon #### Defining components locally If the component you're creating will be used only on one of your pages, but either it will be repeated multiple times or it's a complex one and you want to keep it at the very top/bottom of your page so that it doesn't clutter your content, you could define a component locally. To do this you can use ESM `export` statement. -For example, instead of creating the above component `MyComponent` in a separate `.jsx` file, let's the following: +For example, instead of creating the above component `MyComponent` in a separate `.jsx` file, let's do the following: ```md export const MyComponent2 = ({ list }) => { @@ -220,7 +220,7 @@ Some more content... ESM `export` statement can also be used to locally define variables in your MDX files. -Let's take `MyComponent` from the examples above and define a list that we'll pass as it's `list` prop value: +Let's take `MyComponent` from the examples above and define a list that we'll pass as its `list` prop value: ```md export const myFavFlowersList = ['tulip', 'water lily', 'iris'] @@ -228,7 +228,7 @@ export const myFavFlowersList = ['tulip', 'water lily', 'iris'] ``` -Which renders as: +This renders as: --- From e56eaf876c9dcbded403d10534ff9e56d3709a25 Mon Sep 17 00:00:00 2001 From: olayway Date: Sun, 14 Aug 2022 19:54:32 +0200 Subject: [PATCH 8/9] moved mdx components to /components/mdx --- site/content/test/mdx-components.md | 18 +++++++++--------- .../default/components/mdx}/test.mdx | 0 .../default/components/mdx}/test2.mdx | 0 .../default/components/mdx}/test3.mdx | 0 .../default/components/mdx}/test4.mdx | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) rename {site/content/components => templates/default/components/mdx}/test.mdx (100%) rename {site/content/components => templates/default/components/mdx}/test2.mdx (100%) rename {site/content/components => templates/default/components/mdx}/test3.mdx (100%) rename {site/content/components => templates/default/components/mdx}/test4.mdx (56%) diff --git a/site/content/test/mdx-components.md b/site/content/test/mdx-components.md index cb20abc5d..4a46fac54 100644 --- a/site/content/test/mdx-components.md +++ b/site/content/test/mdx-components.md @@ -19,14 +19,14 @@ MDX files are compiled to components and can be imported as such! Import in another MDX file: ```md -import ExampleMDXComponent from "../content/components/test.mdx" +import ExampleMDXComponent from "../components/mdx/test.mdx" ``` **Renders as:** -import ExampleMDXComponent from "../content/components/test.mdx" +import ExampleMDXComponent from "../components/mdx/test.mdx" @@ -49,14 +49,14 @@ The current year is {props.year} Import in another MDX file: ```md -import ExampleMDXComponent2 from "../content/components/test2.mdx" +import ExampleMDXComponent2 from "../components/mdx/test2.mdx" ``` **Renders as:** -import ExampleMDXComponent2 from "../content/components/test2.mdx" +import ExampleMDXComponent2 from "../components/mdx/test2.mdx" @@ -75,14 +75,14 @@ Hello ** Import in another MDX file: ```md -import ExampleMDXComponent3 from "../content/components/test3.mdx" +import ExampleMDXComponent3 from "../components/mdx/test3.mdx" Pluto}} /> ``` **Renders as:** -import ExampleMDXComponent3 from "../content/components/test3.mdx" +import ExampleMDXComponent3 from "../components/mdx/test3.mdx" Pluto}} /> @@ -93,7 +93,7 @@ import ExampleMDXComponent3 from "../content/components/test3.mdx" `test4.mdx` file: ```md -import Test1 from '../content/components/test.mdx' +import Test1 from '../components/mdx/test.mdx' I'm an MDX component and here is my child component: ** @@ -102,13 +102,13 @@ I'm an MDX component and here is my child component: Import in another MDX file: ```md -import ExampleMDXComponent4 from "../content/components/test4.mdx" +import ExampleMDXComponent4 from "../components/mdx/test4.mdx" ``` **Renders as:** -import ExampleMDXComponent4 from "../content/components/test4.mdx" +import ExampleMDXComponent4 from "../components/mdx/test4.mdx" diff --git a/site/content/components/test.mdx b/templates/default/components/mdx/test.mdx similarity index 100% rename from site/content/components/test.mdx rename to templates/default/components/mdx/test.mdx diff --git a/site/content/components/test2.mdx b/templates/default/components/mdx/test2.mdx similarity index 100% rename from site/content/components/test2.mdx rename to templates/default/components/mdx/test2.mdx diff --git a/site/content/components/test3.mdx b/templates/default/components/mdx/test3.mdx similarity index 100% rename from site/content/components/test3.mdx rename to templates/default/components/mdx/test3.mdx diff --git a/site/content/components/test4.mdx b/templates/default/components/mdx/test4.mdx similarity index 56% rename from site/content/components/test4.mdx rename to templates/default/components/mdx/test4.mdx index 5408ee7d8..0b22fb69f 100644 --- a/site/content/components/test4.mdx +++ b/templates/default/components/mdx/test4.mdx @@ -1,4 +1,4 @@ -import Test1 from '../content/components/test.mdx' +import Test1 from '../components/test.mdx' I'm an MDX component and here is my child component: ** From 60e5b97f61ded6c70eaf9fde523c29dccf6d56e6 Mon Sep 17 00:00:00 2001 From: olayway Date: Mon, 15 Aug 2022 19:50:02 +0200 Subject: [PATCH 9/9] import fix --- templates/default/components/mdx/test4.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/default/components/mdx/test4.mdx b/templates/default/components/mdx/test4.mdx index 0b22fb69f..72ac4e807 100644 --- a/templates/default/components/mdx/test4.mdx +++ b/templates/default/components/mdx/test4.mdx @@ -1,4 +1,4 @@ -import Test1 from '../components/test.mdx' +import Test1 from './test.mdx' I'm an MDX component and here is my child component: **