Best Markdown CMS 🎉

Best Markdown CMS

After lots of hard work, I proud to announce the launch of Best Markdown CMS! Best Markdown Editor can now act as a content management system for any websites you want to render markdown as HTML to. That's write, bloggers! I'm looking at you! 👀

For just 1 dollar a month, you can subscribe to Best Markdown Editors CMS service. Signing up is super easy! Just hover over your username/profile pic in the top right, click on Settings, and then click the subscribe button. It will take you to a stripe page where you can initiate your subscription.

Once you have completed the payment successfully, you will notice that the ad that was there before was replaced by a new component that has three sections: Files, Published Files, and Folders.

Files are all of your data. Files are always saved as you type and stay up-to-date with every change you make.

Once you've subscribed, you can start publishing files. A published file is a saved version of your file for the public, external display.
So you can create an "About me" markdown file, publish it and then use Best Markdown Editors CMS to get that file and render it in your front end application. You can change the original "About me" file all you want without affecting the published version until you republish the file with changes.

You also gain access to folders. You can store groups of published files in folders. Say you want to put all your blogs in your "Blogs" folders and your projects in your "Projects" folder. Then you can just hit the CMS API for the "Blog" folder and get all your published blog files.

That's all great, but how do I use this CMS API? Best Markdown Editor gives you two options: REST and GraphQL.

For both APIs, you're going to need to pass your token in the headers. After you've subscribed, you will be able to see a "Reveal token" button in your settings tab. Click on that and copy your token and paste that token into your .env files as TOKEN. If you ever feel like your token has been compromised, just go in and click on the "Regenerate token" button after you have revealed the token in your settings tab.

If you would like to test Best Markdown Editors service, use the Test account token: 588c454c-7176-457e-9d42-ad6d0e7ffdc4. That is the token I will be using for all the examples.

REST API

Base URL: https://best-markdown-editor-be.herokuapp.com/api

We can write an axiosWithAuth function that we can import into any file and give it the rest of the route. All the requests available in the CMS API are GET request. You can only modify your markdown content and folders from the Best Markdown Editor web app.

import axios from "axios";

export const axiosWithAuth = () => {
  return axios.create({
    baseURL: "https://best-markdown-editor-be.herokuapp.com/api",
    headers: {
      "Content-Type": "application/json",
      token: process.env.TOKEN
    }
  });
};

There are 6 routes you have access too:

• axiosWithAuth("/published-files") <- Gets all the files you have published.
• axiosWithAuth("/published-file-by-id/:id") <- Gets published file by it's id.
• axiosWithAuth("/published-file-by-slug/:slug") <- Gets a published file by it's slug.
• axiosWithAuth("/folders") <- Gets all folder's.
• axiosWithAuth("/published-files/folder-id/:folderId") <- Gets all published files in a folder by the folder's id.
• axiosWithAuth("/published-files/folder-name/:name") <- Gets all published files in a folder by the folder's name.

You can check out the Postman docs here, as well.

GraphQL API

Base URL: https://best-markdown-editor-be.herokuapp.com/cms

Now if we want to hook up our token in Apollo Client, we can set it up like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {
  ApolloProvider,
  ApolloClient,
  ApolloLink,
  InMemoryCache,
  HttpLink,
} from "@apollo/client";

const httpLink = new HttpLink({
  uri: "https://best-markdown-editor-be.herokuapp.com/api",
});

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      token: process.env.REACT_APP_TOKEN,
    },
  });
  return forward(operation);
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

You can visit Best Markdown's CMS Playground here. Don't forget to add the token above to the headers so you can test the queries out. It's all documented in the playground. If you have any questions, feel free to email me at: mcbride967@gmail.com. I have some tutorials on how to set CMS up with Next.js and React for both REST and GraphQL endpoints. So stay tuned for that!

Have fun, and thanks for reading!