DOCSEARCHbyAlgolia
Submit Docs

io-arc Documentation

website·Indexed 31 days ago

https://io-arc.tech/

A collection of build tools, plugins, and modules for web development, featuring Webpack tasks for TypeScript, Vue, Pug, and SASS, as well as utilities for YAML to JSON conversion, WebP image processing, and environment constant management.

Tokens
31.7K
Snippets
267
Records
347
Agent score
47%

What's inside io-arc

  1. Understand io-arc plugin types

    io-arc utilizes two distinct types of plug-ins:

    1. Tasks: Used primarily for build processes in web development.
    2. Modules: Supporting libraries that provide functionality to build tasks. Developers can use existing modules to create new custom tasks.

  2. Use React components in Markdown with MDX

    Docusaurus supports MDX, which allows developers to write JSX and embed React components directly within Markdown files. This enables the creation of interactive documentation by mixing standard Markdown syntax with functional React components.

  3. Use GitHub-flavored Markdown for content

    The platform supports GitHub-flavored Markdown (GFM) for writing documentation content.

  4. Install and run @io-arc/task-yaml2json

    The @io-arc/task-yaml2json package converts YAML files in a specified working directory into JSON files. It can be run as a one-time conversion or in watch mode for development.
    # Install the package
npm i -D @io-arc/task-yaml2json

# Run once
NODE_ENV=development MODE_ENV=once ia-yaml2json

# Run in watch mode
NODE_ENV=development MODE_ENV=watch ia-yaml2json

  5. Split common logic into separate files

    To optimize builds when multiple files share common logic (such as shared libraries like lodash or jQuery), extract that logic into a separate file. The specific filename for the extracted common logic is configured in the Build Settings under the jsSplitFileName option.

  6. Install and configure @io-arc/task-webpack-pug in Webpack

    To use the Pug task for Webpack, install the @io-arc/task-webpack-pug package as a development dependency and export the html function from your webpack.config.js file.
    npm i -D @io-arc/task-webpack-pug
    // webpack.config.js
const { html } = require('@io-arc/task-webpack-pug');

module.exports = html;

  7. Install and configure @io-arc/task-webpack-stylus in Webpack

    Install the @io-arc/task-webpack-stylus package as a development dependency and export the css configuration from the package in your webpack.config.js file to enable Stylus processing.
    npm i -D @io-arc/task-webpack-stylus
    // webpack.config.js
const { css } = require('@io-arc/task-webpack-stylus')

module.exports = css

  8. Embed images and code blocks

    Images can be added using inline or reference styles. Paths to images should be relative to the markdown file. Code blocks are supported for syntax highlighting by specifying the language.
    ![alt text](path/to/image.png "Title")

```javascript
function highlightMe() {
  console.log('Highlighted!');
}

  9. Install and use @io-arc/output-dir-diff to calculate relative paths

    The @io-arc/output-dir-diff library calculates the relative path required to reach a target directory from a base directory. It takes two arrays of directory names (base and target) and determines the path difference. If the target does not match the base, the utility traverses back through the entire base array to find the relative path.
    npm i @io-arc/output-dir-diff
    import OutputDirDiff from '@io-arc/output-dir-diff'

// Example: Base is ['foo', 'bar'], Target is ['foo']
const diff = new OutputDirDiff(['foo', 'bar'], ['foo'])
console.log(diff.targetRelativePath()) // -> '../'

  10. Install and use @io-arc/read-yaml to transpile YAML to JSON

    The @io-arc/read-yaml package allows you to read YAML files and convert them into JSON objects. It is built on top of the js-yaml library.
    npm i @io-arc/read-yaml
    import ReadYaml from '@io-arc/read-yaml'

// Reads the file at data/foo.yml and returns its JSON representation
const json = ReadYaml('foo', ['data'])

  11. Configure JavaScript preprocessors and versions

    The boilerplate supports Babel (default version 7.9.6) and TypeScript (default version latest). To update the version of a preprocessor after creating the boilerplate, use the standard npm installation command.
    npm i -D typescript@4.1.3