Elegant framework v2.0: Next.js, MDX-Loader, Tailwind CSS, Jest, and more - Elegant is the easiest way to create a new static website or blog, and publish it online.

We are excited to announce the latest version of Elegant, version 2.0! This major version brings with it a number of large improvements over the previous version.

The first version of Elegant started life as an experiment. We had a theory that we could build a more simple WordPress, geared for developers just like ourselves.

We knew that we could build a beautiful React.js frontend framework and that it could be used to write its own documentation as we built it.

Our initial release leveraged Docusaurus for its markdown feature. While Docusaurus was great for building a minimum viable product, it was very limited in features and extendability.

Some of our favorite updates from this release are highlighted below.

Next.JS: Server-side rendering, static website generation, and much more.
MDX Loader: Build all of your content in an easy Markdown format.
Tailwind CSS: Beautifully designed, expertly crafted CSS styling.
Jest Unit Testing: Ensure your JavaScript code runs flawlessly every time.
GitHub CI integrations: Automate your deployment from inside your project.
Elegant Starter Theme: An amazing starter theme, with a near-perfect Lighthouse SEO Score.

Next.JS

Next.js is an open-source web development framework providing React-based web applications with server-side rendering and static website generation. Next.js is one of the top cutting-edge technologies leading the way in a JavaScript revolution, so it only made sense for us to use it for this project.

MDX Loader

MDX Loader is a frontend build utility that lets Elegant seamlessly convert Markdown files inside of your Elegant application into React-based pages.

You can write your content pages like this:


## Markdown is super simple and elegant to write.

Hello? (Hello, hello, hello) <br>

Is there anybody in there? <br>

Just nod if you can hear me. <br>

Is there anyone at home?

Tailwind CSS

Tailwind is an open-source CSS framework of CSS design tokens and utility classes. CSS design tokens make it easier to make smart, efficient choices from beautifully curated palettes. Design tokens also create a common language for everyone who uses Tailwind - both across teams and projects, which can break down communication barriers.

Tailwind CSS allows us to easily create perfectly crafted themes that implement standards and best practices from the best front-end designers and developers.

Jest Unit Testing

Jest is a JavaScript testing framework created by Meta (Formerly Facebook). It was designed with a focus on simplicity and support for large web applications. Elegant comes pre-configured straight out of the box with a large number of Jest unit tests. Our goal is to provide 100% test coverage across the Elegant Framework.

Make a code change within Elegant and have 100% confidence that everything works as you expect, every time.

describe("Button component", () => {
  it('renders a button', () => {
      const button = renderer
      .create(<button className="w-auto h-8">Click Me</button)
      .toJSON();
      expect(button).toMatchSnapshot();
  });
});

GitHub CI integrations

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your Elegant deployments. You can create workflows that build and test every pull request to your Elegant repository.

name: Build Status
on: push
jobs:
test:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: "16"
      
    # Install required packages
    - name: Install Dependencies
      run: npm install

    # Finally, run our tests
    - name: Run the tests
      run: npm run test:ci

Elegant Starter Theme

The included Elegant starter theme is 100% completely responsive, and guaranteed to work on any browser. The included theme has full light and dark support and is 100% completely customizable.

Elegant has a near-perfect SEO score, and we are just getting started. We will sweat the details so that you can write the content you love.

The included theme has a lighthouse score that is already more superior to Wordpress.

The whole hypothesis behind this experiment was that the framework could be used to build all products and features of itself. A near-perfect SEO score at Elegant framework translates into a near-perfect SEO score for Elegant users.

Thank you for your support of Elegant! Stay tuned, we have a number of exciting features coming in the next version release. ✌️😎