basic usage

Basic Usage Examples

Get the moon phase image for today

import { cycleMonth, cdnUrl } from 'moon-cycle';

const filename = cycleMonth(new Date());
const url = cdnUrl(filename, 'mm', 256, 75);

console.log(url);
// 'https://cdn.jsdelivr.net/gh/acamarata/moon-cycle@main/mm-256-75/354.webp'

Get the image for a specific date

import { cycleMonth, cdnUrl } from 'moon-cycle';

// March 23, 2023 — 1 Ramadan 1444 AH
const date = new Date(2023, 2, 23);
const filename = cycleMonth(date);
const url = cdnUrl(filename, 'mm', 256, 75);

console.log(filename);  // e.g. '001.webp'
console.log(url);

Use different sizes and quality levels

import { cycleMonth, cdnUrl } from 'moon-cycle';

const filename = cycleMonth(new Date());

// Available sizes: 256 or 512 pixels
// Available quality: 75 or 85
const urlMedium = cdnUrl(filename, 'mm', 256, 75);
const urlLarge  = cdnUrl(filename, 'mm', 512, 85);

console.log(urlMedium);
console.log(urlLarge);

Use the year-based dataset

import { cycleYear, cdnUrl } from 'moon-cycle';

// cycleYear maps to 2023 hourly NASA photographs
const filename = cycleYear(new Date());
const url = cdnUrl(filename, 'my', 256, 75);

console.log(url);

Self-hosted images

If you have cloned the repo and copied the image folder to your static assets:

import { cycleMonth, imageFolder } from 'moon-cycle';

const folder = imageFolder('mm', 256, 75);  // 'mm-256-75'
const filename = cycleMonth(new Date());
const src = `/moon/${folder}/${filename}`;

// Use src in an <img> tag

React component

import { cycleMonth, cdnUrl } from 'moon-cycle';

function MoonPhase({ date }: { date: Date }) {
  const filename = cycleMonth(date);
  const src = cdnUrl(filename, 'mm', 256, 75);

  return (
    <img
      src={src}
      alt="Moon phase"
      width={256}
      height={256}
    />
  );
}

CJS usage

const { cycleMonth, cdnUrl } = require('moon-cycle');

const filename = cycleMonth(new Date());
const url = cdnUrl(filename, 'mm', 256, 75);

console.log(url);