simple-sitemap-renderer: A bare minimum sitemap renderer written in TypeScript

тars — Sat, 24 Oct 2020 13:57:37 +0000

If you're looking for a easy to use sitemap renderer and don't need extra features like extended sitemap or sitemap index files, this library might be helpful.

💻 Installation

$ npm i simple-sitemap-renderer

yarn add simple-sitemap-renderer

🎈 Usage

import { renderSitemap } from 'simple-sitemap-renderer'

renderSitemap([
  {
    url: 'https://your-site/your-page-1',
    lastmod: '2020-10-10',
    changefreq: 'always',
    priority: 0.8,
  },
  {
    url: 'https://your-site/your-page-2',
    lastmod: '2020-10-10',
  },
  {
    url: 'https://your-site/your-page-3',
  },
])

Rendered Result

the sample here is formatted for readability, but actual result will always be minified.

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>https://your-site/your-page-1</loc>
    <lastmod>2020-10-10</lastmod>
    <changefreq>always</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://your-site/your-page-2</loc>
    <lastmod>2020-10-10</lastmod>
  </url>
  <url>
    <loc>https://your-site/your-page-3</loc>
  </url>
</urlset>

More info

tars0x9752 / simple-sitemap-renderer

A bare minimum sitemap renderer written in TypeScript.

simple-sitemap-renderer

A bare minimum sitemap renderer written in TypeScript.

Features

Render standard sitemap XML
Zero-dependencies
Written in TypeScript

💻 Installation

$ npm i simple-sitemap-renderer

yarn add simple-sitemap-renderer

🎈 Usage

import { renderSitemap } from 'simple-sitemap-renderer'
renderSitemap([
  {
    url: 'https://your-site/your-page-1',
    lastmod: '2020-10-10',
    changefreq: 'always',
    priority: 0.8,
  },
  {
    url: 'https://your-site/your-page-2',
    lastmod: '2020-10-10',
  },
  {
    url: 'https://your-site/your-page-3',
  },
])

Rendered Result

the sample here is formatted for readability, but actual result will always be minified.

<?xml version="1.0" encoding="UTF-8"?&gt
<urlset&gt
  <url&gt
    <loc>https://your-site/your-page-1</loc>
    <lastmod>2020-10-10</lastmod>
    <changefreq>always</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://your-site/your-page-2</loc>
    <lastmod>2020-10-10</lastmod>
  </

…

View on GitHub

I created a tiny npm package which helps manipulate transparency of a css color.

тars — Mon, 05 Oct 2020 14:52:21 +0000

Hello 👋

Let me introduce you to with-alpha-hex, A tiny TypeScript/JavaScript library which helps change/add alpha(opacity) of a css hexadecimal color.

🤨 What is this?

This is a library for those who use CSS-in-JS and prefer to use #RRGGBB[AA] style css color rather than functional notation color such as rgb() or hsl() and want to make the alpha channel dynamic.

There are plenty of color manipulation library but most of them output functional notation colors(Especially when using alpha).

🤔 Ok, How to use then?

It's fairly simple. :) A quick instruction goes below.

💻 Installation

npm i with-alpha-hex
# or
yarn add with-alpha-hex

The library is TypeScript-ready and has zero-dependency. :)

🎈 Usage

import { withAlphaHex } from 'with-alpha-hex'

const textColor = '#000'

const weakTextColor = withAlphaHex(textColor, 0.4) // #00000066

const primaryColor = '#14B1AB'

const weakPrimaryColor = withAlphaHex(primaryColor, 0.2) // #14B1AB33

Wait, what are those 8-digit hexadecimal color thingy?

In CSS Color Module Level 4, You can use #RRGGBBAA color which has an alpha channel value.

✨ With Styled-JSX

import { withAlphaHex } from 'with-alpha-hex'

// ~~~~

const RandomComponent = () => {
  return (
    <div>
      <p className="random-text">{text}</p>
      <style jsx>{`
        .random-text {
          color: ${textColor}
          background: ${backgroundColor};
        }

        .random-text:hover {
          background: ${withAlphaHex(backgroundColor, 0.2)};
        }
      `}</style>
    </div>
  )
}

That's it!

Cheers. :)

DEV Community: тars

simple-sitemap-renderer: A bare minimum sitemap renderer written in TypeScript

💻 Installation

🎈 Usage

Rendered Result

More info

tars0x9752 / simple-sitemap-renderer

A bare minimum sitemap renderer written in TypeScript.

simple-sitemap-renderer

Features

💻 Installation

🎈 Usage

Rendered Result

I created a tiny npm package which helps manipulate transparency of a css color.

🤨 What is this?

🤔 Ok, How to use then?

💻 Installation

🎈 Usage

Wait, what are those 8-digit hexadecimal color thingy?

✨ With Styled-JSX