Announcing Ngaox!

Rabyâ Raghib — Fri, 05 May 2023 10:36:45 +0000

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:

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

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

<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.

/* ... */
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:

<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:

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:

<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:

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:

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:

DEV Community: Rabyâ Raghib

Announcing Ngaox!

SEO & Social Sharing

SVG Icons Inlining

Content Integration

Links