mirror of
https://github.com/SrIzan10/sern-website.git
synced 2026-05-01 11:05:20 +00:00
feat: start merge
This commit is contained in:
20
.gitignore
vendored
Normal file
20
.gitignore
vendored
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# Dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# Production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# Generated files
|
||||||
|
.docusaurus
|
||||||
|
.cache-loader
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
7
.idea/discord.xml
generated
Normal file
7
.idea/discord.xml
generated
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="DiscordProjectSettings">
|
||||||
|
<option name="show" value="PROJECT_FILES" />
|
||||||
|
<option name="description" value="" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectRootManager">
|
||||||
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/website.iml" filepath="$PROJECT_DIR$/.idea/website.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
9
.idea/website.iml
generated
Normal file
9
.idea/website.iml
generated
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||||
|
};
|
||||||
137
docusaurus.config.js
Normal file
137
docusaurus.config.js
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
// @ts-check
|
||||||
|
// Note: type annotations allow type checking and IDEs autocompletion
|
||||||
|
|
||||||
|
const lightCodeTheme = require('prism-react-renderer/themes/nightOwlLight');
|
||||||
|
const darkCodeTheme = require('prism-react-renderer/themes/oceanicNext');
|
||||||
|
|
||||||
|
/** @type {import('@docusaurus/types').Config} */
|
||||||
|
const config = {
|
||||||
|
title: 'Official sern documentation',
|
||||||
|
tagline: '100% api coverage',
|
||||||
|
url: 'https://your-docusaurus-test-site.com',
|
||||||
|
baseUrl: '/',
|
||||||
|
onBrokenLinks: 'throw',
|
||||||
|
onBrokenMarkdownLinks: 'warn',
|
||||||
|
favicon: 'static/img/favicon.ico',
|
||||||
|
|
||||||
|
// GitHub pages deployment config.
|
||||||
|
// If you aren't using GitHub pages, you don't need these.
|
||||||
|
organizationName: 'sern-handler', // Usually your GitHub org/user name.
|
||||||
|
projectName: '@sern/handler', // Usually your repo name.
|
||||||
|
|
||||||
|
// 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', 'fr'],
|
||||||
|
},
|
||||||
|
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'classic',
|
||||||
|
/** @type {import('@docusaurus/preset-classic').Options} */
|
||||||
|
({
|
||||||
|
docs: {
|
||||||
|
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/',
|
||||||
|
},
|
||||||
|
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/',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
customCss: require.resolve('./src/css/custom.css'),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
|
||||||
|
themeConfig:
|
||||||
|
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
|
||||||
|
({
|
||||||
|
navbar: {
|
||||||
|
title: 'sern docs',
|
||||||
|
logo: {
|
||||||
|
alt: 'My Site Logo',
|
||||||
|
src: 'img/favicon.ico',
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: 'doc',
|
||||||
|
docId: 'intro',
|
||||||
|
position: 'left',
|
||||||
|
label: 'Tutorial',
|
||||||
|
},
|
||||||
|
{to: '/blog', label: 'Blog', position: 'left'},
|
||||||
|
{
|
||||||
|
href: 'https://github.com/sern-handler',
|
||||||
|
label: 'GitHub',
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
style: 'dark',
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
title: 'Docs',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Tutorial',
|
||||||
|
to: '/docs/intro',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Community',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Stack Overflow',
|
||||||
|
href: 'https://stackoverflow.com/questions/tagged/sern-handler',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Discord',
|
||||||
|
href: 'https://discord.gg/DwbF5H5JgQ',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'More',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Blog',
|
||||||
|
to: '/blog',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'GitHub',
|
||||||
|
href: 'https://github.com/sern-handler',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
copyright: `Built with Love ❤️`,
|
||||||
|
},
|
||||||
|
prism: {
|
||||||
|
theme: lightCodeTheme,
|
||||||
|
darkTheme: darkCodeTheme,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
plugins : [
|
||||||
|
[
|
||||||
|
'docusaurus-plugin-typedoc',
|
||||||
|
{
|
||||||
|
entryPoints: ['../sernHandlerV2/src/index.ts'],
|
||||||
|
tsconfig: '../sernHandlerV2/tsconfig-base.json',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
22157
package-lock.json
generated
Normal file
22157
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
45
package.json
45
package.json
@@ -1,10 +1,51 @@
|
|||||||
{
|
{
|
||||||
"name": "@sern/website",
|
"name": "@sern/website",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Sern's modern, clean and beginner friendly web interface",
|
"private": true,
|
||||||
|
"description": "Our modern, clean and beginner friendly web interface",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"docusaurus": "docusaurus",
|
||||||
|
"start": "docusaurus start",
|
||||||
|
"build": "docusaurus build",
|
||||||
|
"swizzle": "docusaurus swizzle",
|
||||||
|
"deploy": "docusaurus deploy",
|
||||||
|
"clear": "docusaurus clear",
|
||||||
|
"serve": "docusaurus serve",
|
||||||
|
"write-translations": "docusaurus write-translations",
|
||||||
|
"write-heading-ids": "docusaurus write-heading-ids",
|
||||||
|
"typedoc-json": "typedoc --json ../sern-community/docs.json --pretty --entryPoints ../sernHandlerV2/src/index.ts --tsconfig ../sernHandlerV2/tsconfig-base.json --excludeExternals"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@docusaurus/core": "2.0.0-rc.1",
|
||||||
|
"@docusaurus/preset-classic": "2.0.0-rc.1",
|
||||||
|
"@docusaurus/theme-search-algolia": "^2.0.0-rc.1",
|
||||||
|
"@mdx-js/react": "^1.6.22",
|
||||||
|
"clsx": "^1.2.1",
|
||||||
|
"prism-react-renderer": "^1.3.5",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@docusaurus/module-type-aliases": "2.0.0-rc.1",
|
||||||
|
"docusaurus-plugin-typedoc": "^0.17.5",
|
||||||
|
"typedoc": "^0.23.8",
|
||||||
|
"typedoc-plugin-markdown": "^3.13.4"
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.5%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.14"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
31
sidebars.js
Normal file
31
sidebars.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* Creating a sidebar enables you to:
|
||||||
|
- create an ordered group of docs
|
||||||
|
- render a sidebar for each doc of that group
|
||||||
|
- provide next/previous navigation
|
||||||
|
|
||||||
|
The sidebars can be generated from the filesystem, or explicitly defined here.
|
||||||
|
|
||||||
|
Create as many sidebars as you want.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// @ts-check
|
||||||
|
|
||||||
|
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
|
||||||
|
const sidebars = {
|
||||||
|
// By default, Docusaurus generates a sidebar from the docs folder structure
|
||||||
|
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
|
||||||
|
|
||||||
|
// But you can create a sidebar manually
|
||||||
|
/*
|
||||||
|
tutorialSidebar: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
label: 'Tutorial',
|
||||||
|
items: ['hello'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = sidebars;
|
||||||
65
src/components/HomepageFeatures/index.js
Normal file
65
src/components/HomepageFeatures/index.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
|
const FeatureList = [
|
||||||
|
{
|
||||||
|
title: 'Batteries included',
|
||||||
|
Svg: require('@site/static/img/battery-svgrepo-com.svg').default,
|
||||||
|
description: (
|
||||||
|
<>
|
||||||
|
Start up a new project or integrate in minutes.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Customizable',
|
||||||
|
Svg: require('@site/static/img/puzzle-svgrepo-com.svg').default,
|
||||||
|
description: (
|
||||||
|
<>
|
||||||
|
Extend or customize with community-based plugins to provide utilities, filters, and more.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Compact',
|
||||||
|
Svg: require('@site/static/img/typescript-svgrepo-com.svg').default,
|
||||||
|
description: (
|
||||||
|
<>
|
||||||
|
Uses modern and powerful tooling such as
|
||||||
|
<a href={'https://swc.rs/'}> swc</a>,
|
||||||
|
<a href={'https://tsup.egoist.dev/'}> tsup</a>,
|
||||||
|
<a href={'https://www.typescriptlang.org/'}> typescript</a>, and
|
||||||
|
<a href={'https://rxjs.dev/'}> rxjs</a> to future-proof and ensure project quality.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function Feature({Svg, title, description}) {
|
||||||
|
return (
|
||||||
|
<div className={clsx('col col--4')}>
|
||||||
|
<div className="text--center">
|
||||||
|
<Svg className={styles.featureSvg} role="img" />
|
||||||
|
</div>
|
||||||
|
<div className="text--center padding-horiz--md">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<p>{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HomepageFeatures() {
|
||||||
|
return (
|
||||||
|
<section className={styles.features}>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
{FeatureList.map((props, idx) => (
|
||||||
|
<Feature key={idx} {...props} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
src/components/HomepageFeatures/styles.module.css
Normal file
11
src/components/HomepageFeatures/styles.module.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureSvg {
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
38
src/css/custom.css
Normal file
38
src/css/custom.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* 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: #3d2d5e;
|
||||||
|
--ifm-color-primary-dark: #372955;
|
||||||
|
--ifm-color-primary-darker: #342650;
|
||||||
|
--ifm-color-primary-darkest: #2b2042;
|
||||||
|
--ifm-color-primary-light: #433267;
|
||||||
|
--ifm-color-primary-lighter: #46346c;
|
||||||
|
--ifm-color-primary-lightest: #3a2b59;
|
||||||
|
--ifm-background-color: #e7e6e8;
|
||||||
|
--ifm-code-font-size: 95%;
|
||||||
|
--docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.2);
|
||||||
|
--ifm-font-family-monospace: 'Fira Code', 'Meslo NGF', 'JetBrains Mono', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||||
|
'Courier New', monospace;
|
||||||
|
--ifm-font-family-base: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||||
|
--ifm-navbar-background-color : #ca7693
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||||
|
[data-theme='dark'] {
|
||||||
|
--ifm-color-primary: #f7dbf2;
|
||||||
|
--ifm-color-primary-dark: #efb5e4;
|
||||||
|
--ifm-color-primary-darker: #eaa2dd;
|
||||||
|
--ifm-color-primary-darkest: #de69c9;
|
||||||
|
--ifm-color-primary-light: #ffffff;
|
||||||
|
--ifm-color-primary-lighter: #ffffff;
|
||||||
|
--ifm-color-primary-lightest: #ffffff;
|
||||||
|
--docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.3);
|
||||||
|
--ifm-font-family-monospace: 'Fira Code', 'Meslo NGF', 'JetBrains Mono', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||||
|
'Courier New', monospace;
|
||||||
|
--ifm-navbar-background-color : #ca7693
|
||||||
|
}
|
||||||
42
src/pages/index.js
Normal file
42
src/pages/index.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import React 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 logo from '@site/static/img/sern-logo.png'
|
||||||
|
import styles from './index.module.css';
|
||||||
|
|
||||||
|
function HomepageHeader() {
|
||||||
|
const {siteConfig} = useDocusaurusContext();
|
||||||
|
return (
|
||||||
|
<header className={clsx('hero hero--primary-darker', styles.heroBanner)}>
|
||||||
|
<div className="container">
|
||||||
|
<img src={logo} alt="logo" style={{ height : '200px', width : '200px' }}/>
|
||||||
|
<h1 className="hero__title">{siteConfig.title}</h1>
|
||||||
|
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||||
|
<div className={styles.buttons}>
|
||||||
|
<Link
|
||||||
|
className="button button--secondary button--lg"
|
||||||
|
to="/docs/intro">
|
||||||
|
Setup - 5 min ⏱️
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const {siteConfig} = useDocusaurusContext();
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
title={`Hello from ${siteConfig.title}`}
|
||||||
|
description="Description will go into a meta tag in <head />">
|
||||||
|
<HomepageHeader />
|
||||||
|
<main>
|
||||||
|
<HomepageFeatures />
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
src/pages/index.module.css
Normal file
24
src/pages/index.module.css
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
7
src/pages/markdown-page.md
Normal file
7
src/pages/markdown-page.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Markdown page example
|
||||||
|
---
|
||||||
|
|
||||||
|
# Markdown page example
|
||||||
|
|
||||||
|
You don't need React to write simple standalone pages.
|
||||||
32
src/theme/CodeBlock/index.js
Normal file
32
src/theme/CodeBlock/index.js
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import React, {isValidElement} from 'react';
|
||||||
|
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||||
|
import ElementContent from '@theme/CodeBlock/Content/Element';
|
||||||
|
import StringContent from '@theme/CodeBlock/Content/String';
|
||||||
|
/**
|
||||||
|
* Best attempt to make the children a plain string so it is copyable. If there
|
||||||
|
* are react elements, we will not be able to copy the content, and it will
|
||||||
|
* return `children` as-is; otherwise, it concatenates the string children
|
||||||
|
* together.
|
||||||
|
*/
|
||||||
|
function maybeStringifyChildren(children) {
|
||||||
|
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
// The children is now guaranteed to be one/more plain strings
|
||||||
|
return Array.isArray(children) ? children.join('') : children;
|
||||||
|
}
|
||||||
|
export default function CodeBlock({children: rawChildren, ...props}) {
|
||||||
|
// The Prism theme on SSR is always the default theme but the site theme can
|
||||||
|
// be in a different mode. React hydration doesn't update DOM styles that come
|
||||||
|
// from SSR. Hence force a re-render after mounting to apply the current
|
||||||
|
// relevant styles.
|
||||||
|
const isBrowser = useIsBrowser();
|
||||||
|
const children = maybeStringifyChildren(rawChildren);
|
||||||
|
const CodeBlockComp =
|
||||||
|
typeof children === 'string' ? StringContent : ElementContent;
|
||||||
|
return (
|
||||||
|
<CodeBlockComp key={String(isBrowser)} {...props}>
|
||||||
|
{children}
|
||||||
|
</CodeBlockComp>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user