Announcing Ngaox!
Tags: angular, icons, seo, node
Published: 2023-05-05 10:36:45

Are you looking for a simple, fast, and powerful toolset for building web applications? We've got great news for you!
Introducing Ngaox - an Angular-based toolset that provides everything you need to create dynamic web applications quickly and efficiently.

## SEO & Social Sharing

When it comes to web applications, SEO and social sharing are critical components of success. That's why Ngaox includes `@ngaox/seo`, an Angular library that helps generate and manage meta tags that allow social media sharing and improve page SEO ranking.

Getting started with Ngaox SEO is easy. Simply install the package and import the `SeoModule` into your root module:
```ts
import { SeoModule } from '@ngaox/seo';

@NgModule({
  /* ... */
  imports: [
    /* ... */
    SeoModule.forRoot({
      title: "Default Title",
      siteName: 'Cool app 😎',
      twitter: {
        creator: '@twitter'
      },
      /* ... */
    })
  ]
})
export class AppModule {}
```
And provide the relevent SEO data in each page/route/section
```ts
const routes: Routes = [
  {
    path: 'users',
    data: {
      // This 👇 will be used as the page seo data
      NgaoxSeo: {
        title: 'Users List Page',
        description="This is a description"
        keywords="keyword1, keyword2, keyword3"
        // Available options:
        // https://ngaox-lab.web.app/docs/seo#available-seo-options
      }
    },
    // PS: You can also use a resolver for it
  }
];
```
Or using `ngaox-seo` component in the users route component
```html
<ngaox-seo
  title="Users List Page"
  description="This is a description"
  keywords="keyword1, keyword2, keyword3"
  ...
></ngaox-seo>
<!-- Available options: https://ngaox-lab.web.app/docs/seo#available-seo-options -->
```

## SVG Icons Inlining

`@ngaox/icons` provides a registry (`IconsService`) that loads, caches and adds SVG icons, with a component (`<ngaox-icon>`) for displaying (inlining) them giving you the ability to style them with CSS as well as optimizing your application's performance.

Get started with Ngaox Icons by installing `@ngaox/icons` and importing `IconsModule` into your app's root module.

```ts
/* ... */
import { IconsModule } from '@ngaox/icons';

@NgModule({
  imports: [
    BrowserModule,
    IconsModule.forRoot([
      { name: 'my-icon', data: '<svg>...</svg>' },
      {
        name: 'my-icon2',
        data: {
          lazy: true,
          url: 'https://example.com/my-icon.svg',
        }
      },
    ]),
  ],
})
```

And then use the `<ngaox-icon>` component to display the icon:

```html
<ngaox-icon name="my-icon"></ngaox-icon>
```

If you are using `@ngaox/devkit` builders. You can also automagically register all the SVG icons in a directory by adding an `icons` entry in the `ngaox.config.js` file:

```js
module.exports = {
  content: {
    icons: 'src/icons'
    // ...
  }
};
```

For example, if you have the following directory structure:

```
└── src
│   │   my-icon.svg
│   │
│   └── sub-folder
│       │   icon-in-subfolder.svg
│       │
│   ...

```

You can use the following markup to display the icons:

```html
<ngaox-icon name="app:my-icon"></ngaox-icon>
<ngaox-icon name="app:sub-folder:icon-in-subfolder"></ngaox-icon>
```

## Content Integration

The `@ngaox/devkit` provides builders that seamlessly integrate your static content into your Angular app by using content parsers and builders.

To get started with content integration, you'll need to set up the `@ngaox/devkit` using the following command:

```shel
ng add @ngaox/devkit
```

The builders use the `ngaox.config.js` file, located in your project root by default, to determine how to parse and build content.
The file should export a configuration object with a `content` property that defines the different types of content to be processed.

Here's an example configuration file that defines two types of content, `docs` and `myCustomKey`, and specifies their corresponding builders, parsers, and other properties:

```js
module.exports = {
  content: {
    myCustomKey: {
      dir: 'my/custom/dir',
      glob: '**/*.md', // **/*.md by default
      parser: rawParser, // markdownParser by default
      builder: new MyCustomBuilder(), // GenericBuilder by default
      extra: {} // Extra properties that are passed to the builder
    },
    // If you are using the default configuration
    // You can use the short form where you only specify the directory:
    markdown: 'posts',
  }
};
```

And voila! Now your content will be processed and built along with your Angular app.
You can access your content as well as a map of your content and any other generated meta-file by the builder parsed as json in your app by making http request to `/~content/<content-key>/<doc-path>`.

## Links

Ngaox is an open-source project with a growing community. Check out the following links for more information:

- [Twitter](https://twitter.com/NgaoxLab)
- [GitHub Repository](https://github.com/ngaox/ngaox)
- [Documentation](https://ngaox-lab.web.app/)
- [Getting Started with Ngaox](https://ngaox-lab.web.app/docs/start)
- [Manage Seo and Social-Media previews the right way](https://ngaox-lab.web.app/docs/seo)
- [SVG icons inlining in Angular](https://ngaox-lab.web.app/docs/icons)
- [Seamless content integration for Angular](https://ngaox-lab.web.app/docs/press)