Skip to content
Sf
Search Contact

Introducing the (ficticious) Onyx CLI

This is an idea I've been pondering for sometime and has evolved from wanting to create a collection of preset starters for the different stacks I use, eliminating the repetitive tasks when starting a new project, back to a command line tool, that would use (configurable) smart presets to quickly spin up new site using my defined presets.

Once installed, the cli would maintain a library of npm packages, a configurable package.json, starter files for presets, templates, fonts, etc.

.onyx
.onyx/_package.json (baseline package.json)
.onyx/generators (astro, nuxt, sveltekit)
.onyx/sources (markdown, directus, airtable, ghost, postgres)
.onyx/packages (sitemap, seo, mastercss, tailwind, vercel, components)
.onyx/presets (default.json, custom.json)
.onyx/commands (defines cli commands, with options to add new)
.onyx/base (default starter files for all projects)
.onyx/auth (supported auth providers)
.onyx/deploy (presets for different deployment providers)
.onyx/web (visual project starter)
.onyx/os (presets for different operating systems)
.onyx/config (set defaults via the config.json)

Commands:

o n / o new / onyx n / onyx new would all work, though short hand is recommended.

Onyx new:

1.) Set folder name

Makes folder in current directory && enters into it.

Sets the folder as the destination for the configurable package.json and adds the baseline package.json to the folder.

Adds baseline files/folders (/public, package.json, .ignore, .env).

Initiate repo in the folder.

> mkdir my-project && cd my-project
> copy * -R /source/base /my-project
> git init && git commit "Initial commit"

2.) Configure your site

Adds packages, relevant config/files & commits to the repo.

  • Sitemap
  • SEO
  • Fonts
  • Icon
  • Component Library
  • Utilities
  • Templates
  • Layouts

3.) What are you using to author your content

Not shown if preset is set.

  • Content Collections
    • Markdown
    • Astro Studio
    • Tina CMS
    • Obsidian
    • Sveltia CMS
    • Netlify Create
    • Other
  • Directus
  • Ghost
  • Netlify Create

4.) Select a css strategy

If one is selected, adds the necessary packages, config & adds a global variable to the .env to be used in the class assignment.

Not shown if preset is set.

  • None
  • Master CSS
  • Tailwind CSS
  • Lightening CSS
  • UnoCSS

5.) Select your host

Adds deployment adapter package to node_modes and updates the package.json.

Not shown if preset is set.

  • Vercel
  • Netlify
  • Cloudflare
  • Github Pages
  • UnoCSS

Components

Interface

Blocks

Utilities:

Join my inner circle

Get notified of new tutorials, theme launches and life updates.