Tool and Tutorial: migration wordpress to Markdown for Flowershow

When on wordpress i want to switch to flowershow / nextjs because it is awesome so that i can maintain my site more easily etc

After running output is something like this:

about.md
/assets/
/blog/ # blog posts go here
/blog/2018/04/03/xxx-yyy.md

Acceptance

• Analysis with e.g. libraries used and / or script Going with adjustments to https://github.com/lonekorean/wordpress-export-to-markdown
  • Specification of frontmatter fields and specific items e.g. migration of cover image info etc
• Step by step howto 🚧2022-11-21 see https://hackmd.io/Uq2yzonrQn6z2x8WfqjcIA
• Pages ✅ this is working!
  • script outputs page folder with an images folder within it along with all pages.
• Posts
  • frontmatter needs adjustments Done
• Assets
  • Configurable can be e.g. assets/images/ or my-assets/images/ the name of the assets folder is configurable
• Categories added in frontmatter incase we need it

Tasks

Tutorial

• Write out how to do this with a concrete case in mind (e.g. datopian). Bullet points or more that could turn into a tutorial 🚧2022-11-21 https://hackmd.io/Uq2yzonrQn6z2x8WfqjcIA
• Review
• Turn into a tutorial/howto (draft)
• Finalize tutorial 2022/12/01 In review

Tool

• Identify a script to use ✅2022-11-21 https://github.com/lonekorean/wordpress-export-to-markdown.
  • Fork repo to flowershow (in case we need to make mods) 2022-11-21 https://github.com/flowershow/wordpress-export-to-markdown-plus
• Try it out and make notes on issues
• Create a basic test (e.g. for datopian) - for some parts e.g. frontmatter probably run against “library” part of script
  • Where should posts be located
  • what frontmatter should we have
• Get test passing with e.g. datopian xml export
  • Check flowershow runs with that folder
• Rinse and repeat

Bonus

• Add some tests with an example xml export to exporter script (and submit a PR!)

Notes

• what about links to images
• which frontmatter do we need
• any other mistakes in the pages created?
• Do we want the user to do npx flowershow --convert-wordpress ? ❌2022-11-21. No assume this is a standalone script for now so we don’t “pollute” flowershow cli with misc stuff

Blog setup in flowershow

Current fields:

• title
• image
• description
• created (date) ?
• layout
• authors (list type ?)
• isDraft (Boolean)

Question

Change authors field type from https://www.contentlayer.dev/docs/reference/source-files/field-types#list

---
authors:
  - philippe
  - ...
---

to

---
authors: ['Philippe', '...']
---

Needed fields

• …

Other changes

Current script output:

Changes in script

• Either add coverImage field in blog definition type or modify script to change coverImage to image
• categories and tags list has quotes. modify script to change this without quotes ? (follow consistent frontmatter syntax)

• When converting from wordpress, heading links are added in markdown content as [#](...link to heading). convert to only headings, because we have them added by default in flowershow using rehypeAutolinkHeadings.

Assets

Current folder output

Modify script to below changes:

• prepend “assets/” to all image links in markdown
• put all images in one assets folder
• change folder name post to blog
• move everything from page to ./

[khalilcodes]

@PhilippeduPreez @olayway @rufuspollock One issue with images I have faced during migration is with the paths to any image files.

In Obsidan, we would write the path to the images like so - ![](assets/images/example.png). This then shows up the image but fails to load on the web since the path resolves as relative. for eg. <img src="https://next.lifeitself.org/<sub-dir>/assets/images/example.png" />

For it to load on the web, we would need to add a leading slash - ![](/assets/images/example.png), but then this fails to load in Obsidian.

To fix this issue we can modify the img tag in MDX.js to add a leading slash for local images (if they don’t already have one) like below:

// in MDX.js

const components = {
  img: ({ src, ...rest }) => {
    // check if the image path is external or already has a leading slash
    const imageSrc = src.startsWith("http") || src.startsWith("/") ? src : `/${src}`
    return <img src={imageSrc} {...rest} />
  }
  ...
}

I believe we should backport this which will then allow users consistency as to being able to view the images in Obsidian as well as on the website.

Note: that wiki-links-plus already prepends a slash and that’s why we probably never noticed this. This issue is more likely to happen when either converting from wordpress or for users who use the markdown image syntax. IMO consistency across platforms remain.

Let me know your thoughts 😃

[PhilippeduPreez]

@khalilcodes The date frontmatter ordering works, so we don’t need to make any changes to the type