docs: optimize code elements inside tables

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7776
GitOrigin-RevId: eea30d61c6ba04cb1c6b49d6cfaa4c561b21226b
This commit is contained in:
Rob Dominguez 2023-02-02 13:58:46 -06:00 committed by hasura-bot
parent aeff6e162a
commit 05042d33d5
2 changed files with 23 additions and 4 deletions

View File

@ -5,7 +5,7 @@
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"proseWrap": "preserve",
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,

View File

@ -1,12 +1,31 @@
import React from 'react';
import React, { useEffect } from 'react';
import ActualDocItem from '@theme/DocItem';
import HasuraConBanner from '@site/src/components/HasuraConBanner';
import GraphQLWithHasuraBanner from '@site/src/components/GraphQLWithHasuraBanner';
import CustomFooter from '@site/src/components/CustomFooter';
import styles from './styles.module.scss';
import {ScrollToFeedbackButton} from "@site/src/components/Feedback/ScrollToFeedbackButton";
import { ScrollToFeedbackButton } from '@site/src/components/Feedback/ScrollToFeedbackButton';
const CustomDocItem = props => {
useEffect(() => {
// This function is adds <wbr> tags to code blocks within a table
// wherever an _ or . is present. We do this since so many environment
// variables are incredibly long and the word breaks are not happening
// in a user-friendly way.
const tables = document.querySelectorAll('table');
tables.forEach(table => {
const cells = table.querySelectorAll('td');
cells.forEach(cell => {
const codeBlocks = cell.querySelectorAll('code');
codeBlocks.forEach(codeBlock => {
codeBlock.innerHTML = codeBlock.innerHTML.replace(/_/g, '_<wbr>');
codeBlock.innerHTML = codeBlock.innerHTML.replace(/\./g, '.<wbr>');
console.log(codeBlock.innerHTML);
});
});
});
}, []);
return (
<div
className={
@ -18,7 +37,7 @@ const CustomDocItem = props => {
<ActualDocItem {...props} />
<div className={styles['custom_doc_item_footer']}>
{/*<PageHelpful />*/}
<ScrollToFeedbackButton/>
<ScrollToFeedbackButton />
<HasuraConBanner {...props} />
<GraphQLWithHasuraBanner />
<CustomFooter />