feat: add rtl to theme, use in components

.gitignore

@@ -105,3 +105,6 @@ assets
 
 # TernJS port file
 .tern-port
+
+# ide
+.idea

src/components/button/button.tsx

@@ -22,7 +22,8 @@ export const ButtonStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     textDecoration: 'none',
     fontSize: '16px',
     margin: 8,
-    marginRight: 0,
+    marginRight: theme.rtl ? 8 : 0,
+    marginLeft: theme.rtl ? 0 : 8,
     verticalAlign: 'middle',
 
     'body.dark-mode-animate &': {

src/components/button/buttons.tsx

@@ -1,6 +1,16 @@
 import { RendererLike } from '@connectv/html';
+import {ThemedComponentThis} from "@connectv/jss-theme";
 
+import {CodedocTheme} from "../../theme";
 
-export function Buttons(_: any, renderer: RendererLike<any, any>, content: any) {
-  return <div style="text-align: right">{content}</div>
+interface ButtonsOptions {}
+
+export function Buttons(
+  this: ThemedComponentThis<CodedocTheme>,
+  options: ButtonsOptions,
+  renderer: RendererLike<any, any>,
+  content: any
+) {
+  const { rtl } = this.theme.theme;
+  return <div style={`text-align: ${rtl ? 'left' : 'right'}`}>{content}</div>
 }

src/components/code/style.ts

@@ -5,6 +5,7 @@ import { CodedocTheme } from '../../theme';
 
 export const CodeStyle = themedStyle<CodedocTheme>(theme => ({
   code: {
+    direction: 'ltr',
     userSelect: 'none',
     WebkitUserSelect: 'none',
     background: theme.code.light.background,

src/components/collapse/index.tsx

@@ -19,12 +19,13 @@ export function Collapse(
   content: any
 ) {
   const classes = this.theme.classes(CollapseStyle);
+  const { rtl } = this.theme.theme;
   return (
     <div class={`${classes.collapse} ${options.default === 'open' ? 'open' : ''}`}>
       <CollapseControl$/>
       <div class="label" onclick="this.parentElement.classList.toggle('open')">
         <span class="text">{options.label}</span>
-        <span class="icon-font closed">chevron_right</span>
+        <span class="icon-font closed">{`chevron_${rtl ? 'left' : 'right'}`}</span>
       </div>
       <div class="content">{content}</div>
     </div>

src/components/collapse/style.ts

@@ -15,7 +15,8 @@ export const CollapseStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& .text': {flexGrow: 1},
       '& .icon-font': {
-        marginRight: 32,
+        marginRight: theme.rtl ? 0 : 32,
+        marginLeft: theme.rtl ? 32 : 0,
         'body.dark-mode-animate &': { transition: 'transform .15s', },
       },
 
@@ -40,8 +41,10 @@ export const CollapseStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       maxHeight: 0,
       visibility: 'hidden',
       transition: 'opacity .3s',
-      paddingLeft: 16,
-      borderLeft: `2px solid ${Color(theme.light.border).alpha(.5).toString()}`,
+      paddingLeft: theme.rtl ? 0 : 16,
+      paddingRight: theme.rtl ? 16 : 0,
+      borderLeft: theme.rtl ? 'none' : `2px solid ${Color(theme.light.border).alpha(.5).toString()}`,
+      borderRight: theme.rtl ? `2px solid ${Color(theme.light.border).alpha(.5).toString()}` : 'none',
 
       'body.dark-mode-animate &': {
         transition: 'transform .15s, opacity .15s, border-color .3s'

src/components/footnote/style.ts

@@ -7,7 +7,8 @@ export const FootnoteStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     '&>div': {
       display: 'flex',
       '&>span': {
-        marginRight: 16,
+        marginRight: theme.rtl ? 0 : 16,
+        marginLeft: theme.rtl ? 16 : 0,
         fontWeight: 'bold',
       },
       '&>marker>p': {

src/components/formula/style.ts

@@ -61,7 +61,8 @@ export const FormulaStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
     '& .counter': {
       position: 'absolute',
-      left: 8,
+      left: theme.rtl ? 'unset' : 8,
+      tight: theme.rtl ? 8 : 'unset',
       top: 0,
       bottom: 0,
       display: 'flex',

src/components/heading/index.tsx

@@ -12,8 +12,10 @@ export const HeadingStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   },
   anchor: {
     position: 'absolute',
-    left: '-32px',
-    paddingRight: '8px',
+    left: theme.rtl ? 'unset' : '-32px',
+    right: theme.rtl ? '-32px' : 'unset',
+    paddingRight: theme.rtl ? 0 : 8,
+    paddingLeft: theme.rtl ? 8 : 0,
     top: 0, bottom: 0,
     display: 'flex',
     alignItems: 'center',

src/components/misc/gitter/style.ts

@@ -9,7 +9,11 @@ export const GitterStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   },
   holder: {
     position: 'fixed',
-    right: 32,
+    ...(theme.rtl ? {
+      left: 32,
+    } : {
+      right: 32,
+    }),
     bottom: 32,
     width: 480,
     maxWidth: 'calc(100vw - 64px)',

src/components/page/contentnav/style.ts

@@ -6,14 +6,21 @@ import { CodedocTheme } from '../../../theme';
 export const ContentNavStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   contentnav: {
     position: 'fixed',
-    right: 0,
+    ...(theme.rtl ? {
+      left: 0,
+      borderRight: `1px dashed ${theme.light.border}`,
+      paddingRight: 48,
+      marginRight: 64,
+    } : {
+      right: 0,
+      borderLeft: `1px dashed ${theme.light.border}`,
+      paddingLeft: 48,
+      marginLeft: 64,
+    }),
     bottom: 96,
     width: 'calc(50vw - 496px)',
     maxHeight: '45vh',
     overflow: 'auto',
-    borderLeft: `1px dashed ${theme.light.border}`,
-    paddingLeft: 48,
-    marginLeft: 64,
     fontSize: 12,
     scrollBehavior: 'initial',
 
@@ -36,11 +43,19 @@ export const ContentNavStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => (
         opacity: 1,
       },
 
-      '&.h2': { marginLeft: 12 },
-      '&.h3': { marginLeft: 24 },
-      '&.h4': { marginLeft: 36 },
-      '&.h5': { marginLeft: 48 },
-      '&.h6': { marginLeft: 60 },
+      ...(theme.rtl ? {
+        '&.h2': { marginRight: 12 },
+        '&.h3': { marginRight: 24 },
+        '&.h4': { marginRight: 36 },
+        '&.h5': { marginRight: 48 },
+        '&.h6': { marginRight: 60 },
+      } : {
+        '&.h2': { marginLeft: 12 },
+        '&.h3': { marginLeft: 24 },
+        '&.h4': { marginLeft: 36 },
+        '&.h5': { marginLeft: 48 },
+        '&.h6': { marginLeft: 60 },
+      })
     },
 
     '@media (prefers-color-scheme: dark)': {

src/components/page/footer/index.tsx

@@ -14,13 +14,13 @@ export function Footer(
   content: any
 ) {
   const classes = this.theme.classes(FooterStyle);
-
+  const { rtl } = this.theme.theme;
   return <div class={classes.footer}>
-    <div class="left"><ToCToggle$/></div>
+    <div class={rtl ? "right" : "left"}><ToCToggle$/></div>
     <div class="main">
       <div class="inside">{content}</div>
     </div>
-    <div class="right"><DarkModeSwitch$/></div>
+    <div class={rtl ? "left" : "right"}><DarkModeSwitch$/></div>
   </div>
 }
 

src/components/page/header/style.ts

@@ -6,7 +6,12 @@ import { CodedocTheme } from '../../../theme';
 export const HeaderStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   header: {
     position: 'fixed',
-    top: 0, right: 0,
+    top: 0,
+    ...(theme.rtl ? {
+      left: 0,
+    } : {
+      right: 0,
+    }),
     zIndex: 100,
     padding: 32,
     textAlign: 'right',

src/components/page/style.ts

@@ -5,6 +5,9 @@ import { CodedocTheme } from '../../theme';
 
 export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   '@global': {
+    html: {
+      direction: theme.rtl ? 'rtl' : 'ltr'
+    },
     '*': {
       scrollBehavior: 'smooth',
       touchAction: 'manipulation',
@@ -65,7 +68,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       borderCollapse: 'collapse',
 
       '& th, & td': {
-        textAlign: 'left',
+        textAlign: 'right',
         padding: '8px 16px',
         'body.dark-mode-animate &': {
           transition: 'border-color .3s',
@@ -74,11 +77,11 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& th': {
         borderBottom: `1px solid ${color(theme.light.border).mix(color(theme.light.text), .15).hex()}`,
-  
+
         'body.dark &': {
           borderColor: color(theme.dark.border).mix(color(theme.dark.text), .15).hex(),
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             borderColor: color(theme.dark.border).mix(color(theme.dark.text), .15).hex(),
@@ -88,11 +91,11 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& td': {
         borderBottom: `1px solid ${theme.light.border}`,
-  
+
         'body.dark &': {
           borderColor: theme.dark.border,
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             borderColor: theme.dark.border,
@@ -106,7 +109,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         'body.dark &': {
           background: theme.quote.dark.background,
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             background: theme.quote.dark.background,
@@ -169,7 +172,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         bottom: '16px',
         width: '8px',
         display: 'block',
-        background: `radial-gradient(circle at center, ${theme.quote.light.border} 50%, transparent 52%),transparent`, 
+        background: `radial-gradient(circle at center, ${theme.quote.light.border} 50%, transparent 52%),transparent`,
         backgroundSize: '4px 4px',
 
         'body.dark-mode-animate &': {
@@ -186,7 +189,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         '& blockquote': {
           background: theme.quote.dark.background,
           color: theme.quote.dark.text,
-  
+
           '&:after': {
             background: `radial-gradient(circle at center, ${theme.quote.dark.border} 50%, transparent 52%),transparent`,
             backgroundSize: '4px 4px',
@@ -219,7 +222,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       borderRadius: 3,
       border: 'none',
       background: 'white',
-      
+
     },
 
     code: {
@@ -246,4 +249,4 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       },
     }
   }
-}));
+}));

src/components/page/toc/prevnext/index.tsx

@@ -23,7 +23,7 @@ export function ToCPrevNext(
 ) {
   const classes = this.theme.classes(ToCPrevNextStyle);
   const holder = ref<HTMLElement>();
-
+  const { rtl } = this.theme.theme;
   this.track({
     bind() {
       setTimeout(() => {
@@ -56,7 +56,7 @@ export function ToCPrevNext(
                 <span class={classes.label}>{options['next-label'] || 'Next'}</span>
                 <span class={classes.title}>{next$.textContent}</span>
               </div>
-              <span class="icon-font">{options["next-icon"] || 'arrow_forward_ios'}</span>
+              <span class="icon-font">{options["next-icon"] || rtl ? 'arrow_back_ios' : 'arrow_forward_ios'}</span>
             </a>).on(holder.$);
           }
         }