export default {
  artusx: {
    enable: true,
    package: '@artusx/core',
  },
  ejs: {
    enable: true,
    package: '@artusx/plugin-ejs',
  },  
};

Config

import path from 'path';
import type { ArtusXConfig } from '@artusx/core';
import type { EjsConfig } from '@artusx/plugin-ejs';

export default () => {  
  const artusx: ArtusXConfig = {
    port: 7001,
    middlewares: [LimitRate, checkAuth],
    static: {
      dirs: [
        {
          prefix: '/public/',
          dir: path.resolve(__dirname, '../public'),
        },
      ],
      dynamic: true,
      preload: false,
      buffer: false,
      maxFiles: 1000,
    },
    cors: {
      origin: '*',
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
      credentials: false,
    },
  };

  const ejs: EjsConfig = {
    root: path.resolve(__dirname, '../view-ejs'),
    async: true,  
    layout: {
      'layout extractScripts': true,
      'layout extractStyles': true,
      // layout: false,
    },
  };

  return {    
    ejs,
    artusx,      
  };
};

View

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>

  <% /* Place any styles in the page in this section. */ %>
  <%- style %>
</head>
<body>
  <header>
    <% /*
    Define an required placeholder for the header.
    If a page doesn't define a header, there will be an error when rendering.
    */ %>
    <%- header %>
  </header>

  <%- body %>

  <footer>
    <% /*
    Define an optional placeholder for the footer.
    If a page doesn't define a footer, this section will simply be empty.
    */ %>
    <%- defineContent('footer') %>
  </footer>

  <% /* Place any scripts contained in views at the end of the page. */ %>
  <%- script %>
</body>
</html>

view.ejs

<%- contentFor('header') %>
<h1 class="page-title"><%= _locals.title %></h1>

<%- contentFor('footer') %>
<h1>This is the footer</h1>

<% /*
Content for the `body` section should either be the first thing defined
in the view, or it has to be declared just like any other section.
*/ %>
<%- contentFor('body') %>

This is part of the body.

<% /*
When style extraction is enabled, any custom styles that a page defines, will
be extracted out of the content and made available in the specific placeholder.
In our example, even though we're defining a <style> within the body, this will
be placed, according to our layout, inside of the <head> element.
<link> blocks to load external stylesheets are also extracted when the option
is enabled.
*/ %>

<style>
  .page-message { color: blue }
</style>

<% /*
Like stylesheets, scripts can also be extracted.
This script block will end up at the end of the HTML document.
*/ %>
<script>
  // Script content!
</script>

<h1 class="page-message"><%= message %></h1>

Contoller

import { PluginInjectEnum } from '@artusx/utils';
import {
  ArtusInjectEnum,
  ArtusApplication,
  Inject,
  Controller,
  GET, 
  ContentType 
} from '@artusx/core';

import type { ArtusXContext } from '@artusx/core';
import { EjsClient } from '@artusx/plugin-ejs';

@Controller('/ejs')
export default class EjsController {
  @Inject(ArtusInjectEnum.Application)
  app: ArtusApplication;
  
  @Inject(PluginInjectEnum.EJS)
  ejs: EjsClient;
    
  @GET('/')  
  @ContentType('html')
  async view(ctx: ArtusXContext) {        
    const locals = {
      title: 'Example',
      message: 'This is a message'
    };    
    ctx.body = await this.ejs.render('view.ejs', { 
      locals,      
    });
  }

  @GET('/people')
  @ContentType('html')
  async people(ctx: ArtusXContext) {    
    const people = ['geddy', 'neil', 'alex'];        
    ctx.body = await this.ejs.render('people.ejs', { 
      people,
      layout: false,
     });
  }
}

Keywords

artusx

FAQs

What is @artusx/plugin-ejs?

Is @artusx/plugin-ejs popular?

Is @artusx/plugin-ejs well maintained?

Package last updated on 07 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@artusx/plugin-ejs

@artusx/plugin-ejs

Plugin

Config

View

Contoller

Keywords

Related posts

Introducing the Alert Details Page: A Better Way to Explore Alerts

Introducing Supply Chain Attack Campaigns Tracking in the Socket Dashboard