Merge branch 'dev' into feature/strict-eslint

Author: azinit

package-lock.json

@@ -28,6 +28,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-syntax-highlighter": "^15.3.1",
+    "remark-gfm": "^1.0.0",
     "tailwindcss": "^1.9.5",
     "typescript": "^3.7.5",
     "use-query-params": "^1.1.9"

package.json

@@ -1,6 +1,7 @@
 import React from "react";
 import { GithubFilled } from "@ant-design/icons";
-import { Alert, Card, notification } from "antd";
+import { Alert, Card } from "antd";
+import { alert } from "shared/helpers";
 // !!! FIXME: это плохо( + loop imports
 // eslint-disable-next-line import/order
 import { useTitle } from "pages/helpers";
@@ -21,14 +22,12 @@ import "./index.scss";
 const AuthPage = () => {
     useTitle("Sign in to Github Client");
     const { login } = useAuth();
-    const showError = (message: string) =>
-        notification.error({ message: "Authorization error", description: message, top: 72 });
 
     // TODO: add ability to specify redirect url
     const authorize = () => {
         authorizeGithub()
             .then(login)
-            .catch((err: Error) => showError(err.message));
+            .catch((err: Error) => alert.error("Authorization error", err.message));
     };
 
     return (

src/features/auth/page/index.tsx

@@ -73,12 +73,12 @@ const Explorer = ({ repo }: Props) => {
         },
     });
     const { branches, files, lastCommit, readme } = useRepoDetails(data);
-
+    const repoUrl = `${repo.owner}/${repo.name}`;
     return (
         <div>
             <RepoToolbar repo={repo} branches={branches} activeBranch={branch} />
             <EntriesView files={files} lastCommit={lastCommit} loading={loading} className="mt-3" />
-            <RepoReadme text={readme} loading={loading} />
+            <RepoReadme text={readme} loading={loading} repoUrl={repoUrl} branch={branch} />
         </div>
     );
 };

src/features/repo-explorer/components/index.tsx

@@ -3,9 +3,54 @@
     border: 1px solid var(--clr-gray--100);
     border-radius: 6px;
 
-    code {
-        padding: 1px 4px;
-        background: var(--clr-gray--100);
-        border-radius: 6px;
+    &__title {
+        font-size: 14px;
+    }
+
+    &__markdown {
+        // [github-styles] offsets
+        > :first-child {
+            margin-top: 0 !important;
+        }
+        // [github-styles] headers offsets
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+        }
+        // [github-styles] <code />
+        code {
+            padding: 1px 4px;
+            background: var(--clr-gray--100);
+            border-radius: 6px;
+        }
+        // [github-styles] dividers for h1, h2
+        h1,
+        h2 {
+            padding-bottom: 0.3em;
+            border-bottom: 1px solid var(--clr-gray--200);
+        }
+        // [github-styles] headers font-sizes
+        h3 {
+            font-size: 20px;
+        }
+        // [github-styles] headers font-sizes
+        h4 {
+            font-size: 16px;
+        }
+        // [github-styles] for markdown quotes
+        blockquote {
+            padding: 0 1em;
+            color: var(--clr-gray--800);
+            border-left: 0.25em solid var(--clr-gray--200);
+        }
+        // [github-styles] limit images max-width
+        img {
+            max-width: 100%;
+        }
     }
 }

src/features/repo-explorer/components/readme/index.scss

@@ -1,22 +1,101 @@
 import React from "react";
 import Markdown from "react-markdown";
+import gfm from "remark-gfm";
 import SkeletonArea from "../skeleton-area";
 import CodeRenderer from "./code-renderer";
 import "./index.scss";
 
 type Props = {
+    /** Текст README файла */
     text: string;
+    /** Флаг загрузки */
     loading: boolean;
+    /**
+     * Ссылка-идентификатор репозитория
+     * @remark Для обработки локальных ссылок
+     */
+    repoUrl: string;
+    /**
+     * Текущая ветка
+     * @remark Для обработки локальных ссылок
+     */
+    branch: string;
 };
 
-const RepoReadme = ({ text, loading }: Props) => {
+/**
+ * @hook Обработка внутренних ссылок
+ * @remark
+ * - В README могут быть указаны ссылки на локальные ресурсы репозитория (images, files, anchors, ...)
+ * - Поэтому, для корректной навигации и отображения, было решено предобрабатывать подобные ссылки
+ */
+const useLocalUri = ({ repoUrl, branch }: Props) => {
+    /**
+     * Нормализация внутренних ссылок
+     * @example
+     * transformLocalUri("https://some-url/...")
+     * // => "https://some-url/..."
+     * transformLocalUri("#some-header")
+     * // => "https://github.com/${repo}#some-header"
+     * transformLocalUri("./SOMEFILE.md")
+     * // => "https://github.com/${repo}/blobk/${branch}/SOMEFILE.md"
+     * transformLocalUri("docs/ANOTHER.md")
+     * // => "https://github.com/${repo}/blobk/${branch}/docs/ANOTHER.md"
+     */
+    const transformLinkUri = (uri: string) => {
+        if (uri.startsWith("http")) return uri;
+        if (uri.startsWith("#")) return `https://github.com/${repoUrl}${uri}`;
+        // Если sibling-link - нормализуем
+        const blobUrl = uri.replace("./", "");
+        return `https://github.com/${repoUrl}/blob/${branch}/${blobUrl}`;
+    };
+
+    /**
+     * Получение исходника локального изображения
+     * FIXME: Работает только с markodwn-изображениями, потом переделать бы на общий случай
+     * @example
+     * transformImageUri("docs/search.png")
+     * // => https://raw.githubusercontent.com/${repo}/${branch}/docs/search.png
+     */
+    const transformImageUri = (uri: string) => {
+        if (uri.startsWith("http")) return uri;
+        // Если sibling-link - нормализуем
+        const blobUrl = uri.replace("./", "");
+        return `https://raw.githubusercontent.com/${repoUrl}/${branch}/${blobUrl}`;
+    };
+
+    return { transformLinkUri, transformImageUri };
+};
+
+/**
+ * README репозитория
+ * TODO: Плохо обрабатываются сочетания markdown и html - возможно позже надо завезти отдельный htmlParser
+ * @see https://github.com/remarkjs/react-markdown
+ */
+const RepoReadme = (props: Props) => {
+    const { text, loading } = props;
+    const uriTransformers = useLocalUri(props);
+
     return (
         <div className="repo-readme mt-6">
             {loading && <SkeletonArea />}
             {text && (
-                <Markdown className="p-6" allowDangerousHtml renderers={{ code: CodeRenderer }}>
-                    {text}
-                </Markdown>
+                <>
+                    {/* TODO: add link */}
+                    <h2 className="repo-readme__title p-4 m-0">README.md</h2>
+                    <Markdown
+                        className="repo-readme__markdown p-8 pt-4"
+                        allowDangerousHtml
+                        renderers={{ code: CodeRenderer }}
+                        /**
+                         * Github Flavored Markdown
+                         * @see https://github.com/remarkjs/react-markdown#use
+                         */
+                        plugins={[gfm]}
+                        {...uriTransformers}
+                    >
+                        {text}
+                    </Markdown>
+                </>
             )}
         </div>
     );