Add checks for docs (#362)

This commit is contained in:
Erik Vroon
2023-11-27 21:46:41 +01:00
committed by GitHub
parent 158bae0d19
commit a2cd12181d
17 changed files with 3164 additions and 237 deletions

View File

@@ -24,6 +24,10 @@ jobs:
run: yarn
working-directory: docs
- name: Run tests
run: yarn test-check
working-directory: docs
- name: Build docs
run: yarn build
working-directory: docs

View File

@@ -4,31 +4,37 @@
[![codecov](https://codecov.io/gh/evroon/bracket/branch/master/graph/badge.svg?token=YJL0DVPFFG)](https://codecov.io/gh/evroon/bracket)
[![backend](https://github.com/evroon/bracket/actions/workflows/backend.yml/badge.svg)](https://github.com/evroon/bracket/actions/workflows/backend.yml)
[![frontend](https://github.com/evroon/bracket/actions/workflows/frontend.yml/badge.svg)](https://github.com/evroon/bracket/actions/workflows/frontend.yml)
[![last commit](https://img.shields.io/github/last-commit/evroon/bracket)](https://img.shields.io/github/last-commit/evroon/bracket)
[![last
commit](https://img.shields.io/github/last-commit/evroon/bracket)](https://img.shields.io/github/last-commit/evroon/bracket)
[![release](https://img.shields.io/github/v/release/evroon/bracket)](https://img.shields.io/github/v/release/evroon/bracket)
<br/>
Tournament system meant to be easy to use.
Bracket is written in async Python (with [FastAPI](https://fastapi.tiangolo.com)) and [Next.js](https://nextjs.org/) as frontend using the [Mantine](https://mantine.dev/) library.
Tournament system meant to be easy to use. Bracket is written in async Python (with
[FastAPI](https://fastapi.tiangolo.com)) and [Next.js](https://nextjs.org/) as frontend using the
[Mantine](https://mantine.dev/) library.
It has the following features:
It has the following features:
- Supports **single elimination, round-robin and swiss** formats.
- **Build your tournament structure** with multiple stages that can have multiple groups/brackets in them.
- **Build your tournament structure** with multiple stages that can have multiple groups/brackets in
them.
- **Drag-and-drop matches** to different courts or reschedule them to another start time.
- Various **dashboard pages** are available that can be presented to the public, customized with a logo.
- Various **dashboard pages** are available that can be presented to the public, customized with a
logo.
- Create/update **teams**, and add players to **teams**.
- Create **multiple clubs**, with **multiple tournaments** per club.
- **Swiss tournaments** can be handled dynamically, with automatic scheduling of matches.
### Preview
<img alt="" src="docs/static/img/schedule_preview.png" width="50%" /><img alt="" src="docs/static/img/planning_preview.png" width="50%" />
<img alt="" src="docs/static/img/builder_preview.png" width="50%" /><img alt="" src="docs/static/img/standings_preview.png" width="50%" />
<img alt="" src="docs/static/img/schedule_preview.png" width="50%" /><img alt=""
src="docs/static/img/planning_preview.png" width="50%" /> <img alt=""
src="docs/static/img/builder_preview.png" width="50%" /><img alt=""
src="docs/static/img/standings_preview.png" width="50%" />
# Quickstart
To quickly run bracket to see how it works, clone it and run `docker-compose up`:
```shell
```bash
git clone git@github.com:evroon/bracket.git
cd bracket
sudo docker-compose up -d
@@ -39,20 +45,20 @@ be able to view bracket at http://localhost:3000. You can log in with username `
and password `aeGhoe1ahng2Aezai0Dei6Aih6dieHoo`.
To insert dummy rows into the database, run:
```shell
```bash
sudo docker exec bracket-backend pipenv run ./cli.py create-dev-db
```
# Setup
## Database
First create a `bracket` cluster:
```shell
```bash
sudo pg_createcluster -u postgres -p 5532 13 bracket
pg_ctlcluster 13 bracket start
```
Subsequently, create a new `bracket_dev` database:
```shell
```bash
sudo -Hu postgres psql -p 5532
CREATE USER bracket_dev WITH PASSWORD 'bracket_dev';
CREATE DATABASE bracket_dev OWNER bracket_dev;
@@ -68,20 +74,22 @@ The database URL can be specified per environment in the `.env` files (see [conf
Copy [ci.env](backend/ci.env) to `prod.env` and fill in the values:
- `PG_DSN`: The URL of the PostgreSQL database
- `JWT_SECRET`: Create a random secret using `openssl rand -hex 32`
- `CORS_ORIGINS` and `CORS_ORIGIN_REGEX`: Specify allowed frontend domain names for CORS (see the [FastAPI docs](https://fastapi.tiangolo.com/tutorial/cors/))
- `ADMIN_EMAIL` and `ADMIN_PASSWORD`: The credentials of the admin user, which is created when initializing the database
- `CORS_ORIGINS` and `CORS_ORIGIN_REGEX`: Specify allowed frontend domain names for CORS (see the
[FastAPI docs](https://fastapi.tiangolo.com/tutorial/cors/))
- `ADMIN_EMAIL` and `ADMIN_PASSWORD`: The credentials of the admin user, which is created when
initializing the database
## Running the frontend and backend
The following starts the frontend and backend for local development:
### Frontend
```
```bash
cd frontend
yarn run dev
```
### Backend
```
```bash
cd backend
pipenv install -d
pipenv shell

View File

@@ -0,0 +1,23 @@
{
"config": {
"default": true,
"line-length": {
"strict": true,
"code_blocks": false,
"line_length": 100
},
// part of the markdownlint-rule-relative-links plugin
"relative-links": true
},
"globs": [
"**/*.{md,mdx}"
],
"ignores": [
"node_modules",
"static"
],
"customRules": [
"markdownlint-rule-relative-links"
]
}

View File

@@ -1,41 +1,45 @@
# Website
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website
generator.
### Installation
## Installation
```
$ yarn
```bash
yarn
```
### Local Development
## Local Development
```
$ yarn start
```bash
yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
This command starts a local development server and opens up a browser window. Most changes are
reflected live without having to restart the server.
### Build
## Build
```
$ yarn build
```bash
yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
This command generates static content into the `build` directory and can be served using any static
contents hosting service.
### Deployment
## Deployment
Using SSH:
```
$ USE_SSH=true yarn deploy
```bash
USE_SSH=true yarn deploy
```
Not using SSH:
```
$ GIT_USER=<Your GitHub username> yarn deploy
```bash
GIT_USER=<Your GitHub username> yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
If you are using GitHub pages for hosting, this command is a convenient way to build the website and
push to the `gh-pages` branch.

View File

@@ -1,3 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
};

View File

@@ -5,17 +5,24 @@ sidebar_position: 2
# Configuration
Copy `ci.env` to `prod.env` and fill in the values:
- `PG_DSN`: The URL of the PostgreSQL database
- `JWT_SECRET`: Create a random secret using `openssl rand -hex 32`
- `CORS_ORIGINS` and `CORS_ORIGIN_REGEX`: Specify allowed frontend domain names for CORS (see the [FastAPI docs](https://fastapi.tiangolo.com/tutorial/cors/))
- `ADMIN_EMAIL` and `ADMIN_PASSWORD`: The credentials of the admin user, which is created when initializing the database
- `CORS_ORIGINS` and `CORS_ORIGIN_REGEX`: Specify allowed frontend domain names for CORS (see the
[FastAPI docs](https://fastapi.tiangolo.com/tutorial/cors/))
- `ADMIN_EMAIL` and `ADMIN_PASSWORD`: The credentials of the admin user, which is created when
initializing the database
- `SENTRY_DSN`: The [Sentry](https://sentry.io) DSN for monitoring and error tracking
- `BASE_URL`: The base url of the API used for SSO
- `ALLOW_USER_REGISTRATION`: Can be used to disallow user registration in the web app, currently used for production while bracket is still in beta
- `ALLOW_INSECURE_HTTP_SSO`: Should not be used in production. Allows use of INSECURE requests for SSO auth.
- `ALLOW_USER_REGISTRATION`: Can be used to disallow user registration in the web app, currently
used for production while bracket is still in beta
- `ALLOW_INSECURE_HTTP_SSO`: Should not be used in production. Allows use of INSECURE requests for
SSO auth.
## Example configuration file
This is an example of how the config file should look like:
```bash
PG_DSN='postgresql://bracket_ci:bracket_ci@localhost:5532/bracket_ci'
JWT_SECRET='60eed5c5dc7a919b8595a23d6c42ddd8274e4feea651dc028d9bee495bbb9acd'

View File

@@ -3,30 +3,41 @@ sidebar_position: 1
---
# Installation
This guide explains how to run Bracket without Docker. If you quickly want to get up and running, please read [quickstart.md](quickstart.md).
This guide explains how to run Bracket without Docker. If you quickly want to get up and running,
please read [quickstart.md](quickstart.md).
## Database
First create a `bracket` cluster:
```bash
sudo pg_createcluster -u postgres -p 5532 13 bracket
pg_ctlcluster 13 bracket start
```
Subsequently, create a new `bracket_dev` database. First connect via `sudo -Hu postgres psql -p 5532`, and then run:
Subsequently, create a new `bracket_dev` database. First connect via `sudo -Hu postgres psql -p
5532`, and then run:
```sql
CREATE USER bracket_dev WITH PASSWORD 'bracket_dev';
CREATE DATABASE bracket_dev OWNER bracket_dev;
```
You can do the same but replace the user and database name with:
- `bracket_ci`: for running tests
- `bracket_prod`: for a production database
The database URL can be specified per environment in the `.env` files (see [config](#config)).
The database URL can be specified per environment in the `.env` files (see
[config](configuration.md)).
## Running the frontend and backend
The following starts the frontend and backend for local development:
### Frontend
```bash
cd frontend
yarn
@@ -34,6 +45,7 @@ npm run dev
```
### Backend
```bash
cd backend
pipenv install -d

View File

@@ -1,9 +1,11 @@
---
sidebar_position: 2
sidebar_position: 0
---
# Quickstart
To quickly run bracket to see how it works, clone it and run `docker-compose up`:
```bash
git clone git@github.com:evroon/bracket.git
cd bracket
@@ -11,10 +13,11 @@ sudo docker-compose up -d
```
This will start the backend and frontend of Bracket, as well as a postgres instance. You should now
be able to view bracket at http://localhost:3000. You can log in with username `test@example.org`
be able to view bracket at `http://localhost:3000`. You can log in with username `test@example.org`
and password `aeGhoe1ahng2Aezai0Dei6Aih6dieHoo`.
To insert dummy rows into the database, run:
```shell
sudo docker exec bracket-backend pipenv run ./cli.py create-dev-db
```
```

View File

@@ -9,7 +9,9 @@ is written in async Python (with [FastAPI](https://fastapi.tiangolo.com)) and
[Next.js](https://nextjs.org/) as frontend using the [Mantine](https://mantine.dev/) library.
## Overview of features
It has the following features:
- Supports **single elimination, round-robin and swiss** formats.
- **Build your tournament structure** with multiple stages that can have multiple groups/brackets in
them.
@@ -21,6 +23,7 @@ It has the following features:
- **Swiss tournaments** can be handled dynamically, with automatic scheduling of matches.
## Why does this exist?
There are plenty of tournament systems to be found online. So why does Bracket exist?
**Firstly**, there are **no complete open-source tournament systems to be found** [on
@@ -38,4 +41,5 @@ starts with Swiss and determines a winner based on a knockoff (elimination) stag
experience to a project with a real purpose.
## Quickstart
To get started, follow the steps described in [quickstart](getting-started/quickstart.md)

View File

@@ -1,122 +1,122 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const {themes} = require('prism-react-renderer');
const { themes } = require("prism-react-renderer");
const lightCodeTheme = themes.github;
const darkCodeTheme = themes.dracula;
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Bracket',
tagline: 'Free and open source tournament scheduling system',
favicon: 'img/logo.svg',
title: "Bracket",
tagline: "Free and open source tournament scheduling system",
favicon: "img/logo.svg",
// Set the production url of your site here
url: 'https://your-docusaurus-test-site.com',
url: "https://your-docusaurus-test-site.com",
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: '/bracket/',
baseUrl: "/bracket/",
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'evroon', // Usually your GitHub org/user name.
projectName: 'bracket', // Usually your repo name.
organizationName: "evroon", // Usually your GitHub org/user name.
projectName: "bracket", // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
defaultLocale: "en",
locales: ["en"],
},
presets: [
[
'classic',
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
sidebarPath: require.resolve("./sidebars.js"),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
customCss: require.resolve("./src/css/custom.css"),
},
}),
],
],
plugins: [require.resolve('docusaurus-lunr-search')],
plugins: [require.resolve("docusaurus-lunr-search")],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
// Replace with your project's social card
image: 'img/logo.svg',
image: "img/logo.svg",
navbar: {
title: 'Bracket',
title: "Bracket",
logo: {
alt: 'Bracket Logo',
src: 'img/logo.svg',
alt: "Bracket Logo",
src: "img/logo.svg",
},
items: [
{
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: 'Docs',
type: "docSidebar",
sidebarId: "tutorialSidebar",
position: "left",
label: "Docs",
},
{
href: 'https://github.com/evroon/bracket',
label: 'GitHub',
position: 'right',
href: "https://github.com/evroon/bracket",
label: "GitHub",
position: "right",
},
],
},
colorMode: {
defaultMode: 'dark',
defaultMode: "dark",
respectPrefersColorScheme: false,
disableSwitch: true
disableSwitch: true,
},
footer: {
style: 'dark',
style: "dark",
links: [
{
title: 'Docs',
title: "Docs",
items: [
{
label: 'Introduction',
to: '/docs/intro',
label: "Introduction",
to: "/docs/intro",
},
{
label: 'Configuration',
to: '/docs/getting-started/configuration',
label: "Configuration",
to: "/docs/getting-started/configuration",
},
],
},
{
title: 'More',
title: "More",
items: [
{
label: 'GitHub',
href: 'https://github.com/evroon/bracket',
label: "GitHub",
href: "https://github.com/evroon/bracket",
},
{
label: 'Changelog',
href: 'https://github.com/evroon/bracket/releases',
label: "Changelog",
href: "https://github.com/evroon/bracket/releases",
},
],
},
@@ -126,7 +126,7 @@ const config = {
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: ['bash', 'diff', 'json'],
additionalLanguages: ["bash", "diff", "json"],
},
}),
};

View File

@@ -11,7 +11,11 @@
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
"write-heading-ids": "docusaurus write-heading-ids",
"prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx}\"",
"prettier:write": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
"test": "yarn run prettier:write && yarn run markdownlint-cli2 --fix",
"test-check": "yarn run prettier:check && yarn run markdownlint-cli2"
},
"dependencies": {
"@docusaurus/core": "^3.0.0",
@@ -33,10 +37,36 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.22.17",
"@next/eslint-plugin-next": "^13.4.19",
"@docusaurus/module-type-aliases": "^3.0.0",
"@trivago/prettier-plugin-sort-imports": "^4.2.0",
"@types/jest": "^29.5.4",
"@types/node": "^20.6.0",
"@types/react": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^6.6.0",
"@typescript-eslint/parser": "^6.6.0",
"babel-loader": "^9.1.3",
"eslint": "^8.49.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-mantine": "^2.0.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jest": "^27.2.3",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-testing-library": "^6.0.1",
"jest": "^29.6.4",
"jest-environment-jsdom": "^29.6.4",
"markdownlint-cli2": "^0.11.0",
"markdownlint-rule-relative-links": "^2.1.1",
"postcss": "^8.4.31",
"postcss-preset-mantine": "^1.11.0",
"postcss-simple-vars": "^7.0.1"
"postcss-simple-vars": "^7.0.1",
"prettier": "^3.0.3",
"ts-jest": "^29.1.1",
"typescript": "^5.2.2"
},
"browserslist": {
"production": [

View File

@@ -14,7 +14,7 @@
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
// But you can create a sidebar manually
/*

View File

@@ -1,22 +1,28 @@
import { Container, Text, Button, Group } from '@mantine/core';
import { GithubIcon } from '@mantinex/dev-icons';
import classes from './styles.module.css';
import React from 'react';
import { Container, Text, Button, Group } from "@mantine/core";
import { GithubIcon } from "@mantinex/dev-icons";
import classes from "./styles.module.css";
import React from "react";
export function HeroTitle() {
return (
<div className={classes.wrapper}>
<Container maxSize={'400px'} className={classes.inner}>
<Container maxSize={"400px"} className={classes.inner}>
<h1 className={classes.title}>
Free and open source{' '}
<Text component="span" variant="gradient" gradient={{ from: 'indigo', to: '#674ad6' }} inherit>
Free and open source{" "}
<Text
component="span"
variant="gradient"
gradient={{ from: "indigo", to: "#674ad6" }}
inherit
>
tournament scheduling
</Text>{' '}
</Text>{" "}
system
</h1>
<Text className={classes.description} color="dimmed">
Build tournament setups, add teams, schedule matches, keep track of scores and present ranking live to the public.
Build tournament setups, add teams, schedule matches, keep track of
scores and present ranking live to the public.
</Text>
<Group className={classes.controls}>
@@ -24,8 +30,10 @@ export function HeroTitle() {
size="xl"
className={classes.control}
variant="gradient"
gradient={{ from: 'indigo', to: '#674ad6' }}
onClick={() => {open('docs/getting-started/quickstart', '_self')}}
gradient={{ from: "indigo", to: "#674ad6" }}
onClick={() => {
open("docs/getting-started/quickstart", "_self");
}}
>
Get started
</Button>
@@ -44,4 +52,4 @@ export function HeroTitle() {
</Container>
</div>
);
}
}

View File

@@ -1,24 +1,42 @@
import {Container, Image} from '@mantine/core';
import React from 'react';
import {Carousel} from "@mantine/carousel";
import { Container, Image } from "@mantine/core";
import React from "react";
import { Carousel } from "@mantine/carousel";
export function HomeCarousel() {
return (
<Container width={'100%'} mb="md">
<Carousel
withIndicators
slideSize={'100%'}
slideGap="md"
loop
align="center"
slidesToScroll={1}
>
<Carousel.Slide><Image src={require('@site/static/img/builder_preview.png').default} /></Carousel.Slide>
<Carousel.Slide><Image src={require('@site/static/img/planning_preview.png').default} /></Carousel.Slide>
<Carousel.Slide><Image src={require('@site/static/img/schedule_preview.png').default} /></Carousel.Slide>
<Carousel.Slide><Image src={require('@site/static/img/courts_preview.png').default} /></Carousel.Slide>
<Carousel.Slide><Image src={require('@site/static/img/standings_preview.png').default} /></Carousel.Slide>
</Carousel>
<Container width={"100%"} mb="md">
<Carousel
withIndicators
slideSize={"100%"}
slideGap="md"
loop
align="center"
slidesToScroll={1}
>
<Carousel.Slide>
<Image
src={require("@site/static/img/builder_preview.png").default}
/>
</Carousel.Slide>
<Carousel.Slide>
<Image
src={require("@site/static/img/planning_preview.png").default}
/>
</Carousel.Slide>
<Carousel.Slide>
<Image
src={require("@site/static/img/schedule_preview.png").default}
/>
</Carousel.Slide>
<Carousel.Slide>
<Image src={require("@site/static/img/courts_preview.png").default} />
</Carousel.Slide>
<Carousel.Slide>
<Image
src={require("@site/static/img/standings_preview.png").default}
/>
</Carousel.Slide>
</Carousel>
</Container>
);
}

View File

@@ -1,33 +1,45 @@
import {Card, Container, rem, SimpleGrid, Text, useMantineTheme,} from '@mantine/core';
import {IconBrandOpenSource, IconCloud, IconTool, IconUser} from '@tabler/icons-react';
import classes from '../pages/index.module.css';
import React from 'react';
import {
Card,
Container,
rem,
SimpleGrid,
Text,
useMantineTheme,
} from "@mantine/core";
import {
IconBrandOpenSource,
IconCloud,
IconTool,
IconUser,
} from "@tabler/icons-react";
import classes from "../pages/index.module.css";
import React from "react";
const mockdata = [
{
title: 'Open-source and free',
title: "Open-source and free",
description:
'Bracket is fully open source and free to use, licensed under the MIT license.',
"Bracket is fully open source and free to use, licensed under the AGPL-3.0 license.",
icon: IconBrandOpenSource,
},
{
title: 'Flexible',
title: "Flexible",
description:
'Bracket supports the standard tournament types, teams can be added/changed\n' +
' during the tournament and new matches can be scheduled dynamically.',
"Bracket supports the standard tournament types, teams can be added/changed\n" +
" during the tournament and new matches can be scheduled dynamically.",
icon: IconTool,
},
{
title: 'Easy to use',
title: "Easy to use",
description:
'The UI is meant to be easy to use while providing maximum flexibility.',
"The UI is meant to be easy to use while providing maximum flexibility.",
icon: IconUser,
},
{
title: 'Self-hosted',
title: "Self-hosted",
description:
'You are free to host it yourself. Setup is easy; either run it in Docker or run it the\n' +
' natively on the host. The only external dependency is a PostgreSQL database.',
"You are free to host it yourself. Setup is easy; either run it in Docker or run it the\n" +
" natively on the host. The only external dependency is a PostgreSQL database.",
icon: IconCloud,
},
];
@@ -35,11 +47,17 @@ const mockdata = [
export default function FeaturesCards() {
const theme = useMantineTheme();
const features = mockdata.map((feature) => (
<Card key={feature.title} shadow="md" radius="md" className={classes.card} padding="xl">
<Card
key={feature.title}
shadow="md"
radius="md"
className={classes.card}
padding="xl"
>
<feature.icon
style={{ width: rem(50), height: rem(50) }}
stroke={2}
color={'#674ad6'}
color={"#674ad6"}
/>
<Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
{feature.title}
@@ -57,4 +75,4 @@ export default function FeaturesCards() {
</SimpleGrid>
</Container>
);
}
}

View File

@@ -1,39 +1,36 @@
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import {Container, createTheme, MantineProvider, Title} from "@mantine/core";
import '@mantine/core/styles.css';
import '@mantine/carousel/styles.css';
import {HeroTitle} from "../components/HeroTitle";
import {HomeCarousel} from "../components/HomeCarousel";
import React from "react";
import Layout from "@theme/Layout";
import { Container, createTheme, MantineProvider, Title } from "@mantine/core";
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import { HeroTitle } from "../components/HeroTitle";
import { HomeCarousel } from "../components/HomeCarousel";
import classes from "./index.module.css";
import FeaturesCards from "../components/feature_cards";
const theme = createTheme({});
export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
<MantineProvider theme={theme} defaultColorScheme="dark">
<Layout
title={''}
description="Description will go into a meta tag in <head />">
<HeroTitle/>
<main>
<Title order={2} className={classes.title} ta="center" mt="lg">
Features
</Title>
<FeaturesCards/>
<Container mt="lg" px="0px">
<Title order={2} className={classes.title} ta="center" my="lg">
Preview
</Title>
<HomeCarousel/>
</Container>
</main>
</Layout>
<Layout
title={""}
description="Description will go into a meta tag in <head />"
>
<HeroTitle />
<main>
<Title order={2} className={classes.title} ta="center" mt="lg">
Features
</Title>
<FeaturesCards />
<Container mt="lg" px="0px">
<Title order={2} className={classes.title} ta="center" my="lg">
Preview
</Title>
<HomeCarousel />
</Container>
</main>
</Layout>
</MantineProvider>
);
}

View File

File diff suppressed because it is too large Load Diff