mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
docs: migrating dev docs to docusaurus :) (#6073)
* docs: migrating existing docs to docosaraus :) * log broken links * lint :p * fix * divide the doc into diff categories * fix * order sidebars and more * fix lint * point to installation * making docs better :) * fix * renaming git * renaming git * fix links * fix * update readme * fix * resolve duplicate url and make /docs as base url * fix * move main docs as well * making docs better * support mdx * update og * fix title * upgrade docusarus to stable version * use draculla theme * fix * make entire sidebar collapsable * live editor for footer wohoo * render excalidraw only on client to fix the prod build * migrate MainMenu to live editor too :) * lint :p * cleanup integration and use live editor and tabs * fix * Add welcome screen doc * Live Collaboration comp docs * Add collaborator example * Add example * add more * remove isCollaborating * Rewrite ref and move to sidebar * change color of links inside pre * add initial data * fix lint * Add styling * fix lint * Add example for customizing styles * fix lint * fix * fix lint * Add link to livecollabtrigger * fix * rewrite UIOptions to sidebar * move initialdata to sidebar * move render props to sidebar and rewrite renderTopRightUI and renderCustomStats * rewrite renderSidebar * update og * update url for testing * fix url * update readme * fix style * tweaks * Add highlight comp to highlight text * Add bash syntax highlight * fix * tweaks * fix * rewrite export utilities * fix restore * rewrite utils * move constants to sidebar * update readme * add copyright * fix links style * Add linkedin * tweaks * rename package to @excalidraw/excalidraw * enable algolia with dummy creds * tweaks to integration doc * tweak WelcomeScreen docs to reflect upcoming API changes * tweak components intro * tweak nomenclature * fix admonition * rename `components` sidebar item and change order of components list * uncollapse package section in sidebar * show level 4 haeadings in TOC * remove algolia * remove unused assets * capitalize C * tweak * rename components to App * rename components -> children-components in the routes * move notable used tools to intro * update MainMenu docs with `onSelect` preventDefault behavior * change sidebar label for children components * use code * tweak README & docs intro * tweak package development doc * make scrollbar gutter stable * tweak api intro * add admonition for export utils * use next * wip * wip * make excalidraw examples use current color theme & prefer system * fix welcomescreen docs * use latest temp release * fix component order * revert wip changes * use next * tweak * increase height to fix welcome screen hint * tweak editor height * update excal version * wrap Excal with forwardRef to fix refs * migrate contributing.md * fix broken links --------- Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi
GitHub
parent
f68f4cb9e0
commit
f23cdc47ee
49 changed files with 4397 additions and 2324 deletions
15
dev-docs/src/components/Highlight.js
Normal file
15
dev-docs/src/components/Highlight.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
export default function Highlight({ children }) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: "#7874e8",
|
||||
borderRadius: "2px",
|
||||
color: "#fff",
|
||||
padding: "0.2rem",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,11 +14,13 @@
|
|||
--ifm-color-primary-lighter: #5b57d1;
|
||||
--ifm-color-primary-lightest: #5b57d1;
|
||||
--ifm-code-font-size: 95%;
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme="dark"] {
|
||||
--ifm-color-primary: #5650f0;
|
||||
--ifm-color-primary: #8784e3;
|
||||
--ifm-color-primary-dark: #4b46d8;
|
||||
--ifm-color-primary-darker: #4b46d8;
|
||||
--ifm-color-primary-darkest: #3e39be;
|
||||
|
|
@ -41,3 +43,59 @@
|
|||
[data-theme="dark"] .navbar__logo {
|
||||
filter: invert(93%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
pre a {
|
||||
color: #5dccff;
|
||||
|
||||
&:hover {
|
||||
color: #8fd3f3;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
height: 40px;
|
||||
max-width: 200px;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
background: #70b1ec;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.custom-styles .excalidraw {
|
||||
--color-primary: #fcc6d9;
|
||||
--color-primary-darker: #f783ac;
|
||||
--color-primary-darkest: #e64980;
|
||||
--color-primary-light: #f2a9c4;
|
||||
}
|
||||
|
||||
.custom-styles .excalidraw.theme--dark {
|
||||
--color-primary: #d494aa;
|
||||
--color-primary-darker: #d64c7e;
|
||||
--color-primary-darkest: #e86e99;
|
||||
--color-primary-light: #dcbec9;
|
||||
}
|
||||
|
||||
/* The global css conflicts with Excal css hence overriding */
|
||||
|
||||
.excalidraw .context-menu-item__shortcut {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
.excalidraw .Stats table td,
|
||||
.excalidraw .Stats table th,
|
||||
.excalidraw .Stats table tr {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
.excalidraw .Stats .close {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.excalidraw .Stats table {
|
||||
display: table;
|
||||
}
|
||||
1230
dev-docs/src/initialData.js
Normal file
1230
dev-docs/src/initialData.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,42 +0,0 @@
|
|||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import styles from "./index.module.css";
|
||||
import HomepageFeatures from "@site/src/components/Homepage";
|
||||
|
||||
function HomepageHeader() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx("hero hero--primary", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<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/get-started"
|
||||
>
|
||||
Get started
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,10 +14,7 @@ function HomepageHeader() {
|
|||
<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/get-started"
|
||||
>
|
||||
<Link className="button button--secondary button--lg" to="/docs">
|
||||
Get started
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -27,12 +24,8 @@ function HomepageHeader() {
|
|||
}
|
||||
|
||||
export default function Home() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />"
|
||||
>
|
||||
<Layout description="For Excalidraw contributors or those integrating the Excalidraw editor">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
|
|
|
|||
11
dev-docs/src/theme/MDXComponents.js
Normal file
11
dev-docs/src/theme/MDXComponents.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// Import the original mapper
|
||||
import MDXComponents from "@theme-original/MDXComponents";
|
||||
import Highlight from "@site/src/components/Highlight";
|
||||
|
||||
export default {
|
||||
// Re-use the default mapping
|
||||
...MDXComponents,
|
||||
// Map the "highlight" tag to our <Highlight /> component!
|
||||
// `Highlight` will receive all props that were passed to `highlight` in MDX
|
||||
highlight: Highlight,
|
||||
};
|
||||
29
dev-docs/src/theme/ReactLiveScope/index.js
Normal file
29
dev-docs/src/theme/ReactLiveScope/index.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React from "react";
|
||||
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
|
||||
import initialData from "@site/src/initialData";
|
||||
import { useColorMode } from "@docusaurus/theme-common";
|
||||
|
||||
let ExcalidrawComp = {};
|
||||
if (ExecutionEnvironment.canUseDOM) {
|
||||
ExcalidrawComp = require("@excalidraw/excalidraw");
|
||||
}
|
||||
const Excalidraw = React.forwardRef((props, ref) => {
|
||||
const { colorMode } = useColorMode();
|
||||
return <ExcalidrawComp.Excalidraw theme={colorMode} {...props} ref={ref} />;
|
||||
});
|
||||
// Add react-live imports you need here
|
||||
const ExcalidrawScope = {
|
||||
React,
|
||||
...React,
|
||||
Excalidraw,
|
||||
Footer: ExcalidrawComp.Footer,
|
||||
useDevice: ExcalidrawComp.useDevice,
|
||||
MainMenu: ExcalidrawComp.MainMenu,
|
||||
WelcomeScreen: ExcalidrawComp.WelcomeScreen,
|
||||
LiveCollaborationTrigger: ExcalidrawComp.LiveCollaborationTrigger,
|
||||
Sidebar: ExcalidrawComp.Sidebar,
|
||||
exportToCanvas: ExcalidrawComp.exportToCanvas,
|
||||
initialData,
|
||||
};
|
||||
|
||||
export default ExcalidrawScope;
|
||||
Loading…
Add table
Add a link
Reference in a new issue