5 |
8 | );
9 |
10 | export default NotFoundPage;
11 |
--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public
3 | .cache
4 | .idea
5 | .vscode
6 | *.iml
7 | reduxcache*
8 | Dockerfile*
9 | *.crt
10 | *.key
11 | .dockerignore
12 | package-lock.json
13 | yarn.lock
14 | .github
15 | .gitlab-ci.yml
16 | *DS_Store
17 | *.env
18 | *.log
19 | *.zip
--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | export const onServiceWorkerUpdateReady = () => {
2 | const answer = window.confirm(
3 | `This tutorial has been updated. ` + `Reload to display the latest version?`
4 | );
5 | if (answer === true) {
6 | window.location.reload();
7 | }
8 | };
9 |
--------------------------------------------------------------------------------
/src/components/MdxComponents/loading.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | const LoadingProvider = ({ isLoading, ...props }) => {
4 | if (isLoading) {
5 | return NOT FOUND
6 |You just hit a route that doesn't exist... the sadness.
7 |Loading...
;
6 | }
7 | return ;
8 | };
9 |
10 | export default LoadingProvider;
11 |
--------------------------------------------------------------------------------
/src/components/Search/algolia/pagination.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connectPagination } from 'react-instantsearch-dom';
3 | import { Pagination } from '../';
4 | export default connectPagination(({ currentRefinement, ...rest }) => (
5 |
31 |
32 | {text}
33 | {noHits ? {query} : ''}
34 | {searching ?
36 |
37 | ) : (
38 | ''
39 | );
40 | };
41 |
42 | export default SearchStatus;
43 |
--------------------------------------------------------------------------------
/.github/workflows/cleaner.yml:
--------------------------------------------------------------------------------
1 | name: Clean repository
2 | on:
3 | schedule:
4 | - cron: "0 4 * * *"
5 |
6 | jobs:
7 |
8 | cleanup:
9 | name: Cleanup repository from stale draft, PRs and issues
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Delete draft releases
14 | uses: hugo19941994/delete-draft-releases@v0.1.0
15 | env:
16 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
17 |
18 | - name: Cleanup stale issues and PRs
19 | uses: actions/stale@v3
20 | with:
21 | repo-token: ${{ secrets.GITHUB_TOKEN }}
22 | stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days'
23 | stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days'
24 | days-before-stale: 30
25 | days-before-close: 5
26 | stale-issue-label: 'no-activity'
27 | exempt-issue-labels: 'work-in-progress'
28 | stale-pr-label: 'no-activity'
29 | exempt-pr-labels: 'work-in-progress'
30 |
--------------------------------------------------------------------------------
/src/utils/fileUtils.js:
--------------------------------------------------------------------------------
1 | const { readFileSync, close, open, utimes } = require('fs');
2 | const yaml = require('js-yaml');
3 | const path = require('path');
4 |
5 | const touch = (path) => {
6 | return new Promise((resolve, reject) => {
7 | const time = new Date();
8 | utimes(path, time, time, (err) => {
9 | if (err) {
10 | return open(path, 'w', (err, fd) => {
11 | if (err) return reject(err);
12 | close(fd, (err) => (err ? reject(err) : resolve(fd)));
13 | });
14 | }
15 | resolve();
16 | });
17 | });
18 | };
19 |
20 | const readYamlOrJson = (path) => {
21 | try {
22 | if (path.endsWith('.yml') || path.endsWith('.yaml')) {
23 | const fileContents = readFileSync(path, 'utf8');
24 | return yaml.safeLoad(fileContents);
25 | } else if (path.endsWith('.json')) {
26 | return require(path);
27 | }
28 | throw 'Config file must be either YAML or JSON';
29 | } catch (err) {
30 | console.error(err);
31 | return {};
32 | }
33 | };
34 |
35 | const rootDir = () => path.dirname(require.main.filename);
36 |
37 | module.exports = { touch, readYamlOrJson, rootDir };
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Mateusz Filipowicz
56 |
57 |
58 |
59 | );
--------------------------------------------------------------------------------
/content/editing/images.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Adding images"
3 | order: 3
4 | ---
5 |
6 | You can add and embed images into content, as this is standard Markdown feature.
7 | First, add images under `content` directory -- it can be a single `images` directory
8 | or images can be added to any directory within `content` dir.
9 |
10 | Then, once you have added images, reference them using Markdown image
11 | syntax: ``. You can use any image format,
12 | however images in `png` and `jpeg` formats will be additionally processed to improve
13 | overal site performance and user experience.
14 |
15 | You can leave caption empty, e.g. ``.
16 | You can also reference external images by providing full URL.
17 |
18 | **Example**
19 |
20 | Assuming, that all images will be embed in `page.md`:
21 |
22 |
11 |
13 | );
14 | })`
15 | background-color: ${(props) => props.theme.scrollTop.background};
16 | width: 35px;
17 | height: 35px;
18 | position: fixed;
19 | border-radius: 50px;
20 | bottom: 50px;
21 | right: 50px;
22 | cursor: pointer;
23 | z-index: 10;
24 | transition: ${(props) => props.theme.transitions.hover};
25 | ${onTablet} {
26 | background-color: ${(props) => props.theme.scrollTop.background + 'bc'};
27 | }
28 | ${onMobile} {
29 | bottom: 25px;
30 | right: 25px;
31 | width: 30px;
32 | height: 30px;
33 | background-color: ${(props) => props.theme.scrollTop.background + '9b'};
34 | }
35 | svg {
36 | width: 50%;
37 | position: absolute;
38 | margin: auto;
39 | top: 0;
40 | left: 0;
41 | right: 0;
42 | bottom: 0;
43 | path {
44 | fill: ${(props) => props.theme.scrollTop.arrow};
45 | }
46 | }
47 | &:hover {
48 | background: ${(props) => props.theme.scrollTop.hover};
49 | }
50 | `;
51 |
52 | export default ScrollTop;
53 |
--------------------------------------------------------------------------------
/src/components/Sidebar/links.js:
--------------------------------------------------------------------------------
1 | import { ExternalLink } from 'react-feather';
2 | import React from 'react';
3 | import styled from '@emotion/styled';
4 | import { flex, transparent } from '../../styles';
5 |
6 | const Link = styled(({ className, to, text }) => {
7 | return (
8 | -
43 | {links.map((link, key) => {
44 | if (link.link !== '' && link.text !== '') {
45 | return ;
46 | }
47 | })}
48 |
50 | {children}
51 |
52 | );
53 | }
54 | }
55 |
56 | export default ThemeProvider;
57 |
--------------------------------------------------------------------------------
/src/components/Search/localsearch/hitComps.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Hit } from '../Hits';
3 | import emoji from '../../../utils/emoji';
4 | import styled from '@emotion/styled';
5 |
6 | const trim_words = (str, numWords) => {
7 | const expString = str.split(/\s+/,numWords);
8 | return expString.join(" ");
9 | }
10 |
11 | const reverse = (str) => str.split("").reverse().join("");
12 |
13 | const onReversed = (str, func) => {
14 | const reversed = reverse(str);
15 | const transformed = func(reversed);
16 | return reverse(transformed);
17 | }
18 |
19 | const Highlight = styled.span`
20 | background-color: ${(props) => props.theme.search.mark.background};
21 | color: ${(props) => props.theme.search.mark.font};
22 | `;
23 |
24 | const highlight = (query, text, maxWords) => {
25 | const regex = new RegExp(query, "i")
26 | const startPos = text.search(regex);
27 | if (startPos < 0) {
28 | return trim_words(text, maxWords);
29 | }
30 | const qLength = query.length;
31 | const boundary = Math.ceil((maxWords - 1) / 2);
32 | let beforeText = text.substring(0, startPos);
33 | beforeText = onReversed(beforeText, (reversed) => trim_words(reversed, boundary));
34 | beforeText = emoji.emojify(beforeText);
35 | let afterText = text.substring(startPos + qLength);
36 | afterText = trim_words(afterText, boundary);
37 | afterText = emoji.emojify(afterText);
38 | return <>
39 | {beforeText}
40 |
8 | 
9 |
10 | );
11 | })`
12 | display: flex;
13 | img {
14 | svg * {
15 | color: ${(props) => props.theme.navigationSidebar.poweredBy.hover};
16 | }
17 | width: 25px;
18 | }
19 | `;
20 | const PoweredText = styled(({ className, text }) => (
21 |
22 |
23 | Powered By {text}
24 |
25 |
26 | ))`
27 | padding-left: 20px;
28 | span {
29 | font-size: 12px;
30 | font-family: 'Roboto', sans-serif;
31 | font-weight: 400;
32 | line-height: 1.625;
33 | }
34 | `;
35 |
36 | const PoweredBy = styled(({ className, trademark, name, link }) => (
37 |
38 |
39 |
43 | ))`
44 | color: ${(props) => props.theme.navigationSidebar.poweredBy.font};
45 | margin: 12px;
46 | display: flex;
47 | align-items: center;
48 | margin-left: 0px;
49 | padding: 12px 18px;
50 | border-radius: 4px;
51 | text-decoration: none;
52 | background-color: ${(props) => props.theme.navigationSidebar.poweredBy.background};
53 | transition: ${(props) => props.theme.transitions.hoverColor};
54 | &:hover {
55 | border: 1px solid ${(props) => props.theme.navigationSidebar.poweredBy.hover};
56 | margin-top: 11px;
57 | color: ${(props) => props.theme.navigationSidebar.poweredBy.hover};
58 | }
59 | ${onMobile} {
60 | display: none;
61 | }
62 | `;
63 |
64 | export default PoweredBy;
65 |
--------------------------------------------------------------------------------
/src/components/Header/fullscreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from '@emotion/styled';
3 | import { Maximize, Minimize } from 'react-feather';
4 | import { useTheme } from 'emotion-theming';
5 | import { ButtonIcon } from '../';
6 |
7 | export const FullScreenEnter = styled(({ toggle, ...props }) => {
8 | const theme = useTheme();
9 | return (
10 |
40 | Close full mode
41 |
50 | );
51 | })`
52 | display: flex;
53 | transition: ${(props) => props.theme.transitions.hover};
54 | cursor: pointer;
55 | align-items: center;
56 | font-size: 10pt;
57 | margin-right: 10px;
58 | &:hover{
59 | color: ${(props) => props.theme.colors.hover};
60 | }
61 | `;
62 |
--------------------------------------------------------------------------------
/src/components/Search/Hits.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'gatsby';
3 | import styled from '@emotion/styled';
4 | import { css } from '@emotion/core';
5 | import { paddingLeftRight } from './styles';
6 |
7 | const topBottomPadding = css`
8 | padding-top: 20px;
9 | padding-bottom: 20px;
10 | `;
11 |
12 | export const HitsWrapper = styled.div`
13 | left: 0;
14 | display: flex;
15 | flex-direction: column;
16 | overflow: auto;
17 | z-index: 2;
18 | -webkit-overflow-scrolling: touch;
19 | width: 100%;
20 | margin-top: 10px;
21 | // @media only screen and (max-width: 991px) {
22 | // width: 400px;
23 | // max-width: 400px;
24 | // }
25 | // @media only screen and (max-width: 767px) {
26 | // width: 100%;
27 | // max-width: 500px;
28 | // }
29 | > * + * {
30 | border-top: 2px solid ${(props) => props.theme.search.border};
31 | }
32 | li {
33 | ${topBottomPadding};
34 | ${paddingLeftRight};
35 | &:hover {
36 | background-color: ${(props) => props.theme.search.hover};
37 | color: ${(props) => props.theme.search.font.hover};
38 | }
39 | }
40 | li + li {
41 | border-top: 1px solid ${(props) => props.theme.search.border};
42 | }
43 | * {
44 | margin-top: 0;
45 | color: ${(props) => props.theme.search.font.base};
46 | }
47 | ul {
48 | list-style: none;
49 | }
50 | mark {
51 | color: ${(props) => props.theme.search.mark.font};
52 | background: ${(props) => props.theme.search.mark.background};
53 | }
54 | `;
55 |
56 | const HitTitle = styled.div`
57 | font-weight: bold;
58 | padding-top: 4px;
59 | padding-bottom: 4px;
60 | font-size: 15px;
61 | `;
62 |
63 | const HitDetails = styled.div`
64 | padding-top: 4px;
65 | padding-bottom: 4px;
66 | font-size: 14px;
67 | `;
68 |
69 | export const Hit = ({ slug, title, details }) => (
70 |
71 | {children}
20 | ))`
21 | margin: 16px 0;
22 | padding: 14px;
23 | border: 1px solid ${(props) => props.border};
24 | background-color: ${(props) => props.background};
25 | color: ${(props) => props.font};
26 | align-items: center;
27 | display: flex;
28 | border-radius: 4px;
29 | `;
30 |
31 | const Highlight = ({ children, color, icon, ...props }) => {
32 | const theme = useTheme();
33 | const highlightColor = theme.highlights[color];
34 | return (
35 |
42 | {icon.render({ color: highlightColor.border, size: 24 })}
43 |
44 | {children}
45 |
65 |
66 |
67 | 
68 |
69 |
70 |
71 |
72 | );
73 | })`
74 | min-width: ${(props) => props.theme.layout.leftWidth};
75 | display: flex;
76 | align-items: center;
77 | border-right: 1px solid ${(props) => props.theme.header.border};
78 | ${onMobile} {
79 | border-right: none;
80 | min-width: auto;
81 | padding-right: 0;
82 | }
83 | `;
84 |
85 | export default Logo;
86 |
--------------------------------------------------------------------------------
/src/components/Sidebar/contentTreeGroup.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ContentTreeNode from './contentTreeNode';
3 | import config from 'config';
4 | import styled from '@emotion/styled';
5 | import emoji from '../../utils/emoji';
6 |
7 | const ContentTreeGroup = styled(({ className, treeState, title, icon, location, children }) => {
8 | children.forEach((item) => {
9 | const alreadyExpanded = treeState.collapsed[item.url] === false;
10 | const expanded =
11 | alreadyExpanded ||
12 | location.pathname === item.url ||
13 | location.pathname === item.url + '/' ||
14 | item.children.some((child) => child.url === location.pathname) ||
15 | (config.sidebar.expanded && config.sidebar.expanded.includes(item.url));
16 |
17 | treeState.collapsed[item.url] = !expanded;
18 | });
19 | const toggle = (url) => {
20 | treeState.setCollapsed({
21 | ...treeState.collapsed,
22 | [url]: !treeState.collapsed[url],
23 | });
24 | };
25 | const emojified = emoji.emojify(title);
26 | return (
27 |
28 | {title ? (
29 | <>
30 |
31 | {icon ? 
: null}{' '}
32 | {emojified}
33 |
34 |
35 | ) : null}
36 |
48 |
49 | // {...item}
50 | );
51 | })`
52 | display: block;
53 | padding: 0;
54 | position: relative;
55 | margin-bottom: 24px;
56 | span {
57 | padding: 5px 16px;
58 | font-size: 13px;
59 | font-family: Content-font, Roboto, sans-serif;
60 | font-weight: 700;
61 | line-height: 1.2;
62 | letter-spacing: 1.2px;
63 | text-transform: uppercase;
64 | position: relative;
65 | color: ${(props) => props.theme.navigationSidebar.font.group};
66 | }
67 | > span {
68 | margin-bottom: 5px;
69 | display: flex;
70 | align-items: center;
71 | img {
72 | width: 18px;
73 | margin-right: 7px;
74 | }
75 | }
76 | `;
77 |
78 | export default ContentTreeGroup;
79 |
--------------------------------------------------------------------------------
/src/components/Header/navigation.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from '@emotion/styled';
3 | import { onMobile } from '../../styles/responsive';
4 |
5 | const Navigation = styled(({ className, links }) => {
6 | return (
7 |
28 | );
29 | })`
30 | display: flex;
31 | align-items: center;
32 | -webkit-overflow-scrolling: touch;
33 | float: left;
34 | ${onMobile} {
35 | width: 100%;
36 | justify-content: space-evenly;
37 | flex-wrap: wrap;
38 | margin-top: 10px;
39 | li {
40 | height: 37px;
41 |
42 | a {
43 | font-size: 14px;
44 | padding: 10px 15px;
45 | }
46 | }
47 | }
48 | li {
49 | list-style-type: none;
50 | display: flex;
51 | & > a:before {
52 | content: '';
53 | position: absolute;
54 | width: 100%;
55 | height: 3px;
56 | bottom: 0;
57 | left: 0;
58 | background: ${(props) => props.theme.header.font.hover};
59 | visibility: hidden;
60 | border-radius: 4px;
61 | transform: scaleX(0);
62 | transition: 0.25s linear;
63 | }
64 | & > a:focus:before,
65 | & > a:hover:before {
66 | visibility: visible;
67 | transform: scaleX(1);
68 | }
69 | a {
70 | font-family: 'Roboto';
71 | position: relative;
72 | color: ${(props) => props.theme.header.font.base};
73 | font-size: 16px;
74 | font-weight: 500;
75 | line-height: 1em;
76 | opacity: 1;
77 | padding: 10px 15px;
78 | &:hover {
79 | color: ${(props) => props.theme.header.font.hover};
80 | }
81 | }
82 | }
83 | `;
84 |
85 | export default Navigation;
86 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on:
3 | push:
4 | branches:
5 | - master
6 | - develop
7 | tags:
8 | - '*'
9 | pull_request:
10 | branches:
11 | - '*'
12 |
13 | jobs:
14 | cleanup-runs:
15 | runs-on: ubuntu-latest
16 | steps:
17 | - uses: rokroskar/workflow-run-cleanup-action@master
18 | env:
19 | GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
20 |
21 | lint:
22 | name: Lint code
23 | runs-on: ubuntu-latest
24 | steps:
25 | - name: eslint
26 | uses: reviewdog/action-eslint@v1
27 | with:
28 | reporter: github-pr-review # Change reporter.
29 | eslint_flags: 'src/'
30 | - name: Dockerfile
31 | uses: reviewdog/action-hadolint@v1
32 | with:
33 | github_token: ${{ secrets.github_token }}
34 | reporter: github-pr-review # Default is github-pr-check
35 | level: warning
36 |
37 | netlify:
38 | name: Build and Deploy preview on Netlify
39 | runs-on: ubuntu-latest
40 | if: github.ref != 'refs/heads/master' && github.ref != 'refs/heads/develop'
41 | steps:
42 | - uses: actions/checkout@master
43 | - name: Waiting for 300sec from the Netlify preview
44 | uses: jakepartusch/wait-for-netlify-action@v1
45 | id: waitFor300
46 | with:
47 | site_name: "boogi"
48 | max_timeout: 300
49 | - name: Netlify deploy logs
50 | uses: bdougie/loglify@master
51 |
52 | docker:
53 | name: Build Docker images
54 | runs-on: ubuntu-latest
55 |
56 | strategy:
57 | fail-fast: true
58 | matrix:
59 | dockerfile: ['Dockerfile.builder', 'Dockerfile.runtime', 'Dockerfile.develop']
60 |
61 | steps:
62 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
63 | - uses: actions/checkout@v2
64 |
65 | - name: Build Docker image
66 | uses: docker/build-push-action@v1.1.0
67 | with:
68 | username: filipowm
69 | password: ${{ secrets.DOCKER_REGISTRY_PASS }}
70 | repository: filipowm/boogi
71 | tags: latest
72 | tag_with_ref: true
73 | tag_with_sha: false
74 | # Path to the Dockerfile (Default is '{path}/Dockerfile')
75 | dockerfile: docker/${{ matrix.dockerfile }}
76 | always_pull: false
77 | cache_froms: node:buster-slim
78 | add_git_labels: true
79 | push: false # optional, default is true
80 |
--------------------------------------------------------------------------------
/src/utils/config-pwa.js:
--------------------------------------------------------------------------------
1 | const hasValue = (value) => value && value.length > 0;
2 |
3 | const shortNameFromMetadata = (metadata) =>
4 | calculateValue(metadata.short_name, metadata.name.replace(/\w+/, ''));
5 |
6 | const calculateValue = (value, fallbackValue) => {
7 | return hasValue(value) ? value : hasValue(fallbackValue) ? fallbackValue : null;
8 | };
9 |
10 | const calculateIconLocalPath = (icon) => {
11 | if (icon && icon.startsWith('/assets/')) {
12 | return `static${icon}`;
13 | } else if (icon && icon.startsWith('assets/')) {
14 | return `static/${icon}`;
15 | }
16 | return icon;
17 | };
18 |
19 | const formatsMap = {
20 | gif: 'image/gif',
21 | jpg: 'image/jpeg',
22 | jpeg: 'image/jpeg',
23 | pjp: 'image/jpeg',
24 | pjpeg: 'image/jpeg',
25 | png: 'image/png',
26 | tif: 'image/tiff',
27 | tiff: 'image/tiff',
28 | svg: 'image/svg+xml',
29 | webp: 'image/webp',
30 | };
31 |
32 | const setIconsType = (icons) => {
33 | icons.forEach((icon) => {
34 | if (!icon.type) {
35 | const splitted = icon.split('.');
36 | const extension = splitted.length > 0 ? splitted[splitted.length - 1].toLowerCase() : null;
37 | const type = formatsMap[extension];
38 | icon.type = type;
39 | }
40 | });
41 | };
42 |
43 | const postProcessConfig = (config) => {
44 | const manifest = { ...config.pwa.manifest };
45 | manifest.name = calculateValue(manifest.name, config.metadata.name);
46 | manifest.short_name = calculateValue(manifest.short_name, shortNameFromMetadata(config.metadata));
47 | manifest.description = calculateValue(manifest.description, config.metadata.description);
48 | manifest.start_url = calculateValue(manifest.start_url, config.metadata.pathPrefix);
49 | manifest.background_color = calculateValue(manifest.background_color, config.metadata.themeColor);
50 | manifest.theme_color = calculateValue(manifest.theme_color, config.metadata.themeColor);
51 | manifest.cache_busting_mode = 'none'; // enforce, because required to work with gatsby-plugin-offline
52 | const icon = calculateValue(manifest.icon, config.metadata.siteImage);
53 | manifest.icon = calculateIconLocalPath(icon);
54 | manifest.include_favicon = !hasValue(config.metadata.favicon);
55 | manifest.lang = calculateValue(config.metadata.language, null);
56 | if (manifest.icons) {
57 | setIconsType(manifest.icons);
58 | }
59 | config.pwa = {
60 | manifest: manifest,
61 | enabled: config.pwa.enabled,
62 | };
63 | };
64 |
65 | module.exports = postProcessConfig;
66 |
--------------------------------------------------------------------------------
/src/components/MdxComponents/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/display-name */
2 | import React from 'react';
3 | import Accordion from './accordion';
4 | import AnchorTag from './anchor';
5 | import Badge from './badge';
6 | import Card from './card';
7 | import CodeBlock from './codeBlock';
8 | import DownloadCard from './fileDownloadCard';
9 | import Highlights from './highlights';
10 | import Icon from './icon';
11 | import ImageCard from './imageCard';
12 | import Jargon from './jargon';
13 | import Layout from './layout';
14 | import LinkCard from './linkCard';
15 | import { blockquote, pre, table, list } from '../../styles';
16 | import { useTheme } from 'emotion-theming';
17 | import emoji from '../../utils/emoji';
18 |
19 | const idFromHeader = (props) => {
20 | let name = props.children;
21 | if (Array.isArray(name)) {
22 | name = props.children[0];
23 | }
24 | return emoji.clean(name).replace(/\s+/g, '').toLowerCase();
25 | };
26 | const Header = (level, props) => {
27 | let name = idFromHeader(props);
28 | return React.createElement('h' + level, {
29 | className: 'heading' + level,
30 | id: 'h-' + name,
31 | ...props,
32 | });
33 | };
34 |
35 | const Table = ({...props}) => (
36 | -
37 | {children.map((child) => (
38 |
37 |
41 | );
42 |
43 | const Section = (props) => {
44 | let header = '';
45 | if (Array.isArray(props.children)) {
46 | header = props.children[0].props;
47 | } else {
48 | header = props.children.props;
49 | }
50 | const name = idFromHeader(header);
51 | return ;
52 | };
53 |
54 | const emphasis = (props) => {
55 | const useJargon = !(typeof props.children === 'string');
56 | if (useJargon) {
57 | return
38 |
39 |
40 |
75 |
76 | **Sidebar layout**
77 |
78 | 
79 |
80 |
81 |
82 |
83 | **Directory layout**
84 | ```
85 | content
86 | │── index.md
87 | │
88 | └───gettingstarted
89 | │ │
90 | │ │── quickstart.md
91 | │
92 | │
93 | └───configuration
94 | │
95 | │── introduction.md
96 | │── settingup.md
97 | └── settingup
98 | │── features.md
99 | │── search.md
100 | ```
101 |
102 |
103 |
104 |
105 | **Configuration**
106 | ```yaml
107 | sidebar:
108 | ignoreIndex: false
109 | enabled: true
110 | groups:
111 | - order: 1
112 | path: "/gettingstarted"
113 | title: ":rocket: Getting Started"
114 | - order: 2
115 | path: "/configuration"
116 | title: ":wrench: Configuration"
117 | ```
118 |
119 |
120 |
72 | {showResults && config.features.search.showStats ? (
73 |
79 |
80 | {showResults ? (
81 | <>
82 |
88 |
89 |
90 | {showResults && config.features.search.pagination.enabled ? (
91 |
74 |
76 | ) : null}
77 |
19 |
21 | ))`
22 | cursor: pointer;
23 | margin: 0 10px;
24 | svg{
25 | width: 1.2em;
26 | }
27 | &:hover {
28 | svg {
29 | stroke: ${(props) => props.theme.colors.primary};
30 | }
31 | }
32 | `;
33 |
34 | const Input = styled.input`
35 | outline: none;
36 | border: none;
37 | font-size: 1em;
38 | transition: ${(props) => props.theme.transitions.hover};
39 | border-radius: 1px;
40 | padding-left: 10px;
41 | background-color: transparent;
42 | width: calc(100% - 26px);
43 | border-width: 0 !important;
44 | &,
45 | ::placeholder {
46 | color: ${(props) => props.theme.colors.gray};
47 | }
48 | `;
49 |
50 | const Form = styled.form`
51 | display: flex;
52 | margin-top: 12px;
53 | margin-bottom: 12px;
54 | flex-direction: row;
55 | align-items: center;
56 | ${onMobile} {
57 | width: 100%;
58 | margin-top: 8px;
59 | margin-bottom: 8px;
60 | }
61 | padding: 12px 4px;
62 | border-radius: 4px;
63 | background-color: rgba(223,225,235, .4);
64 | border: 1px solid rgba(223,225,235, 1)
65 | &, *, input::placeholder, svg {
66 | transition: ${(props) => props.theme.transitions.hover};
67 | }
68 | &:focus, &:visited, &:hover, &:focus-within {
69 | outline: none;
70 | background-color: transparent;
71 | input, input::placeholder{
72 | color: ${(props) => props.theme.colors.grayDark};
73 | }
74 | svg {
75 | stroke: ${(props) => props.theme.colors.grayDark};
76 | }
77 | }
78 |
79 | svg {
80 | stroke: ${(props) => props.theme.colors.grayLight};
81 | }
82 | `;
83 |
84 | const SidebarSearchInputWrapper = styled.div`
85 | position: sticky;
86 | top: 0;
87 | background: ${(props) => props.theme.colors.background};
88 | width: 100%;
89 | padding: 0 24px;
90 | `;
91 |
92 | const SidebarSearchInput = ({ search, inputRef, showClean, ...props }) => (
93 |
79 | {showResults && config.features.search.showStats ? (
80 |
89 |
100 |
101 | {showResults &&
102 | searchResult.hits.length > 0 &&
103 | config.features.search.pagination.enabled ? (
104 | -
90 | {searchResult.hits.map((hit) => (
91 |
98 |
99 |
101 |
102 |
37 | {cleanTokens(tokens).map((line, i) => {
38 | let lineClass = {};
39 |
40 | let isDiff = false;
41 |
42 | if (line[0] && line[0].content.length && line[0].content[0] === '+') {
43 | lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
44 | isDiff = true;
45 | } else if (line[0] && line[0].content.length && line[0].content[0] === '-') {
46 | lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
47 | isDiff = true;
48 | } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {
49 | lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
50 | isDiff = true;
51 | } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {
52 | lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
53 | isDiff = true;
54 | }
55 | const lineProps = getLineProps({ line, key: i });
56 |
57 | lineProps.style = lineClass;
58 | const diffStyle = {
59 | userSelect: 'none',
60 | MozUserSelect: '-moz-none',
61 | WebkitUserSelect: 'none',
62 | };
63 |
64 | let splitToken;
65 |
66 | return (
67 |
68 | {line.map((token, key) => {
69 | if (isDiff) {
70 | if (
71 | (key === 0 || key === 1) &
72 | (token.content.charAt(0) === '+' || token.content.charAt(0) === '-')
73 | ) {
74 | if (token.content.length > 1) {
75 | splitToken = {
76 | types: ['template-string', 'string'],
77 | content: token.content.slice(1),
78 | };
79 | const firstChar = {
80 | types: ['operator'],
81 | content: token.content.charAt(0),
82 | };
83 |
84 | return (
85 |
86 |
90 |
91 |
92 | );
93 | } else {
94 | return ;
95 | }
96 | }
97 | }
98 | return ;
99 | })}
100 |
101 | );
102 | })}
103 |
104 | )}
105 | -
71 | {children.map((item) => (
72 |