diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000..4c559c4 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,51 @@ +{ + "MD001": true, + "MD002": true, + "MD003": true, + "MD004": true, + "MD005": true, + "MD006": true, + "MD007": true, + "MD009": true, + "MD010": true, + "MD011": true, + "MD012": true, + "MD013": true, + "MD014": true, + "MD018": true, + "MD019": true, + "MD020": true, + "MD021": true, + "MD022": true, + "MD023": true, + "MD024": true, + "MD025": true, + "MD026": true, + "MD027": true, + "MD028": true, + "MD029": true, + "MD030": true, + "MD031": true, + "MD032": true, + "MD033": true, + "MD034": true, + "MD035": true, + "MD036": true, + "MD037": true, + "MD038": true, + "MD039": true, + "MD040": true, + "MD041": false, + "MD042": true, + "MD043": true, + "MD044": true, + "MD045": true, + "MD046": true, + "MD047": true, + "MD048": true, + "MD049": true, + "MD050": true, + "MD051": true, + "MD052": true, + "MD053": true +} \ No newline at end of file diff --git a/src/app/components/CodeSnippet.module.css b/src/app/components/CodeSnippet.module.css index 6a99217..7d04f98 100644 --- a/src/app/components/CodeSnippet.module.css +++ b/src/app/components/CodeSnippet.module.css @@ -13,7 +13,7 @@ padding: 0.5rem 1rem; border-top-right-radius: 10px; border-top-left-radius: 10px; - font-size: 0.8rem; + font-size: 1rem; } .snippetContent>pre { @@ -71,6 +71,7 @@ border-radius: 0.25rem; width: 100px; text-align: center; + font-size: 0.8rem; } .tooltip::before { @@ -84,4 +85,40 @@ .tooltipHidden { display: none; +} + +.controlsContainer { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.dropdownSelect { + background-color: #194488; + border: none; + color: white; + border-radius: 5px; + cursor: pointer; + appearance: none; + padding-left: 2rem; + text-align: right; + font-size: 1rem; +} + +.dropdownSelect:focus-visible { + outline: none; +} + +.selectItem { + background-color: #194488; + color: white; + cursor: pointer; +} + +.spacer { + height: 12px; + border-left: 1px solid #e3e8ee; + opacity: .2; + margin-right: -1px; } \ No newline at end of file diff --git a/src/app/components/CodeSnippet.tsx b/src/app/components/CodeSnippet.tsx index 67140fb..1e91c32 100644 --- a/src/app/components/CodeSnippet.tsx +++ b/src/app/components/CodeSnippet.tsx @@ -1,9 +1,9 @@ 'use client'; -import { +import React, { Children, MouseEvent, - ReactElement, + ReactNode, useState, } from 'react'; import styles from './CodeSnippet.module.css'; @@ -23,7 +23,7 @@ function CodeSnippetCopyButton() { const target = e.currentTarget; const code = - target.parentElement?.parentElement?.parentElement?.querySelector( + target.parentElement?.parentElement?.parentElement?.parentElement?.querySelector( 'pre' )?.innerText ?? ''; @@ -66,37 +66,100 @@ function CodeSnippetCopyButton() { ); } -function SnippetLanguageDropdown() {} +function SnippetLanguageDropdown({ + selectedLanguage, + snippetLanguages, + handleSelectChange, +}: { + selectedLanguage: string; + snippetLanguages: string[]; + handleSelectChange: ( + e: React.ChangeEvent + ) => void; +}) { + return ( +
+
+ +
+
+ ); +} export default function CodeSnippet({ children, heading, defaultLanguage, }: { - children: ReactElement; + children: ReactNode; heading: string; defaultLanguage: string; }) { const [selectedLanguage, setSelectedLanguage] = useState(defaultLanguage); + const handleSelectChange = ( + e: React.ChangeEvent + ) => { + setSelectedLanguage(e.target.value); + }; + const snippetLanguages = Children.toArray(children).map( - (child: any) => child.props.className.split('-')[1] + child => { + if (React.isValidElement(child)) { + const languageClassParts = + child.props.className.split('-'); + if (languageClassParts.length == 2) { + const language = languageClassParts[1]; + return language; + } + } + } ); return (
{heading}
- +
+ {snippetLanguages.length > 1 ? ( + <> + +
+ + ) : null} + +
           {Children.toArray(children)
             .filter(
-              (child: any) =>
+              child =>
+                React.isValidElement(child) &&
                 child.props.className ===
-                `language-${defaultLanguage}`
+                  `language-${selectedLanguage}`
             )
             .map(child => {
               return child;
diff --git a/src/docs/version_002/resources/records/get_records_by_app/example.md b/src/docs/version_002/resources/records/get_records_by_app/example.md
index 3c9d74b..4e7e8bb 100644
--- a/src/docs/version_002/resources/records/get_records_by_app/example.md
+++ b/src/docs/version_002/resources/records/get_records_by_app/example.md
@@ -5,7 +5,7 @@ curl --location 'https://api.onspring.com/Records/appId/195' \
 --header 'X-ApiKey: 000000ffffff000000ffffff/00000000-ffff-0000-ffff-000000000000'
 ```
 
-```js
+```javascript
 var request = require('request');
 ```