├── .dockerignore ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github ├── FUNDING.yml └── workflows │ └── publish.yml ├── .gitignore ├── .markdownlint.json ├── .prettierrc.json ├── .vale.ini ├── .vale ├── Docusaurus │ ├── Acronyms.yml │ └── Spelling.yml ├── Homotechsual │ ├── Dropdown.yml │ ├── FutureTense.yml │ ├── InclusionAbleism.yml │ ├── InclusionCultural.yml │ ├── InclusionGender.yml │ ├── LatinTerms.yml │ ├── MeaningfulLinkWords.yml │ ├── MergeConflictMarkers.yml │ ├── NonStandardQuotes.yml │ ├── OxfordComma.yml │ ├── Possessive.yml │ ├── Readability.yml │ ├── ReferenceLinks.yml │ ├── RelativeLinksDoubleSlashes.yml │ ├── Repetition.yml │ ├── Simplicity.yml │ ├── Spelling.yml │ ├── SubstitutionSuggestion.yml │ ├── SubstitutionWarning.yml │ └── UnclearAntecedent.yml ├── Microsoft │ ├── AMPM.yml │ ├── Accessibility.yml │ ├── Acronyms.yml │ ├── Adverbs.yml │ ├── Auto.yml │ ├── Avoid.yml │ ├── ComplexWords.yml │ ├── Contractions.yml │ ├── Dashes.yml │ ├── DateNumbers.yml │ ├── DateOrder.yml │ ├── Ellipses.yml │ ├── FirstPerson.yml │ ├── Foreign.yml │ ├── Gender.yml │ ├── GenderBias.yml │ ├── GeneralURL.yml │ ├── HeadingAcronyms.yml │ ├── HeadingColons.yml │ ├── HeadingPunctuation.yml │ ├── Hyphens.yml │ ├── Negative.yml │ ├── Ordinal.yml │ ├── OxfordComma.yml │ ├── Passive.yml │ ├── Percentages.yml │ ├── Quotes.yml │ ├── RangeFormat.yml │ ├── RangeTime.yml │ ├── Ranges.yml │ ├── Semicolon.yml │ ├── SentenceLength.yml │ ├── Spacing.yml │ ├── Suspended.yml │ ├── Terms.yml │ ├── URLFormat.yml │ ├── Units.yml │ ├── Vocab.yml │ ├── We.yml │ ├── Wordiness.yml │ └── meta.json ├── vale-json.tmpl └── vale.tmpl ├── .vscode ├── extensions.json ├── launch.json ├── ltex.dictionary.en-US.txt ├── ltex.hiddenFalsePositives.en-US.txt └── settings.json ├── .yarn └── install-state.gz ├── .yarnrc.yml ├── Caddyfile ├── LICENSE ├── README.md ├── babel.config.js ├── caddy.docker-compose.yml ├── contributing ├── customisations.mdx └── index.mdx ├── data ├── defaultvariables.css └── plugins │ ├── acrobit.auto-sidebars.yaml │ ├── addono.goatcounter.yaml │ ├── alt3.powershell.yaml │ ├── amd-nick.backlinks.yaml │ ├── atomicpages.module-alias.yaml │ ├── atomicpages.react-docgen.yaml │ ├── chatwoot.chatwoot.yaml │ ├── christian-bromann.github-code-block.yaml │ ├── cloud-annotations.openapi.yaml │ ├── daldridge.lunr.yaml │ ├── devbookhq.code-video.yaml │ ├── docusaurus.blog.yaml │ ├── docusaurus.debug.yaml │ ├── docusaurus.docs.yaml │ ├── docusaurus.google-analytics.yaml │ ├── docusaurus.google-gtag.yaml │ ├── docusaurus.ideal-image.yaml │ ├── docusaurus.npm2yarn.yaml │ ├── docusaurus.pages.yaml │ ├── docusaurus.pwa.yaml │ ├── gabrielcsapo.api-extractor.yaml │ ├── gabrielcsapo.image-zoom.yaml │ ├── gorhom.react-native.yaml │ ├── hhk7734.google-adsense.yaml │ ├── infracost.plausible.yaml │ ├── jlvandenhout.docs-editor.yaml │ ├── jonnynabors.dotenv.yaml │ ├── jy95.json-schema.yaml │ ├── karser.matomo.yaml │ ├── kohheepeace.mr-pdf.yaml │ ├── lukasgentele.gtm.yaml │ ├── moesif.moesif.yaml │ ├── moojing.post-generator.yaml │ ├── nonoroazoro.less.yaml │ ├── paloaltonetworks.openapi-docs.yaml │ ├── papercups-io.papercups.yaml │ ├── pomber.mdx-2.yaml │ ├── posthog.posthog.yaml │ ├── praveenn77.lunr-search.yaml │ ├── protobuffet.protobuffet.yaml │ ├── rohit-gohri.redocusaurus.yaml │ ├── saucelabs.github-code-block.yaml │ ├── sean-perkins.code-preview.yaml │ ├── silva-nick.portfolio.yaml │ ├── simologos.includes.yaml │ ├── stackql.hubspot.yaml │ ├── thangved.2dlive.yaml │ ├── webbertakken.content-gists.yaml │ ├── xiguaxigua.drawio.yaml │ ├── xiguaxigua.mindmap.yaml │ └── zhouzi.graphql.yaml ├── dev.docker-compose.yml ├── dockerfile ├── docs ├── component-library │ ├── _category_.yaml │ ├── existing │ │ ├── Admonitions │ │ │ └── index.mdx │ │ └── index.mdx │ ├── index.mdx │ └── new │ │ ├── Button │ │ └── index.mdx │ │ ├── Card │ │ └── index.mdx │ │ ├── Columns │ │ └── index.mdx │ │ ├── Imageonclick │ │ └── index.mdx │ │ ├── TimeLine │ │ └── index.mdx │ │ └── index.mdx ├── deployment │ ├── _category_.yaml │ ├── cloudflare-pages.mdx │ ├── docker │ │ ├── _partials │ │ │ ├── _composefile-caddy.mdx │ │ │ ├── _composefile-dev.mdx │ │ │ ├── _composefile-serve.mdx │ │ │ ├── _dockerfile-npm.mdx │ │ │ ├── _dockerfile-pnpm.mdx │ │ │ └── _dockerfile-yarn.mdx │ │ └── index.mdx │ └── index.mdx ├── design │ ├── _category_.yaml │ ├── admonitions │ │ ├── admonition-var-diagram.png │ │ ├── dark-mode-note.png │ │ ├── index.mdx │ │ ├── inspect-admonition.png │ │ ├── inspect-element.png │ │ ├── light-mode-note.png │ │ ├── note-admonition-html.png │ │ ├── note-css.png │ │ ├── note-custom-colors.png │ │ └── overriding-note-bg-color.gif │ ├── css │ │ ├── customtitle │ │ │ └── index.mdx │ │ ├── index.mdx │ │ └── variables │ │ │ └── index.mdx │ ├── icons │ │ ├── _category_.yaml │ │ ├── fontawesome │ │ │ └── index.mdx │ │ └── iconify │ │ │ └── index.mdx │ ├── index.mdx │ └── svg │ │ └── index.mdx ├── development │ ├── _category_.yaml │ ├── index.mdx │ ├── plugins │ │ ├── _category_.yaml │ │ └── getting-started │ │ │ ├── _category_.yaml │ │ │ └── index.md │ └── scripts │ │ ├── _category_.yaml │ │ └── numeration-system │ │ ├── _category_.yaml │ │ └── index.md ├── img │ └── Docusaurus.svg ├── index.mdx └── markdown │ ├── _category_.yaml │ └── definition-lists.mdx ├── docusaurus.community.code-workspace ├── docusaurus.config.ts ├── package.json ├── partials └── _swizzling.mdx ├── serve.docker-compose.yml ├── sidebars.js ├── src ├── assets │ └── Docusaurus.svg ├── components │ ├── Button │ │ └── index.tsx │ ├── Card │ │ ├── CardBody │ │ │ └── index.tsx │ │ ├── CardFooter │ │ │ └── index.tsx │ │ ├── CardHeader │ │ │ └── index.tsx │ │ ├── CardImage │ │ │ └── index.tsx │ │ └── index.tsx │ ├── ColorPreview │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── Column │ │ └── index.tsx │ ├── Columns │ │ └── index.tsx │ ├── DocusaurusButton │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── FocusButton │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── HomepageAnalytics │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── HomepageDocumentation │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── HomepageDocumentationButton │ │ └── index.tsx │ ├── HomepageFeatures │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── HomepageFocusButton │ │ └── index.tsx │ ├── ImageOnClick │ │ ├── index.tsx │ │ └── styles.module.scss │ ├── Timeline │ │ ├── TimelineItem │ │ │ └── index.tsx │ │ ├── index.tsx │ │ └── styles.module.scss │ └── svgIcons │ │ ├── AddPluginIcon │ │ └── index.tsx │ │ ├── AuthorIcon │ │ └── index.tsx │ │ ├── FavoriteIcon │ │ └── index.tsx │ │ └── MaintenanceIcon │ │ └── index.tsx ├── data │ └── plugins.tsx ├── pages │ ├── index.module.scss │ ├── index.tsx │ └── plugindirectory │ │ ├── _components │ │ ├── PluginDirectoryCard │ │ │ ├── index.tsx │ │ │ └── styles.module.scss │ │ ├── PluginDirectoryFilterToggle │ │ │ ├── index.tsx │ │ │ └── styles.module.scss │ │ ├── PluginDirectoryMaintenanceStatusSelect │ │ │ ├── index.tsx │ │ │ └── styles.module.scss │ │ ├── PluginDirectoryTagSelect │ │ │ ├── index.tsx │ │ │ └── styles.module.scss │ │ └── PluginDirectoryTooltip │ │ │ ├── index.tsx │ │ │ └── styles.module.scss │ │ ├── index.tsx │ │ └── styles.module.scss ├── scss │ └── custom.scss ├── theme │ ├── Admonition │ │ ├── Type │ │ │ ├── Caution.tsx │ │ │ ├── Credit.tsx │ │ │ ├── Danger.tsx │ │ │ ├── Discord.tsx │ │ │ ├── Docusaurus.tsx │ │ │ ├── Info.tsx │ │ │ ├── Note.tsx │ │ │ ├── Release.tsx │ │ │ ├── Security.tsx │ │ │ └── Tip.tsx │ │ ├── Types.tsx │ │ ├── index.tsx │ │ └── styles.module.css │ ├── DocItem │ │ └── Footer │ │ │ ├── GitHubContributors.tsx │ │ │ ├── contributors.module.scss │ │ │ ├── contributors.tsx │ │ │ └── index.tsx │ └── MDXComponents.tsx ├── types.d.ts └── utils │ └── jsUtils.ts ├── static ├── .nojekyll ├── img │ ├── Docusaurus.svg │ ├── columnscodeexemple.png │ ├── docusaurus-social-card.jpg │ ├── docusaurus.png │ ├── docux.png │ ├── favicon.ico │ ├── h2custom.png │ ├── logo.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ ├── undraw_docusaurus_tree.svg │ ├── undraw_knowledge.svg │ └── undraw_portfolio.svg └── schema │ └── plugin │ ├── 1.0.0.json │ ├── 1.0.1.json │ ├── 1.0.2.json │ ├── 1.0.3.json │ ├── 1.1.0.json │ ├── 1.2.0.json │ └── 1.2.1.json ├── tsconfig.json └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | **/.dockerignore 2 | **/.env 3 | **/.git 4 | **/.gitignore 5 | **/.project 6 | **/.settings 7 | **/.toolstarget 8 | **/.vs 9 | **/.vscode 10 | **/.idea 11 | **/*.*proj.user 12 | **/*.dbmdl 13 | **/*.jfm 14 | **/azds.yaml 15 | **/bin 16 | **/charts 17 | **/docker-compose* 18 | **/Dockerfile* 19 | **/node_modules 20 | **/npm-debug.log 21 | **/obj 22 | **/secrets.dev.yaml 23 | **/values.dev.yaml 24 | LICENSE 25 | README.md 26 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,json,yml}] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | jest: true, 6 | node: true, 7 | }, 8 | globals: { 9 | JSX: true, 10 | }, 11 | extends: [ 12 | 'plugin:mdx/recommended', 13 | 'eslint:recommended', 14 | 'plugin:react-hooks/recommended', 15 | 'plugin:@docusaurus/recommended', 16 | ], 17 | overrides: [], 18 | parserOptions: { 19 | ecmaVersion: 'latest', 20 | sourceType: 'module', 21 | }, 22 | plugins: ['react-hooks', 'react', '@docusaurus'], 23 | rules: {}, 24 | settings: { 25 | 'import/resolver': { 26 | node: { 27 | extensions: ['.js', '.jsx', '.ts', '.tsx'], 28 | }, 29 | }, 30 | }, 31 | } 32 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | /.yarn/** linguist-vendored 2 | /.yarn/releases/* binary 3 | /.yarn/plugins/**/* binary 4 | /.pnp.* binary linguist-generated 5 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: homotechsual 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | .yarn/* 4 | !.yarn/releases 5 | !.yarn/patches 6 | !.yarn/plugins 7 | !.yarn/sdks 8 | !.yarn/versions 9 | .pnp.* 10 | 11 | # Production 12 | /build 13 | 14 | # Generated files 15 | .docusaurus 16 | .cache-loader 17 | 18 | # Misc 19 | .DS_Store 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD003": { "style": "atx" }, 4 | "MD004": { "style": "asterisk" }, 5 | "MD007": { "indent": 2 }, 6 | "MD013": false, 7 | "MD033": { 8 | "allowed_elements": [ 9 | "details", 10 | "summary", 11 | "p" 12 | ] 13 | }, 14 | "no-hard-tabs": true, 15 | "whitespace": false 16 | } -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "printWidth": 100, 6 | "tabWidth": 2 7 | } 8 | -------------------------------------------------------------------------------- /.vale.ini: -------------------------------------------------------------------------------- 1 | # Vale configuration file. 2 | # 3 | # For more information, see https://docs.errata.ai/vale/config. 4 | 5 | StylesPath = ./.vale/ 6 | MinAlertLevel = suggestion 7 | 8 | [formats] 9 | mdx = md 10 | 11 | [*.{md,mdx}] 12 | BasedOnStyles = Docusaurus, Homotechsual, Microsoft 13 | TokenIgnores = `({\s?#[A-Za-z-]+\s?}),(\s?:::(:?[A-Za-z\s]+)?\s?),(\s?:::(:?[A-Za-z]+)?\s?)` 14 | -------------------------------------------------------------------------------- /.vale/Docusaurus/Acronyms.yml: -------------------------------------------------------------------------------- 1 | extends: Microsoft.Acronyms 2 | message: "'%s' has no definition." 3 | level: suggestion 4 | ignorecase: false 5 | # Ensures that the existence of 'first' implies the existence of 'second'. 6 | first: '\b([A-Z]{3,5})\b' 7 | second: '(?:\b[A-Z][a-z]+ )+\(([A-Z]{3,5})\)' 8 | # ... with the exception of these: 9 | exceptions: 10 | - MDX 11 | -------------------------------------------------------------------------------- /.vale/Docusaurus/Spelling.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.Spelling 3 | # 4 | # Checks for possible spelling mistakes in content, not code. Results from links using angle brackets () should be corrected. 5 | # 6 | # If a word is flagged as a spelling mistake incorrectly, such as a product name, 7 | # you can submit an MR to update `spelling-exceptions.txt` with the missing word. 8 | # Commands, like `git clone` must use backticks, and must not be added to the 9 | # exceptions. 10 | # 11 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 12 | extends: spelling 13 | message: 'Spelling check: "%s"?' 14 | level: warning 15 | filters: 16 | - Docusaurus -------------------------------------------------------------------------------- /.vale/Homotechsual/Dropdown.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.Dropdown 3 | # 4 | # Catches many ways the phrase 'dropdown list' can be fumbled. 5 | # 6 | # For a list of all options, see https://errata-ai.github.io/vale/styles/ 7 | extends: existence 8 | message: 'Use "dropdown list".' 9 | level: suggestion 10 | ignorecase: true 11 | tokens: 12 | - drop-down( [\w]*)? 13 | - dropdown(?! list) 14 | -------------------------------------------------------------------------------- /.vale/Homotechsual/FutureTense.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.FutureTense 3 | # 4 | # Checks for use of future tense in sentences. Present tense is strongly preferred. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Avoid using future tense: "%s". Use present tense instead.' 9 | ignorecase: true 10 | level: warning 11 | raw: 12 | - "(going to( |\n|[[:punct:]])[a-zA-Z]*|" 13 | - "will( |\n|[[:punct:]])[a-zA-Z]*|" 14 | - "won't( |\n|[[:punct:]])[a-zA-Z]*|" 15 | - "[a-zA-Z]*'ll( |\n|[[:punct:]])[a-zA-Z]*)" 16 | -------------------------------------------------------------------------------- /.vale/Homotechsual/InclusionAbleism.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.InclusionAbleism 3 | # 4 | # Suggests alternatives for words that foster ableism. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: substitution 8 | message: 'Use inclusive language. Consider "%s" instead of "%s".' 9 | level: suggestion 10 | ignorecase: true 11 | swap: 12 | sanity (?:check|test): check for completeness 13 | dummy: placeholder, sample, fake 14 | -------------------------------------------------------------------------------- /.vale/Homotechsual/InclusionCultural.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.InclusionCultural 3 | # 4 | # Suggests alternatives for words that are culturally inappropriate. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: substitution 8 | message: 'Use inclusive language. Consider "%s" instead of "%s".' 9 | level: warning 10 | ignorecase: true 11 | swap: 12 | blacklist(?:ed|ing|s)?: denylist 13 | whitelist(?:ed|ing|s)?: allowlist 14 | master: primary, main 15 | slave: secondary 16 | -------------------------------------------------------------------------------- /.vale/Homotechsual/InclusionGender.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.InclusionGender 3 | # 4 | # Suggests alternatives for words that are gender-specific. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: substitution 8 | message: 'Use inclusive language. Consider "%s" instead of "%s".' 9 | level: suggestion 10 | ignorecase: true 11 | swap: 12 | mankind: humanity, people 13 | manpower: Homotechsual team members 14 | he: they 15 | his: their 16 | she: they 17 | hers: their 18 | -------------------------------------------------------------------------------- /.vale/Homotechsual/LatinTerms.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.LatinTerms 3 | # 4 | # Checks for use of Latin terms. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: substitution 8 | message: 'Use "%s" instead of "%s", but consider rewriting the sentence.' 9 | level: warning 10 | nonword: true 11 | ignorecase: true 12 | swap: 13 | e\.g\.: for example 14 | e\. g\.: for example 15 | i\.e\.: that is 16 | i\. e\.: that is 17 | -------------------------------------------------------------------------------- /.vale/Homotechsual/MeaningfulLinkWords.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.MeaningfulLinkWords 3 | # 4 | # Checks for the presence of semantically unhelpful words in link text. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Improve SEO and accessibility by rewriting "%s" in the link text.' 9 | level: warning 10 | scope: link 11 | ignorecase: true 12 | tokens: 13 | - here 14 | - this page 15 | -------------------------------------------------------------------------------- /.vale/Homotechsual/MergeConflictMarkers.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Error: Homotechsual.MergeConflictMarkers 3 | # 4 | # Checks for the presence of merge conflict markers. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Merge conflict marker "%s" found.' 9 | level: error 10 | scope: raw 11 | raw: 12 | - '\n<<<<<<< .+\n|\n=======\n|\n>>>>>>> .+\n' 13 | -------------------------------------------------------------------------------- /.vale/Homotechsual/NonStandardQuotes.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.NonStandardQuotes 3 | # 4 | # Use only standard single and double quotes, not left or right quotes. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Use standard single quotes or double quotes only. Do not use left or right quotes.' 9 | level: warning 10 | ignorecase: true 11 | scope: raw 12 | raw: 13 | - '[‘’“”]' 14 | -------------------------------------------------------------------------------- /.vale/Homotechsual/OxfordComma.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.OxfordComma 3 | # 4 | # Checks for the lack of an Oxford comma. In some cases, will catch overly complex sentence structures with lots of commas. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Use a comma before the last "and" or "or" in a list of four or more items.' 9 | level: warning 10 | raw: 11 | - '(?:[\w-_` ]+,){2,}(?:[\w-_` ]+) (and |or )' 12 | -------------------------------------------------------------------------------- /.vale/Homotechsual/Possessive.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.Possessive 3 | # 4 | # The word GitLab should not be used in the possessive form. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: "Rewrite '%s' to not use 's." 9 | level: error 10 | ignorecase: true 11 | tokens: 12 | - Homotechsual's 13 | -------------------------------------------------------------------------------- /.vale/Homotechsual/Readability.yml: -------------------------------------------------------------------------------- 1 | extends: readability 2 | message: "Grade level (%s) too high!" 3 | level: warning 4 | grade: 8 5 | metrics: 6 | # - Flesch-Kincaid 7 | # - Gunning Fog 8 | - Coleman-Liau 9 | # - Automated Readability -------------------------------------------------------------------------------- /.vale/Homotechsual/ReferenceLinks.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Error: Homotechsual.ReferenceLinks 3 | # 4 | # Checks for reference-style links that should be converted to inline links. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Link "%s" must be inline.' 9 | level: error 10 | scope: raw 11 | raw: 12 | - '\n\[[^\]]*\]: .*' 13 | -------------------------------------------------------------------------------- /.vale/Homotechsual/RelativeLinksDoubleSlashes.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Error: Homotechsual.RelativeLinksDoubleSlashes 3 | # 4 | # Checks for the presence of double slashes in relative URLs. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Relative links must not include a double slash.' 9 | level: error 10 | scope: raw 11 | raw: 12 | - '\.//' 13 | -------------------------------------------------------------------------------- /.vale/Homotechsual/Repetition.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Error: Homotechsual.Repetition 3 | # 4 | # Checks for duplicate words, like `the the` or `and and`. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: repetition 8 | message: '"%s" is repeated.' 9 | level: error 10 | alpha: true 11 | tokens: 12 | - '[^\s]+' 13 | -------------------------------------------------------------------------------- /.vale/Homotechsual/Simplicity.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.Simplicity 3 | # 4 | # Checks for words implying ease of use, to avoid cognitive dissonance for frustrated users. 5 | # 6 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 7 | extends: existence 8 | message: 'Avoid words like "%s" that imply ease of use, because the user may find this action hard.' 9 | level: suggestion 10 | ignorecase: true 11 | tokens: 12 | - easy 13 | - easily 14 | - handy 15 | - simple 16 | - simply 17 | - useful 18 | -------------------------------------------------------------------------------- /.vale/Homotechsual/Spelling.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Warning: Homotechsual.Spelling 3 | # 4 | # Checks for possible spelling mistakes in content, not code. Results from links using angle brackets () should be corrected. 5 | # 6 | # If a word is flagged as a spelling mistake incorrectly, such as a product name, 7 | # you can submit an MR to update `spelling-exceptions.txt` with the missing word. 8 | # Commands, like `git clone` must use backticks, and must not be added to the 9 | # exceptions. 10 | # 11 | # For a list of all options, see https://errata-ai.gitbook.io/vale/getting-started/styles 12 | extends: spelling 13 | message: 'Spelling check: "%s"?' 14 | level: warning 15 | filters: 16 | - allowlist(ing)?(ed)? 17 | - anonymised 18 | - Homotechsual 19 | - config 20 | - Cyber 21 | - Docusaurus 22 | - Gavsto 23 | - Helpdesk 24 | - Intellisense 25 | - Intune 26 | - IntuneWin 27 | - LTS 28 | - mailto 29 | - npm 30 | - Offboarding 31 | - Padawan 32 | - pseudonymi(ing)?(ed)? 33 | - readonly 34 | - Sharepoint 35 | - Stylelint 36 | - src 37 | - syncronisation 38 | - Tegelaar -------------------------------------------------------------------------------- /.vale/Homotechsual/SubstitutionSuggestion.yml: -------------------------------------------------------------------------------- 1 | --- 2 | # Suggestion: Homotechsual.SubstitutionSuggestions 3 | # 4 | # Suggests better options for frequently misused terms that are often - but not always - incorrect. 5 | # SubstitutionWarning.yml and Substitutions.yml also exist. 6 | # 7 | # For a list of all options, see https://errata-ai.github.io/vale/styles/ 8 | extends: substitution 9 | message: 'Consider %s instead of "%s".' 10 | level: suggestion 11 | ignorecase: true 12 | swap: 13 | (?|C: drive)': drive C 9 | '(?:internet bot|web robot)s?': bot(s) 10 | '(?:microsoft cloud|the cloud)': cloud 11 | '(?:mobile|smart) ?phone': phone 12 | '24/7': every day 13 | 'audio(?:-| )book': audiobook 14 | 'back(?:-| )light': backlight 15 | 'chat ?bots?': chatbot(s) 16 | adaptor: adapter 17 | administrate: administer 18 | afterwards: afterward 19 | alphabetic: alphabetical 20 | alphanumerical: alphanumeric 21 | anti-aliasing: antialiasing 22 | anti-malware: antimalware 23 | anti-spyware: antispyware 24 | anti-virus: antivirus 25 | appendixes: appendices 26 | artificial intelligence: artificial intelligence 27 | assembler: assembly language 28 | bpp: bpp 29 | bps: bps 30 | caap: CaaP 31 | conversation-as-a-platform: conversation as a platform 32 | eb: EB 33 | gb: GB 34 | gbps: Gbps 35 | kb: KB 36 | keypress: keystroke 37 | mb: MB 38 | pb: PB 39 | tb: TB 40 | zb: ZB 41 | viz: namely 42 | ergo: therefore 43 | -------------------------------------------------------------------------------- /.vale/Microsoft/URLFormat.yml: -------------------------------------------------------------------------------- 1 | extends: substitution 2 | message: "Use '%s' instead of '%s'." 3 | ignorecase: true 4 | level: error 5 | action: 6 | name: replace 7 | swap: 8 | URL for: URL of 9 | an URL: a URL 10 | 11 | -------------------------------------------------------------------------------- /.vale/Microsoft/Units.yml: -------------------------------------------------------------------------------- 1 | extends: existence 2 | message: "Don't spell out the number in '%s'." 3 | link: https://docs.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/units-of-measure-terms 4 | level: error 5 | raw: 6 | - '[a-zA-Z]+\s' 7 | tokens: 8 | - '(?:centi|milli)?meters' 9 | - '(?:kilo)?grams' 10 | - '(?:kilo)?meters' 11 | - '(?:mega)?pixels' 12 | - cm 13 | - inches 14 | - lb 15 | - miles 16 | - pounds 17 | -------------------------------------------------------------------------------- /.vale/Microsoft/Vocab.yml: -------------------------------------------------------------------------------- 1 | extends: existence 2 | message: "Verify your use of '%s' with the A-Z word list." 3 | link: 'https://docs.microsoft.com/en-us/style-guide' 4 | level: suggestion 5 | ignorecase: true 6 | tokens: 7 | - above 8 | - accessible 9 | - actionable 10 | - against 11 | - alarm 12 | - alert 13 | - alias 14 | - allows?(?!list.*) 15 | - and/or 16 | - as well as 17 | - assure 18 | - author 19 | - avg 20 | - beta 21 | - ensure 22 | - he 23 | - insure 24 | - sample 25 | - she 26 | -------------------------------------------------------------------------------- /.vale/Microsoft/We.yml: -------------------------------------------------------------------------------- 1 | extends: existence 2 | message: "Try to avoid using first-person plural like '%s'." 3 | link: https://docs.microsoft.com/en-us/style-guide/grammar/person#avoid-first-person-plural 4 | level: warning 5 | ignorecase: false 6 | tokens: 7 | - we 8 | - we'(?:ve|re) 9 | - ours? 10 | - us 11 | - let's 12 | -------------------------------------------------------------------------------- /.vale/Microsoft/Wordiness.yml: -------------------------------------------------------------------------------- 1 | extends: substitution 2 | message: "Consider using '%s' instead of '%s'." 3 | link: https://docs.microsoft.com/en-us/style-guide/word-choice/use-simple-words-concise-sentences 4 | ignorecase: true 5 | level: warning 6 | action: 7 | name: replace 8 | swap: 9 | (?:give|gave) rise to: lead to 10 | (?:previous|prior) to: before 11 | a (?:large)? majority of: most 12 | a (?:large)? number of: many 13 | a myriad of: myriad 14 | adversely impact: hurt 15 | all across: across 16 | all of a sudden: suddenly 17 | all of these: these 18 | all of: all 19 | all-time record: record 20 | almost all: most 21 | almost never: seldom 22 | along the lines of: similar to 23 | an adequate number of: enough 24 | an appreciable number of: many 25 | an estimated: about 26 | any and all: all 27 | are in agreement: agree 28 | as a matter of fact: in fact 29 | as a means of: to 30 | as a result of: because of 31 | as of yet: yet 32 | as per: per 33 | at a later date: later 34 | at all times: always 35 | at the present time: now 36 | at this point in time: at this point 37 | based in large part on: based on 38 | based on the fact that: because 39 | basic necessity: necessity 40 | because of the fact that: because 41 | came to a realization: realized 42 | came to an abrupt end: ended abruptly 43 | carry out an evaluation of: evaluate 44 | close down: close 45 | closed down: closed 46 | complete stranger: stranger 47 | completely separate: separate 48 | concerning the matter of: regarding 49 | conduct a review of: review 50 | conduct an investigation: investigate 51 | conduct experiments: experiment 52 | continue on: continue 53 | despite the fact that: although 54 | disappear from sight: disappear 55 | drag and drop: drag 56 | drag-and-drop: drag 57 | doomed to fail: doomed 58 | due to the fact that: because 59 | during the period of: during 60 | during the time that: while 61 | emergency situation: emergency 62 | except when: unless 63 | excessive number: too many 64 | extend an invitation: invite 65 | fall down: fall 66 | fell down: fell 67 | for the duration of: during 68 | gather together: gather 69 | has the ability to: can 70 | has the capacity to: can 71 | has the opportunity to: could 72 | hold a meeting: meet 73 | if this is not the case: if not 74 | in a careful manner: carefully 75 | in a thoughtful manner: thoughtfully 76 | in a timely manner: timely 77 | in an effort to: to 78 | in between: between 79 | in lieu of: instead of 80 | in many cases: often 81 | in most cases: usually 82 | in order to: to 83 | in some cases: sometimes 84 | in spite of the fact that: although 85 | in spite of: despite 86 | in the (?:very)? near future: soon 87 | in the event that: if 88 | in the neighborhood of: roughly 89 | in the vicinity of: close to 90 | it would appear that: apparently 91 | lift up: lift 92 | made reference to: referred to 93 | make reference to: refer to 94 | mix together: mix 95 | none at all: none 96 | not in a position to: unable 97 | not possible: impossible 98 | of major importance: important 99 | perform an assessment of: assess 100 | pertaining to: about 101 | place an order: order 102 | plays a key role in: is essential to 103 | present time: now 104 | readily apparent: apparent 105 | some of the: some 106 | span across: span 107 | subsequent to: after 108 | successfully complete: complete 109 | sufficient number (?:of)?: enough 110 | take action: act 111 | take into account: consider 112 | the question as to whether: whether 113 | there is no doubt but that: doubtless 114 | this day and age: this age 115 | this is a subject that: this subject 116 | time (?:frame|period): time 117 | under the provisions of: under 118 | until such time as: until 119 | used for fuel purposes: used for fuel 120 | whether or not: whether 121 | with regard to: regarding 122 | with the exception of: except for 123 | -------------------------------------------------------------------------------- /.vale/Microsoft/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "feed": "https://github.com/errata-ai/Microsoft/releases.atom", 3 | "vale_version": ">=1.0.0" 4 | } 5 | -------------------------------------------------------------------------------- /.vale/vale-json.tmpl: -------------------------------------------------------------------------------- 1 | {{- /* Modify Vale's output https://docs.errata.ai/vale/cli#--output */ -}} 2 | 3 | {{- /* Keep track of our various counts */ -}} 4 | 5 | {{- $e := 0 -}} 6 | {{- $w := 0 -}} 7 | {{- $s := 0 -}} 8 | {{- $f := 0 -}} 9 | 10 | {{- /* Range over the linted files */ -}} 11 | 12 | {{- range .Files}} 13 | 14 | {{- $f = add1 $f -}} 15 | {{- $path := .Path -}} 16 | 17 | {{- /* Range over the file's alerts */ -}} 18 | [ 19 | 20 | {{- range $idx, $a := .Alerts -}} 21 | 22 | {{- $error := "" -}} 23 | {{- if eq .Severity "error" -}} 24 | {{- $error = .Severity -}} 25 | {{- $e = add1 $e -}} 26 | {{- else if eq .Severity "warning" -}} 27 | {{- $error = .Severity -}} 28 | {{- $w = add1 $w -}} 29 | {{- else -}} 30 | {{- $error = .Severity -}} 31 | {{- $s = add1 $s -}} 32 | {{- end}} 33 | 34 | {{- /* Variables setup */ -}} 35 | 36 | {{- $path = $path -}} 37 | {{- $loc := printf "%d" .Line -}} 38 | {{- $check := printf "%s" .Check -}} 39 | {{- $message := printf "%s" .Message -}} 40 | {{- $link := printf "%s" .Link -}} 41 | {{- if $idx -}},{{- end -}} 42 | 43 | {{- /* Output */ -}} 44 | 45 | { 46 | "description": "{{ $message }}", 47 | "fingerprint": "{{ $path }}-{{ $loc }}", 48 | "severity": "{{ $error }}", 49 | "location": { 50 | "path": "{{ $path }}", 51 | "lines": { 52 | "begin": {{ $loc }} 53 | } 54 | } 55 | } 56 | {{end -}} 57 | {{end -}} 58 | ] 59 | -------------------------------------------------------------------------------- /.vale/vale.tmpl: -------------------------------------------------------------------------------- 1 | {{- /* Modify Vale's output https://docs.errata.ai/vale/cli#--output */ -}} 2 | 3 | {{- /* Keep track of our various counts */ -}} 4 | 5 | {{- $e := 0 -}} 6 | {{- $w := 0 -}} 7 | {{- $s := 0 -}} 8 | {{- $f := 0 -}} 9 | 10 | {{- /* Range over the linted files */ -}} 11 | 12 | {{- range .Files}} 13 | 14 | {{- $f = add1 $f -}} 15 | {{- $path := .Path | underline -}} 16 | 17 | {{- /* Range over the file's alerts */ -}} 18 | 19 | {{- range .Alerts -}} 20 | 21 | {{- $error := "" -}} 22 | {{- if eq .Severity "error" -}} 23 | {{- $error = .Severity | red -}} 24 | {{- $e = add1 $e -}} 25 | {{- else if eq .Severity "warning" -}} 26 | {{- $error = .Severity | yellow -}} 27 | {{- $w = add1 $w -}} 28 | {{- else -}} 29 | {{- $error = .Severity | blue -}} 30 | {{- $s = add1 $s -}} 31 | {{- end}} 32 | 33 | {{- /* Variables setup */ -}} 34 | 35 | {{- $path = $path -}} 36 | {{- $loc := printf "Line %d, position %d" .Line (index .Span 0) -}} 37 | {{- $check := printf "%s" .Check -}} 38 | {{- $message := printf "%s" .Message -}} 39 | {{- $link := printf "%s" .Link -}} 40 | 41 | {{- /* Output */ -}} 42 | 43 | {{ $path }}: 44 | {{ $loc }} (rule {{ $check }}) 45 | {{ $error }}: {{ $message }} 46 | More information: {{ $link }} 47 | 48 | {{end -}} 49 | {{end -}} 50 | 51 | {{- $e}} {{"errors" | red}}, {{$w}} {{"warnings" | yellow}}, and {{$s}} {{"suggestions" | blue}} found. 52 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "arcanis.vscode-zipfs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "command": "yarn start", 9 | "name": "Run Docusaurus 🦕", 10 | "request": "launch", 11 | "type": "node-terminal", 12 | "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"], 13 | "cwd": "${workspaceFolder}" 14 | } 15 | ], 16 | "compounds": [ 17 | { 18 | "name": "Docusaurus 🦕", 19 | "configurations": ["Run Docusaurus 🦕"] 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.vscode/ltex.dictionary.en-US.txt: -------------------------------------------------------------------------------- 1 | Docusaurus 2 | Attribution-ShareAlike 3 | Generis 4 | cc-by-sa 5 | -------------------------------------------------------------------------------- /.vscode/ltex.hiddenFalsePositives.en-US.txt: -------------------------------------------------------------------------------- 1 | {"rule":"ENGLISH_WORD_REPEAT_BEGINNING_RULE","sentence":"^\\QCreative Commons disclaims all liability for damages resulting from their use to the fullest extent possible.\\E$"} 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.language": "en-GB", 3 | "cSpell.words": [ 4 | "acrobit", 5 | "addono", 6 | "adsense", 7 | "atomicpages", 8 | "branchup", 9 | "callouts", 10 | "chatwoot", 11 | "Chatwoot", 12 | "clsx", 13 | "cmfcmf", 14 | "compatiblelicenses", 15 | "creativecommons", 16 | "daldridge", 17 | "deflist", 18 | "devbookhq", 19 | "dipakparmar", 20 | "dlive", 21 | "docgen", 22 | "drawio", 23 | "easyops", 24 | "fontawesome", 25 | "fortawesome", 26 | "gabrielcsapo", 27 | "Generis", 28 | "gists", 29 | "goatcounter", 30 | "gohri", 31 | "gorhom", 32 | "gtag", 33 | "homotechsual", 34 | "hubspot", 35 | "Hubspot", 36 | "iconify", 37 | "ignorecase", 38 | "Infima", 39 | "infracost", 40 | "jlvandenhout", 41 | "jodyheavener", 42 | "jonnyabors", 43 | "jonnynabors", 44 | "karser", 45 | "katex", 46 | "kohheepeace", 47 | "lukasgentele", 48 | "maintenancestatus", 49 | "matomo", 50 | "Matomo", 51 | "metrica", 52 | "Metrica", 53 | "milesj", 54 | "milessj", 55 | "mindmap", 56 | "mindmaps", 57 | "moesif", 58 | "Moesif", 59 | "moojing", 60 | "mrazauskas", 61 | "nonoroazoro", 62 | "npmrc", 63 | "nuxnik", 64 | "openapi", 65 | "optimizt", 66 | "Palo", 67 | "paloaltonetworks", 68 | "papercups", 69 | "peterroe", 70 | "plugindirectory", 71 | "pomber", 72 | "popperjs", 73 | "posthog", 74 | "praveenn", 75 | "protobuf", 76 | "protobuffet", 77 | "rdilweb", 78 | "Redoc", 79 | "redocusaurus", 80 | "rehype", 81 | "retrocompatible", 82 | "Rileran", 83 | "rlamana", 84 | "rohit", 85 | "sass", 86 | "saucelabs", 87 | "searchbar", 88 | "semoal", 89 | "sgromkov", 90 | "simologos", 91 | "smartlook", 92 | "stackql", 93 | "svgs", 94 | "tagline", 95 | "tailwindcss", 96 | "thangved", 97 | "typecheck", 98 | "typesense", 99 | "umami", 100 | "Umami", 101 | "usevue", 102 | "vsdark", 103 | "vslight", 104 | "webbertakken", 105 | "wkhtmltopdf", 106 | "xiguaxigua", 107 | "Xmark", 108 | "Yoast", 109 | "zhouzi" 110 | ], 111 | "files.eol": "\n", 112 | "search.exclude": { 113 | "**/.yarn": true, 114 | "**/.pnp.*": true 115 | }, 116 | "typescript.tsdk": ".yarn/sdks/typescript/lib", 117 | "typescript.enablePromptUseWorkspaceTsdk": true 118 | } 119 | -------------------------------------------------------------------------------- /.yarn/install-state.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/.yarn/install-state.gz -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | -------------------------------------------------------------------------------- /Caddyfile: -------------------------------------------------------------------------------- 1 | {$DOCUSAURUS_DOMAIN:localhost} { 2 | root * /var/docusaurus 3 | encode gzip 4 | try_files {path} /index.html 5 | file_server 6 | email: {$DOCUSAURUS_EMAIL} 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Docusaurus.community 2 | 3 | [![CC BY-SA 4.0][cc-by-sa-shield]][cc-by-sa] 4 | 5 | This work is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License][cc-by-sa]. 6 | 7 | [![CC BY-SA 4.0][cc-by-sa-image]][cc-by-sa] 8 | 9 | [cc-by-sa]: http://creativecommons.org/licenses/by-sa/4.0/ 10 | [cc-by-sa-image]: https://licensebuttons.net/l/by-sa/4.0/88x31.png 11 | [cc-by-sa-shield]: https://img.shields.io/badge/License-CC%20BY--SA%204.0-lightgrey.svg 12 | 13 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 14 | 15 | ## Installation 16 | 17 | ```bash 18 | yarn 19 | ``` 20 | 21 | ## Local Development 22 | 23 | ```bash 24 | yarn start 25 | ``` 26 | 27 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 28 | 29 | ## Build 30 | 31 | ```bash 32 | yarn build 33 | ``` 34 | 35 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 36 | 37 | ## Deployment 38 | 39 | Using SSH: 40 | 41 | ```bash 42 | USE_SSH=true yarn deploy 43 | ``` 44 | 45 | Not using SSH: 46 | 47 | ```bash 48 | GIT_USER= yarn deploy 49 | ``` 50 | 51 | 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. 52 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /caddy.docker-compose.yml: -------------------------------------------------------------------------------- 1 | name: "docusaurus" 2 | services: 3 | caddy: 4 | build: 5 | context: . 6 | target: caddy 7 | ports: 8 | - "80:80" 9 | - "443:443" 10 | environment: 11 | - NODE_ENV=production 12 | - DOCUSAURUS_DOMAIN=docusaurus.community 13 | - DOCUSAURUS_EMAIL=letsencrypt@docusaurus.community 14 | volumes: 15 | - caddy_data:/data 16 | - caddy_config:/config 17 | volumes: 18 | caddy_data: 19 | caddy_config: 20 | -------------------------------------------------------------------------------- /contributing/customisations.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Functionality 3 | description: Learn about the custom functionality you'll find on this site. 4 | --- 5 | 6 | This site has a number of custom features that are not part of Docusaurus out of the box. This page explains what they are and how to use them. 7 | 8 | ## Custom Components 9 | 10 | ### Home Page Components 11 | 12 | The home page components are used to break up the content on the home page into sections. Each component is a React component that is rendered on the home page. The components are defined in the `src/components/` directory and are all named `Homepage*` where `*` is the name of the component. 13 | 14 | They will not, generally, be detailed in-depth here unless they are particularly complex. If you need to make changes to the home page, you should look at the components in the `src/components/` directory. 15 | 16 | ### Documented Components 17 | 18 | A number of components are described in the "Knowledge" section of the site, these components will all be present in `src/components/` to enable them to be used in the MDX files to demonstrate their usage. They will not be detailed here and you should look at the Knowledge section of the site to see how they are used and find their source code. 19 | 20 | ### DocusaurusButton 21 | 22 | The `DocusaurusButton` component is a custom button component that is used throughout the site. It is a styled button that can be used to link to the documentation on the Docusaurus website. It is defined in `src/components/DocusaurusButton/index.tsx`. 23 | 24 | ## Swizzled Components 25 | 26 | ### Admonition 27 | 28 | We run a custom version of the `Admonition` component that is part of Docusaurus. This component is used to display information boxes in the documentation. The custom version of this component is defined in `src/components/Admonition/*`. You'll find in-depth documentation in the Knowledge section of the site on how to "decode" our customised Admonitions or create your own. 29 | 30 | ### DocItem\Footer 31 | 32 | We have a customised `DocItem\Footer` component which is the component used to display the footer on the documentation pages. This component is defined in `src/components/DocItem/Footer.tsx`. This component is used to display the footer on the documentation pages. It is a simple component that displays the footer text and the last updated date of the document. Our customised version is inspired by the amazing work of the `unleash` team who [added contributors to their documentation](https://github.com/Unleash/unleash/pull/6900). 33 | 34 | ## Custom Plugins 35 | 36 | ### Plugin Directory 37 | 38 | The plugin directory is a forked version of the Docusaurus.io showcase plugin. It has been modified to better suit displaying information on Docusaurus plugins. It is currently fed from a static list of plugins in `src/data/plugins.tsx`. This is changing to use a `YAML` file per plugin pulled from `data/plugins` in the future. This will make maintaining the plugin directory easier. 39 | 40 | ## Custom Frontmatter 41 | 42 | To support our contributor display on docs pages we sometimes use a custom frontmatter field called `additionalContributors`. This field is used to display additional contributors to a document. It is an array of objects with the following structure: 43 | 44 | ```ts 45 | type AdditionalContributor = { 46 | login: string; 47 | html_url: string; 48 | avatar_url: string; 49 | }; 50 | ``` 51 | 52 | An example of how this is used in a document is: 53 | 54 | ```mdx 55 | --- 56 | title: Custom Functionality 57 | description: Learn about the custom functionality you'll find on this site. 58 | additionalContributors: 59 | - login: github-bot 60 | html_url: https://github.com/github-bot 61 | avatar_url: https://avatars.githubusercontent.com/u/6031226?v=4 62 | --- 63 | ``` 64 | -------------------------------------------------------------------------------- /contributing/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Contributing Intro" 3 | hide_title: true 4 | sidebar_position: -999 5 | --- 6 | 7 | The contributing documentation is a collection of guides and articles that cover topics related to contributing to the Docusaurus community. This includes guides on how to contribute to the website, the knowledge base, and the Docusaurus project itself. 8 | -------------------------------------------------------------------------------- /data/plugins/acrobit.auto-sidebars.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: acrobit.auto-sidebars 3 | name: Auto Sidebars 4 | description: A docusaurus plugin that generates the sidebar items automatically by filesystem structure. 5 | preview: null 6 | website: https://github.com/acrobit/docusaurus-plugin-auto-sidebars 7 | source: https://github.com/acrobit/docusaurus-plugin-auto-sidebars 8 | author: acrobit 9 | tags: 10 | - utility 11 | minimumVersion: 2.0.0-alpha.50 12 | maintenanceStatus: unknown 13 | compatibility: 14 | - 2 15 | npmPackages: 16 | - docusaurus-plugin-auto-sidebars 17 | -------------------------------------------------------------------------------- /data/plugins/addono.goatcounter.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: addono.goatcounter 3 | name: GoatCounter 4 | description: A plugin to add GoatCounter analytics to your Docusaurus site. 5 | preview: null 6 | website: https://github.com/addono/docusaurus-plugin-goatcounter 7 | source: https://github.com/addono/docusaurus-plugin-goatcounter 8 | author: addono 9 | tags: 10 | - analytics 11 | - integration 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-goatcounter 18 | -------------------------------------------------------------------------------- /data/plugins/alt3.powershell.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: alt3.powershell 3 | name: PowerShell 4 | description: A PowerShell module to generate Docusaurus documentation for PowerShell modules. 5 | preview: null 6 | website: https://docusaurus-powershell.vercel.app/ 7 | source: https://github.com/alt3/Docusaurus.Powershell 8 | author: alt3 9 | tags: 10 | - content 11 | - utility 12 | - markdown 13 | - integration 14 | minimumVersion: null 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | - 3 19 | -------------------------------------------------------------------------------- /data/plugins/amd-nick.backlinks.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: amd-nick.backlinks 3 | name: Backlinks 4 | description: Adds a component that you can use to display backlinks between your publications 5 | preview: null 6 | website: https://github.com/AMD-NICK/docusaurus-plugin-backlinks 7 | source: https://github.com/AMD-NICK/docusaurus-plugin-backlinks 8 | author: amd-nick 9 | tags: 10 | - theme 11 | - utility 12 | minimumVersion: 3.7.0 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 3 16 | npmPackages: 17 | - docusaurus-plugin-backlinks 18 | -------------------------------------------------------------------------------- /data/plugins/atomicpages.module-alias.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: atomicpages.module-alias 3 | name: Module Alias 4 | description: A tiny Docusaurus plugin for easy module alias creation. 5 | preview: null 6 | website: https://github.com/atomicpages/docusaurus-plugin-module-alias 7 | source: https://github.com/atomicpages/docusaurus-plugin-module-alias 8 | author: atomicpages 9 | tags: 10 | - utility 11 | minimumVersion: 2.0.0-alpha.68 12 | maintenanceStatus: maintained 13 | compatibility: 14 | - 2 15 | npmPackages: 16 | - docusaurus-plugin-module-alias 17 | -------------------------------------------------------------------------------- /data/plugins/atomicpages.react-docgen.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: atomicpages.react-docgen 3 | name: React Docgen 4 | description: A Docusaurus plugin to generate documentation from React components using react-docgen-typescript. 5 | preview: null 6 | website: https://github.com/atomicpages/docusaurus-plugin-react-docgen-typescript 7 | source: https://github.com/atomicpages/docusaurus-plugin-react-docgen-typescript 8 | author: atomicpages 9 | tags: 10 | - content 11 | - api 12 | minimumVersion: 2.0.0-beta.21 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-react-docgen-typescript 18 | - react-docgen-typescript 19 | -------------------------------------------------------------------------------- /data/plugins/chatwoot.chatwoot.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: chatwoot.chatwoot 3 | name: Chatwoot 4 | description: Embeds the chatwoot system in your Docusaurus site. 5 | preview: null 6 | website: https://github.com/chatwoot/docusaurus 7 | source: https://github.com/chatwoot/docusaurus 8 | author: chatwoot 9 | tags: 10 | - integration 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: unknown 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - "@chatwoot/docusaurus" 18 | -------------------------------------------------------------------------------- /data/plugins/christian-bromann.github-code-block.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: christian-bromann.github-code-block 3 | name: GitHub Code Block 4 | description: A Docusaurus plugin that supports referencing code examples from public GitHub repositories. 5 | preview: null 6 | website: https://github.com/christian-bromann/docusaurus-theme-github-codeblock 7 | source: https://github.com/christian-bromann/docusaurus-theme-github-codeblock 8 | author: christian-bromann 9 | tags: 10 | - content 11 | - integration 12 | - markdown 13 | - theme 14 | minimumVersion: null 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | - 3 19 | npmPackages: 20 | - docusaurus-theme-github-codeblock 21 | -------------------------------------------------------------------------------- /data/plugins/cloud-annotations.openapi.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: cloud-annotations.openapi 3 | name: OpenAPI 4 | description: 🦕 OpenAPI plugin for generating API reference docs in Docusaurus v2 5 | preview: null 6 | website: https://docusaurus-openapi.netlify.app/ 7 | source: https://github.com/cloud-annotations/docusaurus-openapi 8 | author: cloud-annotations 9 | tags: 10 | - api 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - docusaurus-preset-openapi 19 | -------------------------------------------------------------------------------- /data/plugins/daldridge.lunr.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: daldridge.lunr 3 | name: Lunr 4 | description: A plugin to add search to your Docusaurus site using Lunr. 5 | preview: null 6 | website: https://github.com/daldridge/docusaurus-plugin-lunr 7 | source: https://github.com/daldridge/docusaurus-plugin-lunr 8 | author: daldridge 9 | tags: 10 | - search 11 | - integration 12 | minimumVersion: 2.0.0-alpha.58 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-lunr 18 | -------------------------------------------------------------------------------- /data/plugins/devbookhq.code-video.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: devbookhq.code-video 3 | name: Code Video 4 | description: Add a video to a Docusaurus code block and highlight code lines as the video plays. 5 | preview: null 6 | website: https://github.com/devbookhq/docusaurus-code-video-plugin 7 | source: https://github.com/devbookhq/docusaurus-code-video-plugin 8 | author: devbookhq 9 | tags: 10 | - content 11 | - utility 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - "@devbookhq/docusaurus-plugin-code-video" 18 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.blog.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.blog 3 | name: Blog 4 | description: Official Docusaurus blog plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-content-blog 8 | author: docusaurus 9 | tags: 10 | - content 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-content-blog" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.debug.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.debug 3 | name: Debug 4 | description: Official Docusaurus debug plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-debug 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-debug 8 | author: docusaurus 9 | tags: 10 | - docusaurus 11 | - utility 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-debug" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.docs.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.docs 3 | name: Docs 4 | description: Official Docusaurus docs plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-content-docs 8 | author: docusaurus 9 | tags: 10 | - content 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-content-docs" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.google-analytics.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.google-analytics 3 | name: Google Analytics 4 | description: Official Docusaurus Google Analytics plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-analytics 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-google-analytics 8 | author: docusaurus 9 | tags: 10 | - analytics 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-google-analytics" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.google-gtag.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.google-gtag 3 | name: Google Gtag 4 | description: Official Docusaurus Google Gtag plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-gtag 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-google-gtag 8 | author: docusaurus 9 | tags: 10 | - analytics 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-google-gtag" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.ideal-image.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.ideal-image 3 | name: Ideal Image 4 | description: Official Docusaurus image optimisation plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-ideal-image 8 | author: docusaurus 9 | tags: 10 | - content 11 | - utility 12 | - docusaurus 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | - 3 18 | npmPackages: 19 | - "@docusaurus/plugin-ideal-image" 20 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.npm2yarn.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.npm2yarn 3 | name: npm2yarn 4 | description: Official Docusaurus plugin which converts npm commands to yarn commands and displays both in a tabbed arrangement. 5 | preview: null 6 | website: https://docusaurus.io/docs/markdown-features/code-blocks#npm2yarn-remark-plugin 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-remark-plugin-npm2yarn 8 | author: docusaurus 9 | tags: 10 | - markdown 11 | - utility 12 | - docusaurus 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | - 3 18 | npmPackages: 19 | - "@docusaurus/remark-plugin-npm2yarn" 20 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.pages.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.pages 3 | name: Pages 4 | description: Official Docusaurus pages plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-pages 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-content-pages 8 | author: docusaurus 9 | tags: 10 | - content 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-content-pages" 19 | -------------------------------------------------------------------------------- /data/plugins/docusaurus.pwa.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: docusaurus.pwa 3 | name: PWA 4 | description: Official Docusaurus PWA plugin. 5 | preview: null 6 | website: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa 7 | source: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-pwa 8 | author: docusaurus 9 | tags: 10 | - utility 11 | - docusaurus 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "@docusaurus/plugin-pwa" 19 | -------------------------------------------------------------------------------- /data/plugins/gabrielcsapo.api-extractor.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: gabrielcsapo.api-extractor 3 | name: API Extractor 4 | description: Docusaurus plugin to use https://api-extractor.com in Docusaurus. 5 | preview: null 6 | website: https://gabrielcsapo.github.io/docusaurus-plugin-api-extractor 7 | source: https://github.com/gabrielcsapo/docusaurus-plugin-api-extractor 8 | author: gabrielcsapo 9 | tags: 10 | - api 11 | - utility 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - "@microsoft/api-extractor" 18 | - docusaurus-plugin-api-extractor 19 | -------------------------------------------------------------------------------- /data/plugins/gabrielcsapo.image-zoom.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: gabrielcsapo.image-zoom 3 | name: Image Zoom 4 | description: Docusaurus plugin to utilize medium-zoom in Docusaurus projects. 5 | preview: null 6 | website: https://gabrielcsapo.github.io/docusaurus-plugin-image-zoom 7 | source: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom 8 | author: gabrielcsapo 9 | tags: 10 | - utility 11 | - markdown 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - "docusaurus-plugin-image-zoom" 19 | -------------------------------------------------------------------------------- /data/plugins/gorhom.react-native.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: gorhom.react-native 3 | name: React Native 4 | description: A Docusaurus plugin to add React Native and Reanimated support to your Docusaurus site. 5 | preview: null 6 | website: https://github.com/gorhom/docusaurus-react-native-plugin 7 | source: https://github.com/gorhom/docusaurus-react-native-plugin 8 | author: gorhom 9 | tags: 10 | - content 11 | - integration 12 | - markdown 13 | - theme 14 | - utility 15 | minimumVersion: null 16 | maintenanceStatus: maintained 17 | compatibility: 18 | - 2 19 | npmPackages: 20 | - "@gorhom/docusaurus-react-native-plugin" 21 | -------------------------------------------------------------------------------- /data/plugins/hhk7734.google-adsense.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: hhk7734.google-adsense 3 | name: Google AdSense 4 | description: A plugin to embed Google AdSense in your Docusaurus site. 5 | preview: null 6 | website: https://www.npmjs.com/package/docusaurus-plugin-google-adsense 7 | source: https://github.com/hhk7734/docusaurus-plugin-google-adsense 8 | author: hhk7734 9 | tags: 10 | - content 11 | - integration 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-google-adsense 18 | -------------------------------------------------------------------------------- /data/plugins/infracost.plausible.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: infracost.plausible 3 | name: Plausible Analytics 4 | description: A Docusaurus plugin for Plausible analytics. Inspired by gatsby-plugin-plausible. 5 | preview: null 6 | website: https://github.com/infracost/docusaurus-plugin-plausible 7 | source: https://github.com/infracost/docusaurus-plugin-plausible 8 | author: infracost 9 | tags: 10 | - analytics 11 | minimumVersion: 2.0.0 12 | maintenanceStatus: maintained 13 | compatibility: 14 | - 2 15 | npmPackages: 16 | - docusaurus-plugin-plausible 17 | -------------------------------------------------------------------------------- /data/plugins/jlvandenhout.docs-editor.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: jlvandenhout.docs-editor 3 | name: Docs Editor 4 | description: A client-side editor for your Docusaurus docs, allowing users to propose changes to any of your Markdown files without the need to know Markdown or Git workflows details. 5 | preview: null 6 | website: https://jlvandenhout.github.io/docusaurus-plugin-docs-editor 7 | source: https://github.com/jlvandenhout/docusaurus-plugin-docs-editor 8 | author: jlvandenhout 9 | tags: 10 | - utility 11 | - editing 12 | minimumVersion: 2.0.0-beta.15 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-docs-editor 18 | -------------------------------------------------------------------------------- /data/plugins/jonnynabors.dotenv.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: jonnynabors.dotenv 3 | name: Dotenv 4 | description: A Docusaurus 2 plugin that supports dotenv and other environment variables and only exposes what you choose and use. 5 | preview: null 6 | website: https://github.com/jonnynabors/docusaurus2-dotenv 7 | source: https://github.com/jonnynabors/docusaurus2-dotenv 8 | author: jonnynabors 9 | tags: 10 | - utility 11 | minimumVersion: null 12 | maintenanceStatus: unknown 13 | compatibility: 14 | - 2 15 | npmPackages: 16 | - docusaurus2-dotenv 17 | -------------------------------------------------------------------------------- /data/plugins/jy95.json-schema.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: jy95.json-schema 3 | name: JSON Schema 4 | description: A Docusaurus plugin which provides a JSON schema viewer and editor React component. 5 | preview: null 6 | website: https://jy95.github.io/docusaurus-json-schema-plugin/ 7 | source: https://github.com/jy95/docusaurus-json-schema-plugin 8 | author: jy95 9 | tags: 10 | - utility 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - docusaurus-plugin-json-schema 19 | -------------------------------------------------------------------------------- /data/plugins/karser.matomo.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: karser.matomo 3 | name: Matomo 4 | description: A plugin to add Matomo analytics to your Docusaurus site. 5 | preview: null 6 | website: https://github.com/karser/docusaurus-plugin-matomo 7 | source: https://github.com/karser/docusaurus-plugin-matomo 8 | author: karser 9 | tags: 10 | - utility 11 | - integration 12 | - analytics 13 | minimumVersion: 2.0.0-alpha.56 14 | maintenanceStatus: unknown 15 | compatibility: 16 | - 2 17 | - 3 18 | npmPackages: 19 | - docusaurus-plugin-matomo 20 | -------------------------------------------------------------------------------- /data/plugins/kohheepeace.mr-pdf.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: kohheepeace.mr-pdf 3 | name: Mr PDF 4 | description: A plugin add PDF export to your Docusaurus site. 5 | preview: null 6 | website: https://www.npmjs.com/package/mr-pdf 7 | source: https://github.com/kohheepeace/mr-pdf 8 | author: kohheepeace 9 | tags: 10 | - utility 11 | - integration 12 | minimumVersion: null 13 | compatibility: 14 | - 2 15 | maintenanceStatus: maintained 16 | -------------------------------------------------------------------------------- /data/plugins/lukasgentele.gtm.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: lukasgentele.gtm 3 | name: Google Tag Manager 4 | description: A plugin to add Google Tag Manager in your Docusaurus site. 5 | preview: null 6 | website: https://github.com/LukasGentele/docusaurus-gtm-plugin 7 | source: https://github.com/LukasGentele/docusaurus-gtm-plugin 8 | author: lukasgentele 9 | tags: 10 | - analytics 11 | - integration 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-gtm-plugin 18 | -------------------------------------------------------------------------------- /data/plugins/moesif.moesif.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: moesif.moesif 3 | name: Moesif 4 | description: A plugin to add Moesif API analytics to your Docusaurus site. 5 | preview: null 6 | website: https://www.moesif.com/docs/client-integration/docusaurus/ 7 | source: https://github.com/moesif/docusaurus-plugin-moesif 8 | author: Moesif 9 | tags: 10 | - utility 11 | - integration 12 | - analytics 13 | - api 14 | minimumVersion: null 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | npmPackages: 19 | - docusaurus-plugin-moesif 20 | -------------------------------------------------------------------------------- /data/plugins/moojing.post-generator.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: moojing.post-generator 3 | name: Post Generator 4 | description: A CLI tool to generate blog posts from templates. 5 | preview: null 6 | website: https://github.com/moojing/docusaurus-post-generator 7 | source: https://github.com/moojing/docusaurus-post-generator 8 | author: moojing 9 | tags: 10 | - utility 11 | minimumVersion: 2.0.0-alpha.50 12 | maintenanceStatus: unmaintained 13 | compatibility: 14 | - 2 15 | npmPackages: 16 | - docusaurus-post-generator 17 | -------------------------------------------------------------------------------- /data/plugins/nonoroazoro.less.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: nonoroazoro.less 3 | name: Less 4 | description: A Docusaurus plugin to compile Less files to CSS. 5 | preview: null 6 | website: https://npmjs.com/package/docusaurus-plugin-less 7 | source: https://github.com/nonoroazoro/docusaurus-plugin-less 8 | author: nonoroazoro 9 | tags: 10 | - utility 11 | - theme 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-less 18 | -------------------------------------------------------------------------------- /data/plugins/paloaltonetworks.openapi-docs.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: paloaltonetworks.openapi-docs 3 | name: OpenAPI Docs 4 | description: 🦝 OpenAPI plugin for generating API reference docs in Docusaurus v2 5 | preview: null 6 | website: https://docusaurus-openapi.tryingpan.dev/ 7 | source: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs 8 | author: PaloAltoNetworks 9 | tags: 10 | - api 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-openapi-docs 18 | - docusaurus-theme-openapi-docs 19 | -------------------------------------------------------------------------------- /data/plugins/papercups-io.papercups.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: papercups-io.papercups 3 | name: Papercups 4 | description: A Docusaurus plugin to add the Papercups chat widget to your site. 5 | preview: null 6 | website: https://github.com/papercups-io/docusaurus-plugin 7 | source: https://github.com/papercups-io/docusaurus-plugin 8 | author: papercups-io 9 | tags: 10 | - integration 11 | - utility 12 | minimumVersion: null 13 | maintenanceStatus: unmaintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - "@papercups-io/docusaurus" 18 | -------------------------------------------------------------------------------- /data/plugins/pomber.mdx-2.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: pomber.mdx-2 3 | name: MDX 2 4 | description: A theme adding MDX 2 support to Docusaurus 2. 5 | preview: null 6 | website: https://docusaurus-mdx-2.vercel.app/ 7 | source: https://github.com/pomber/docusaurus-mdx-2 8 | author: pomber 9 | tags: 10 | - theme 11 | - markdown 12 | - content 13 | - integration 14 | minimumVersion: 2.0.0-beta.18 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | npmPackages: 19 | - docusaurus-theme-mdx-v2 20 | - "@mdx-js/react@^2.0.0" 21 | -------------------------------------------------------------------------------- /data/plugins/posthog.posthog.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: posthog.posthog 3 | name: PostHog 4 | description: A plugin to add PostHog to your Docusaurus site. 5 | preview: null 6 | website: https://posthog.com/docs/integrate/third-party/docusaurus 7 | source: https://github.com/PostHog/posthog-docusaurus 8 | author: PostHog 9 | tags: 10 | - analytics 11 | - integration 12 | - utility 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | npmPackages: 18 | - posthog-docusaurus 19 | -------------------------------------------------------------------------------- /data/plugins/praveenn77.lunr-search.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: praveenn77.lunr-search 3 | name: Lunr Search 4 | description: A plugin to add search to your Docusaurus site using Lunr. 5 | preview: null 6 | website: https://lelouch77.github.io/docusaurus-lunr-search-demo/ 7 | source: https://github.com/praveenn77/docusaurus-lunr-search 8 | author: praveenn77 9 | tags: 10 | - search 11 | - integration 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - docusaurus-lunr-search 19 | -------------------------------------------------------------------------------- /data/plugins/protobuffet.protobuffet.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: protobuffet.protobuffet 3 | name: ProtoBuffet 4 | description: A plugin to add PostHog to your Docusaurus site. 5 | preview: null 6 | website: https://protobuffet.com/docs/what/overview#docusaurus 7 | source: https://github.com/PostHog/posthog-docusaurus 8 | author: PostHog 9 | tags: 10 | - analytics 11 | - integration 12 | - utility 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | npmPackages: 18 | - posthog-docusaurus 19 | -------------------------------------------------------------------------------- /data/plugins/rohit-gohri.redocusaurus.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: rohit-gohri.redocusaurus 3 | name: Redocusaurus 4 | description: A Docusaurus plugin to add API documentation support to your Docusaurus site using the power of Redoc. 5 | preview: null 6 | website: https://redocusaurus.vercel.app 7 | source: https://github.com/rohit-gohri/redocusaurus 8 | author: rohit-gohri 9 | tags: 10 | - content 11 | - api 12 | minimumVersion: 2.0.0-beta.14 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - redocusaurus 19 | -------------------------------------------------------------------------------- /data/plugins/saucelabs.github-code-block.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: saucelabs.github-code-block 3 | name: GitHub Code Block 4 | description: A Docusaurus 2 plugin that supports referencing code examples from public GitHub repositories. 5 | preview: null 6 | website: https://opensource.saucelabs.com/docusaurus-theme-github-codeblock/ 7 | source: https://github.com/saucelabs/docusaurus-theme-github-codeblock 8 | author: saucelabs 9 | tags: 10 | - content 11 | - integration 12 | - markdown 13 | - theme 14 | minimumVersion: null 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | npmPackages: 19 | - docusaurus-theme-github-codeblock 20 | -------------------------------------------------------------------------------- /data/plugins/sean-perkins.code-preview.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: sean-perkins.code-preview 3 | name: Code Preview 4 | description: Embed live code examples within your Docusaurus 2 sites. 5 | preview: null 6 | website: https://github.com/sean-perkins/docusaurus-plugin-code-preview 7 | source: https://github.com/sean-perkins/docusaurus-plugin-code-preview 8 | author: sean-perkins 9 | tags: 10 | - content 11 | - utility 12 | - integration 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | npmPackages: 18 | - docusaurus-plugin-code-preview 19 | -------------------------------------------------------------------------------- /data/plugins/silva-nick.portfolio.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: silva-nick.portfolio 3 | name: Portfolio 4 | description: A Docusaurus plugin to create a portfolio page from GitHub. 5 | preview: null 6 | website: https://silva-nick.github.io/portfolio/ 7 | source: https://github.com/silva-nick/docusaurus-portfolio 8 | author: silva-nick 9 | tags: 10 | - content 11 | - theme 12 | minimumVersion: 2.0.0 13 | maintenanceStatus: unknown 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-portfolio-plugin 18 | - docusaurus-portfolio-theme 19 | -------------------------------------------------------------------------------- /data/plugins/simologos.includes.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: simologos.includes 3 | name: Includes 4 | description: A plugin to include the contents of markdown files in other markdown files. 5 | preview: null 6 | website: https://github.com/simologos/docusaurus-plugin-includes 7 | source: https://github.com/simologos/docusaurus-plugin-includes 8 | author: simologos 9 | tags: 10 | - utility 11 | - markdown 12 | minimumVersion: 2.0.0-beta5 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-includes 18 | -------------------------------------------------------------------------------- /data/plugins/stackql.hubspot.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: stackql.hubspot 3 | name: HubSpot 4 | description: A plugin to add HubSpot analytics to your Docusaurus site. 5 | preview: null 6 | website: https://github.com/stackql/docusaurus-plugin-hubspot 7 | source: https://github.com/stackql/docusaurus-plugin-hubspot 8 | author: stackql 9 | tags: 10 | - utility 11 | - integration 12 | - analytics 13 | minimumVersion: null 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | npmPackages: 18 | - "@stackql/docusaurus-plugin-hubspot" 19 | -------------------------------------------------------------------------------- /data/plugins/thangved.2dlive.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: thangved.2dlive 3 | name: 2D Live 4 | description: A live2d docusaurus plugin. 5 | preview: null 6 | website: https://github.com/thangved/docusaurus-plugin-2dlive 7 | source: https://github.com/thangved/docusaurus-plugin-2dlive 8 | author: thangved 9 | tags: 10 | - utility 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-2dlive 18 | -------------------------------------------------------------------------------- /data/plugins/webbertakken.content-gists.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: webbertakken.content-gists 3 | name: Content Gists 4 | description: A Docusaurus plugin to embed GitHub Gists in your docs. 5 | preview: null 6 | website: https://takken.io/gists 7 | source: https://github.com/webbertakken/docusaurus-plugin-content-gists 8 | author: webbertakken 9 | tags: 10 | - content 11 | - integration 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | - 3 17 | npmPackages: 18 | - docusaurus-plugin-content-gists 19 | - dotenv 20 | -------------------------------------------------------------------------------- /data/plugins/xiguaxigua.drawio.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: xiguaxigua.drawio 3 | name: Draw.io 4 | description: A plugin to embed draw.io diagrams in your Docusaurus site. 5 | preview: null 6 | website: https://xiguaxigua.com/docusaurus-plugin-drawio/ 7 | source: https://github.com/xiguaxigua/docusaurus-plugin-drawio 8 | author: xiguaxigua 9 | tags: 10 | - content 11 | - integration 12 | - markdown 13 | minimumVersion: 2.0.0-beta.15 14 | maintenanceStatus: maintained 15 | compatibility: 16 | - 2 17 | npmPackages: 18 | - docusaurus-plugin-drawio 19 | -------------------------------------------------------------------------------- /data/plugins/xiguaxigua.mindmap.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: xiguaxigua.mindmap 3 | name: Mindmap 4 | description: A plugin to add mindmaps to your Docusaurus site. 5 | preview: null 6 | website: https://xiguaxigua.com/docusaurus-plugin-mindmap/ 7 | source: https://github.com/xiguaxigua/docusaurus-plugin-mindmap 8 | author: xiguaxigua 9 | tags: 10 | - content 11 | - markdown 12 | - theme 13 | - integration 14 | minimumVersion: null 15 | maintenanceStatus: maintained 16 | compatibility: 17 | - 2 18 | npmPackages: 19 | - docusaurus-plugin-mindmap 20 | -------------------------------------------------------------------------------- /data/plugins/zhouzi.graphql.yaml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://docusaurus.community/schema/plugin/1.2.1.json 2 | id: zhouzi.graphql 3 | name: GraphQL 4 | description: A plugin to generate Markdown documentation from a GraphQL schema. 5 | preview: null 6 | website: https://gabinaureche.com/docusaurus-graphql-plugin/ 7 | source: https://github.com/Zhouzi/docusaurus-graphql-plugin 8 | author: zhouzi 9 | tags: 10 | - api 11 | - content 12 | minimumVersion: null 13 | maintenanceStatus: maintained 14 | compatibility: 15 | - 2 16 | npmPackages: 17 | - docusaurus-plugin-graphql 18 | -------------------------------------------------------------------------------- /dev.docker-compose.yml: -------------------------------------------------------------------------------- 1 | name: "docusaurus" 2 | services: 3 | dev: 4 | build: 5 | context: . 6 | target: dev 7 | ports: 8 | - "3000:3000" 9 | volumes: 10 | - .:/opt/docusaurus 11 | environment: 12 | - NODE_ENV=development 13 | -------------------------------------------------------------------------------- /dockerfile: -------------------------------------------------------------------------------- 1 | # syntax=docker/dockerfile:1 2 | 3 | # Stage 1: Base image. 4 | ## Start with a base image containing NodeJS so we can build Docusaurus. 5 | FROM node:lts as base 6 | ## Disable colour output from yarn to make logs easier to read. 7 | ENV FORCE_COLOR=0 8 | ## Enable corepack. 9 | RUN corepack enable 10 | ## Set the working directory to `/opt/docusaurus`. 11 | WORKDIR /opt/docusaurus 12 | 13 | # Stage 2a: Development mode. 14 | FROM base as dev 15 | ## Set the working directory to `/opt/docusaurus`. 16 | WORKDIR /opt/docusaurus 17 | ## Expose the port that Docusaurus will run on. 18 | EXPOSE 3000 19 | ## Run the development server. 20 | CMD [ -d "node_modules" ] && yarn start || yarn install && yarn start --host 0.0.0.0 21 | 22 | # Stage 2b: Production build mode. 23 | FROM base as prod 24 | ## Set the working directory to `/opt/docusaurus`. 25 | WORKDIR /opt/docusaurus 26 | ## Copy over the source code. 27 | COPY . /opt/docusaurus/ 28 | ## Install dependencies with `--immutable` to ensure reproducibility. 29 | RUN yarn install --immutable 30 | ## Build the static site. 31 | RUN yarn build 32 | 33 | # Stage 3a: Serve with `docusaurus serve`. 34 | FROM prod as serve 35 | ## Expose the port that Docusaurus will run on. 36 | EXPOSE 3000 37 | ## Run the production server. 38 | CMD ["yarn", "serve", "--host", "0.0.0.0", "--no-open"] 39 | 40 | # Stage 3b: Serve with Caddy. 41 | FROM caddy:2-alpine as caddy 42 | ## Copy the Caddyfile. 43 | COPY --from=prod /opt/docusaurus/Caddyfile /etc/caddy/Caddyfile 44 | ## Copy the Docusaurus build output. 45 | COPY --from=prod /opt/docusaurus/build /var/docusaurus 46 | -------------------------------------------------------------------------------- /docs/component-library/_category_.yaml: -------------------------------------------------------------------------------- 1 | collapsible: true # make the category collapsible 2 | collapsed: false # keep the category open by default 3 | -------------------------------------------------------------------------------- /docs/component-library/existing/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Existing Components 3 | sidebar_label: Existing Components 4 | sidebar_position: 1 5 | description: "Tweaked, improved or otherwise altered versions of existing Docusaurus components." 6 | --- 7 | 8 | import DocCardList from '@theme/DocCardList'; 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/component-library/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Component Library Knowledge 3 | sidebar_label: Component Library 4 | sidebar_position: 2 5 | --- 6 | 7 | import DocCardList from '@theme/DocCardList'; 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/component-library/new/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Components 3 | sidebar_label: New Components 4 | sidebar_position: 2 5 | description: "Completely new components that don't exist in Docusaurus natively." 6 | --- 7 | 8 | import DocCardList from '@theme/DocCardList'; 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/deployment/_category_.yaml: -------------------------------------------------------------------------------- 1 | collapsible: true # make the category collapsible 2 | collapsed: false # keep the category open by default 3 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_composefile-caddy.mdx: -------------------------------------------------------------------------------- 1 | ```yaml {title='caddy.docker-compose.yml'} 2 | name: "docusaurus" 3 | services: 4 | caddy: 5 | build: 6 | context: . 7 | target: caddy 8 | ports: 9 | - "80:80" 10 | - "443:443" 11 | environment: 12 | - NODE_ENV=production 13 | - DOCUSAURUS_DOMAIN=docusaurus.example 14 | - DOCUSAURUS_EMAIL=letsencrypt@docusaurus.example 15 | volumes: 16 | - caddy_data:/data 17 | - caddy_config:/config 18 | volumes: 19 | caddy_data: 20 | caddy_config: 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_composefile-dev.mdx: -------------------------------------------------------------------------------- 1 | ```yaml {title='dev.docker-compose.yml'} 2 | name: "docusaurus" 3 | services: 4 | dev: 5 | build: 6 | context: . 7 | target: dev 8 | ports: 9 | - "3000:3000" 10 | volumes: 11 | - .:/opt/docusaurus 12 | environment: 13 | - NODE_ENV=development 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_composefile-serve.mdx: -------------------------------------------------------------------------------- 1 | ```yaml {title='serve.docker-compose.yml'} 2 | name: "docusaurus" 3 | services: 4 | serve: 5 | build: 6 | context: . 7 | target: serve 8 | ports: 9 | - "3000:3000" 10 | environment: 11 | - NODE_ENV=production 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_dockerfile-npm.mdx: -------------------------------------------------------------------------------- 1 | ```docker 2 | # syntax=docker/dockerfile:1 3 | 4 | # Stage 1: Base image. 5 | ## Start with a base image containing NodeJS so we can build Docusaurus. 6 | FROM node:lts AS base 7 | ## Disable colour output from yarn to make logs easier to read. 8 | ENV FORCE_COLOR=0 9 | ## Enable corepack. 10 | RUN corepack enable 11 | ## Set the working directory to `/opt/docusaurus`. 12 | WORKDIR /opt/docusaurus 13 | 14 | # Stage 2a: Development mode. 15 | FROM base AS dev 16 | ## Set the working directory to `/opt/docusaurus`. 17 | WORKDIR /opt/docusaurus 18 | ## Expose the port that Docusaurus will run on. 19 | EXPOSE 3000 20 | ## Run the development server. 21 | CMD [ -d "node_modules" ] && npm run start -- --host 0.0.0.0 --poll 1000 || npm install && npm run start -- --host 0.0.0.0 --poll 1000 22 | 23 | # Stage 2b: Production build mode. 24 | FROM base AS prod 25 | ## Set the working directory to `/opt/docusaurus`. 26 | WORKDIR /opt/docusaurus 27 | ## Copy over the source code. 28 | COPY . /opt/docusaurus/ 29 | ## Install dependencies with `--immutable` to ensure reproducibility. 30 | RUN npm ci 31 | ## Build the static site. 32 | RUN npm run build 33 | 34 | # Stage 3a: Serve with `docusaurus serve`. 35 | FROM prod AS serve 36 | ## Expose the port that Docusaurus will run on. 37 | EXPOSE 3000 38 | ## Run the production server. 39 | CMD ["npm", "run", "serve", "--", "--host", "0.0.0.0", "--no-open"] 40 | 41 | # Stage 3b: Serve with Caddy. 42 | FROM caddy:2-alpine AS caddy 43 | ## Copy the Caddyfile. 44 | COPY --from=prod /opt/docusaurus/Caddyfile /etc/caddy/Caddyfile 45 | ## Copy the Docusaurus build output. 46 | COPY --from=prod /opt/docusaurus/build /var/docusaurus 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_dockerfile-pnpm.mdx: -------------------------------------------------------------------------------- 1 | ```docker 2 | # syntax=docker/dockerfile:1 3 | 4 | # Stage 1: Base image. 5 | ## Start with a base image containing NodeJS so we can build Docusaurus. 6 | FROM node:lts AS base 7 | ## Disable colour output from yarn to make logs easier to read. 8 | ENV FORCE_COLOR=0 9 | ## Enable corepack. 10 | RUN corepack enable 11 | ## Set the working directory to `/opt/docusaurus`. 12 | WORKDIR /opt/docusaurus 13 | 14 | # Stage 2a: Development mode. 15 | FROM base AS dev 16 | ## Set the working directory to `/opt/docusaurus`. 17 | WORKDIR /opt/docusaurus 18 | ## Expose the port that Docusaurus will run on. 19 | EXPOSE 3000 20 | ## Run the development server. 21 | CMD [ -d "node_modules" ] && pnpm start -- --host 0.0.0.0 --poll 1000 || pnpm install && pnpm start -- --host 0.0.0.0 --poll 1000 22 | 23 | # Stage 2b: Production build mode. 24 | FROM base AS prod 25 | ## Set the working directory to `/opt/docusaurus`. 26 | WORKDIR /opt/docusaurus 27 | ## Copy over the source code. 28 | COPY . /opt/docusaurus/ 29 | ## Install dependencies with `--frozen-lockfile` to ensure reproducibility. 30 | RUN pnpm install --frozen-lockfile 31 | ## Build the static site. 32 | RUN pnpm build 33 | 34 | # Stage 3a: Serve with `docusaurus serve`. 35 | FROM prod AS serve 36 | ## Expose the port that Docusaurus will run on. 37 | EXPOSE 3000 38 | ## Run the production server. 39 | CMD ["pnpm", "serve", "--", "--host", "0.0.0.0", "--no-open"] 40 | 41 | # Stage 3b: Serve with Caddy. 42 | FROM caddy:2-alpine AS caddy 43 | ## Copy the Caddyfile. 44 | COPY --from=prod /opt/docusaurus/Caddyfile /etc/caddy/Caddyfile 45 | ## Copy the Docusaurus build output. 46 | COPY --from=prod /opt/docusaurus/build /var/docusaurus 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/deployment/docker/_partials/_dockerfile-yarn.mdx: -------------------------------------------------------------------------------- 1 | ```docker 2 | # syntax=docker/dockerfile:1 3 | 4 | # Stage 1: Base image. 5 | ## Start with a base image containing NodeJS so we can build Docusaurus. 6 | FROM node:lts AS base 7 | ## Disable colour output from yarn to make logs easier to read. 8 | ENV FORCE_COLOR=0 9 | ## Enable corepack. 10 | RUN corepack enable 11 | ## Set the working directory to `/opt/docusaurus`. 12 | WORKDIR /opt/docusaurus 13 | 14 | # Stage 2a: Development mode. 15 | FROM base AS dev 16 | ## Set the working directory to `/opt/docusaurus`. 17 | WORKDIR /opt/docusaurus 18 | ## Expose the port that Docusaurus will run on. 19 | EXPOSE 3000 20 | ## Run the development server. 21 | CMD [ -d "node_modules" ] && yarn start --host 0.0.0.0 --poll 1000 || yarn install && yarn start --host 0.0.0.0 --poll 1000 22 | 23 | # Stage 2b: Production build mode. 24 | FROM base AS prod 25 | ## Set the working directory to `/opt/docusaurus`. 26 | WORKDIR /opt/docusaurus 27 | ## Copy over the source code. 28 | COPY . /opt/docusaurus/ 29 | ## Install dependencies with `--immutable` to ensure reproducibility. 30 | RUN yarn install --immutable 31 | ## Build the static site. 32 | RUN yarn build 33 | 34 | # Stage 3a: Serve with `docusaurus serve`. 35 | FROM prod AS serve 36 | ## Expose the port that Docusaurus will run on. 37 | EXPOSE 3000 38 | ## Run the production server. 39 | CMD ["yarn", "serve", "--host", "0.0.0.0", "--no-open"] 40 | 41 | # Stage 3b: Serve with Caddy. 42 | FROM caddy:2-alpine AS caddy 43 | ## Copy the Caddyfile. 44 | COPY --from=prod /opt/docusaurus/Caddyfile /etc/caddy/Caddyfile 45 | ## Copy the Docusaurus build output. 46 | COPY --from=prod /opt/docusaurus/build /var/docusaurus 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/deployment/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deployment Knowledge 3 | sidebar_label: Deployment 4 | sidebar_position: 4 5 | --- 6 | 7 | import DocCardList from '@theme/DocCardList'; 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/design/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Design' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Design Knowledge -------------------------------------------------------------------------------- /docs/design/admonitions/admonition-var-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/admonition-var-diagram.png -------------------------------------------------------------------------------- /docs/design/admonitions/dark-mode-note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/dark-mode-note.png -------------------------------------------------------------------------------- /docs/design/admonitions/inspect-admonition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/inspect-admonition.png -------------------------------------------------------------------------------- /docs/design/admonitions/inspect-element.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/inspect-element.png -------------------------------------------------------------------------------- /docs/design/admonitions/light-mode-note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/light-mode-note.png -------------------------------------------------------------------------------- /docs/design/admonitions/note-admonition-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/note-admonition-html.png -------------------------------------------------------------------------------- /docs/design/admonitions/note-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/note-css.png -------------------------------------------------------------------------------- /docs/design/admonitions/note-custom-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/note-custom-colors.png -------------------------------------------------------------------------------- /docs/design/admonitions/overriding-note-bg-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DocusaurusCommunity/website/6556ba9a4197f3a568cf3f50d7768a595e37dad3/docs/design/admonitions/overriding-note-bg-color.gif -------------------------------------------------------------------------------- /docs/design/css/customtitle/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Customising Titles 3 | description: An example of using CSS to customise the titles in your Docusaurus project. 4 | --- 5 | 6 | In your Docusaurus project, you may need to modify the design by editing the CSS. We will see how to target specific elements to spruce up our documentation. 7 | 8 | 9 | 10 | ## Customise Heading (hx) tags. 11 | 12 | If you add a style to your h2, for example, you would add this style for the entire website. Consequently, 13 | elements like the h2 tags of your DocCardList would also be affected, and this is not really what we want. 14 | 15 | Here's a way to modify only the h2 tags of your documents, 16 | ```css 17 | .markdown h2 { 18 | padding: 35px; 19 | background-color: #1a8870; 20 | text-align: center; 21 | } 22 | 23 | .markdown .card h2 { 24 | padding: initial; 25 | background-color: initial; 26 | text-align: initial; 27 | } 28 | ``` 29 | 30 | ## The Result 31 | 32 | ![Example image showing customised h2 title.](/img/h2custom.png) 33 | 34 | ## Detailed Explanation 35 | 36 | Any markdown or mdx content in Docusaurus is wrapped in a div with the class `markdown`. You can target this class to style the content inside it. 37 | 38 | ```html 39 |
40 | ``` 41 | 42 | So to select the h2 tags hierarchically under this class, we write: 43 | 44 | ```css 45 | .markdown h2 { 46 | padding: 35px; 47 | background-color: #1a8870; 48 | text-align: center; 49 | } 50 | ``` 51 | 52 | To ensure that other h2 tags under the markdown class are not all affected, we reassign the original CSS properties to the other elements that should not be modified. For example, the titles of the DocCardList: 53 | 54 | ```css 55 | .markdown .card h2 { 56 | padding: initial; 57 | background-color: initial; 58 | text-align: initial; 59 | } 60 | ``` 61 | 62 | This way, only the h2 tags of the documents are modified, and the h2 tags of the DocCardList are not affected. 63 | -------------------------------------------------------------------------------- /docs/design/css/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS Knowledge 3 | --- 4 | 5 | import DocCardList from '@theme/DocCardList'; 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/design/icons/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Iconography' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Iconography Knowledge -------------------------------------------------------------------------------- /docs/design/icons/fontawesome/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: FontAwesome 3 | --- 4 | 5 | import Swizzling from '@site/partials/_swizzling.mdx'; 6 | 7 | > Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. 8 | 9 | Using icons in your documentation is a great way to add visual interest and help users understand the content. Font Awesome is a great icon library you can use in your documentation. This article shows you how to use Font Awesome icons in your Docusaurus documentation site. 10 | 11 | 12 | 13 | To complete these steps you will need to have a custom MDXComponents file. If you don't have one, just create the file `MDXComponents.js` or `MDXComponents.tsx` in the `src/theme` directory of your project. 14 | 15 | ## Installing Font Awesome 16 | 17 | Font Awesome is available for React as a series of Node Package Manager (NPM) packages. To install Font Awesome, run the following command, this installs the Font Awesome core, and the free solid icons: 18 | 19 | ```bash npm2yarn 20 | npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome 21 | ``` 22 | 23 | You can add the regular and brand icons by adding the following NPM packages: 24 | 25 | ```bash npm2yarn 26 | npm install --save @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons 27 | ``` 28 | 29 | You can add the Pro versions of any Font Awesome packages by [configuring access to the Font Awesome NPM repository](https://fontawesome.com/docs/web/setup/packages.html#configure-access) and installing the appropriate packages (for example `@fortawesome/pro-solid-svg-icons`). 30 | 31 | :::security[Protect your NPM token] 32 | If you are using a private NPM repository, you should protect your NPM tokens. 33 | 34 | If you're using `npm` you should use environment variables along with a `.npmrc` file to store your NPM token. For more information, see [alternate per project setup using environment variable (for NPM)](https://fontawesome.com/docs/web/setup/packages#alternate-per-project-setup-using-environment-variables). 35 | 36 | If you're using `yarn` you should use environment variables along with a `.yarnrc.yml` file to store your NPM token. For more information, see [per-project setup for modern Yarn](https://fontawesome.com/docs/web/setup/packages#per-project-setup-for-modern-yarn). 37 | ::: 38 | 39 | ## Using Font Awesome with Markdown or MDX 40 | 41 | You can use Font Awesome icons in your Markdown or MDX files by exposing the `FontAwesomeIcon` component in `MDXComponents`. An example of this is below with added comments to aid understanding: 42 | 43 | ```jsx title="src/theme/MDXComponents.js" 44 | import React from 'react'; 45 | // Import the original mapper 46 | import MDXComponents from '@theme-original/MDXComponents'; 47 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component. 48 | import { library } from '@fortawesome/fontawesome-svg-core'; // Import the library component. 49 | import { fab } from '@fortawesome/free-brands-svg-icons'; // Import all brands icons. 50 | import { fas } from '@fortawesome/free-solid-svg-icons'; // Import all solid icons. 51 | 52 | library.add(fab, fas); // Add all icons to the library so you can use them without importing them individually. 53 | 54 | export default { 55 | // Re-use the default mapping 56 | ...MDXComponents, 57 | FAIcon: FontAwesomeIcon, // Make the FontAwesomeIcon component available in MDX as . 58 | }; 59 | ``` 60 | 61 | We can then use the `icon` component in MDX files: 62 | 63 | ```jsx title="docs/my-doc.mdx" 64 | --- 65 | title: My Doc 66 | --- 67 | 68 | This is a GitHub icon. 69 | ``` 70 | 71 | ## Using Font Awesome with React 72 | 73 | You can use Font Awesome icons in your React components by using the `FontAwesomeIcon` component. Font Awesome have fantastic [React documentation](https://fontawesome.com/docs/web/use-with/react/) that you can use to learn more about using Font Awesome with React components. 74 | 75 | If this is working you'll see a Font Awesome GitHub icon below: 76 | 77 | 78 | -------------------------------------------------------------------------------- /docs/design/icons/iconify/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Iconify 3 | --- 4 | 5 | import Swizzling from '@site/partials/_swizzling.mdx'; 6 | 7 | > All popular icon sets, one framework. Over 100,000 open source vector icons. 8 | 9 | Using icons in your documentation is a great way to add visual interest and help users understand the content. Iconify is a great icon library you can use in your documentation. This article shows you how to use Iconify icons in your Docusaurus documentation site. 10 | 11 | 12 | 13 | To complete these steps you will need to have a custom MDXComponents file. If you don't have one, just create the file `MDXComponents.js` or `MDXComponents.tsx` in the `src/theme` directory of your project. 14 | 15 | ## Installing Iconify 16 | 17 | Iconify is available for React as a Node Package Manager (NPM) package. To install Iconify, run the following command: 18 | 19 | ```bash npm2yarn 20 | npm install --save @iconify/react 21 | ``` 22 | 23 | ## Using Iconify with Markdown or MDX 24 | 25 | You can use Iconify in your Markdown or MDX files by exposing the `Iconify` component in `MDXComponents`. An example of this is below with added comments to aid understanding: 26 | 27 | ```jsx title="src/theme/MDXComponents.js" 28 | import React from 'react'; 29 | // Import the original mapper 30 | import MDXComponents from '@theme-original/MDXComponents'; 31 | import { Icon } from '@iconify/react'; // Import the entire Iconify library. 32 | 33 | export default { 34 | // Re-use the default mapping 35 | ...MDXComponents, 36 | IIcon: Icon, // Make the iconify Icon component available in MDX as . 37 | }; 38 | ``` 39 | 40 | We can then use the `icon` component in MDX files: 41 | 42 | ```jsx title="docs/my-doc.mdx" 43 | --- 44 | title: My Doc 45 | --- 46 | 47 | This is a GitHub icon. 48 | ``` 49 | 50 | Iconify have a superb [Icon Explorer](https://icon-sets.iconify.design/) where you can search for icons and copy the code to use in your documentation. 51 | 52 | ## Using Iconify with React 53 | 54 | You can use Iconify icons in your React components by using the `Icon` component. Iconify have wonderful [React documentation](https://docs.iconify.design/icon-components/react/) that you can use to learn more about using Iconify with React components. 55 | 56 | If this is working you'll see an Iconify GitHub icon below: 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/design/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Design Knowledge 3 | sidebar_label: Design 4 | sidebar_position: 1 5 | --- 6 | 7 | import DocCardList from '@theme/DocCardList'; 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/development/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 1 # float position is supported 2 | label: 'Development' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Development Knowledge -------------------------------------------------------------------------------- /docs/development/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Development Knowledge 3 | sidebar_label: Development 4 | sidebar_position: 2 5 | --- 6 | 7 | import DocCardList from '@theme/DocCardList'; 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/development/plugins/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Plugins' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Plugin Development -------------------------------------------------------------------------------- /docs/development/plugins/getting-started/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Getting Started' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: doc 7 | id: index -------------------------------------------------------------------------------- /docs/development/plugins/getting-started/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting Started 3 | --- 4 | 5 | Placeholder 6 | -------------------------------------------------------------------------------- /docs/development/scripts/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Scripts' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Scripts Development -------------------------------------------------------------------------------- /docs/development/scripts/numeration-system/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 0 # float position is supported 2 | label: 'Numeration System' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: doc 7 | id: index -------------------------------------------------------------------------------- /docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Knowledge Intro" 3 | hide_title: true 4 | sidebar_position: -999 5 | --- 6 | 7 | The knowledge base is a collection of articles written by the community. It's a place to share your knowledge and learn from others. The following categories exist to group content: 8 | {/* vale Microsoft.ComplexWords = NO */} 9 | - [Design](./design/) - Guides/articles covering design-related topics. 10 | - [Development](./development/) - Guides/articles covering development-related topics. 11 | - [Component Library](./component-library/) - Sharing custom components for Docusaurus. 12 | - [Deployment](./deployment/) - Guides/articles covering deployment-related topics. 13 | {/* vale Microsoft.ComplexWords = YES */} 14 | 15 | ## How to contribute 16 | 17 | If you want to contribute to the knowledge base, you can do so by creating a pull request on the [website repository](https://github.com/homotechsual/docusaurus.community). The knowledge base is a collection of Markdown files, so you can create a new file or edit an existing one. 18 | -------------------------------------------------------------------------------- /docs/markdown/_category_.yaml: -------------------------------------------------------------------------------- 1 | position: 1 # float position is supported 2 | label: 'Markdown' 3 | collapsible: true # make the category collapsible 4 | collapsed: false # keep the category open by default 5 | link: 6 | type: generated-index 7 | title: Markdown Knowledge 8 | -------------------------------------------------------------------------------- /docs/markdown/definition-lists.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Definition Lists 3 | description: Adding definition lists to your documentation. 4 | --- 5 | 6 | [Definition lists](https://www.w3schools.com/HTML/html_lists_other.asp) are used to define terms and their corresponding definitions. They are useful for glossaries, FAQs, and other reference material. 7 | 8 | We can add definition lists to our documentation by using the `dl` tag. Inside the `dl` tag, we can add `dt` tags for the term and `dd` tags for the definition. 9 | 10 | ```html 11 |
12 |
Term
13 |
Definition
14 |
15 | ``` 16 | 17 | However we don't like using HTML tags directly in our Markdown files. Luckily the excellent [remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) ecosystem comes to the rescue. We can use the [remark-deflist](https://github.com/Symbitic/remark-plugins/blob/master/packages/remark-deflist/README.md) plugin to add definition lists to our documentation. 18 | 19 | First we need to install the plugin. 20 | 21 | ```bash npm2yarn 22 | npm install remark-deflist 23 | ``` 24 | 25 | Then we can add the plugin to our `remark` plugins in our `docusaurus.config.js` file. 26 | 27 | ```js 28 | import remarkDefList from 'remark-deflist'; 29 | ... 30 | presets: [ 31 | [ 32 | '@docusaurus/preset-classic', 33 | { 34 | docs: { 35 | remarkPlugins: [ 36 | remarkDefList, 37 | ], 38 | }, 39 | blog: { 40 | remarkPlugins: [ 41 | remarkDefList, 42 | ], 43 | }, 44 | pages: { 45 | remarkPlugins: [ 46 | remarkDefList, 47 | ], 48 | }, 49 | }, 50 | ], 51 | ], 52 | ``` 53 | 54 | Now we can add definition lists to our documentation. 55 | 56 | ```mdx 57 | Apple 58 | : Pomaceous fruit of plants of the genus Malus in the family Rosaceae. 59 | 60 | Orange 61 | : The fruit of an evergreen tree of the genus Citrus. 62 | ``` 63 | 64 | Which will render as: 65 | 66 | Apple 67 | : Pomaceous fruit of plants of the genus Malus in the family Rosaceae. 68 | 69 | Orange 70 | : The fruit of an evergreen tree of the genus Citrus. 71 | -------------------------------------------------------------------------------- /docusaurus.community.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | } 6 | ], 7 | "settings": { 8 | "prettier.prettierPath": ".yarn/sdks/prettier", 9 | "typescript.tsdk": ".yarn/sdks/typescript/lib", 10 | "typescript.enablePromptUseWorkspaceTsdk": true, 11 | "cSpell.words": [ 12 | "deflist", 13 | "iconify", 14 | "katex", 15 | "rehype" 16 | ], 17 | "discord.enabled": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docusaurus-community", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc" 16 | }, 17 | "dependencies": { 18 | "@docusaurus/core": "^3.5.0", 19 | "@docusaurus/plugin-content-docs": "^3.5.0", 20 | "@docusaurus/plugin-ideal-image": "^3.5.0", 21 | "@docusaurus/preset-classic": "^3.5.0", 22 | "@docusaurus/remark-plugin-npm2yarn": "^3.5.0", 23 | "@docusaurus/theme-classic": "^3.5.0", 24 | "@docusaurus/theme-common": "^3.5.0", 25 | "@docusaurus/utils": "^3.5.0", 26 | "@easyops-cn/docusaurus-search-local": "^0.44.4", 27 | "@fortawesome/fontawesome-svg-core": "^6.6.0", 28 | "@fortawesome/free-brands-svg-icons": "^6.6.0", 29 | "@fortawesome/free-regular-svg-icons": "^6.6.0", 30 | "@fortawesome/free-solid-svg-icons": "^6.6.0", 31 | "@fortawesome/react-fontawesome": "^0.2.2", 32 | "@iconify/react": "^5.0.2", 33 | "@mdx-js/react": "^3.0.1", 34 | "@popperjs/core": "^2.11.8", 35 | "@swc/core": "^1.7.9", 36 | "@types/react-dom": "^18.3.0", 37 | "clsx": "^2.1.1", 38 | "docusaurus-plugin-plausible": "^0.0.5", 39 | "docusaurus-plugin-sass": "^0.2.5", 40 | "docusaurus-remark-plugin-tab-blocks": "^3.1.0", 41 | "git-url-parse": "^14.1.0", 42 | "prism-react-renderer": "^2.3.1", 43 | "react": "^18.3.1", 44 | "react-dom": "^18.3.1", 45 | "react-ideal-image": "^0.0.5", 46 | "react-popper": "^2.3.0", 47 | "rehype-katex": "7", 48 | "remark-definition-list": "^2.0.0", 49 | "remark-deflist": "^1.0.0", 50 | "remark-math": "6", 51 | "sass": "^1.77.1", 52 | "swc-loader": "^0.2.6" 53 | }, 54 | "devDependencies": { 55 | "@docusaurus/module-type-aliases": "^3.5.0", 56 | "@docusaurus/tsconfig": "^3.5.0", 57 | "@docusaurus/types": "^3.5.0", 58 | "@types/jest": "^29.5.12", 59 | "@types/node": "^22.1.0", 60 | "@types/react": "^18.3.3", 61 | "jest": "^29.7.0", 62 | "prettier": "3.3.3", 63 | "prettier-plugin-css-order": "2.1.2", 64 | "prop-types": "^15.8.1", 65 | "react-waypoint": "^10.3.0", 66 | "typescript": "^5.5.4", 67 | "webpack": "^5.93.0" 68 | }, 69 | "browserslist": { 70 | "production": [ 71 | ">0.5%", 72 | "not dead", 73 | "not op_mini all" 74 | ], 75 | "development": [ 76 | "last 1 chrome version", 77 | "last 1 firefox version", 78 | "last 1 safari version" 79 | ] 80 | }, 81 | "engines": { 82 | "node": ">=18.14" 83 | }, 84 | "packageManager": "yarn@4.4.0", 85 | "dependenciesMeta": { 86 | "@docusaurus/tsconfig": { 87 | "unplugged": true 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /partials/_swizzling.mdx: -------------------------------------------------------------------------------- 1 | :::tip[Swizzling] 2 | To complete these steps, you'll need to understand how to swizzle a Docusaurus component. If you're not familiar with swizzling, check out the [swizzling documentation](https://docusaurus.io/docs/swizzling). 3 | ::: 4 | -------------------------------------------------------------------------------- /serve.docker-compose.yml: -------------------------------------------------------------------------------- 1 | name: "docusaurus" 2 | services: 3 | serve: 4 | build: 5 | context: . 6 | target: serve 7 | ports: 8 | - "3000:3000" 9 | environment: 10 | - NODE_ENV=production 11 | -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | 'intro', 23 | 'hello', 24 | { 25 | type: 'category', 26 | label: 'Tutorial', 27 | items: ['tutorial-basics/create-a-document'], 28 | }, 29 | ], 30 | */ 31 | }; 32 | 33 | module.exports = sidebars; 34 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode, CSSProperties } from 'react'; 2 | import clsx from 'clsx'; 3 | import Link from '@docusaurus/Link'; 4 | 5 | // Define the Button type to control the props that can be passed to the Button component. 6 | type Button = { 7 | // The size prop can be one of the following values: 'sm', 'lg', 'small', 'medium', 'large', or null. 8 | // We'll convert 'small' to 'sm' and 'large' to 'lg' in the component. 'medium' will be considered null. 9 | size?: 'sm' | 'lg' | 'small' | 'medium' | 'large' | null; 10 | // The outline prop is a boolean that determines if the button should be an outline button. 11 | outline?: boolean; 12 | // The variant prop is a string that determines the color of the button. 13 | // It can be one of the following values: 'primary', 'secondary', 'danger', 'warning', 'success', 'info', 'link', or any other string. 14 | // The default value is 'primary'. 15 | variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string; 16 | // The block prop is a boolean that determines if the button should be a block-level button. 17 | block?: boolean; 18 | // The disabled prop is a boolean that determines if the button should be disabled. 19 | disabled?: boolean; 20 | // The className prop is a string that allows you to add custom classes to the button. 21 | className?: string; 22 | // The style prop is an object that allows you to add custom styles to the button. 23 | style?: CSSProperties; 24 | // The link prop is a string that determines the URL the button should link to. 25 | link: string; 26 | // The label prop is a string that determines the text of the button. 27 | label: string; 28 | } 29 | 30 | // Button component that accepts the specified props. 31 | export default function Button ({ 32 | size = null, 33 | outline = false, 34 | variant = 'primary', 35 | block = false, 36 | disabled = false, 37 | className, 38 | style, 39 | link, 40 | label 41 | }: Button) { 42 | // Map the size prop values to corresponding CSS classes. 43 | const sizeMap = { 44 | sm: 'sm', 45 | small: 'sm', 46 | lg: 'lg', 47 | large: 'lg', 48 | medium: null, 49 | }; 50 | const buttonSize = size ? sizeMap[size] : ''; 51 | const sizeClass = buttonSize ? `button--${buttonSize}` : ''; 52 | const outlineClass = outline ? 'button--outline' : ''; 53 | const variantClass = variant ? `button--${variant}` : ''; 54 | const blockClass = block ? 'button--block' : ''; 55 | const disabledClass = disabled ? 'disabled' : ''; 56 | // If the button is disabled, set the destination to null. 57 | const destination = disabled ? null : link; 58 | return ( 59 | 60 | 77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/components/Card/CardBody/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | interface CardBodyProps { 5 | className?: string; 6 | style?: CSSProperties; 7 | children: ReactNode; 8 | textAlign?: string; 9 | variant?: string; 10 | italic?: boolean; 11 | noDecoration?: boolean; 12 | transform?: string; 13 | breakWord?: boolean; 14 | truncate?: boolean; 15 | weight?: string; 16 | } 17 | 18 | const CardBody: React.FC = ({ 19 | className, 20 | style, 21 | children, 22 | textAlign, 23 | variant, 24 | italic = false, 25 | noDecoration = false, 26 | transform, 27 | breakWord = false, 28 | truncate = false, 29 | weight, 30 | }) => { 31 | const text = textAlign ? `text--${textAlign}` : ''; 32 | const textColor = variant ? `text--${variant}` : ''; 33 | const textItalic = italic ? 'text--italic' : ''; 34 | const textDecoration = noDecoration ? 'text-no-decoration' : ''; 35 | const textType = transform ? `text--${transform}` : ''; 36 | const textBreak = breakWord ? 'text--break' : ''; 37 | const textTruncate = truncate ? 'text--truncate' : ''; 38 | const textWeight = weight ? `text--${weight}` : ''; 39 | 40 | return ( 41 |
56 | {children} 57 |
58 | ); 59 | }; 60 | 61 | export default CardBody; 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/Card/CardFooter/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | interface CardFooterProps { 5 | className?: string; 6 | style?: CSSProperties; 7 | children: ReactNode; 8 | textAlign?: string; 9 | variant?: string; 10 | italic?: boolean; 11 | noDecoration?: boolean; 12 | transform?: string; 13 | breakWord?: boolean; 14 | truncate?: boolean; 15 | weight?: string; 16 | } 17 | 18 | const CardFooter: React.FC = ({ 19 | className, 20 | style, 21 | children, 22 | textAlign, 23 | variant, 24 | italic = false, 25 | noDecoration = false, 26 | transform, 27 | breakWord = false, 28 | truncate = false, 29 | weight, 30 | }) => { 31 | const text = textAlign ? `text--${textAlign}` : ''; 32 | const textColor = variant ? `text--${variant}` : ''; 33 | const textItalic = italic ? 'text--italic' : ''; 34 | const textDecoration = noDecoration ? 'text-no-decoration' : ''; 35 | const textType = transform ? `text--${transform}` : ''; 36 | const textBreak = breakWord ? 'text--break' : ''; 37 | const textTruncate = truncate ? 'text--truncate' : ''; 38 | const textWeight = weight ? `text--${weight}` : ''; 39 | 40 | return ( 41 |
56 | {children} 57 |
58 | ); 59 | }; 60 | 61 | export default CardFooter; 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/components/Card/CardHeader/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | const CardHeader = ({ 5 | className, // Custom CSS classes for the component 6 | style, // Custom CSS styles for the component 7 | children, // The content of the component 8 | textAlign, // Text alignment 9 | variant, // Text color variant 10 | italic = false, // Italic text 11 | noDecoration = false, // No text decoration 12 | transform, // Text transformation 13 | breakWord = false, // Break word 14 | truncate = false, // Truncate text 15 | weight, // Text weight 16 | }) => { 17 | const text = textAlign ? `text--${textAlign}` :''; 18 | const textColor = variant ? `text--${variant}` : ''; 19 | const textItalic = italic ? 'text--italic' : ''; 20 | const textDecoration = noDecoration ? 'text-no-decoration' : ''; 21 | const textType = transform ? `text--${transform}` : ''; 22 | const textBreak = breakWord ? 'text--break' : ''; 23 | const textTruncate = truncate ? 'text--truncate' : ''; 24 | const textWeight = weight ? `text--${weight}` : ''; 25 | return ( 26 |
27 | {children} 28 |
29 | ); 30 | } 31 | 32 | export default CardHeader; 33 | -------------------------------------------------------------------------------- /src/components/Card/CardImage/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties } from 'react'; 2 | import clsx from 'clsx'; 3 | import useBaseUrl from '@docusaurus/useBaseUrl'; 4 | 5 | interface CardImageProps { 6 | className?: string; 7 | style?: CSSProperties; 8 | cardImageUrl: string; 9 | alt: string; 10 | title: string; 11 | } 12 | 13 | const CardImage: React.FC = ({ 14 | className, 15 | style, 16 | cardImageUrl, 17 | alt, 18 | title, 19 | }) => { 20 | const generatedCardImageUrl = useBaseUrl(cardImageUrl); 21 | 22 | return ( 23 | 24 | {alt} 25 | 26 | ); 27 | }; 28 | 29 | export default CardImage; 30 | -------------------------------------------------------------------------------- /src/components/Card/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react'; // Import types for props 2 | import clsx from 'clsx'; // clsx helps manage conditional class names in a clean and concise manner. 3 | 4 | // Define an interface for the component props 5 | interface CardProps { 6 | className?: string; // Optional class names for the container card 7 | style?: CSSProperties; // Optional custom styles for the container card 8 | children: ReactNode; // Content to be included within the card 9 | shadow?: 'lw' | 'md' | 'tl'; // Optional shadow levels: low (lw), medium (md), tall (tl) 10 | } 11 | 12 | // Build the card component with the specified props 13 | const Card: React.FC = ({ 14 | className, // Classes for the container card 15 | style, // Custom styles for the container card 16 | children, // Content to be included within the card 17 | shadow, // used to add shadow under your card. Expected values are: low (lw), medium (md), tall (tl) 18 | }) => { 19 | const cardShadow = shadow ? `item shadow--${shadow}` : ''; 20 | return ( 21 |
22 | {children} 23 |
24 | ); 25 | }; 26 | 27 | export default Card; 28 | -------------------------------------------------------------------------------- /src/components/ColorPreview/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode, CSSProperties } from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | 5 | type ColorPreview = { 6 | color: string; 7 | label?: string; 8 | } 9 | 10 | export default function ColorPreview ({ color, label } : ColorPreview) { 11 | const style : CSSProperties = { 12 | alignSelf: 'center', 13 | backgroundColor: color, 14 | }; 15 | const colorName = label ?? color; 16 | return ( 17 |
18 |
19 | {colorName} 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/ColorPreview/styles.module.scss: -------------------------------------------------------------------------------- 1 | html { 2 | .color { 3 | border-color: #000; 4 | border-radius: 0.5rem; 5 | border-width: 0.25rem; 6 | border-style: solid; 7 | display: inline-block; 8 | vertical-align: middle; 9 | width: 2rem; 10 | height: 2rem; 11 | } 12 | &[data-theme='dark'] { 13 | .color { 14 | border-color: #fff; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Column/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode, CSSProperties } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | interface ColumnProps { 5 | children: ReactNode; 6 | className?: string; 7 | style?: CSSProperties; 8 | } 9 | 10 | export default function Column({ children, className, style }: ColumnProps) { 11 | return ( 12 |
13 | {children} 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Columns/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode , CSSProperties} from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | interface ColumnsProps { 5 | children: ReactNode; 6 | className?: string; 7 | style?: CSSProperties; 8 | } 9 | 10 | export default function Columns({ children, className , style }: ColumnsProps) { 11 | return ( 12 |
13 |
14 | {children} 15 |
16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/components/DocusaurusButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | import DocusaurusLogo from '@site/src/assets/Docusaurus.svg' 6 | 7 | type Props = { 8 | to: string; 9 | label: string; 10 | }; 11 | 12 | export default function DocusaurusButton(props: Props): JSX.Element { 13 | return ( 14 |
15 |

16 | 17 | 18 | {props.label} 19 | 20 |

21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/DocusaurusButton/styles.module.scss: -------------------------------------------------------------------------------- 1 | .docusaurusButton { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: center; 5 | width: 100%; 6 | } 7 | 8 | .docusaurusButtonButton { 9 | display: flex; 10 | line-height: 2rem; 11 | } 12 | 13 | .docusaurusButtonIcon { 14 | align-items: center; 15 | display: inline-flex; 16 | padding-right: 0.25rem; 17 | svg { 18 | height: 1.5rem; 19 | width: 1.5rem; 20 | display: inline-block; 21 | justify-self: baseline; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/FocusButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | 6 | export default function FocusButton(): JSX.Element { 7 | return ( 8 |
9 |
10 |
11 |

Our community-curated knowledge base is an eclectic collection of in-depth knowledge on Docusaurus customisations. It's a fantastic companion to the Docusaurus documentation.

12 |

13 | Check out the Docusaurus documentation 14 |

15 |
16 |
17 |
18 | ); 19 | } -------------------------------------------------------------------------------- /src/components/FocusButton/styles.module.scss: -------------------------------------------------------------------------------- 1 | .focusButton { 2 | align-items: center; 3 | padding: 2rem 0; 4 | width: 100%; 5 | background-color: var(--ifm-color-primary-lightest); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/HomepageAnalytics/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | export default function HomepageAnalytics(): JSX.Element { 6 | return ( 7 |
8 |
9 |
10 |

We use the Plausible Analytics system to track engagement on the site. In the interests of transparency and being good web citizens the analytics information we gather can be viewed publicly.

11 |

12 | Analytics Information for Docusaurus.community 13 |

14 |
15 |
16 |
17 | ); 18 | } 19 | 20 | -------------------------------------------------------------------------------- /src/components/HomepageAnalytics/styles.module.scss: -------------------------------------------------------------------------------- 1 | .analytics { 2 | align-items: center; 3 | padding: 2rem 0; 4 | width: 100%; 5 | background-color: var(--ifm-background-color); 6 | } 7 | 8 | .analyticsText { 9 | font-size: 1.5rem; 10 | } 11 | 12 | .analyticsButton { 13 | width: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/HomepageDocumentation/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | export default function HomepageDocumentation(): JSX.Element { 6 | return ( 7 |
8 |
9 |
10 |

Our community-curated knowledge base is an eclectic collection of in-depth knowledge on Docusaurus customisations. It's a fantastic companion to the Docusaurus documentation.

11 |

12 | Check out the Docusaurus documentation 13 |

14 |
15 |
16 |
17 | ); 18 | } -------------------------------------------------------------------------------- /src/components/HomepageDocumentation/styles.module.scss: -------------------------------------------------------------------------------- 1 | .documentation { 2 | align-items: center; 3 | padding: 2rem 0; 4 | width: 100%; 5 | background-color: var(--ifm-color-primary-darkest); 6 | } 7 | 8 | .documentationText { 9 | color: #fff; 10 | font-size: 1.5rem; 11 | } 12 | 13 | .documentationButton { 14 | width: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/HomepageDocumentationButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | 6 | export default function FocusButton(): JSX.Element { 7 | return ( 8 |
9 |
10 |
11 |

Our community-curated knowledge base is an eclectic collection of in-depth knowledge on Docusaurus customisations. It's a fantastic companion to the Docusaurus documentation.

12 |

13 | Check out the Docusaurus documentation 14 |

15 |
16 |
17 |
18 | ); 19 | } -------------------------------------------------------------------------------- /src/components/HomepageFeatures/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import { pluginCount } from '@site/src/data/plugins'; 5 | import Link from '@docusaurus/Link'; 6 | 7 | type FeatureItem = { 8 | title: string; 9 | Svg: React.ComponentType>; 10 | description: JSX.Element; 11 | button: { 12 | link: string; 13 | text: string; 14 | } 15 | }; 16 | 17 | const FeatureList: FeatureItem[] = [ 18 | { 19 | title: 'Plugin Directory', 20 | Svg: require('@site/static/img/undraw_portfolio.svg').default, 21 | description: ( 22 | <> 23 | We've gathered data on {pluginCount} plugins, we need your help to gather data on more! You can add details on your own plugin or help us add details on other plugins. 24 | 25 | ), 26 | button: { 27 | link: '/plugindirectory', 28 | text: 'View Plugin Directory', 29 | } 30 | }, 31 | { 32 | title: 'Knowledge Sharing', 33 | Svg: require('@site/static/img/undraw_knowledge.svg').default, 34 | description: ( 35 | <> 36 | We've gathered tutorials, guides, and other resources to help you accelerate your Docusaurus projects and development. 37 | 38 | ), 39 | button: { 40 | link: '/knowledge', 41 | text: 'View Knowledge', 42 | } 43 | }, 44 | ]; 45 | 46 | function Feature({title, Svg, description, button}: FeatureItem) { 47 | return ( 48 |
49 |
50 | 51 |
52 |
53 |

{title}

54 |

{description}

55 | {button.text} 56 |
57 |
58 | ); 59 | } 60 | 61 | export default function HomepageFeatures(): JSX.Element { 62 | return ( 63 |
64 |
65 |
66 | {FeatureList.map((props, idx) => ( 67 | 68 | ))} 69 |
70 |
71 |
72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures/styles.module.scss: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/HomepageFocusButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | import Link from '@docusaurus/Link'; 5 | 6 | export default function FocusButton(): JSX.Element { 7 | return ( 8 |
9 |
10 |
11 |

Our community-curated knowledge base is an eclectic collection of in-depth knowledge on Docusaurus customisations. It's a fantastic companion to the Docusaurus documentation.

12 |

13 | Check out the Docusaurus documentation 14 |

15 |
16 |
17 |
18 | ); 19 | } -------------------------------------------------------------------------------- /src/components/ImageOnClick/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; // Import React and useState hook 2 | import clsx from 'clsx'; // Import clsx library for conditional classes 3 | import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus 4 | import styles from './styles.module.scss'; // Import styles from SCSS module 5 | 6 | // Define the type for props passed to the ImageOnClick component 7 | interface ImageOnClickProps { 8 | imageUrl: string; // URL of the image 9 | altText: string; // Alternative text for the image 10 | buttonName: string; // Name of the button to show/hide the image 11 | } 12 | 13 | // Define the ImageOnClick component as a functional component 14 | const ImageOnClick: React.FC = ({ imageUrl, altText, buttonName }) => { 15 | const [showImg, setShowImg] = useState(false); // State to track whether image should be shown or hidden 16 | 17 | const generatedImageUrl = useBaseUrl(imageUrl); // Use the useBaseUrl function to generate the image URL 18 | 19 | return ( 20 | 21 | {/* Button to toggle visibility of the image */} 22 | setShowImg(!showImg)} className={styles.cursor}> 23 | {buttonName} 24 | 25 | {/* Conditionally render the image if showImg is true */} 26 | {showImg && ( 27 | 28 | {/* Image element */} 29 | {altText} 30 | 31 | )} 32 | 33 | ); 34 | } 35 | 36 | export default ImageOnClick; // Export the ImageOnClick component 37 | -------------------------------------------------------------------------------- /src/components/ImageOnClick/styles.module.scss: -------------------------------------------------------------------------------- 1 | .imageonclick { 2 | display: flex; 3 | max-width: 50% !important; 4 | margin: auto; /* Ajustez cette valeur selon vos besoins */ 5 | } 6 | .cursor { 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /src/components/Timeline/TimelineItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from '../styles.module.scss'; 4 | 5 | interface TimelineItemProps { 6 | className?: string; 7 | style?: CSSProperties; 8 | children: ReactNode; 9 | align?: 'left' | 'right' ; 10 | textAlign?: 'left' | 'right' | 'center' | 'justify'; 11 | variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string; 12 | italic?: boolean; 13 | noDecoration?: boolean; 14 | transform?: 'uppercase' | 'lowercase' | 'capitalize'; 15 | breakWord?: boolean; 16 | truncate?: boolean; 17 | weight?: 'light' | 'normal' | 'bold' |'semibold'; 18 | color?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string; 19 | shadow?: string; 20 | } 21 | 22 | const TimelineItem: React.FC = ({ 23 | className, // Custom classes for the button 24 | style, // Custom styles for the button 25 | children, // Children elements 26 | align = 'left' , // position of item 27 | textAlign = 'justify', // text position 28 | variant = 'primary', // background color 29 | italic = false , // style italic for text 30 | noDecoration = false, // style no text decoration 31 | transform, // option for transform text to UPPERCASE TEXT lowercase text or Capitalize Text 32 | breakWord = false, // option for break text, the text will break at the a word boundary so it will not break in the middle of a word. 33 | truncate = false, // The option is for very long text that will be truncated if there is not enough space to display it in a single line on the screen. It's truncated by adding... 34 | weight, // The option for text weight Bold Semibold Normal Light 35 | color, // text color 36 | shadow = 'tl', // shadow option 37 | }) => { 38 | const boxshadow = shadow ? `item shadow--${shadow}` : ''; 39 | const bgcolor = variant ? styles[`timeline__content--${variant}`] : ''; 40 | const itemalign = align ? styles[`timeline__item--${align}`] : ''; 41 | const text = textAlign ? `text--${textAlign}` : ''; 42 | const textColor = color ? `text--${color}` : ''; 43 | const textItalic = italic ? 'text--italic' : ''; 44 | const textDecoration = noDecoration ? 'text-no-decoration' : ''; 45 | const textType = transform ? `text--${transform}` : ''; 46 | const textBreak = breakWord ? 'text--break' : ''; 47 | const textTruncate = truncate ? 'text--truncate' : ''; 48 | const textWeight = weight ? `text--${weight}` : ''; 49 | 50 | return ( 51 |
52 |
69 | {children} 70 |
71 |
72 | ); 73 | }; 74 | 75 | export default TimelineItem; 76 | -------------------------------------------------------------------------------- /src/components/Timeline/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, ReactNode } from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.scss'; 4 | 5 | interface TimeLineProps { 6 | className?: string; // Optional custom classes for the button 7 | style?: CSSProperties; // Optional custom styles for the button 8 | children: ReactNode; // Children elements 9 | variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string; 10 | } 11 | 12 | const TimeLine: React.FC = ({ 13 | className, // Custom classes for the button 14 | style, // Custom styles for the button 15 | children, 16 | variant, // for line color 17 | }) => { 18 | const bgLineColor = variant ? styles[`timeline--${variant}`] : ''; // css integrate infima color 19 | 20 | return ( 21 |
22 | {children} 23 |
24 | ); 25 | }; 26 | 27 | export default TimeLine; 28 | -------------------------------------------------------------------------------- /src/components/svgIcons/AddPluginIcon/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import Svg, {type SvgIconProps} from '@site/src/components/Svg'; 10 | 11 | export default function AddPluginIcon( 12 | props: Omit, 13 | ): JSX.Element { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/components/svgIcons/AuthorIcon/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import Svg, {type SvgIconProps} from '@site/src/components/Svg'; 10 | 11 | export default function AuthorIcon( 12 | props: Omit, 13 | ): JSX.Element { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/components/svgIcons/FavoriteIcon/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import Svg, {type SvgIconProps} from '@site/src/components/Svg'; 10 | 11 | export default function FavoriteIcon( 12 | props: Omit, 13 | ): JSX.Element { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/components/svgIcons/MaintenanceIcon/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import Svg, {type SvgIconProps} from '@site/src/components/Svg'; 10 | 11 | export default function MaintenanceIcon( 12 | props: Omit, 13 | ): JSX.Element { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/index.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Link from '@docusaurus/Link'; 4 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 5 | import Layout from '@theme/Layout'; 6 | import HomepageFeatures from '@site/src/components/HomepageFeatures'; 7 | import HomepageDocumentation from '@site/src/components/HomepageDocumentation'; 8 | import HomepageAnalytics from '@site/src/components/HomepageAnalytics'; 9 | 10 | import styles from './index.module.scss'; 11 | 12 | function HomepageHeader() { 13 | const {siteConfig} = useDocusaurusContext(); 14 | return ( 15 |
16 |
17 |

{siteConfig.title}

18 |

{siteConfig.tagline}

19 |
20 |
21 | ); 22 | } 23 | 24 | export default function Home(): JSX.Element { 25 | const {siteConfig} = useDocusaurusContext(); 26 | return ( 27 | 30 | 31 |
32 | 33 | 34 | 35 |
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryCard/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .pluginDirectoryCardImage { 9 | overflow: hidden; 10 | height: 150px; 11 | border-bottom: 2px solid var(--ifm-color-emphasis-200); 12 | } 13 | 14 | .pluginDirectoryCardHeader { 15 | display: flex; 16 | align-items: center; 17 | margin-bottom: 12px; 18 | } 19 | 20 | .pluginDirectoryCardTitle { 21 | margin-bottom: 0; 22 | flex: 1 1 auto; 23 | } 24 | 25 | .pluginDirectoryCardTitle a { 26 | text-decoration: none; 27 | background: linear-gradient( 28 | var(--ifm-color-primary), 29 | var(--ifm-color-primary) 30 | ) 31 | 0% 100% / 0% 1px no-repeat; 32 | transition: background-size ease-out 200ms; 33 | } 34 | 35 | .pluginDirectoryCardTitle a:not(:focus):hover { 36 | background-size: 100% 1px; 37 | } 38 | 39 | .pluginDirectoryCardTitle, 40 | .pluginDirectoryCardHeader .svgIconFavourite { 41 | margin-right: 0.25rem; 42 | } 43 | 44 | .pluginDirectoryCardHeader .svgIconFavourite { 45 | color: var(--site-color-svg-icon-favourite); 46 | } 47 | 48 | .pluginDirectoryCardHeader .svgIconDocusaurus { 49 | height: 0.9rem; 50 | width: 0.9rem; 51 | margin-right: 0.25rem; 52 | } 53 | 54 | .pluginDirectoryCardSrcBtn { 55 | margin-left: 6px; 56 | padding-left: 12px; 57 | padding-right: 12px; 58 | border: none; 59 | } 60 | 61 | .pluginDirectoryCardSrcBtn:focus-visible { 62 | background-color: var(--ifm-color-secondary-dark); 63 | } 64 | 65 | [data-theme='dark'] .pluginDirectoryCardSrcBtn { 66 | background-color: var(--ifm-color-emphasis-200) !important; 67 | color: inherit; 68 | } 69 | 70 | [data-theme='dark'] .pluginDirectoryCardSrcBtn:hover { 71 | background-color: var(--ifm-color-emphasis-300) !important; 72 | } 73 | 74 | .pluginDirectoryCardBody { 75 | font-size: smaller; 76 | line-height: 1.66; 77 | } 78 | 79 | .cardFooter { 80 | display: flex; 81 | flex-wrap: wrap; 82 | } 83 | 84 | .tag { 85 | font-size: 0.675rem; 86 | border: 1px solid var(--ifm-color-secondary-darkest); 87 | cursor: default; 88 | margin-right: 6px; 89 | margin-bottom: 6px !important; 90 | border-radius: 12px; 91 | display: inline-flex; 92 | align-items: center; 93 | } 94 | 95 | .tag .textLabel { 96 | margin-left: 8px; 97 | } 98 | 99 | .tag .colorLabel { 100 | width: 7px; 101 | height: 7px; 102 | border-radius: 50%; 103 | margin-left: 6px; 104 | margin-right: 6px; 105 | } 106 | 107 | .maintenanceLabel { 108 | font-size: 0.8rem; 109 | font-weight: bold; 110 | margin-right: 6px; 111 | } 112 | 113 | .maintenanceStatus { 114 | font-size: 0.8rem; 115 | cursor: default; 116 | margin-right: 6px; 117 | display: inline-flex; 118 | align-items: center; 119 | } 120 | 121 | .maintenanceStatus .textLabel { 122 | margin-left: 8px; 123 | } 124 | 125 | .maintenanceStatus .maintenanceStatusIcon { 126 | font-size: 7; 127 | border-radius: 50%; 128 | margin-left: 6px; 129 | margin-right: 6px; 130 | } 131 | 132 | .authorLabel { 133 | font-size: 0.8rem; 134 | font-weight: bold; 135 | margin-right: 6px; 136 | } 137 | 138 | .authorName { 139 | font-size: 0.8rem; 140 | cursor: default; 141 | margin-right: 6px; 142 | display: inline-flex; 143 | align-items: center; 144 | } 145 | 146 | .pluginDirectoryCardAuthor { 147 | margin-bottom: 0; 148 | } 149 | 150 | .pluginDirectoryCardMaintenanceStatus { 151 | margin-bottom: 0; 152 | } 153 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryFilterToggle/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React, {useState, useEffect, useCallback} from 'react'; 9 | import clsx from 'clsx'; 10 | import {useHistory, useLocation} from '@docusaurus/router'; 11 | 12 | import {prepareUserState} from '../../index'; 13 | 14 | import styles from './styles.module.scss'; 15 | 16 | export type Operator = 'OR' | 'AND'; 17 | 18 | export const OperatorQueryKey = 'operator'; 19 | 20 | export function readOperator(search: string): Operator { 21 | return (new URLSearchParams(search).get(OperatorQueryKey) ?? 22 | 'OR') as Operator; 23 | } 24 | 25 | export default function PluginDirectoryFilterToggle(): JSX.Element { 26 | const id = 'plugindirectory_filter_toggle'; 27 | const location = useLocation(); 28 | const history = useHistory(); 29 | const [operator, setOperator] = useState(false); 30 | useEffect(() => { 31 | setOperator(readOperator(location.search) === 'AND'); 32 | }, [location]); 33 | const toggleOperator = useCallback(() => { 34 | setOperator((o) => !o); 35 | const searchParams = new URLSearchParams(location.search); 36 | searchParams.delete(OperatorQueryKey); 37 | if (!operator) { 38 | searchParams.append(OperatorQueryKey, 'AND'); 39 | } 40 | history.push({ 41 | ...location, 42 | search: searchParams.toString(), 43 | state: prepareUserState(), 44 | }); 45 | }, [operator, location, history]); 46 | 47 | return ( 48 |
49 | { 56 | if (e.key === 'Enter') { 57 | toggleOperator(); 58 | } 59 | }} 60 | checked={operator} 61 | /> 62 | 68 |
69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryFilterToggle/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .checkboxLabel { 9 | --height: 25px; 10 | --width: 80px; 11 | --border: 2px; 12 | display: flex; 13 | width: var(--width); 14 | height: var(--height); 15 | position: relative; 16 | border-radius: var(--height); 17 | border: var(--border) solid var(--ifm-color-primary-darkest); 18 | cursor: pointer; 19 | justify-content: space-around; 20 | opacity: 0.75; 21 | transition: opacity var(--ifm-transition-fast) 22 | var(--ifm-transition-timing-default); 23 | box-shadow: var(--ifm-global-shadow-md); 24 | } 25 | 26 | .checkboxLabel:hover { 27 | opacity: 1; 28 | box-shadow: var(--ifm-global-shadow-md), 29 | 0 0 2px 1px var(--ifm-color-primary-dark); 30 | } 31 | 32 | .checkboxLabel::after { 33 | position: absolute; 34 | content: ''; 35 | inset: 0; 36 | width: calc(var(--width) / 2); 37 | height: 100%; 38 | border-radius: var(--height); 39 | background-color: var(--ifm-color-primary-darkest); 40 | transition: transform var(--ifm-transition-fast) 41 | var(--ifm-transition-timing-default); 42 | transform: translateX(calc(var(--width) / 2 - var(--border))); 43 | } 44 | 45 | input:focus-visible ~ .checkboxLabel::after { 46 | outline: 2px solid currentColor; 47 | } 48 | 49 | .checkboxLabel > * { 50 | font-size: 0.8rem; 51 | color: inherit; 52 | transition: opacity 150ms ease-in 50ms; 53 | } 54 | 55 | input:checked ~ .checkboxLabel::after { 56 | transform: translateX(calc(-1 * var(--border))); 57 | } 58 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryMaintenanceStatusSelect/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React, { 9 | useCallback, 10 | useState, 11 | useEffect, 12 | type ComponentProps, 13 | type ReactNode, 14 | type ReactElement, 15 | } from 'react'; 16 | import {useHistory, useLocation} from '@docusaurus/router'; 17 | import {toggleListItem} from '@site/src/utils/jsUtils'; 18 | 19 | import {prepareUserState} from '../../index'; 20 | import styles from './styles.module.scss'; 21 | import { MaintainedType } from '@site/src/data/plugins'; 22 | 23 | interface Props extends ComponentProps<'input'> { 24 | icon: ReactElement>; 25 | label: ReactNode; 26 | maintenanceStatus: MaintainedType; 27 | } 28 | 29 | const MaintainedQueryStringKey = 'maintained'; 30 | 31 | export function readMaintenanceStatus(search: string): MaintainedType[] { 32 | return new URLSearchParams(search).getAll(MaintainedQueryStringKey) as MaintainedType[]; 33 | } 34 | 35 | function replaceMaintenanceStatus(search: string, maintenanceStatus: MaintainedType[]) { 36 | const searchParams = new URLSearchParams(search); 37 | searchParams.delete(MaintainedQueryStringKey); 38 | maintenanceStatus.forEach((status) => searchParams.append(MaintainedQueryStringKey, status)); 39 | return searchParams.toString(); 40 | } 41 | 42 | function PluginDirectoryMaintenanceStatusSelect( 43 | {id, icon, label, maintenanceStatus, ...rest}: Props, 44 | ref: React.ForwardedRef, 45 | ) { 46 | const location = useLocation(); 47 | const history = useHistory(); 48 | const [selected, setSelected] = useState(false); 49 | useEffect(() => { 50 | const statuses = readMaintenanceStatus(location.search); 51 | setSelected(statuses.includes(maintenanceStatus)); 52 | }, [maintenanceStatus, location]); 53 | const toggleTag = useCallback(() => { 54 | const statuses = readMaintenanceStatus(location.search); 55 | const maintained = toggleListItem(statuses, maintenanceStatus); 56 | const newSearch = replaceMaintenanceStatus(location.search, maintained); 57 | history.push({ 58 | ...location, 59 | search: newSearch, 60 | state: prepareUserState(), 61 | }); 62 | }, [maintenanceStatus, location, history]); 63 | return ( 64 | <> 65 | { 70 | if (e.key === 'Enter') { 71 | toggleTag(); 72 | } 73 | }} 74 | onFocus={(e) => { 75 | if (e.relatedTarget) { 76 | e.target.nextElementSibling?.dispatchEvent( 77 | new KeyboardEvent('focus'), 78 | ); 79 | } 80 | }} 81 | onBlur={(e) => { 82 | e.target.nextElementSibling?.dispatchEvent(new KeyboardEvent('blur')); 83 | }} 84 | onChange={toggleTag} 85 | checked={selected} 86 | {...rest} 87 | /> 88 | 92 | 93 | ); 94 | } 95 | 96 | export default React.forwardRef(PluginDirectoryMaintenanceStatusSelect); 97 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryMaintenanceStatusSelect/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .checkboxLabel:hover { 9 | opacity: 1; 10 | box-shadow: 0 0 2px 1px var(--ifm-color-secondary-darkest); 11 | } 12 | 13 | input[type='checkbox'] + .checkboxLabel { 14 | display: flex; 15 | align-items: center; 16 | cursor: pointer; 17 | line-height: 1.5; 18 | border-radius: 4px; 19 | padding: 0.275rem 0.8rem; 20 | opacity: 0.85; 21 | transition: opacity 200ms ease-out; 22 | border: 2px solid var(--ifm-color-secondary-darkest); 23 | } 24 | 25 | input:focus-visible + .checkboxLabel { 26 | outline: 2px solid currentColor; 27 | } 28 | 29 | input:checked + .checkboxLabel { 30 | opacity: 0.9; 31 | background-color: var(--site-color-checkbox-checked-bg); 32 | border: 2px solid var(--ifm-color-primary-darkest); 33 | } 34 | 35 | input:checked + .checkboxLabel:hover { 36 | opacity: 0.75; 37 | box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark); 38 | } 39 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryTagSelect/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React, { 9 | useCallback, 10 | useState, 11 | useEffect, 12 | type ComponentProps, 13 | type ReactNode, 14 | type ReactElement, 15 | } from 'react'; 16 | import {useHistory, useLocation} from '@docusaurus/router'; 17 | import {toggleListItem} from '@site/src/utils/jsUtils'; 18 | import type {TagType} from '@site/src/data/plugins'; 19 | 20 | import {prepareUserState} from '../../index'; 21 | import styles from './styles.module.scss'; 22 | 23 | interface Props extends ComponentProps<'input'> { 24 | icon: ReactElement>; 25 | label: ReactNode; 26 | tag: TagType; 27 | } 28 | 29 | const TagQueryStringKey = 'tags'; 30 | 31 | export function readSearchTags(search: string): TagType[] { 32 | return new URLSearchParams(search).getAll(TagQueryStringKey) as TagType[]; 33 | } 34 | 35 | function replaceSearchTags(search: string, newTags: TagType[]) { 36 | const searchParams = new URLSearchParams(search); 37 | searchParams.delete(TagQueryStringKey); 38 | newTags.forEach((tag) => searchParams.append(TagQueryStringKey, tag)); 39 | return searchParams.toString(); 40 | } 41 | 42 | function PluginDirectoryTagSelect( 43 | {id, icon, label, tag, ...rest}: Props, 44 | ref: React.ForwardedRef, 45 | ) { 46 | const location = useLocation(); 47 | const history = useHistory(); 48 | const [selected, setSelected] = useState(false); 49 | useEffect(() => { 50 | const tags = readSearchTags(location.search); 51 | setSelected(tags.includes(tag)); 52 | }, [tag, location]); 53 | const toggleTag = useCallback(() => { 54 | const tags = readSearchTags(location.search); 55 | const newTags = toggleListItem(tags, tag); 56 | const newSearch = replaceSearchTags(location.search, newTags); 57 | history.push({ 58 | ...location, 59 | search: newSearch, 60 | state: prepareUserState(), 61 | }); 62 | }, [tag, location, history]); 63 | return ( 64 | <> 65 | { 70 | if (e.key === 'Enter') { 71 | toggleTag(); 72 | } 73 | }} 74 | onFocus={(e) => { 75 | if (e.relatedTarget) { 76 | e.target.nextElementSibling?.dispatchEvent( 77 | new KeyboardEvent('focus'), 78 | ); 79 | } 80 | }} 81 | onBlur={(e) => { 82 | e.target.nextElementSibling?.dispatchEvent(new KeyboardEvent('blur')); 83 | }} 84 | onChange={toggleTag} 85 | checked={selected} 86 | {...rest} 87 | /> 88 | 92 | 93 | ); 94 | } 95 | 96 | export default React.forwardRef(PluginDirectoryTagSelect); 97 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryTagSelect/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .checkboxLabel:hover { 9 | opacity: 1; 10 | box-shadow: 0 0 2px 1px var(--ifm-color-secondary-darkest); 11 | } 12 | 13 | input[type='checkbox'] + .checkboxLabel { 14 | display: flex; 15 | align-items: center; 16 | cursor: pointer; 17 | line-height: 1.5; 18 | border-radius: 4px; 19 | padding: 0.275rem 0.8rem; 20 | opacity: 0.85; 21 | transition: opacity 200ms ease-out; 22 | border: 2px solid var(--ifm-color-secondary-darkest); 23 | } 24 | 25 | input:focus-visible + .checkboxLabel { 26 | outline: 2px solid currentColor; 27 | } 28 | 29 | input:checked + .checkboxLabel { 30 | opacity: 0.9; 31 | background-color: var(--site-color-checkbox-checked-bg); 32 | border: 2px solid var(--ifm-color-primary-darkest); 33 | } 34 | 35 | input:checked + .checkboxLabel:hover { 36 | opacity: 0.75; 37 | box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark); 38 | } 39 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/_components/PluginDirectoryTooltip/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .tooltip { 9 | border-radius: 4px; 10 | padding: 4px 8px; 11 | color: var(--site-color-tooltip); 12 | background: var(--site-color-tooltip-background); 13 | font-size: 0.8rem; 14 | z-index: 500; 15 | line-height: 1.4; 16 | font-weight: 500; 17 | max-width: 300px; 18 | opacity: 0.92; 19 | } 20 | 21 | .tooltipArrow { 22 | visibility: hidden; 23 | } 24 | 25 | .tooltipArrow, 26 | .tooltipArrow::before { 27 | position: absolute; 28 | width: 8px; 29 | height: 8px; 30 | background: inherit; 31 | } 32 | 33 | .tooltipArrow::before { 34 | visibility: visible; 35 | content: ''; 36 | transform: rotate(45deg); 37 | } 38 | 39 | .tooltip[data-popper-placement^='top'] > .tooltipArrow { 40 | bottom: -4px; 41 | } 42 | 43 | .tooltip[data-popper-placement^='bottom'] > .tooltipArrow { 44 | top: -4px; 45 | } 46 | -------------------------------------------------------------------------------- /src/pages/plugindirectory/styles.module.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | .filterCheckbox { 9 | justify-content: space-between; 10 | } 11 | 12 | .filterCheckbox, 13 | .checkboxList { 14 | display: flex; 15 | align-items: center; 16 | } 17 | 18 | .filterCheckbox > div:first-child { 19 | display: flex; 20 | flex: 1 1 auto; 21 | align-items: center; 22 | } 23 | 24 | .filterCheckbox > div > * { 25 | margin-bottom: 0; 26 | margin-right: 8px; 27 | } 28 | 29 | .checkboxList { 30 | flex-wrap: wrap; 31 | } 32 | 33 | .checkboxListItem { 34 | user-select: none; 35 | white-space: nowrap; 36 | height: 32px; 37 | font-size: 0.8rem; 38 | margin-top: 0.5rem; 39 | margin-right: 0.5rem; 40 | } 41 | 42 | .checkboxListItem:last-child { 43 | margin-right: 0; 44 | } 45 | 46 | .searchContainer { 47 | margin-left: auto; 48 | } 49 | 50 | .searchContainer input { 51 | height: 30px; 52 | border-radius: 15px; 53 | padding: 10px; 54 | border: 1px solid gray; 55 | width: 15rem; 56 | } 57 | 58 | .pluginDirectoryList { 59 | display: grid; 60 | grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 61 | gap: 24px; 62 | } 63 | 64 | .pluginDirectoryFavourite { 65 | padding-top: 2rem; 66 | padding-bottom: 2rem; 67 | background-color: var(--site-color-favourite-background); 68 | } 69 | 70 | .pluginDirectoryFavouriteHeader { 71 | display: flex; 72 | align-items: center; 73 | } 74 | 75 | .pluginDirectoryFavouriteHeader > h2 { 76 | margin-bottom: 0; 77 | } 78 | 79 | .svgIconFavouriteXs, 80 | .svgIconFavourite { 81 | color: var(--site-color-svg-icon-favourite); 82 | } 83 | 84 | .svgIconFavouriteXs { 85 | margin-left: 0.625rem; 86 | font-size: 1rem; 87 | } 88 | 89 | .svgIconFavourite { 90 | margin-left: 1rem; 91 | } 92 | 93 | .svgIconDocusaurus { 94 | height: 1rem; 95 | width: 1rem; 96 | margin-left: 1rem; 97 | } 98 | 99 | .buttonIcon { 100 | margin-right: 0.25rem; 101 | } 102 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Caution.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Caution'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons' 8 | 9 | const infimaClassName = 'alert alert--warning'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | caution 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeCaution(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Credit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faThumbsUp } from '@fortawesome/free-solid-svg-icons' 8 | 9 | const infimaClassName = 'alert alert--credit'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | credit 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeCredit(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Danger.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Danger'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faSkullCrossbones } from '@fortawesome/free-solid-svg-icons' 8 | 9 | const infimaClassName = 'alert alert--danger'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | danger 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeDanger(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Discord.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faDiscord } from '@fortawesome/free-brands-svg-icons'; 8 | 9 | const infimaClassName = 'alert alert--discord'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | discord 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeDiscord(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Docusaurus.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import IconDocusaurus from '@site/src/assets/Docusaurus.svg'; 7 | 8 | 9 | const infimaClassName = 'alert alert--docusaurus'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | docusaurus 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeDocusaurus(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Info.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Info'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faInfoCircle } from '@fortawesome/free-solid-svg-icons' 8 | 9 | const infimaClassName = 'alert alert--info'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | info 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeInfo(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Note.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Note'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faNoteSticky } from '@fortawesome/free-regular-svg-icons'; 8 | 9 | const infimaClassName = 'alert alert--secondary'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | note 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeNote(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Release.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faRocket } from '@fortawesome/free-solid-svg-icons'; 8 | 9 | const infimaClassName = 'alert alert--release'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | release 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeRelease(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Security.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faShieldHalved } from '@fortawesome/free-solid-svg-icons'; 8 | 9 | const infimaClassName = 'alert alert--security'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | security 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeSecurity(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Type/Tip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Translate from '@docusaurus/Translate'; 4 | import type {Props} from '@theme/Admonition/Type/Tip'; 5 | import AdmonitionLayout from '@theme/Admonition/Layout'; 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 7 | import { faLightbulb } from '@fortawesome/free-solid-svg-icons' 8 | 9 | const infimaClassName = 'alert alert--success'; 10 | 11 | const defaultProps = { 12 | icon: , 13 | title: ( 14 | 17 | tip 18 | 19 | ), 20 | }; 21 | 22 | export default function AdmonitionTypeTip(props: Props): JSX.Element { 23 | return ( 24 | 28 | {props.children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/Admonition/Types.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AdmonitionTypeNote from '@theme/Admonition/Type/Note'; 3 | import AdmonitionTypeTip from '@theme/Admonition/Type/Tip'; 4 | import AdmonitionTypeInfo from '@theme/Admonition/Type/Info'; 5 | import AdmonitionTypeCaution from '@theme/Admonition/Type/Caution'; 6 | import AdmonitionTypeDanger from '@theme/Admonition/Type/Danger'; 7 | import AdmonitionTypeDiscord from './Type/Discord'; 8 | import AdmonitionTypeSecurity from './Type/Security'; 9 | import AdmonitionTypeRelease from './Type/Release'; 10 | import AdmonitionTypeCredit from './Type/Credit'; 11 | import AdmonitionTypeDocusaurus from './Type/Docusaurus'; 12 | import type AdmonitionTypes from '@theme/Admonition/Types'; 13 | import type {Props} from '@theme/Admonition'; 14 | 15 | const admonitionTypes: typeof AdmonitionTypes = { 16 | note: AdmonitionTypeNote, 17 | tip: AdmonitionTypeTip, 18 | info: AdmonitionTypeInfo, 19 | caution: AdmonitionTypeCaution, 20 | danger: AdmonitionTypeDanger, 21 | discord: AdmonitionTypeDiscord, 22 | security: AdmonitionTypeSecurity, 23 | release: AdmonitionTypeRelease, 24 | credit: AdmonitionTypeCredit, 25 | docusaurus: AdmonitionTypeDocusaurus, 26 | }; 27 | 28 | // Undocumented legacy admonition type aliases 29 | // Provide hardcoded/untranslated retrocompatible label 30 | // See also https://github.com/facebook/docusaurus/issues/7767 31 | const admonitionAliases: typeof AdmonitionTypes = { 32 | secondary: (props: Props) => , 33 | important: (props: Props) => , 34 | success: (props: Props) => , 35 | // TODO bad legacy mapping, warning is usually yellow, not red... 36 | warning: (props: Props) => , 37 | }; 38 | 39 | export default { 40 | ...admonitionTypes, 41 | ...admonitionAliases, 42 | }; 43 | -------------------------------------------------------------------------------- /src/theme/Admonition/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {type ComponentType} from 'react'; 2 | import {processAdmonitionProps} from '@docusaurus/theme-common'; 3 | import type {Props} from '@theme/Admonition'; 4 | import AdmonitionTypes from '@theme/Admonition/Types'; 5 | 6 | function getAdmonitionTypeComponent(type: string): ComponentType { 7 | const component = AdmonitionTypes[type]; 8 | if (component) { 9 | return component; 10 | } 11 | console.warn( 12 | `No admonition component found for admonition type "${type}". Using Info as fallback.`, 13 | ); 14 | return AdmonitionTypes.info!; 15 | } 16 | 17 | export default function Admonition(unprocessedProps: Props): JSX.Element { 18 | const props = processAdmonitionProps(unprocessedProps); 19 | const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type); 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/theme/Admonition/styles.module.css: -------------------------------------------------------------------------------- 1 | .admonition { 2 | margin-bottom: 1em; 3 | } 4 | 5 | .admonitionHeading { 6 | font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / 7 | var(--ifm-heading-line-height) var(--ifm-heading-font-family); 8 | text-transform: uppercase; 9 | margin-bottom: 0.3rem; 10 | } 11 | 12 | .admonitionHeading code { 13 | text-transform: none; 14 | } 15 | 16 | .admonitionIcon { 17 | display: inline-block; 18 | vertical-align: middle; 19 | margin-right: 0.4em; 20 | } 21 | 22 | .admonitionIcon svg { 23 | display: inline-block; 24 | height: 1.6em; 25 | width: 1.6em; 26 | fill: var(--ifm-alert-foreground-color); 27 | } 28 | 29 | .admonitionContent > :last-child { 30 | margin-bottom: 0; 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/DocItem/Footer/GitHubContributors.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { getContributors } from './contributors'; 3 | import styles from './contributors.module.scss'; 4 | 5 | const GitHubContributors = ({ owner, repo, filePath, additionalContributors }) => { 6 | const [contributors, setContributors] = useState([]); 7 | const url = `https://api.github.com/repos/${owner}/${repo}/commits?path=${filePath}`; 8 | 9 | useEffect(() => { 10 | const fetchFileContributors = () => { 11 | fetch(url) 12 | .then((response) => response.json()) 13 | .then((commits) => { 14 | const gitContributors = getContributors(commits) 15 | const contributors = gitContributors.concat(additionalContributors || []); 16 | setContributors(contributors); 17 | }) 18 | .catch((error) => { 19 | console.error(error); 20 | setContributors([]); 21 | }); 22 | }; 23 | fetchFileContributors(); 24 | }, []); 25 | 26 | if (!contributors.length) { 27 | return null; 28 | } 29 | 30 | return ( 31 |
32 |

Contributors

33 | 34 |
    35 | {contributors?.map((contributor) => { 36 | 37 | const name = contributor.login; 38 | return ( 39 |
  • 43 | 47 | {contributor.login} 52 | 53 |
    • 54 | ); 55 | })} 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default GitHubContributors; 62 | -------------------------------------------------------------------------------- /src/theme/DocItem/Footer/contributors.module.scss: -------------------------------------------------------------------------------- 1 | .contributors { 2 | margin-block: var(--ifm-spacing-vertical); 3 | } 4 | 5 | .wrapper { 6 | display: flex; 7 | flex-wrap: wrap; 8 | gap: 20px; 9 | margin: 0; 10 | padding: 0; 11 | 12 | li{ 13 | list-style: none; 14 | } 15 | } 16 | 17 | .contributor { 18 | margin-top: 10px; 19 | 20 | img{ 21 | border-radius: 100%; 22 | margin:0; 23 | padding: 0; 24 | border: 2px solid var(--unleash-color-gray); 25 | transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default), 26 | scale var(--ifm-transition-fast) var(--ifm-transition-timing-default); 27 | } 28 | } 29 | 30 | .contributor img:hover{ 31 | border-color: var(--ifm-pagination-nav-color-hover); 32 | scale: 1.1; 33 | } 34 | 35 | @media (max-width: 600px) { 36 | .wrapper { 37 | display: block; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/theme/DocItem/Footer/contributors.tsx: -------------------------------------------------------------------------------- 1 | export const getContributors = (commits: any) => { 2 | // filter out commits that don't have an author 3 | const commitsWithAuthors = commits.filter((commit) => !!commit.author); 4 | 5 | // use a Set to deduplicate the list of contributors 6 | const contributorSet = new Set(); 7 | for (const commit of commitsWithAuthors) { 8 | contributorSet.add(JSON.stringify(commit.author)); 9 | } 10 | 11 | const contributors = Array.from(contributorSet).map((str: string) => { 12 | const contributor = JSON.parse(str); 13 | const { login, html_url, avatar_url } = contributor; 14 | return { login, html_url, avatar_url }; 15 | }); 16 | 17 | // sort alphabetically 18 | contributors.sort((a, b) => { 19 | return a.login.localeCompare(b.login); 20 | }); 21 | 22 | return contributors; 23 | }; 24 | -------------------------------------------------------------------------------- /src/theme/DocItem/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Footer from '@theme-original/DocItem/Footer'; 3 | import type FooterType from '@theme/DocItem/Footer'; 4 | import { useDoc } from '@docusaurus/plugin-content-docs/client'; 5 | import GitHubContributors from './GitHubContributors'; 6 | import GitUrlParse from 'git-url-parse'; 7 | import type {WrapperProps} from '@docusaurus/types'; 8 | 9 | type Props = WrapperProps; 10 | 11 | export default function FooterWrapper(props: Props): JSX.Element { 12 | const { metadata } = useDoc(); 13 | const file = metadata.editUrl; 14 | const additionalContributors = metadata.frontMatter.additionalContributors; 15 | 16 | if (!file) { 17 | return