ng-content-webpack-plugin v1.0.1-beta.1

Angular Content Webpack Plugin

Webpack plugin for Angular projects for parse markdown files and create a JSON database in assets project folder before build.

Install

# npm
npm i -D @angular-builders/custom-webpack ng-content-webpack-plugin

# yarn
yarn add -D @angular-builders/custom-webpack ng-content-webpack-plugin

Edit angular.json for custom webpack configuration:

{
  "projects": {
    "[project]": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            }
          }
        }
      }
    }
  }
}

Create webpack.config.js and add new plugin:

const ngContentPlugin = require("ng-content-webpack-plugin");

module.exports = {
  plugins: [new ngContentPlugin()],
};

Add Content

Create content folder in project src:

[projectRoot]/src/content/

Create markdown files:

[projectRoot]/src/content/articles/article1.md
[projectRoot]/src/content/articles/article2.md

[projectRoot]/src/content/products/product1.md
[projectRoot]/src/content/products/product2.md

example of article1.md

---
title: New horizonts for the democracy
author: Mr. Robot
tags:
	- philosophy
	- sociology
	- maths
published: false
---

# Introduction

## Historyc vision

with $x^2$ katex

...

Build project

#run project

npm start
yarn start

New files

ng-content.config.js will be created with default config:

module.exports = {
  content: {
    markdown: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
  },
};

You can add Remark/Rehype plugins to Array:

Install

npm install remark-attr remark-math rehype-katex

yarn add remark-attr remark-math rehype-katex

Add plugins names to config

module.exports = {
  content: {
    markdown: {
      remarkPlugins: ["remark-attr", "remark-math"],
      rehypePlugins: ["rehype-katex"],
    },
  },
};

Use options object if needs:

module.exports = {
  content: {
    markdown: {
      remarkPlugins: [
        "remark-attr",
        {
          name: "remark-math",
          options: {
            throwError: true,
          },
        },
      ],
      rehypePlugins: ["rehype-katex"],
    },
  },
};

will be created a db folder in:

[project]/src/assets/db

With content.json file:

output:

{
  "content": [
    {
      "title": "New horizonts for the democracy",
      "author": "Mr. Robot",
      "tags": ["philosophy", "sociology", "maths"],
      "published": false,
      "extension": ".md",
      "updatedAt": 1595949791435,
      "toc": [
        { "id": "historyc-vision", "depth": 2, "text": "Historyc vision" }
      ],
      "body":
        "<h1 id=\"introduction\">Introduction</h1>\n" +
        "<h2 id=\"historyc-vision\">Historyc vision</h2>\n" +
        "<p>with <span class=\"math math-inline\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">x^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.8141079999999999em;vertical-align:0em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">x</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141079999999999em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span> katex</p>",
      "folder": "articles",
      "dir": "/articles",
      "slug": "article1"
    },
    {
      "title": "The history of an idiot",
      "author": "Donald Trump",
      "tags": ["cocaine", "dummy", "great-again"],
      "published": false,
      "extension": ".md",
      "updatedAt": 1595949791435,
      "toc": [
        { "id": "historyc-vision", "depth": 2, "text": "Historyc vision" }
      ],
      "body":
        "<h1 id=\"introduction\">Introduction</h1>\n" +
        "<h2 id=\"historyc-vision\">Historyc vision</h2>\n" +
        "<p>with <span class=\"math math-inline\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">x^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.8141079999999999em;vertical-align:0em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">x</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141079999999999em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span> katex</p>",
      "folder": "articles",
      "dir": "/articles",
      "slug": "article2"
		}
		...
  ]
}

You can acces to YAML variables in JSON.

Works with: node-markdown-parser

You can acces to data with HttpClient in angular service or component:

ng-content.service.ts

@Injectable({
  providedIn: "root",
})
export class NgContentService {
  constructor(private http: HttpClient) {}

  content(): Observable<any> {
    return this.http.get("assets/db/content.json");
  }
}

home.component.ts

@Component({
  selector: "home-component",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"],
})
export class HomeComponent implements OnInit {
  docs$: Observable<any>;

  constructor(private ngContent: NgContentService) {
    this.docs$ = this.ngContent.content();
  }

  ngOnInit(): void {}
}

home.component.html with async Pipe

<div *ngIf="docs$ | async as docs">
  {{ docs | json }}
</div>

Thanks

• @nuxt/content

Enjoy !