Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/odestry/adastra

A powerful, flexible suite of vite plugins for building unique and custom Shopify themes with next-gen frontend tools.
https://github.com/odestry/adastra

liquid shopify-cli shopify-theme vitejs

Last synced: 1 day ago
JSON representation

A powerful, flexible suite of vite plugins for building unique and custom Shopify themes with next-gen frontend tools.

Host: GitHub
URL: https://github.com/odestry/adastra
Owner: odestry
License: mit
Created: 2023-02-07T15:23:49.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-08-17T16:26:31.000Z (4 months ago)
Last Synced: 2024-12-22T22:08:41.059Z (1 day ago)
Topics: liquid, shopify-cli, shopify-theme, vitejs
Language: TypeScript
Homepage:
Size: 2.42 MB
Stars: 285
Watchers: 14
Forks: 35
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

jimsghstars - odestry/adastra - A powerful, flexible suite of vite plugins for building unique and custom Shopify themes with next-gen frontend tools. (TypeScript)

README

        # Adastra

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&colorA=338fbb&colorB=1c1c1c&logoColor=ffffff)](https://github.com/odestry/.github/blob/main/CONTRIBUTING.md)

[![CI](https://img.shields.io/github/actions/workflow/status/odestry/adastra/ci.yml?style=flat&label=CI&colorA=338fbb&colorB=1c1c1c&logoColor=ffffff)](https://github.com/odestry/adastra/blob/main/.github/workflows/ci.yml)

[![Discord Shield](https://img.shields.io/discord/983602196493004820?style=flat&colorA=338fbb&colorB=1c1c1c&label=discord&logo=discord&logoColor=ffffff)](https://odestry.com/community)

A powerful, flexible suite of vite plugins for building unique and custom Shopify themes with next-gen frontend tools.

[Install](#install) |

[Key Features](#key-features) |

[Packages](#packages) |

[Templates](#templates) |

[Documentation](#documentation) |

[Contributing](#contributing) |

[About](#about) |

[License](#license)

## Install

The recommended way to scaffold an Adastra theme project is by running the command below:

```shell

npm create adastra@latest

```

Using Yarn/PNPM

```shell

yarn create adastra@latest

# pnpm create adastra@latest

```

Adastra came from the Latin word Ad-astra which stands for **To the Stars**

## Key Features

- **Flexible** Can seamlessly be integrated with existing workflows and Shopify themes.

- **Outstanding DX** Lightning Fast HMR for static files and has custom CLI built on top of the Shopify CLI.

- **Fast, by default** Supports modules/scripts code splitting and lazyloading static files.

- **UI-agnostic** Supports React, Preact, Solid, Vue, Solid, Lit and more. (more examples coming soon)

- **Customizable** Sensible built-in default configs for use in existing themes and highly extensible.

### Requirements

Please **make sure** you have these two already set up in your local environment.

- Node.js version 14 or higher (LTS recommended)

- Shopify Theme CLI version 3.0.0 or higher

## Packages

| Package                                                       | Changelog                                                    | Version                                                                                                                                                |

| ------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |

| [adastra-plugin](./packages/adastra-plugin)                   | [CHANGELOG](./packages/adastra-plugin/CHANGELOG.md)          |                    |

| [adastra-cli](./packages/adastra-cli)                         | [CHANGELOG](./packages/adastra-cli/CHANGELOG.md)             |                          |

| [adastra-cli-kit](./packages/adastra-cli-kit)                 | [CHANGELOG](./packages/adastra-cli-kit/CHANGELOG.md)         |                  |

| [create-adastra](./packages/create-adastra)                   | [CHANGELOG](./packages/create-adastra/CHANGELOG.md)          |                    |

| [adastra-branding](./packages/adastra-branding)               | [CHANGELOG](./packages/adastra-branding/CHANGELOG.md)        |                |

| [adastra-prettier-config](./packages/adastra-prettier-config) | [CHANGELOG](./packages/adastra-prettier-config/CHANGELOG.md) |  |

## Templates

Adastra comes with so many examples to showcase, how it can be used with all of these frontend tools and ui frameworks, to build next generation online storefronts.

| Theme/Example                                                   | Command                                                                                  |

| --------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |

| [Basics Template (Tailwind & Prettier)](./templates/basics)     | `npm create adastra@latest -- --template basics`                                         |

| [Minimal Template](./templates/minimal)                         | `npm create adastra@latest -- --template minimal`                                        |

| [Necessary Template](./templates/necessary)                     | `npm create adastra@latest -- --template necessary`                                      |

| [Example with React](./examples/with-react)                     | `npm create adastra@latest -- --template odestry/adastra/examples/with-react`           |

| [Example with Vue](./examples/with-vue)                         | `npm create adastra@latest -- --template odestry/adastra/examples/with-vue`             |

| [Example with Preact](./examples/with-preact)                   | `npm create adastra@latest -- --template odestry/adastra/examples/with-preact`          |

| [Example with Solid](./examples/with-solid)                     | `npm create adastra@latest -- --template odestry/adastra/examples/with-solid`           |

| [Example with Typescript](./examples/with-typescript)           | `npm create adastra@latest -- --template odestry/adastra/examples/with-typescript`      |

| [Example with Lit](./examples/with-lit)                         | `npm create adastra@latest -- --template odestry/adastra/examples/with-lit`             |

| [Example with Alpine](./examples/with-alpine)                   | `npm create adastra@latest -- --template odestry/adastra/examples/with-alpine`          |

| [Example with Tailwind](./examples/with-tailwind)               | `npm create adastra@latest -- --template odestry/adastra/examples/with-tailwind`        |

| [Example with GSAP](./examples/with-gsap)                       | `npm create adastra@latest -- --template odestry/adastra/examples/with-gsap`            |

| [Example with Sass](./examples/with-sass)                       | `npm create adastra@latest -- --template odestry/adastra/examples/with-sass`            |

| [Example with Less](./examples/with-less)                       | `npm create adastra@latest -- --template odestry/adastra/examples/with-less`            |

| [Example with Vanilla Extract](./examples/with-vanilla-extract) | `npm create adastra@latest -- --template odestry/adastra/examples/with-vanilla-extract` |

| [Example with React Three Fiber](./examples/with-r3f)           | `npm create adastra@latest -- --template odestry/adastra/examples/with-r3f`             |

| [Example with React Hydrogen](./examples/with-hydrogen)         | `npm create adastra@latest -- --template odestry/adastra/examples/with-hydrogen`        |

## Documentation

You can check docs on every package.

- Adastra Plugin Docs ([here](./packages/adastra-plugin/README.md))

- Adastra CLI Docs ([here](./packages/adastra-cli/README.md))

- Adastra Create Theme CLI ([here](./packages/create-adastra/README.md))

## Contributing

We'd love your help! Please read our [contributing guide](https://github.com/odestry/.github/blob/main/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements.

## About

Odestry isn't just a community; it's a group of dedicated folks all aiming to build better commerce together. Our mission is to create a supportive and open space where anyone, regardless of experience, can connect, learn, and grow. Here, you'll get inspired, have real talks, and find plenty of resources and open source tools to help you build. Whether you're looking to network, find opportunities, or just have meaningful conversations, join us and be part of a community that values authenticity, collaboration, and innovation. [Learn more](https://odestry.com).

## License

Copyright (c) 2024-present Odestry. See [LICENSE](/LICENSE.md) for further details.

## Credit

- [Shopify CLI](https://github.com/Shopify/cli) for inspiring Adastra CLI.

- [Shopify Vite Plugin](https://shopify-vite.barrelny.com) for inspiring the Vite plugin.

- [Astro](https://astro.build) for inspiring the Create Adastra CLI.