DEV Community

Discussion on: How do you deal with content editing after the site has been shipped?

View post

Replies for: Interesting! Please, tell us more about on how to build a static site with JSON payload content.

Collapse
 
louislow profile image
Louis Low • • Edited

This can be achieved by using VueJS, ReactJS, or using simply Vanilla JS to create web components.

Let say I need a section in a static HTML page to display articles in card design, first I create a new web component (HTML+CSS+JS) and UI styling based on the mockup from Framer.

I iterate the data from the JSON file to the card components without duplicating codes.

Example card component to display articles,

<!-- @file: /src/views/components/card/articles.html -->
<card-articles>
  <!-- looping data from article.json -->
  <y each="{ data in articles }">
    <!-- begin CSS styling -->
    { data.title }
    { data.description }
    { data.tags }
    { data.date }
  </y>

  <script>
    // fetch() data from JSON file
    export default {
      onMounted() {

        const self = this
        self.articles = []

        const url = '/path/to/file/articles.json'

        fetch(url)
          .then(res => {
            res.json()
              .then(data => {
                delete self.error
                self.articles = data
                self.update()
                }
              })
              .catch(error => {
                self.error = error
                self.update()
              })
          })

      }
    }
  </script>
 </card-articles>
Enter fullscreen mode Exit fullscreen mode

An example of payload (data) for the card web component in JSON (example: articles.json).

[
  {
    "id": "",
    "title": "",
    "description": "",
    "tags": "",
    "date": ""
  },
  ...
]
Enter fullscreen mode Exit fullscreen mode

If I need to make the component reusable, I can make changes to the component with added API callbacks to use it on any pages I want.

An example to convert a web component with added API callbacks.

<!-- @file: /src/views/components/card/articles.html -->
<card-articles>
  <!-- begin CSS styling -->
  { props.title }
  { props.description }
  { props.tags }
  { props.date }
</card-articles>
Enter fullscreen mode Exit fullscreen mode

And then, mounting and looping the data at another page that need to reuse the same component.

<!-- @file: /src/views/pages/article.html -->
<page-article>
  <!-- looping data from article.json -->
  <y each="{ data in articles }">
    <!-- mount the `card` component -->
    <card-articles
      title="{ data.title }"
      description="{ data.description }"
      tags="{ data.tags }"
      date="{ data.date }">
    </card-articles>
  </y>

  <script>
    // fetch() the data from JSON file showed earlier
  </script>
</page-article>
Enter fullscreen mode Exit fullscreen mode

For me, it doesn't seem too complicated for a static website. But every component (header, navbar, hero, cta, footer, gallery, etc.) are much easier to manage. I can also be hosting the payload (data) at Firebase, which the website is running as serverless.

Thread Thread
 
shaijut profile image
Shaiju T •

Do you have a example site in your Github repo with Vanilla JS or at least tutorial to learn this ?

Thread Thread
 
louislow profile image
Louis Low • • Edited

Hoho... I do not have any tutorial for that. But you can find a working example repo of My Portfolio Website.

$ git clone --branch 2.x.x https://github.com/loouislow81/loouislow81.github.io.git
Enter fullscreen mode Exit fullscreen mode

The payload (data) path is in,

https://github.com/loouislow81/loouislow81.github.io/tree/2.x.x/src/assets/data`.
Enter fullscreen mode Exit fullscreen mode

I am using the in-house proprietary framework, instead of (Vue.js, React.js, etc.). I am more prefer less, clean and concise programming language design. So that I could spend less time on typing too many codes.

Thread Thread
 
louislow profile image
Louis Low • • Edited

I found an article at CSS Tricks about the topic you are looking for. After you read the articles, you probably wonder why the hell we need React anyway... Lol