tutorial/src/theme/DocItem/DocContent.js at 3af33046fb284d8ba2515f85f1b412a1a870fa99 · codeharborhub/tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from "react";
import Head from "@docusaurus/Head";
import MDXComponents from "../MDXComponents";
import { MDXProvider } from "@mdx-js/react";
import {
  useDoc,
  useDocsVersion,
} from "@docusaurus/plugin-content-docs/client";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import DocPaginator from "@theme/DocPaginator";
import TOC from "@theme/TOC";
import clsx from "clsx";
import styles from "./styles.module.css";
import DocsInfo from "./DocsInfo";
import DocsRating from "./DocsRating";

export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
  const { siteConfig } = useDocusaurusContext();
  const {
    metadata,
    frontMatter: {
      image: metaImage,
      keywords,
      hide_title: hideTitle,
      hide_table_of_contents: hideTableOfContents,
    },
    toc,
  } = useDoc();

  const { url: siteUrl } = siteConfig;
  const {
    description,
    title,
    permalink,
    editUrl,
    lastUpdatedAt,
    lastUpdatedBy,
    unversionedId,
  } = metadata;

  const metaImageUrl = useBaseUrl(metaImage, {
    absolute: true,
  });

  return (
    <>
      <Head>
        {description && <meta name="description" content={description} />}
        {description && (
          <meta property="og:description" content={description} />
        )}
        {keywords && keywords.length && (
          <meta name="keywords" content={keywords.join(",")} />
        )}
        {metaImage && <meta property="og:image" content={metaImageUrl} />}
        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
        {metaImage && (
          <meta name="twitter:image:alt" content={`Image for ${title}`} />
        )}
        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
      </Head>

      <div className="row">
        <div
          className={clsx("col", {
            [styles.docItemCol]: !hideTableOfContents,
          })}
        >
          <div className={styles.docItemContainer}>
            <article className="article-content">
              {!hideTitle && (
                <header className="mb-4">
                  <h1 className={styles.docTitle}>{title}</h1>
                </header>
              )}
              {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
                <DocsInfo
                  editUrl={editUrl}
                  lastUpdatedAt={lastUpdatedAt}
                  lastUpdatedBy={lastUpdatedBy}
                  readingTimeInWords={readingTimeInWords}
                  title={title}
                />
              )}
              <MDXProvider components={MDXComponents}>
                <div className="markdown" ref={contentRef}>
                  <Content />
                </div>
              </MDXProvider>
            </article>

            <div className="margin-left--none margin-top--md text--center">
              <DocsRating label={unversionedId} />
            </div>
            <div className="margin-vert--lg">
              <DocPaginator previous={metadata.previous} next={metadata.next} />
            </div>
          </div>
        </div>
        {!hideTableOfContents && toc && (
          <div className="col col--3">
            <TOC toc={toc} />
          </div>
        )}
      </div>
    </>
  );
};