DEV Community

Cover image for Announcing Ngaox!
Rabyâ Raghib
Rabyâ Raghib

Posted on

Announcing Ngaox!

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 {}
Enter fullscreen mode Exit fullscreen mode

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
  }
];
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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',
        }
      },
    ]),
  ],
})
Enter fullscreen mode Exit fullscreen mode

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

<ngaox-icon name="my-icon"></ngaox-icon>
Enter fullscreen mode Exit fullscreen mode

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'
    // ...
  }
};
Enter fullscreen mode Exit fullscreen mode

For example, if you have the following directory structure:

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
  }
};
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (1)

Collapse
 
ayoubachak profile image
Ayoub Achak

This is awsome, , Thanks!