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.