Part II - Migrating form WordPress to MarkDown via Obsidian.md

Creating some missing pieces of the Previous Post. There I explore taking a wordpress site and turning it into markdow so I can manage the content via Obsidian.md.

Processing Images

The directory structure I have chosen puts all the relative images in the corresponding directory. There are some limitations to that, for instance, this expects that there is only one post per directory. For my use case this works just fine, but you'll need to think about if it will work for your implementation.

// Start building Urls
entries.forEach((post) => {
    ///... hiding code for length

    // Copy Images
    const postDir = path.dirname(post);
    const images = fg.sync([`${postDir}/*.(jpg|jpeg|gif|png)`], { dot: false, ignore: ['node_modules'] });
    images.forEach((image) => fs.copyFileSync(image, `${urlDirectory}/${path.basename(image)}`) )
})

Also note: we are not optimizing images yet. We'll do this later, I don't wanna spend energy on that right now.

Fallback Post Title

Not all of my posts have a title so I'm going to use the H1 as a title if one isn't specified

const getPost = postPath => {
    const data = fs.readFileSync(postPath, "utf8");
    const content = fm(data);
    const meta = content.attributes;
    const body = marked.parse(content.body);
    // Fallback post title
    if(!meta.title){
        const matches = body.match(/<h1[^>]*>(.*?)<\/h1>/g);
        if(matches[0]){
            meta.title = matches[0].replace(/<\/?[^>]+>/gi, '');;
        }
    }
    const html = render({meta, body});
    return {meta, html};
};

Static Assets

I added a folder where I could upload static assests. This will let me have a place to put theme content like favicons, styles, or js if I so desired.

// Copy all static assets
fs.cp(
    '.build/assets',
    '.build/dist/assets',
    {recursive : true}, (e) => { if(e){ console.log(e) }
});

Site Map

Working through the sitemap will also create an array that I use for the home page. It won't make a great looking homepage but it will be something that i can work with.

const sitemap = [];

// Start building Urls
entries.forEach((post) => {
    ///... hiding code for length
    
    // Populate Sitemap Array
    // pull out the information we need of a site mape
    const stats = fs.statSync(post);
    const mtime = stats.mtime;
    const lastModDate = new Date(mtime)
    sitemap.push({title: meta.title, url, lastmod: lastModDate.toISOString().split('T')[0]});
})

let xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;
sitemap.forEach((item) => xml += `
    <url>
        <loc>https://www.dwayneparton.com/${item.url}/</loc>
        <lastmod>${item.lastmod}</lastmod>
    </url>`)
xml += `
</urlset> 
`
fs.writeFile(
    `${output}/sitemap.xml`,
    xml,
    (e) => { if(e){ console.log(e) }
});

Homepage

The homepage, will be a simple list of posts sorted by Date desc

// Homepage
let homeContent = '<ul>';
sitemap.reverse().forEach((item) => homeContent += `
    <li>
        <a href="${item.url}">${item.title}</a>
    </li>`);
homeContent += `</ul>`;
const homepage = {
    meta: {
        title: 'Dwayne Parton',
        description: 'May we never forget how small we are',
    },
    body: homeContent
}
const html = render(homepage)
fs.writeFile(
    `${output}/index.html`,
    html,
    (e) => { if(e){ console.log(e) }
});

Now there are some peices that we can start building up on :)