Welcome to borrow-ui demo!

You can read the subtitle here, made with Text component
This is a demo site made with @borrow-ui/ui
Configured to work out of the box
Start to code immediately your Next.js app using your components library.
Ready for MDX
Pages can be written in MDX and content can be loaded form mdx files.
SCSS styles
Styles are managed with SCSS, and @borrow-ui is ready to be customized.
Create new components
Extend your UI library with custom components and use them in pages and MDX.
Commented code
Project's code is easy to understand and well commented.
Easy to maintain
Pages and components are structured in an easy and scalable way.

Page Example

Create website pages by writing MDX code instead of verbose HTML/JSX.
With MDX you can write Markdown files and use JSX components: every compoment you add to your library will be usable directly in the .mdx files.
If you need additional components for a specific section of the website, you can include them together with the library components and make them available as well.
The example shows how to setup a [slug].js file that will source the content from the mdx files inside acontent/blog folder.
A simple page looks like this:
---
title: Code Example
---

Hello! Welcome to my first blog post, created with mdx and borrow-ui.

This is how you start the development server for this website:

<div className="flex-center-center">
    <Terminal
        className="m-b-20 w-400 m-r-20 m-l-20"
        title="Next.js website"
        code="yarn dev"
        language="bash"
    />
</div>
Prepare the [slug].js page like this:
import path from 'path';
import React from 'react';
import Head from 'next/head';
import { MDXRemote } from 'next-mdx-remote';
import { MDXProvider } from '@mdx-js/react';

import * as borrowUi from '@borrow-ui/ui';
import { Terminal } from '../../components/common/Terminal';

import {
    generateGetStaticPaths,
    generateGetStaticProps
} from '../../core/mdx/mdx';
import { providerComponents } from '../../core/mdx/providerComponents';

const SOURCE_PATH = path.join(process.cwd(), 'content/blog');

// Extends components available in the mdx
const mdxComponents = { ...borrowUi, Terminal };
const { Title } = borrowUi; // use components here as well

const Content = ({ code, metadata }) => {
    return <>
        <Head>
            <title>Blog</title>
            <meta property="og:title" content="Blog" key="title" />
        </Head>
        <MDXProvider components={providerComponents}>
            <Title className="color-primary">{metadata.title}</Title>
            <MDXRemote {...code} components={mdxComponents} />
        </MDXProvider>
    </>
};

export const getStaticProps = generateGetStaticProps(SOURCE_PATH);
export const getStaticPaths = generateGetStaticPaths(SOURCE_PATH);
export default Content;

Get Started

Get started
cd packages/website-next;
yarn dev
Start developing your website/blog now is as simple as running two simple commands.
Enter the website package and run the development server!
Building the website only requires to change the command fromdev to build.
The build can then be hosted by yourself or using one of the many available services. For example, this website is hosted using Netlify.
Build
cd packages/website-next;
yarn build
Read the quick guide in the Blog section