Contentware

contentware

Authors:
(1) Vivian Liu, Columbia University (vivian@cs.columbia.edu);
(2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com);
(3) Li-Yi Wei, Adobe Research (lwei@adobe.com);
(4) Matthew Fisher, Adobe Research (matfishe@adobe.com);
(5) Timothy Langlois, Adobe Research (tlangloi@adobe.com);
(6) Seth Walker, Adobe Research (swalker@adobe.com);
(7) Lydia Chilton, Columbia University (chilton@cs.columbia.edu). Authors: Authors: (1) Vivian Liu, Columbia University (vivian@cs.columbia.edu); (2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com); (3) Li-Yi Wei, Adobe Research (lwei@adobe.com); (4) Matthew Fisher, Adobe Research (matfishe@adobe.com); (5) Timothy Langlois, Adobe Research (tlangloi@adobe.com); (6) Seth Walker, Adobe Research (swalker@adobe.com); (7) Lydia Chilton, Columbia University (chilton@cs.columbia.edu). Table of Links Abstract and 1 Introduction Abstract and 1 Introduction 2 Related Work 2.1 Program Synthesis 2.1 Program Synthesis 2.2 Creativity Support Tools for Animation 2.2 Creativity Support Tools for Animation 2.3 Generative Tools for Design 2.3 Generative Tools for Design 3 Formative Steps 3 Formative Steps 4 Logomotion System and 4.1 Input 4 Logomotion System and 4.1 Input 4.2 Preprocess Visual Information 4.2 Preprocess Visual Information 4.3 Visually-Grounded Code Synthesis 4.3 Visually-Grounded Code Synthesis 5 Evaluations 5 Evaluations 5.1 Evaluation: Program Repair 5.1 Evaluation: Program Repair 5.2 Methodology 5.2 Methodology 5.3 Findings 5.3 Findings 6 Evaluation with Novices 6 Evaluation with Novices 7 Discussion and 7.1 Breaking Away from Templates 7 Discussion and 7.1 Breaking Away from Templates 7.2 Generating Code Around Visuals 7.2 Generating Code Around Visuals 7.3 Limitations 7.3 Limitations 8 Conclusion and References 8 Conclusion and References ABSTRACT Animated logos are a compelling and ubiquitous way individuals and brands represent themselves online. Manually authoring these logos can require significant artistic skill and effort. To help novice designers animate logos, design tools currently offer templates and animation presets. However, these solutions can be limited in their expressive range. Large language models have the potential to help novice designers create animated logos by generating animation code that is tailored to their content. In this paper, we introduce LogoMotion, an LLM-based system that takes in a layered document and generates animated logos through visually-grounded program synthesis. We introduce techniques to create an HTML representation of a canvas, identify primary and secondary elements, synthesize animation code, and visually debug animation errors. When compared with an industry standard tool, we find that LogoMotion produces animations that are more content-aware and are on par in terms of quality. We conclude with a discussion of the implications of LLM-generated animation for motion design. 1 INTRODUCTION Motion suggests life, and as such, motion is a dimension we add to our designs to make them more dynamic and engaging. Animation is a special type of design form which we have created to help us take static designs into more media-rich and interactive contexts. A specific type of animated content that we frequently create is the animated logo. Animation allows logos, which have been defined as the “visual figureheads" of brands [25], to better integrate within videos, livestreams, websites, and social media. A well-executed animation can quickly engage an audience, introduce the brand or individual online, and elevate content to have more visual interest. Authoring an animated logo is challenging. Logos are often more than just a pairing of icon with text. Because they can have different layouts, layers, color, and typography, they can take on great variety and be complex artifacts to animate. For a novice designer, it can be difficult to understand which design elements should be animated, in what sequence, and how to build up compelling and believable motion. There are many facets of motion to consider such as speed, timing, positioning, duration, easing, and motion personality (e.g. a playful bounce vs. a strong entrance). Additionally, when logos have more design elements, designers also have to understand how groups of elements can synchronize to coordinate motion and orchestrate a visual flow. While there is a great demand for animated content, it is difficult for people outside of motion design to develop this kind of expertise. Design tools such as Adobe Express, Canva, and Figma often provide solutions in the form of animated templates and automatic animation techniques [10, 12, 13]. Templates pre-populate logo layouts with animations that users can customize. They illustrate how users can apply motion presets (e.g. slide, flicker, or fade) onto logo elements to create professional-looking animations. However, templates do not always adapt to every use case. When users make edits (e.g. add/remove/replace elements) to customize logo templates, they can easily break the seamless and professional look the templates were originally packaged with. An alternative to templates are automatic animation techniques, which globally apply rules and heuristics to animate canvases [12]. For example, all elements on a page can be directed to slide in from one side or sequentially fade into place. While templates and automatic techniques can get users to a starting point fast, neither solution works with a recognition of the user’s content, which is something that can be enabled by emerging technologies. Large language models (LLMs) present the potential for contentaware animation. They can generate animation code that is specific to the design elements and their layout on the canvas. Code is a text representation that is often used to drive animation [18, 33, 53], because it can concisely specify how elements interact over time and space on a canvas. Because LLMs encode a vast amount of world knowledge, they can draw upon actions and activities related to the content being animated and generate a near infinite number of animations. This open-ended generative capacity can go beyond the scope of what templates, presets, and rule-based techniques usually cover. Recent advancements have made LLMs more multimodal, such that they can take in both text and image as inputs, and provide visually-grounded responses. This make LLMs more applicable in domains like animation where a visual understanding of the canvas matters. It opens up the potential for users to provide images of their layout to an LLM and receive animations tailored to their layout and design elements. For example, if a novice designer wanted to animate a taxi, they could use an LLM to generate code to drive a taxi onto the canvas. This code could translate the taxi object along the x-axis before easing it into the center of the canvas to imply a stop-and-go motion befitting of taxis. In this paper, we present LogoMotion, an LLM-based method that automatically animates static layouts in a content-aware way. LogoMotion generates code in a two-stage approach involving visually-grounded program synthesis and program repair. The first stage introduces multimodal LLM operators that take in visual context and handle the 1) construction of a text representation of the canvas, 2) conceptual grouping of elements, and 3) implementation of animation code. The second stage of our approach introduces a technique for visually-grounded program repair, which helps LLMs check what they have generated against the original layout and debug differences in a targeted layer-wise fashion. Our contributions are as follows: • LogoMotion, an LLM system that uses visually-grounded code generation to automatically generate logo animations from a PDF. The system identifies the visual content in each layer, infers the primary and secondary elements, and creates groups of elements. Based on this, the system suggests a design concept (in text) and uses the LLM to generate animation code. Users can optionally improve the animation by editing or adding their own design concept. • Visually-grounded program repair, a mechanism that lets the LLM automatically detect and debug visual errors within its generated animation code, creating a feedback loop between LLM-generated code and its visual outputs. • A technical evaluation of 276 animations showing that compared to Canva Magic Animate and an ablated version of the system (without stages for hierarchy analysis and design concept suggestions), the full pipeline of LogoMotion produces animations that are more content-aware. • A qualitative evaluation of novice users showing that LogoMotion is able to quickly achieve their desired animation with minimal reprompting. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. available on arxiv available on arxiv [1] Video: https://youtu.be/Jo9opkMH7iY https://youtu.be/Jo9opkMH7iY [2] Project Page: https://vivian-liu.com/#/logomotion https://vivian-liu.com/#/logomotion

Turn Static Logos Into Dynamic Animations With AI

Pretvorite statičke logotipe u dinamičke animacije pomoću AI-a

Proměňte statická loga v dynamické animace s AI

Verwandeln Sie statische Logos in dynamische Animationen mit AI

Convertir logotipos estáticos en animaciones dinámicas con AI

एआई के साथ स्थैतिक लोगो को गतिशील एनीमेशन में बदलें

Mengubah logo statis menjadi animasi dinamis dengan AI

Trasforma i loghi statici in animazioni dinamiche con AI

静的なロゴをAIでダイナミックなアニメーションに変える

სტატისტიკური ლოგოების გადარჩენა დინამიური ანამატორებით AI- ის გამოყენებით

ការផ្លាស់ប្តូរស្លាក static ទៅជាការធ្វើតេស្ត dynamic ជាមួយ AI

Претворете ги статичките логоа во динамички анимации со AI

Haddaan Logo Static ee Animations Dynamic ee AI

Why AI-Powered Image Hosting APIs Are Essential for Modern Businesses

Waarom AI-aangedrewe beeldgasheer-API's noodsaaklik is vir moderne besighede

Proč jsou rozhraní API pro hostování obrázků s umělou inteligencí nezbytná pro moderní podniky

Warum KI-gestützte Bildhosting-APIs für moderne Unternehmen unverzichtbar sind

Por qué las API de alojamiento de imágenes basadas en IA son esenciales para las empresas modernas

Miért nélkülözhetetlenek az AI-alapú képtárhely API-k a modern vállalkozások számára?

AI を活用した画像ホスティング API が現代のビジネスに不可欠な理由

Неліктен AI-мен жұмыс істейтін кескін хостинг API интерфейстері қазіргі заманғы бизнес үшін өте маңызды?

Kāpēc ar AI darbināmas attēlu mitināšanas API ir būtiskas mūsdienu uzņēmumiem

Ke ka baka la’ng di-API tša go Amogela Diswantšho tšeo di Matlafatšwago ke AI di le Bohlokwa bakeng sa Dikgwebo tša Sebjalebjale

Почему API-интерфейсы хостинга изображений на базе искусственного интеллекта необходимы современному бизнесу

නවීන ව්‍යාපාර සඳහා AI-බලවත් රූප සත්කාරක API අත්‍යවශ්‍ය වන්නේ ඇයි?

Tại sao API lưu trữ hình ảnh hỗ trợ AI lại cần thiết cho các doanh nghiệp hiện đại

TL;DR 💨 Contentlayer reduces a lot of friction in publishing the content on my static website. 😍 MDX with remark and rehype plugins is awesomely convenient and powerful. 🍵 Next.js jells very well with Contentlayer and MDX I fully embraced (SSG) for my website to optimize the site speed and scaling in the future. Static Site Generation Recently I’ve been researching on reducing the effort to create a new article on my website. There were many touch points in my project setup in order to: Next.js Publish a new article Estimate reading time Update the list of articles Create a new RSS feed Update the sitemap What Was The Problem? I analyzed a little more and found out the friction was in my MDX usage. My file structure looked like this: my-blog
├── public
├── data
│   └── blogs.json
├── components
│   └── Blog.tsx
└── pages
    ├── blogs
    │   ├── blog-one.mdx
    │   ├── blog-two.mdx
    │   └── blog-three.mdx
    └── index.tsx It is the recommended by Next.js. I was using and to transform MDX into pages. standard setup @mdx-js/loader @next/mdx Take for example, the content looked like this: pages/blogs/blog-one.mdx pages/blogs/blog-one.mdx import Blog from '../../components/Blog'

export const meta = {
  title: 'Blog One🚀',
  publishedAt: 'February 4, 2022'
  description: "Learn how to build a Next.js blog with MDX and Contentlayer!",
  cover: '/optimized/articles/blog-one/hero.webp',
}

export default ({ children }) => (
  <Blog
    title={meta.title}
    description={meta.description}
    cover={meta.cover}
    publishedAt={meta.publishedAt}
  >
    {children}
  </Blog>
)

Hey There👋

Welcome to Blog one✨ Let's learn together! named-exported a meta data. It was picked up by the the default component that took care of the layout and rendered the meta data. blog-one.mdx The component looked like this: <Blog /> components/Blog.tsx import { BlogProps } from './types'

export default function Blog(props: BlogProps) {
  return (
    <article>
      <h1>{props.title}</h1>
      <h2>{props.description}</h2>
      <p>
        {props.publishedAt}
      </p>
      <img alt={props.title} src={props.cover} width="100%" loading="lazy" />
      {props.children}
    </article>
  )
} I was treating MDX files as pages. Because the data in each MDX file was trapped in the page, I duplicated all the meta data and aggregated them in . I used it to maintain the list of articles on my website, the RSS feed, and the for SEO. meta data/blogs.json sitemap It would be much better if I could treat the MDX files as data, and generate pages based on the data. This way, . Publishing a new article ideally could be much more frictionless. I could use the MDX files as data points and page content at the same time I came across and found out he was using a alpha library called to solve the problem. Lee Robinson’s website Contentlayer What is Contentlayer is an library in its early stage that turns content into data. It works roughly like this: Contentlayer It takes in headless CMS or local content in YAML, JSON, MDX, or Markdown as source. It transforms the content into TypeScript types and data files in JSON that includes the original content, meta data, and any derived data we specified. It aggregates all the data in JSON and exports them as . ESM For my use case, I can use the aggregated data generated by Contentlayer to replace my previous manual process: I use the generated data to build the new page for an article. I use the generated data to render . the list of articles I use the generated data to create a new RSS feed. I use the new file structure to generate a new sitemap. All automatic! Contentlayer offers easy integration with Next.js. I’ll show you how in the next sections. Using MDX as Data Let’s first explore how to use MDX as a data point. MDX offers support with custom parsers. You can express the meta data like this: YAML frontmatter ---
title: 'Blog One🚀'
publishedAt: 'February 4, 2022'
description: 'Learn how to build a Next.js blog with MDX and Contentlayer!'
cover: '/optimized/articles/blog-one/hero.webp'
---

Hey There👋

Welcome to Blog One✨ Let's learn together! You can see the meta data in YAML syntax is inside the block, and the body of the content follows in MDX syntax. Compared to the where MDX files were treated as pages, the new MDX file contains only meta data and content. --- old setup The next thing we need to do is to generate the blog page that renders the meta data and the content with the layout from component. <Blog /> Integrating Contentlayer in Next.js Now that we updated the MDX files to contain only data and content, Let’s move them into the directory. data The new file structure looks like this: my-blog
├── public
├── components
│   └── Blog.tsx
├── pages
│   ├── blogs
│   │   └── [slug].tsx
│   └── index.tsx
└── data
    └──blogs
       ├── blog-one.mdx
       ├── blog-two.mdx
       └── blog-three.mdx Notice that we replaced the MDX files in directory with a . We'll use this page to statically generate the blog pages . pages/blogs dynamic route [slug].tsx later Configuring Contentlayer Contentlayer offers seamless integration with Next.js. To install the dependencies: yarn add contentlayer next-contentlayer Contentlayer reads the configuration from . Let's create one. contentlayer.config.ts touch contentlayer.config.ts Inside the , we need to add instructions to tell Contentlayer how to parse: contentlayer.config.ts : namespace name : input files filePathPattern : content body type for parsing bodyType : meta data fields fields : derived meta data fields computedFields contentlayer.config.ts import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import readingTime from 'reading-time'

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blogs/*.mdx',
  bodyType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    publishedAt: { type: 'string', required: true },
    description: { type: 'string', required: true },
    cover: { type: 'string', required: true },
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx/, ''),
    },
  },
}))

export default makeSource({
  contentDirPath: 'data',
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
}) In the , we can compute data like from the content body🤩. I'm using for calculating the reading time based on word count. The field is for generating the dynamic route later in the page. computedFields readingTime reading-time slug [slug].tsx Under the hood, Contentlayer uses to parse MDX and YAML frontmatter and extract the content and data. If you're interested in the magic behind it, you can read more about and . These are the libraries uses internally. mdx-bundler gray-matter remark-mdx-frontmatter mdx-bundler At the end of the configuration, will then look for files that match pattern under directory and generate the blog data in directory at your project root. makeSource blogs/*.mdx data .contentlayer Lastly, wrap your Next.js configuration with to integrate with Next.js's live-reload and build process. next-contentlayer next.config.js const { withContentlayer } = require('next-contentlayer')

module.exports = withContentlayer()({
  // ... your Next.js config
}) Using Contentlayer data for Static Site Generation We are ready to use the generated data from Contentlayer and build the static pages🤩 All we need to do is to use from to build the dynamic routes with and use to pass the blog data to the page. allBlogs .contentlayer/data getStaticPaths getStaticProps [slug].tsx pages/blogs/[slug].tsx import { useMDXComponent } from 'next-contentlayer/hooks'
import { allBlogs } from '.contentlayer/data'
import type { Blog } from '.contentlayer/types'
import BlogLayout from '../../../components/Blog'

type BlogProps = {
  blog: Blog
}

export default function Blog({ blog }: BlogProps) {
  const Component = useMDXComponent(post.body.code)

  return (
    <BlogLayout {...blog}>
      <Component />
    </BlogLayout>
  )
}

export async function getStaticPaths() {
  return {
    paths: allBlogs.map((blog) => ({ params: { slug: blog.slug } })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const blog = allBlogs.find((blog) => blog.slug === params.slug)
  return { props: { blog } }
} After the project is built, you’ll see the blogs available at , , and ✨ /blogs/blog-one /blogs/blog-two /blogs/blog-three Bonus: remark & rehype Plugins There are a lot more we can do with MDX by leveraging remark and rehype plugins in the . contentlayer.config.ts is an awesome plugin ecosystem that transforms markdown. remark is another powerful plugin ecosystem that transforms HTML. rehype They are two separate ecosystems but we can convert remark to rehype and generate HTML markup. The transformation looks like this: MDX ----> remark AST ------> rehype AST --------> HTML
    parse            convert            stringify Contentlayer takes care of the flow. All we need to do is add the plugins to provide instruction for the transformations. I’m using the following plugins: to support . remark-gfm GitHub Flavored Markdown and to render heading links. rehype-slug rehype-autolink-headings to render syntax highlighting in code blocks. rehype-prism-plus to render code block titles. rehype-code-titles to provide accessibility to emojis. rehype-accessible-emojis contentlayer.config.ts + import remarkGfm from 'remark-gfm'
+ import rehypeSlug from 'rehype-slug'
+ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+ import rehypeCodeTitles from 'rehype-code-titles'
+ import rehypePrism from 'rehype-prism-plus'
+ import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis'

// ...

export default makeSource({
  mdx: {
-    remarkPlugins: [],
+    remarkPlugins: [remarkGfm],
-    rehypePlugins: [],
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeCodeTitles,
+      rehypePrism,
+      rehypeAutolinkHeadings,
+      rehypeAccessibleEmojis,
    ],
  },
}) Contentlayer Applications There are more things we can do with the data. Application #1: RSS Feed I can now write a script to generate an RSS feed base on the data! allBlogs scripts/rss.mjs import { writeFileSync } from 'fs'
import RSS from 'rss'
import { allBlogs } from '.contentlayer/data'

const feed = new RSS({
  title: "My Blogs",
  feed_url: 'localhost:3000/rss.xml',
  site_url: 'localhost:3000',
})

allBlogs.map((blog) => ({
  title: blog.title,
  description: blog.description,
  url: `localhost:3000/blogs/${blog.slug}`
  date: blog.publishedAt,
})).forEach((item) => {
  feed.item(item)
})

writeFileSync('./public/rss.xml', feed.xml({ indent: true })) Application #2: XML Sitemap It’s easier to write a script for sitemap generation. All we need is the file structure in the and directories. data page scripts/sitemap.mjs import { writeFileSync } from 'fs'
import { globby } from 'globby'
import prettier from 'prettier'

const pages = await globby([
  'pages/*.tsx',
  'data/**/*.mdx',
  '!pages/_*.tsx',
])

const urlTags = pages
  .map((file) =>
    file
      .replace('pages', '')
      .replace('data/content', '')
      .replace('.tsx', '')
      .replace('.mdx', '')
  )
  .map((path) => (path === '/index' ? '/' : path))
  .map(
    (path) => `
      <url>
          <loc>localhost:3000${path}</loc>
      </url>
    `
  )
  .join('')

const sitemap = `
  <?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${urlTags}
  </urlset>
`

const prettierConfig = await prettier.resolveConfig('./prettierrc')
const formatted = prettier.format(sitemap, {
  ...prettierConfig,
  parser: 'html',
})

writeFileSync('public/sitemap.xml', formatted) Run both scripts after building the project and automatically generate a new RSS feed and sitemap. In , add: package.json "scripts": {
+    "sitemap": "node scripts/sitemap.mjs",
+    "rss": "node scripts/rss.mjs",
+    "postbuild": "yarn sitemap && yarn rss",
  }, Final Thoughts Building Static sites with Next.js becomes so effortless with MDX and Contentlayer. MDX combines with remark and rehype ecosystem enriches the possibility of building consistent pages with Markdown. Contentlayer makes data and content in MDX files available to consume in Next.js projects. If you’re exploring ways to build your own static sites, check out the libraries mentioned earlier. It not only reduces the time to market but also is a lot of fun to build!🦄 This article is originally posted on . Daw-Chih’s website

Build Faster Next.js Static Sites Using MDX And Contentlayer 

How AI Is Revolutionizing Agile Program Management with Confluence & Streamlit

Hvordan AI revolutionerer Agile Program Management med Confluence & Streamlit

Cómo la IA está revolucionando la gestión de programas ágiles con Confluence y Streamlit

Como a IA está revolucionando a xestión de programas áxiles con Confluence e Streamlit

Ki jan AI se revolisyon nan jesyon pwogram Agile ak Confluence & Streamlit

AI が Confluence & Streamlit で Agile Program Management を革命化する方法

ວິທີການ AI ມີການຄຸ້ມຄອງໂຄງການ Agile ມີ Confluence & Streamlit

څنګه AI د Confluence & Streamlit سره د چټک پروګرام مدیریت بدلون کوي

Si AI po revolucionarizon menaxhimin e programit Agile me Confluence & Streamlit

How AI Is Revolutionizing Agile Program Management with Confluence & Streamlit - ஐ.நா.

کس طرح AI Confluence & Streamlit کے ساتھ Agile پروگرام کے انتظام کو انقلابی بنا رہا ہے

O‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z o‘z

Yintoni i-AI ivula ukulawulwa kwe-Agile Program kunye ne-Confluence & Streamlit

Revisiting LangChain4J 6 Months Later

Revisiting LangChain4J 6 meses después

LangChain4J 6 Months Later

Преглед на LangChain4J 6 месеци подоцна

Revisiting LangChain4J 6 meses depois

Do You Need to Give Up jQuery for React?

Sending emails is a critical functionality in many applications, whether for user notifications, transactional updates, or marketing purposes. However, implementing email solutions can sometimes be cumbersome, as you have to integrate mailer with template language, check for dependencies... But! With the @nestixis/nestjs-mailer package, you can simplify this process while ensuring flexibility and reliability. This package leverages the power of React and Nodemailer, making it a modern and developer-friendly tool for building dynamic email templates and sending emails effortlessly. Let's dive into how you can set it up and use it :) Installing the Package To get started, you need to install the nestjs-mailerpackage in your NestJS application. This package is available via npm, making installation quick and straightforward. Run the following command in your terminal: npm install @nestixis/nestjs-mailer Configuring the Module Once the package is installed, the next step is to configure the MailerSdkModule in your application. Configuration is straightforward, and for testing purposes, you can use a tool like Mailcatch to capture and preview emails without sending them to real users. Here's an example of how to set it up: import { MailerSdkModule } from '@nestixis/nestjs-mailer';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    MailerSdkModule.register({
      auth: {
        user: 'username',
        password: 'password',
        host: 'sandbox-smtp.mailcatch.app',
        port: 2525,
        ssl: false,
      },
      from: 'your-email@example.com',
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {} Creating an Email Template To make your emails visually appealing and more dynamic, you can combine templates with React, and package@react-email/components, allows you to design such email templates. **But before that, you should call the file invite-admin-with-account-template.tsx and set** "jsx": "react" in your tsconfig.json Here's an example of a template for inviting a new admin user: import {
  Body,
  Container,
  Head,
  Html,
  Img,
  Link,
  Section,
  Text,
} from '@react-email/components';
import * as React from 'react';

export default function InviteAdminWithAccountTemplate({
  translation,
  language,
  invitationHref,
  passwordHref,
  logoUrl,
}) {
  return (
    <Html lang={language}>
      <Head>
        <style>{/* Your custom styles here */}</style>
      </Head>
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Section>
          <Container>
            {logoUrl ? (
              <Img src={logoUrl} alt="Logo" />
            ) : (
              <Text>{translation.titleInside}</Text>
            )}
            <Text>{translation.contentPart1}</Text>
            <Text>{translation.contentPart2}</Text>
            <Text>
              {translation.contentPart3.subpart1}
              <Link href={invitationHref}>
                {translation.contentPart3.subpart2}
              </Link>
              {translation.contentPart3.subpart3}
            </Text>
            <Text>
              {translation.contentPart4.subpart1}
              <Link href={passwordHref}>
                {translation.contentPart4.subpart2}
              </Link>
            </Text>
          </Container>
        </Section>
      </Body>
    </Html>
  );
} Injecting the Email Sender After creating your email template, the next step is to send the email. To do this, you inject the email sender into your service. import {
  EmailSenderInterface,
  MAILER_SDK_CLIENT,
} from '@nestixis/nestjs-mailer';
import { Inject, Injectable } from '@nestjs/common';
import InviteAdminWithAccountTemplate from './invite-admin-with-account-template';

@Injectable()
export class AppService {
  constructor(
    @Inject(MAILER_SDK_CLIENT)
    private readonly emailSender: EmailSenderInterface,
  ) {}

  async send(): Promise<void> {
    const translations = {
      titleInside: { subpart1: 'Welcome', subpart2: ' to the platform!' },
      contentPart1: 'Hello',
      contentPart2: 'Your admin account has been created.',
      contentPart3: {
        subpart1: 'Click here to activate your account: ',
        subpart2: 'Activate',
        subpart3: '.',
      },
      contentPart4: {
        subpart1: 'To set your password, click here: ',
        subpart2: 'Set password',
      },
    };

    const emailContent = await InviteAdminWithAccountTemplate({
      translation: translations,
      language: 'en',
      invitationHref: 'xxx',
      passwordHref: 'xxx',
      logoUrl: 'logo.png',
    });

    await this.emailSender.sendEmail(
      'test@test.com',
      'Admin Invitation',
      emailContent,
    );
  }
} Done! That's it! You've successfully integrated nestjs-mailer into your application. For more details and advanced features, check out the NestJS mailer GitHub repository. Sending emails is a critical functionality in many applications, whether for user notifications, transactional updates, or marketing purposes. However, implementing email solutions can sometimes be cumbersome, as you have to integrate mailer with template language, check for dependencies... But! But! With the @nestixis/nestjs-mailer package, you can simplify this process while ensuring flexibility and reliability. @nestixis/nestjs-mailer This package leverages the power of React and Nodemailer, making it a modern and developer-friendly tool for building dynamic email templates and sending emails effortlessly. Let's dive into how you can set it up and use it :) Installing the Package To get started, you need to install the nestjs-mailer package in your NestJS application. This package is available via npm, making installation quick and straightforward. Run the following command in your terminal: nestjs-mailer npm install @nestixis/nestjs-mailer npm install @nestixis/nestjs-mailer Configuring the Module Once the package is installed, the next step is to configure the MailerSdkModule in your application. MailerSdkModule Configuration is straightforward, and for testing purposes, you can use a tool like Mailcatch to capture and preview emails without sending them to real users. Mailcatch Mailcatch Here's an example of how to set it up: import { MailerSdkModule } from '@nestixis/nestjs-mailer';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    MailerSdkModule.register({
      auth: {
        user: 'username',
        password: 'password',
        host: 'sandbox-smtp.mailcatch.app',
        port: 2525,
        ssl: false,
      },
      from: 'your-email@example.com',
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {} import { MailerSdkModule } from '@nestixis/nestjs-mailer';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    MailerSdkModule.register({
      auth: {
        user: 'username',
        password: 'password',
        host: 'sandbox-smtp.mailcatch.app',
        port: 2525,
        ssl: false,
      },
      from: 'your-email@example.com',
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {} Creating an Email Template To make your emails visually appealing and more dynamic, you can combine templates with React, and package @react-email/components , allows you to design such email templates. @react-email/components **But before that, you should call the file invite-admin-with-account-template.tsx and set ** "jsx": "react" "jsx": "react" in your tsconfig.json in your tsconfig.json Here's an example of a template for inviting a new admin user: import {
  Body,
  Container,
  Head,
  Html,
  Img,
  Link,
  Section,
  Text,
} from '@react-email/components';
import * as React from 'react';

export default function InviteAdminWithAccountTemplate({
  translation,
  language,
  invitationHref,
  passwordHref,
  logoUrl,
}) {
  return (
    <Html lang={language}>
      <Head>
        <style>{/* Your custom styles here */}</style>
      </Head>
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Section>
          <Container>
            {logoUrl ? (
              <Img src={logoUrl} alt="Logo" />
            ) : (
              <Text>{translation.titleInside}</Text>
            )}
            <Text>{translation.contentPart1}</Text>
            <Text>{translation.contentPart2}</Text>
            <Text>
              {translation.contentPart3.subpart1}
              <Link href={invitationHref}>
                {translation.contentPart3.subpart2}
              </Link>
              {translation.contentPart3.subpart3}
            </Text>
            <Text>
              {translation.contentPart4.subpart1}
              <Link href={passwordHref}>
                {translation.contentPart4.subpart2}
              </Link>
            </Text>
          </Container>
        </Section>
      </Body>
    </Html>
  );
} import {
  Body,
  Container,
  Head,
  Html,
  Img,
  Link,
  Section,
  Text,
} from '@react-email/components';
import * as React from 'react';

export default function InviteAdminWithAccountTemplate({
  translation,
  language,
  invitationHref,
  passwordHref,
  logoUrl,
}) {
  return (
    <Html lang={language}>
      <Head>
        <style>{/* Your custom styles here */}</style>
      </Head>
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Section>
          <Container>
            {logoUrl ? (
              <Img src={logoUrl} alt="Logo" />
            ) : (
              <Text>{translation.titleInside}</Text>
            )}
            <Text>{translation.contentPart1}</Text>
            <Text>{translation.contentPart2}</Text>
            <Text>
              {translation.contentPart3.subpart1}
              <Link href={invitationHref}>
                {translation.contentPart3.subpart2}
              </Link>
              {translation.contentPart3.subpart3}
            </Text>
            <Text>
              {translation.contentPart4.subpart1}
              <Link href={passwordHref}>
                {translation.contentPart4.subpart2}
              </Link>
            </Text>
          </Container>
        </Section>
      </Body>
    </Html>
  );
} Injecting the Email Sender After creating your email template, the next step is to send the email. To do this, you inject the email sender into your service. import {
  EmailSenderInterface,
  MAILER_SDK_CLIENT,
} from '@nestixis/nestjs-mailer';
import { Inject, Injectable } from '@nestjs/common';
import InviteAdminWithAccountTemplate from './invite-admin-with-account-template';

@Injectable()
export class AppService {
  constructor(
    @Inject(MAILER_SDK_CLIENT)
    private readonly emailSender: EmailSenderInterface,
  ) {}

  async send(): Promise<void> {
    const translations = {
      titleInside: { subpart1: 'Welcome', subpart2: ' to the platform!' },
      contentPart1: 'Hello',
      contentPart2: 'Your admin account has been created.',
      contentPart3: {
        subpart1: 'Click here to activate your account: ',
        subpart2: 'Activate',
        subpart3: '.',
      },
      contentPart4: {
        subpart1: 'To set your password, click here: ',
        subpart2: 'Set password',
      },
    };

    const emailContent = await InviteAdminWithAccountTemplate({
      translation: translations,
      language: 'en',
      invitationHref: 'xxx',
      passwordHref: 'xxx',
      logoUrl: 'logo.png',
    });

    await this.emailSender.sendEmail(
      'test@test.com',
      'Admin Invitation',
      emailContent,
    );
  }
} import {
  EmailSenderInterface,
  MAILER_SDK_CLIENT,
} from '@nestixis/nestjs-mailer';
import { Inject, Injectable } from '@nestjs/common';
import InviteAdminWithAccountTemplate from './invite-admin-with-account-template';

@Injectable()
export class AppService {
  constructor(
    @Inject(MAILER_SDK_CLIENT)
    private readonly emailSender: EmailSenderInterface,
  ) {}

  async send(): Promise<void> {
    const translations = {
      titleInside: { subpart1: 'Welcome', subpart2: ' to the platform!' },
      contentPart1: 'Hello',
      contentPart2: 'Your admin account has been created.',
      contentPart3: {
        subpart1: 'Click here to activate your account: ',
        subpart2: 'Activate',
        subpart3: '.',
      },
      contentPart4: {
        subpart1: 'To set your password, click here: ',
        subpart2: 'Set password',
      },
    };

    const emailContent = await InviteAdminWithAccountTemplate({
      translation: translations,
      language: 'en',
      invitationHref: 'xxx',
      passwordHref: 'xxx',
      logoUrl: 'logo.png',
    });

    await this.emailSender.sendEmail(
      'test@test.com',
      'Admin Invitation',
      emailContent,
    );
  }
} Done! That's it! You've successfully integrated nestjs-mailer into your application. nestjs-mailer For more details and advanced features, check out the NestJS mailer GitHub repository . NestJS mailer GitHub repository NestJS mailer GitHub repository

This NestJS Package Turns Email Setup from Nightmare to No-Brainer

Este paquete NestJS convierte la configuración del correo electrónico de una pesadilla a una tarea sencilla

NestJS pakete honek posta elektronikoaren konfigurazioa Nightmare-tik No-Brainer bihurtzen du

この NestJS パッケージは、メールのセットアップを悪夢から簡単なものに変える

Бул NestJS топтому электрондук почтанын жөндөөсүн Nightmare'тен акылсызга айлантат

ແພັກເກດ NestJS ນີ້ປ່ຽນການຕັ້ງຄ່າອີເມວຈາກຝັນຮ້າຍໄປເປັນບໍ່ມີສະໝອງ

Šis „NestJS“ paketas paverčia el. pašto sąranką iš „Košmaro“ į „No-Brainer“.

Pakej NestJS Ini Mengubah Persediaan E-mel daripada Mimpi ngeri kepada No-Brainer

دا د NestJS بسته د بریښنالیک تنظیم کول د شپې خوب څخه No-Brainer ته اړوي

Kifurushi hiki cha NestJS Hubadilisha Usanidi wa Barua Pepe kutoka Ndoto ya Ndoto hadi No-Brainer

แพ็คเกจ NestJS นี้เปลี่ยนการตั้งค่าอีเมลจากฝันร้ายให้เป็นเรื่องง่าย

Phasela leri ra NestJS ri hundzula Setup ya Email ku suka eka Nightmare ku ya eka No-Brainer

Цей пакет NestJS перетворює налаштування електронної пошти з кошмару на безпроблемне

How to Master Real-Time Analytics With AWS: Timestream and Beyond

Cómo dominar el análisis en tiempo real con AWS: Timestream y más allá

Kuinka hallita reaaliaikaista analytiikkaa AWS:n avulla: Timestream and Beyond

Como dominar a análise en tempo real con AWS: Timestream e máis aló

AWS でリアルタイム分析をマスターする方法: Timestream とその先

AWS로 실시간 분석을 마스터하는 방법: Timestream 및 그 이상

AWS менен реалдуу убакыттагы аналитиканы кантип өздөштүрүү керек: Timestream жана андан тышкары

AWS ашиглан бодит цагийн аналитикийг хэрхэн эзэмших вэ: Timestream ба түүнээс дээш

AWS को साथ वास्तविक-समय एनालिटिक्स कसरी मास्टर गर्ने: टाइमस्ट्रीम र परे

Hoe u realtime-analyses onder de knie krijgt met AWS: Timestream en verder

Tsela ya go Master Ditshekatsheko tša Nako ya Kgonthe Ka AWS: Nako ya Moela le ka Ntle ga yona

Imayna chiqa pacha t'aqwiyta AWS kaqwan kamachiy: Pacha puriy chaymanta aswan karu

วิธีการเชี่ยวชาญการวิเคราะห์แบบเรียลไทม์ด้วย AWS: Timestream และ Beyond

Building a Local AI Chatbot with LangChain4J and Ollama

Building Scalable Event-Driven Orchestration Platform in AWS

Stories, News & Mentions about CONTENTWARE

Trending Topics

Classic

Neon Noir

Minty

Newspaper

HN StartUps