DEV Community: kstulgys

How to Generate Stylish PDFs and Images with Tailwind CSS in Your Application

kstulgys — Wed, 17 Apr 2024 18:40:08 +0000

UPDATE 2022-05-22: tailwindstream api got some improvements. Please follow the updated stackblitz example that you can find on tailwindstream.io

Transform your application into a powerhouse for creating stunning documents and images using HTML styled with Tailwind CSS. In this guide, we’ll walk you through the process of integrating a powerful document generation API from tailwindstream.io, showcasing how you can enhance your application's functionality with high-quality, styled document outputs.

Why Use Tailwind CSS for Document Generation?

Tailwind CSS is renowned for its utility-first approach, making it an excellent choice for developers looking to implement custom styles quickly without leaving the comfort of their HTML. By using Tailwind CSS with the tailwindstream.io API, developers can ensure that their digital documents carry the same level of precision and customisation as their web interfaces.

Integrating the tailwindstream.io API

Our chosen API isn't just any document generation tool; it excels by accepting HTML content styled using Tailwind CSS, allowing full utilization of Tailwind's utility classes directly within your documents. Here’s a brief overview of the API capabilities that you can leverage:

HTML Content: Embed HTML with Tailwind CSS for dynamic styling.
Format Specification: Supports various paper sizes such as A4, Letter, etc.
Output Options: Generate documents in PDF, PNG, JPEG, or WebP formats.
Custom Dimensions: Control output dimensions and scaling to ensure your documents look perfect.

Below is a basic React component setup that utilises the tailwindstream.io API to generate a document:

import { useState } from 'react';

const sampleHtml = `
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto object-cover" src="https://tailwindcss.com/_next/static/media/sarah-dayan.de9b3815.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400 font-bold">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
`;

function App() {
  const [error, setError] = useState('');
  const [downloading, setDownloading] = useState(false);
  const [payload, setPayload] = useState<BodyPayload>({
    html: sampleHtml,
    output: 'pdf',
  });

  const setHtml = (htmlContent: string) => {
    setPayload({ ...payload, html: htmlContent });
  };

  const setOutput = (outputFormat: BodyPayload["output"]) => {
    setPayload({ ...payload, output: outputFormat });
  };

  const download = async () => {
    setDownloading(true);
    try {
      const response = await requestDownload(payload);
      if (response.error) {
        setError(response.error);
        setDownloading(false);
      } else if (response.requestId) {
        downloadWithRetry(response.requestId);
      }
    } catch (error) {
      setError('Something went wrong.');
      setDownloading(false);
    }
  };

  return (
    <div>
      <SelectOutput onChange={setOutput} />
      <button onClick={download}>{downloading ? 'Downloading...' : `Download .${payload.output}`}</button>
      {error && <p>{error}</p>}
      <textarea
        rows={25}
        cols={80}
        value={payload.html}
        onChange={(e) => setHtml(e.target.value)}
      />
    </div>
  );
}

export default App;

Send a POST request with your styled HTML content to generate the desired file format:

const apiUrl = `https://api.tailwindstream.io`;

async function requestDownload(payload: BodyPayload) {
  const response = await fetch(apiUrl + '/request', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return await response.json();
}

Handle download attempts and retries:

const RETRY_INTERVAL_MS = 2500;

async function downloadWithRetry(requestId: string) {
  const intervalId = setInterval(async () => {
    const response = await fetch(`${apiUrl}/request/${requestId}/download`);
    if (response.ok) {
      const blob = await response.blob();
      downloadToBrowser(blob);
      clearInterval(intervalId);
    } else {
      console.error('Download failed, retrying...');
    }
  }, RETRY_INTERVAL_MS);
}

Document generation might take 2-6 second. This retry logic ensures we download the file when it's ready.

You might ask: what are the options I can pass to the api? Well... here is the typescript definition my friend:

type BodyPayload = {
  html?: string; // must be undefined if 'template' prop is used
  format?: // applicable only for pdf, default a4
    | "LETTER"
    | "LEGAL"
    | "TABLOID"
    | "LEDGER"
    | "A0"
    | "A1"
    | "A2"
    | "A3"
    | "A4"
    | "A5"
    | "A6"
    | "Letter"
    | "Legal"
    | "Tabloid"
    | "Ledger"; 
  output?: "pdf" | "png" | "jpeg" | "webp"; // default pdf
  size?: {
    scale?: number; // default 2
    width?: string | number; // default 210
    height?: string | number; // default 297
    unit?: "px" | "in" | "cm" | "mm"; // default mm
  };
  template?: { 
    html: string; // handlebars dynamic html 
    data: Record<string, any>; // data for dynamic html
  };
};

Conclusion

Integrating Tailwind CSS with the tailwindstream.io API in your application not only enhances the consistency between web and printable formats but also simplifies the process of generating custom-styled documents. Start utilizing this integration today and take your application's functionality to the next level. For more information visit tailwindstream.io.

Happy coding!

How to Generate Stylish PDFs and Images with Tailwind CSS in Your Application

kstulgys — Wed, 17 Apr 2024 18:36:09 +0000

Why Use Tailwind CSS for Document Generation?

Integrating the tailwindstream.io API

HTML Content: Embed HTML with Tailwind CSS for dynamic styling.
Format Specification: Supports various paper sizes such as A4, Letter, etc.
Output Options: Generate documents in PDF, PNG, JPEG, or WebP formats.
Custom Dimensions: Control output dimensions and scaling to ensure your documents look perfect.

Below is a basic React component setup that utilises the tailwindstream.io API to generate a document:

import { useState } from 'react';

const sampleHtml = `
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto object-cover" src="https://tailwindcss.com/_next/static/media/sarah-dayan.de9b3815.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400 font-bold">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
`;

function App() {
  const [error, setError] = useState('');
  const [downloading, setDownloading] = useState(false);
  const [payload, setPayload] = useState<BodyPayload>({
    html: sampleHtml,
    output: 'pdf',
  });

  const setHtml = (htmlContent: string) => {
    setPayload({ ...payload, html: htmlContent });
  };

  const setOutput = (outputFormat: BodyPayload["output"]) => {
    setPayload({ ...payload, output: outputFormat });
  };

  const download = async () => {
    setDownloading(true);
    try {
      const response = await requestDownload(payload);
      if (response.error) {
        setError(response.error);
        setDownloading(false);
      } else if (response.requestId) {
        downloadWithRetry(response.requestId);
      }
    } catch (error) {
      setError('Something went wrong.');
      setDownloading(false);
    }
  };

  return (
    <div>
      <SelectOutput onChange={setOutput} />
      <button onClick={download}>{downloading ? 'Downloading...' : `Download .${payload.output}`}</button>
      {error && <p>{error}</p>}
      <textarea
        rows={25}
        cols={80}
        value={payload.html}
        onChange={(e) => setHtml(e.target.value)}
      />
    </div>
  );
}

export default App;

Send a POST request with your styled HTML content to generate the desired file format:

const apiUrl = `https://api.tailwindstream.io`;

async function requestDownload(payload: BodyPayload) {
  const response = await fetch(apiUrl + '/request', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return await response.json();
}

Handle download attempts and retries:

const RETRY_INTERVAL_MS = 2500;

async function downloadWithRetry(requestId: string) {
  const intervalId = setInterval(async () => {
    const response = await fetch(`${apiUrl}/request/${requestId}/download`);
    if (response.ok) {
      const blob = await response.blob();
      downloadToBrowser(blob);
      clearInterval(intervalId);
    } else {
      console.error('Download failed, retrying...');
    }
  }, RETRY_INTERVAL_MS);
}

Document generation might take 2-6 second. This retry logic ensures we download the file when it's ready.

You might ask: what are the options I can pass to the api? Well... here is the typescript definition my friend:

type BodyPayload = {
  html?: string; // must be undefined if 'template' prop is used
  format?: // applicable only for pdf, default a4
    | "LETTER"
    | "LEGAL"
    | "TABLOID"
    | "LEDGER"
    | "A0"
    | "A1"
    | "A2"
    | "A3"
    | "A4"
    | "A5"
    | "A6"
    | "Letter"
    | "Legal"
    | "Tabloid"
    | "Ledger"; 
  output?: "pdf" | "png" | "jpeg" | "webp"; // default pdf
  size?: {
    scale?: number; // default 2
    width?: string | number; // default 210
    height?: string | number; // default 297
    unit?: "px" | "in" | "cm" | "mm"; // default mm
  };
  template?: { 
    html: string; // handlebars dynamic html 
    data: Record<string, any>; // data for dynamic html
  };
};

Conclusion

Happy coding!

Integrating Google Translate into Your Next.js Website

kstulgys — Thu, 22 Feb 2024 13:42:08 +0000

In the global digital landscape, offering your website in multiple languages is not just an option—it's a necessity. This tutorial guides you through the seamless integration of Google Translate into a Next.js website, enabling users to switch languages via a dropdown menu. Let's dive into the code essentials to make your website universally accessible.

Implementing the Language Selection Component

We'll start by creating a component that leverages the Google Translate API to offer a dynamic language selection dropdown. The component will automatically detect the user's preferred language, allowing for an intuitive and personalized user experience.

Prerequisites

This tutorial assumes you have a basic understanding of React and Next.js concepts.

Step 1: Setting Up the Component

First, import the necessary modules and define a list of languages you wish to support:

"use client";
import Script from "next/script";
import React from "react";

const languages = [
  { label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
  // Add additional languages as needed
];

Step 2: Initializing Google Translate

Implement the function to initialize Google Translate, specifying the languages your site will support:

const includedLanguages = languages.map(lang => lang.value).join(",");

function googleTranslateElementInit() {
  new window.google.translate.TranslateElement({
    pageLanguage: "auto", includedLanguages
  }, "google_translate_element");
}

Step 3: Managing State and Language Selection

Create a React component to manage the selected language and render the UI for language selection:

export function GoogleTranslate({ prefLangCookie }: { prefLangCookie: string }) {

  const [langCookie, setLangCookie] = React.useState(decodeURIComponent(prefLangCookie));

  React.useEffect(() => {
    window.googleTranslateElementInit = googleTranslateElementInit;
  }, []);

  const onChange = (value: string) => {
    const lang = "/en/" + value;
    setLangCookie(lang);
    const element = document.querySelector(".goog-te-combo");
    element.value = value;
    element.dispatchEvent(new Event("change"));
  };

  return (
    <div>
      <div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px" }}></div>
      <LanguageSelector onChange={onChange} value={langCookie} />
      <Script
        src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        strategy="afterInteractive"
      />
    </div>
  );
};

function LanguageSelector({ onChange, value }) {
  const langCookie = value.split("/")[2];
  return (
    <select onChange={(e) => onChange(e.target.value)} value={langCookie}>
      {languages.map((it) => (
        <option value={it.value} key={it.value}>
          {it.label}
        </option>
      ))}
    </select>
  );
}

Step 4: Incorporating Styles to Hide the Default Google Translate Widget

To ensure a cohesive design, apply CSS to hide the default Google Translate widget and only display your custom dropdown:

body { position: "static", top: "0px !important"; }
iframe.skiptranslate { display: "none !important"; }

Step 5: Implementing the Language Cookie

Pass the preferred language cookie from the server component to GoogleTranslate to preserve user language preferences:

<GoogleTranslate prefLangCookie={getPrefLangCookie()}/>

export const getPrefLangCookie = () => {
  return cookies().get("googtrans")?.value ?? "en";
};

Conclusion

By following these steps, you have now equipped your Next.js website with a powerful feature to attract and retain a global audience by breaking down language barriers. This integration not only enhances user experience but also broadens your website's reach. Happy coding!