[Automation] Publishing Velo code to Web. Case Study - Code Snippets

Summary

In this article, we talk about how we have automated publishing real working tested source code to a web page for users to copy as snippets and use it in their projects. This is part of our new Free Snippets Website built on Wix Studio.

List of modules that we have used to achieve this automation

Package How we have used it
fs read contents of code files
terser minify code
comment-parser parse comments to create documentation
wix-data save content to CMS
wix-dataset use dynamic item page for each snippet

The code snippets in this article are simplified to explain the concepts.

Step 1: Reading content of code snippet files

The first step involves gathering all the snippet files stored in a code directory using fs.readdir and reading contents of each file using fs.readFile for processing.

import fs from 'fs/promises'

async function processSnippets(directoryPath) {
    // read all files in the directory
    const files = await fs.readdir(directoryPath)

    for (const file of files) {
        // read contents of each source file 
        const fileContent = await fs.readFile(filePath, 'utf8')
        await handleFileContent(fileContent)
    }
}

Step 2: Generating Documentation

We are generating a part of the documentation for configurations of snippets from the code using comment-parser npm package. It reads through the comments in the original code, parses them, and extracts relevant information like parameters and descriptions.

import { parse } from 'comment-parser'

function parseDocumentation(code) {
    const parsedComments = parse(originalCode)
    const documentation = parsedComments.map(comment => {
    // loop through comment.tags and format the data    
    })
    return documentation
}

Step 3: Minifying the Code

We use the terser package to minify a part of the snippet. .

import { minify } from 'terser'

function getMinifiedCode(fileContent) { 
    const minified = minify(fileContent)
    const minifiedCode = minified.code
    return minifiedCode
}

Step 4: Saving the Snippets into Wix CMS

The final step in the pipeline is saving the minified code and the generated documentation into my site’s CMS. For this, I use the wix-data API and its bulkSave method, which allows me to store multiple records at once. This ensures that both the snippets and their corresponding documentation are stored efficiently.

import fs from 'fs/promises'
import wixData from 'wix-data'
import { minify } from 'terser'
import { parse } from 'comment-parser'

async function processSnippets(directoryPath) {
    // read all files in the directory
    const files = await fs.readdir(directoryPath)
    const processedSnippets = []
    for (const file of files) {
        // read contents of each source file 
        const fileContent = await fs.readFile(filePath, 'utf8')
        const doc = parseDocumentation(fileContent)
        const code =  getMinifiedCode(fileContent)
        processedSnippets.push({doc, code})
    }
    await wixData.bulkSave('SnippetsCollection', processedSnippets)
}

Final step

There are dynamic page that create a Snippet documentation page for each snippets in added to CMS. We are also using rich text fields for some documentation as you will notice on snippet item page.

Conclusion

This automated process allows us to

  • Efficiently manage and publish code snippets to our site.
  • Saves a lot of time from doing it all manually.
  • Ensures that the snippets delivered to users are real, tested and ready to use.

Don’t forget to pay a visit to our Free Snippets Library :slight_smile:

https://snipps.liquis.io

5 Likes