);
}
export default function HomepageFeatures(): ReactNode {
return (
{FeatureList.map((props, idx) => (
))}
);
}
================================================
FILE: src/components/HomepageFeatures/styles.module.css
================================================
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}
================================================
FILE: src/css/custom.css
================================================
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap');
body {
font-family: "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, span, li, a {
font-family: "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
.menu__list-item-collapsible {
background: var(--ifm-menu-color-background-hover);
}
/* Show full card titles for better readability on mobile */
.card h2.text--truncate {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
@media (max-width: 768px) {
.card p.text--truncate {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
}
/* Avoid uneven heights on desktop */
.card {
height: 100%;
}
================================================
FILE: src/pages/index.module.css
================================================
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
================================================
FILE: src/pages/index.tsx
================================================
import type {ReactNode} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import Heading from '@theme/Heading';
import styles from './index.module.css';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
{siteConfig.title}
{siteConfig.tagline}
تصفح الدليل في 5 دقائق ⏱️
);
}
export default function Home(): ReactNode {
const {siteConfig} = useDocusaurusContext();
return (
);
}
================================================
FILE: src/pages/markdown-page.md
================================================
---
title: Markdown page example
---
# Markdown page example
You don't need React to write simple standalone pages.
================================================
FILE: static/.nojekyll
================================================
================================================
FILE: tsconfig.json
================================================
{
// This file is not used in compilation. It is here just for a nice editor experience.
"extends": "@docusaurus/tsconfig",
"compilerOptions": {
"baseUrl": "."
},
"exclude": [".docusaurus", "build"]
}