Blog Schema in MongoDB

I am creating a blog in react using node as backend. the problem is that I cannot figure out how to store each post on Mongo.

title: String
article: String

this works but i want to style the article in diferent ways, have sub-headers etc.

I thought about adding html tags to the article but I cant figure out how to parse the string to render in react.

any ideas on how I should do that?

I don’t think I’d want HTML tags in the article.

So, you want multiple subheaders in the article? What if article is an array of objects. Each object is a “section” with fields like subheading and text. You could even have a field for image to go along with that section. With that, React could render each section object.

I’ve been thinking about doing something similar, so this interests me.

It would work if I created an array of paragraphs and an array of subheading? the problem is that each article would change the number of subheaders and paragraphs, wouldn’t that be a problem to mongo or react?

This may be a long post, so apologies in advance.

I develop/maintain the website for a news website organization. My stack is .NET, C#, MSSQL server. So I can’t specifically answer your React/Node question, but I’ll give you the bird’s eyeview at 30,000ft.

Each news article (in your case, a blog article) uses a main template. The template basically wraps the article for presentation to the user.

The main template will be further subdivided into different include files like the header, footer, menu, scripts, css, etc…) In my case, if it’s a local story, it will use a different template, vs a spanish edition, or international story which will have a different template.

Some include files can be shared among the different templates… things like the main scripts, css, google analytics code… and in some specific edition templates may have their own additional custom css, script files, etc.

Now about the Article…
(goes without saying you’ll have the typical fields for an article, like title, authorID, subtitle, footer, teaser text, summary, etc. and the main article body itself)

I allow the news writers to embed certain simple html tags in the article body… simple ones like bold, italics.

But a news article can be a complex page… each news article can be presented in a different way from other news articles.

No (2) news articles look the same. You can have embedded photos within the articles (can be positioned center, left, right… with or without photo caption, credits, etc), a video embed (inhouse, youtube, vimeo, etc), a photo slideshow, a photo gallery, pull quotes (can be left or right positioned or centered), a list of related news articles, embedded url links, etc.

And there’s no telling in advance that an article can only have (2) subheadings, or use only 3 pictures, etc… You don’t want to impose those kind of limits. You, the developer, want to give the non-technical news writer (or the blog writer) freedom on how to present and format their written piece… and yet, still remain within the bounds that you as the web developer has set.

I do this by creating “custom tags” for the news writers/reporters to embed in their article. I don’t expect the writers to know HTML code, and they shouldn’t. That’s not their job. Their article with the “custom tags” are then saved to the database.

So what’s a custom tag? It’s basically a simple text placeholder, that is later replaced by the actual html code. You create these tags, and you tell the writers these are the list of custom tags you can use.

It can take on various formats, example:
[PHOTO=111111]
[PHOTO=22222, 50%, left]
[PHOTO=3333, 30%, right]
[YOUTUBE=abcdefghkl]
[VIMEO=222222]
[SUBHEADING=Lorem Ipsum Blah Blah Blah]
[RELATED=111, 222, 333, 444]
[PULLQUOTE=“He said, she said blah blah”, left]
[SLIDESHOW=111, 222, 333, 444]

So you as the programmer look for these “custom tags” in the article and replace each occurrence with its equivalent HTML code.

If it’s a simple [SUBHEADING=Lorem Ipsum Blah Blah Blah] tag, it can be replaced with

<h2>Lorem Ipsum Blah Blah Blah</h2>    // or whatever hx you want to use
// or maybe even something more complex
<div class="subheading">
    Lorem Ipsum Blah Blah Blah
</div>

or a [PHOTO] tag with a Photo ID# will be replaced with the actual file.

[PHOTO=11111]    // 1111 is the photo id# record number in  the database
// you pull up the relevant photo id#, containing all the relevant information from the database
// above tag becomes

<div class="photo other-classes-here">
   <a href="/story/2222/story-title-goes-here>
   <img src="/aws/images/b7c065ea-3450-11e8-b467-0ed5f89f718b.png"  // pulled from database
       class="some photo class"></a>
</div>

So a non-technical writer/news reporter can simply write their news article like this, and this is what’s actually saved to the database.

[PHOTO=11111] 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus 
lobortis ex in placerat. Maecenas vulputate sagittis justo vel auctor. 
Vivamus vestibulum congue hendrerit. Sed vestibulum velit ante, 
quis convallis ante egestas at. Curabitur nec justo ac ipsum elementum
tincidunt at et nunc. 

[SUBHEADING=Lorem Ipsum Blah Blah Blah]
Sed libero dolor, mollis eget lectus ut, finibus sodales est. Nunc 
nec consequat quam. Sed eu nisi at sapien pellentesque aliquet.

When a reader pulls up this webpage, the above article then gets processed before being wrapped in a template, and sent to the user’s web browser as follows:

<div class="photo other-classes-here">
   <a href="/story/2222/story-title-goes-here><img src="/aws/images/b7c065ea-3450-11e8-b467-0ed5f89f718b.png" class="some photo class"></a>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus 
lobortis ex in placerat. Maecenas vulputate sagittis justo vel auctor. 
Vivamus vestibulum congue hendrerit. Sed vestibulum velit ante, 
quis convallis ante egestas at. Curabitur nec justo ac ipsum elementum 
tincidunt at et nunc. 

<div class="subheading">
    Lorem Ipsum Blah Blah Blah
</div>
Sed libero dolor, mollis eget lectus ut, finibus sodales est. Nunc 
nec consequat quam. Sed eu nisi at sapien pellentesque aliquet.

There are other things to do… i.e. strip any script tags in the article, you don’t want unauthorized script running on the page, etc…

Anyways, sorry for the long post. :slight_smile:

2 Likes

I look forward to working through Owel’s post, but this is what I was thinking - creating a data structure like this:

{
  title: "Main title",
  subtitle: "Main subtitle",
  author: "Joe Blow",

  tags: [
    "javascript",
    "bundt cakes",
    "fly-fishing"
  ],
  
  dateCreated: 1522441641153,
  datePosted: 1522441641153,
  dateLastEdit: 1522441641153,
  
  text: [
    {
      subheader: "section 1",
      paragraphs: [
        "paragraph 1, paragraph 1, paragraph 1 ...",
        "paragraph 2, paragraph 2, paragraph 2 ...",
        "paragraph 3, paragraph 3, paragraph 3 ..."
      ],
      image: {
        src: "imageurl",
        height: "100px",
        width: "auto",
        onRight: true
      }
    },
    {
      subheader: "section 2",
      paragraphs: [
        "paragraph 1, paragraph 1, paragraph 1 ...",
        "paragraph 2, paragraph 2, paragraph 2 ...",
        "paragraph 3, paragraph 3, paragraph 3 ..."
      ],
      image: null
    },
    {
      subheader: "section 3",
      paragraphs: [
        "paragraph 1, paragraph 1, paragraph 1 ...",
        "paragraph 2, paragraph 2, paragraph 2 ..."
      ],
      image: {
        src: "imageurl",
        height: "150px",
        width: "auto",
        onRight: false
      }
    }
  ]
}
1 Like

I really liked the idea but it seems a harder to do that using react, I think it would work well with NodeJS and using a redering template like ejs or jade. I will probably test that as well!

I think that this structure would work better for react even though it doesn’t allow article structures to be too different.

Simplicity or flexibility? Take your pick.