@redocly/theme 0.1.7 → 0.1.8

package/src/Markdown/CodeSample/styled.ts

@@ -0,0 +1,289 @@
+import { getLuminance } from 'polished';
+import styled, { css } from 'styled-components';
+
+import { typography } from '@theme/ui/Typography';
+import type { Tokens, Token } from '@theme/Markdown/CodeSample/types';
+import { AppTheme } from '@theme/types/portal';
+
+function genTokens(tokens?: Tokens | null) {
+  if (!tokens) {
+    return '';
+  }
+
+  let res = '';
+
+  for (const token of Object.keys(tokens)) {
+    if (token !== 'default') {
+      res += `.token.${token} { color: ${tokens[token as Token]?.color}; }\n`;
+    }
+  }
+
+  if (tokens.default) {
+    return css`
+      pre& {
+        ${typography(tokens.default)}
+      }
+      ${res}
+    `;
+  }
+
+  return res;
+}
+
+const getCodeBlockBackgroundColor = (theme: AppTheme) =>
+  Array.isArray(theme.codeBlock.backgroundColor)
+    ? theme.codeBlock.backgroundColor[0]
+    : theme.codeBlock.backgroundColor;
+
+export const CodeButton = css`
+  padding: 0 5px;
+  border-radius: 4px;
+`;
+
+export const CodeSampleButtonContainer = styled.div`
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+
+export const CopyCodeButton = styled.div`
+  ${CodeButton}
+  display: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const DoneIndicator = styled.div`
+  ${CodeButton}
+  cursor: default;
+`;
+
+const lightStyleCodeButton = css`
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+
+  ${CopyCodeButton}:hover {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+    outline: 1px solid ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+`;
+
+const darkStyleCodeButton = css`
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
+  }
+
+  ${CopyCodeButton}:hover {
+    color: white;
+    color: ${({ theme }) => theme.codeBlock.copyButton.contrastText};
+    background-color: ${({ theme }) => theme.codeBlock.copyButton.background};
+  }
+`;
+
+const lightStyleTokens = css`
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #999988;
+    font-style: italic;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.string,
+  .token.attr-value {
+    color: #e3116c;
+  }
+  .token.punctuation,
+  .token.operator {
+    color: #393a34; /* no highlight */
+  }
+
+  .token.entity,
+  .token.url,
+  .token.symbol,
+  .token.number,
+  .token.boolean,
+  .token.variable,
+  .token.constant,
+  .token.property,
+  .token.regex,
+  .token.inserted {
+    color: #36acaa;
+  }
+
+  .token.atrule,
+  .token.keyword,
+  .token.attr-name,
+  .language-autohotkey .token.selector {
+    color: #00a4db;
+  }
+
+  .token.function,
+  .token.deleted,
+  .language-autohotkey .token.tag {
+    color: #9a050f;
+  }
+
+  .token.tag,
+  .token.selector,
+  .language-autohotkey .token.keyword {
+    color: #00009f;
+  }
+`;
+
+const darkStyleTokens = css`
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #62bff9;
+  }
+  .token.boolean {
+    color: firebrick;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a0fbaa;
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .token.deleted {
+    color: red;
+  }
+`;
+
+export const Wrapper = styled.div`
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${({ theme }) =>
+    getLuminance(getCodeBlockBackgroundColor(theme)) < 0.25
+      ? darkStyleCodeButton
+      : lightStyleCodeButton}
+
+  &:hover {
+    ${CodeSampleButtonContainer} ${CopyCodeButton} {
+      display: block;
+    }
+  }
+
+  pre {
+    white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: 4px;
+
+    font-family: ${({ theme }) => theme.typography.code.fontFamily};
+    background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
+
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+
+      color: ${({ theme }) =>
+        getLuminance(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34'};
+
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: ${({ theme }) => theme.shape.borderRadius};
+  }
+
+  code[class='language-text'] {
+    line-height: 1.2em;
+    display: inline-flex;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+    .token.entity {
+      cursor: help;
+    }
+    .token.punctuation {
+      opacity: 0.7;
+    }
+    .namespace {
+      opacity: 0.7;
+    }
+
+    ${({ theme }) =>
+      getLuminance(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens}
+    ${({ theme }) => genTokens(theme.codeBlock.tokens)}
+  }
+`;

package/src/Markdown/CodeSample/types.ts

@@ -0,0 +1,40 @@
+import { ITypography } from '@theme/ui/Typography';
+
+export type Token =
+  | 'comment'
+  | 'prolog'
+  | 'doctype'
+  | 'cdata'
+  | 'punctuation'
+  | 'property'
+  | 'tag'
+  | 'number'
+  | 'constant'
+  | 'symbol'
+  | 'boolean'
+  | 'selector'
+  | 'string'
+  | 'char'
+  | 'builtin'
+  | 'inserted'
+  | 'operator'
+  | 'entity'
+  | 'url'
+  | 'variable'
+  | 'atrule'
+  | 'keyword'
+  | 'regex'
+  | 'important'
+  | 'important'
+  | 'bold'
+  | 'italic'
+  | 'entity'
+  | 'deleted';
+
+export type Tokens = {
+  [P in Token]?: {
+    color: string;
+  };
+} & {
+  default?: ITypography;
+};

package/src/Markdown/ContentWrapper.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const ContentWrapper = styled.section.attrs(() => ({
+  'data-component-name': 'Markdown/ContentWrapper',
+}))<{ withToc: boolean }>`
+  max-width: var(--content-wrapper-max-width);
+  width: 90%;
+  margin: 0 auto;
+
+  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);
+
+  & > article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading if there is no "Last updated at" block
+    /* margin-top: 0; */
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
+  }
+`;

package/src/Markdown/Heading/Heading.tsx

@@ -0,0 +1,35 @@
+import React, { createElement, PropsWithChildren } from 'react';
+
+const SvgIcon = (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="16"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+    ></path>
+  </svg>
+);
+
+export function Heading({
+  level,
+  id,
+  children,
+}: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
+  const linkEl = (
+    <a href={`#${id}`} className="anchor before">
+      {SvgIcon}
+    </a>
+  );
+
+  return createElement(
+    `h${level}`,
+    { id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' },
+    [linkEl, children],
+  );
+}

package/src/Markdown/MarkdownLayout.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { PageWrapper } from '@theme/Markdown/PageWrapper';
+import { ContentWrapper } from '@theme/Markdown/ContentWrapper';
+import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+
+type MarkdownLayoutProps = {
+  tableOfContent: React.Component;
+  markdownWrapper: React.Component;
+};
+
+export function MarkdownLayout({
+  tableOfContent,
+  markdownWrapper,
+}: MarkdownLayoutProps): JSX.Element {
+  return (
+    <PageWrapper data-component-name="Markdown/MarkdownLayout">
+      <ContentWrapper withToc={true}>
+        {markdownWrapper}
+        <PageNavigation />
+      </ContentWrapper>
+      {tableOfContent}
+    </PageWrapper>
+  );
+}

package/src/Markdown/Mermaid/Mermaid.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type MermaidProps = {
+  diagramHtml: string;
+};
+
+export function Mermaid({ diagramHtml }: MermaidProps): JSX.Element {
+  return (
+    <Wrapper
+      className="mermaid-wrapper"
+      dangerouslySetInnerHTML={{ __html: diagramHtml }}
+      data-component-name="Markdown/Mermaid/Mermaid"
+    />
+  );
+}
+
+const Wrapper = styled.div`
+  .mermaid > svg {
+    font-size: 14px !important;
+    max-width: 100%;
+  }
+`;

package/src/Markdown/PageWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const PageWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Markdown/PageWrapper',
+}))`
+  display: flex;
+  flex: 1;
+  width: 100%;
+`;