= ({
15 | locale = "en",
16 | children,
17 | }) => (
18 |
23 | {children}
24 |
25 | );
26 |
27 | export default IntlProvider;
28 |
--------------------------------------------------------------------------------
/src/common/i18n/flattenMessages.ts:
--------------------------------------------------------------------------------
1 | import { NestedObject } from "./types";
2 |
3 | const flattenMessages = (nestedMessages: NestedObject, prefix: string = "") =>
4 | Object.keys(nestedMessages).reduce((messages: NestedObject, key) => {
5 | const value = nestedMessages[key];
6 | const prefixedKey = prefix ? `${prefix}.${key}` : key;
7 | if (typeof value === "string") {
8 | messages[prefixedKey] = value;
9 | } else {
10 | if (Array.isArray(value)) {
11 | messages[prefixedKey] = value;
12 | }
13 | Object.assign(
14 | messages,
15 | flattenMessages(value as NestedObject, prefixedKey),
16 | );
17 | }
18 | return messages;
19 | }, {});
20 |
21 | export default flattenMessages;
22 |
--------------------------------------------------------------------------------
/src/common/i18n/getTranslation.ts:
--------------------------------------------------------------------------------
1 | export default (prefix?: string) => (id: string) =>
2 | prefix ? `${prefix}.${id}` : id;
3 |
--------------------------------------------------------------------------------
/src/common/i18n/index.ts:
--------------------------------------------------------------------------------
1 | export { default as injectIntl } from "./injectIntl";
2 | export { default as FormattedMessage } from "./FormattedMessage";
3 | export { default as getTranslation } from "./getTranslation";
4 | export { default as IntlProvider } from "./Provider";
5 | export * from "./types";
6 |
--------------------------------------------------------------------------------
/src/common/i18n/locales.ts:
--------------------------------------------------------------------------------
1 | import { Internationalization } from "./types";
2 |
3 | // en
4 | import enLayout from "@content/i18n/en/layout.json";
5 | import en404 from "@content/i18n/en/404.json";
6 | import enCookies from "@content/i18n/en/cookies.json";
7 | import enLandingPage from "@content/i18n/en/landing-page.json";
8 | import enDocs from "@content/i18n/en/docs.json";
9 | import enBlog from "@content/i18n/en/blog.json";
10 | import enSearch from "@content/i18n/en/search.json";
11 | import enSiteMetadata from "@content/i18n/en/siteMetadata.json";
12 | import enUtils from "@content/i18n/en/utils.json";
13 |
14 | const intl: Internationalization = {
15 | en: {
16 | layout: enLayout,
17 | "404": en404,
18 | cookies: enCookies,
19 | landingPage: enLandingPage,
20 | docs: enDocs,
21 | blog: enBlog,
22 | search: enSearch,
23 | siteMetadata: enSiteMetadata,
24 | utils: enUtils,
25 | },
26 | };
27 |
28 | export default intl;
29 |
--------------------------------------------------------------------------------
/src/common/i18n/types.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { FormattedMessage, MessageValue } from "react-intl";
3 |
4 | export type FormatMessageFn = (
5 | messageDescriptor: FormattedMessage.MessageDescriptor,
6 | values?: { [key: string]: MessageValue | JSX.Element },
7 | ) => string;
8 |
9 | export type FormatArrayFn = (
10 | messageDescriptor: FormattedMessage.MessageDescriptor,
11 | values?: { [key: string]: MessageValue | JSX.Element },
12 | ) => string[];
13 |
14 | export interface IntlInterface {
15 | formatMessage: FormatMessageFn;
16 | formatArray: FormatArrayFn;
17 | }
18 |
19 | export type FunctionComponentIntl = React.FunctionComponent<
20 | P & IntlInterface
21 | >;
22 |
23 | export interface Internationalization {
24 | [key: string]: {
25 | [key: string]: any;
26 | };
27 | }
28 |
29 | export interface NestedObject<
30 | T = string | string[] | { [key: string]: NestedObject }
31 | > {
32 | [key: string]: T;
33 | }
34 |
--------------------------------------------------------------------------------
/src/common/state/GlobalState.ts:
--------------------------------------------------------------------------------
1 | import { nest } from "./nest";
2 |
3 | import PopupState from "./usePopup";
4 |
5 | export const GlobalState = nest(PopupState.Provider);
6 |
--------------------------------------------------------------------------------
/src/common/state/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./GlobalState";
2 |
--------------------------------------------------------------------------------
/src/common/state/nest.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const nest = (...components: any[]) => (props: any) =>
4 | components.reduceRight(
5 | (children, Current) => {children},
6 | props.children,
7 | );
8 |
--------------------------------------------------------------------------------
/src/common/state/usePopup.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import createContainer from "constate";
3 | import useTimeout from "@rooks/use-timeout";
4 |
5 | const popupTimeout = 1500;
6 |
7 | const usePopup = () => {
8 | const [popup, setPopupText] = useState(null);
9 | const [popupVisible, setPopupVisible] = useState(false);
10 |
11 | const { start, clear } = useTimeout(() => {
12 | setPopupVisible && setPopupVisible(false);
13 | clear && clear();
14 | }, popupTimeout);
15 |
16 | const setPopup = (content: any) => {
17 | clear();
18 | setPopupText(content);
19 | setPopupVisible(true);
20 | start();
21 | };
22 |
23 | const onDismissPopup = () => {
24 | setPopupVisible(false);
25 | clear();
26 | };
27 |
28 | return { popup, setPopup, popupVisible, onDismissPopup };
29 | };
30 |
31 | export default createContainer(usePopup);
32 |
--------------------------------------------------------------------------------
/src/common/styled/index.ts:
--------------------------------------------------------------------------------
1 | import * as styledComponents from "styled-components";
2 |
3 | import { Theme } from "./theme";
4 | import media, { sizes, is } from "./media";
5 |
6 | const {
7 | default: styled,
8 | css,
9 | keyframes,
10 | ThemeProvider,
11 | withTheme,
12 | } = (styledComponents as any) as styledComponents.ThemedStyledComponentsModule<
13 | Theme
14 | >;
15 |
16 | type ThemeProps = styledComponents.ThemedStyledProps;
17 |
18 | export {
19 | css,
20 | keyframes,
21 | ThemeProvider,
22 | withTheme,
23 | ThemeProps,
24 | media,
25 | sizes,
26 | is,
27 | };
28 |
29 | export default styled;
30 |
--------------------------------------------------------------------------------
/src/common/types.ts:
--------------------------------------------------------------------------------
1 | /* AllMarkdownRemark */
2 | export interface AllMarkdownRemark {
3 | data: {
4 | allMarkdownRemark: {
5 | edges: Array>;
6 | };
7 | };
8 | }
9 |
10 | export interface AllMarkdownRemarkNode {
11 | node: T;
12 | }
13 |
14 | /* MarkdownRemark */
15 | export interface MarkdownRemark {
16 | data: {
17 | markdownRemark: T;
18 | };
19 | }
20 |
21 | /* AllFile */
22 | export interface AllFile {
23 | data: {
24 | allFile: {
25 | edges: Array>;
26 | };
27 | };
28 | }
29 |
30 | export interface AllFileNode {
31 | node: T;
32 | }
33 |
34 | /* AllFile Images */
35 | export type AllFileImages = Array>;
36 |
37 | export interface AllFileImage {
38 | dir: string;
39 | name: string;
40 | extension: string;
41 | childImageSharp: any;
42 | }
43 |
44 | /* PageContext */
45 | export interface PageContext {
46 | pageContext: T;
47 | }
48 |
49 | export interface IntlPageContext {
50 | locale: string;
51 | }
52 |
53 | /* Location */
54 | export interface Location {
55 | location: any;
56 | }
57 |
--------------------------------------------------------------------------------
/src/common/utils/getActualYear.ts:
--------------------------------------------------------------------------------
1 | export function getActualYear(): number {
2 | return new Date().getFullYear();
3 | }
4 |
--------------------------------------------------------------------------------
/src/common/utils/index.ts:
--------------------------------------------------------------------------------
1 | export { getActualYear } from "./getActualYear";
2 | export { isInitialRenderComplete } from "./isInitialRenderComplete";
3 | export * from "./isMode";
4 | export { resolveSocialMedia } from "./resolveSocialMedia";
5 | export { scrollIntoViewOfAnchor } from "./scrollIntoViewOfAnchor";
6 | export { scrollToAnchor } from "./scrollToAnchor";
7 | export { toKebabCase } from "./toKebabCase";
8 |
--------------------------------------------------------------------------------
/src/common/utils/isInitialRenderComplete.ts:
--------------------------------------------------------------------------------
1 | export const isInitialRenderComplete = (): boolean =>
2 | Boolean(window.__GATSBY_INITIAL_RENDER_COMPLETE);
3 |
--------------------------------------------------------------------------------
/src/common/utils/isMode.ts:
--------------------------------------------------------------------------------
1 | export const isDevelopmentMode = (): boolean =>
2 | Boolean(process.env.NODE_ENV && process.env.NODE_ENV === "development");
3 |
4 | export const isProductionMode = (): boolean =>
5 | Boolean(process.env.NODE_ENV && process.env.NODE_ENV === "production");
6 |
--------------------------------------------------------------------------------
/src/common/utils/resolveSocialMedia.ts:
--------------------------------------------------------------------------------
1 | import config from "@config";
2 |
3 | export const resolveSocialMedia = (media: keyof typeof config.socialMedia) =>
4 | config.socialMedia[media];
5 |
--------------------------------------------------------------------------------
/src/common/utils/scrollIntoViewOfAnchor.ts:
--------------------------------------------------------------------------------
1 | export const scrollIntoViewOfAnchor = (hash: string): void => {
2 | let target = document.querySelector(hash);
3 | if (!target) {
4 | return;
5 | }
6 |
7 | const scrollIntoView = target.scrollIntoView;
8 | if (typeof scrollIntoView === "function") {
9 | target.scrollIntoView(true);
10 | } else {
11 | let top = 0;
12 | while (target) {
13 | top += target.offsetTop;
14 | target = target && (target.offsetParent as HTMLElement);
15 | }
16 | window.scrollTo(0, top);
17 | }
18 |
19 | window.history.pushState(null, "", hash);
20 | };
21 |
--------------------------------------------------------------------------------
/src/common/utils/toKebabCase.ts:
--------------------------------------------------------------------------------
1 | export const toKebabCase = (str: string): string => {
2 | if (!str) {
3 | return "";
4 | }
5 | const data = str.match(
6 | /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g,
7 | );
8 | if (!data) {
9 | return "";
10 | }
11 | return data.map(x => x.toLowerCase()).join("-");
12 | };
13 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/constants.ts:
--------------------------------------------------------------------------------
1 | export const markdownTypes: string[] = ["markdown", "md"];
2 | export const types: Set = new Set();
3 | export let hideTitleHeader: boolean = false;
4 |
5 | export function setHideTitleHeader(b: boolean) {
6 | hideTitleHeader = b;
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/external/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./removeMarkdownSyntax";
2 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/external/removeMarkdownSyntax.ts:
--------------------------------------------------------------------------------
1 | // Code is taken from https://github.com/stiang/remove-markdown/blob/master/index.js with only needed regular expressions
2 |
3 | export function removeMarkdownSyntax(
4 | markdown: string,
5 | removeHTMLTags: boolean = true,
6 | ): string {
7 | if (!markdown) {
8 | return markdown;
9 | }
10 |
11 | const content = removeHTMLTags ? markdown.replace(/<[^>]*>/g, "") : markdown;
12 |
13 | return (
14 | content
15 | // Remove images
16 | .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, "")
17 | // Remove inline links
18 | .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, "$1")
19 | // Remove blockquotes
20 | .replace(/^\s{0,3}>\s?/g, "")
21 | // Remove emphasis (repeat the line to remove double emphasis)
22 | .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
23 | .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2")
24 | // Remove inline code
25 | .replace(/`(.+?)`/g, "$1")
26 | // Strikethrough
27 | .replace(/~~/g, "")
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/helpers.ts:
--------------------------------------------------------------------------------
1 | import { DOCS_PATH_NAME } from "@common/constants";
2 | import { join } from "path";
3 | import { toKebabCase } from "@common/utils";
4 |
5 | export const getDocsPath = (
6 | version: string,
7 | content?: {
8 | id: string;
9 | repoName: string;
10 | hash: string;
11 | },
12 | ) => {
13 | const versionPathPart = version ? `${version}/` : "";
14 |
15 | if (!content) {
16 | return `/${DOCS_PATH_NAME}/${versionPathPart}`;
17 | }
18 |
19 | const { id, repoName, hash } = content;
20 |
21 | if (!id && !repoName) {
22 | return `/${DOCS_PATH_NAME}/${versionPathPart}`;
23 | }
24 |
25 | return join("/", DOCS_PATH_NAME, toKebabCase(repoName), versionPathPart);
26 | };
27 |
28 | export const getDocsPathLink = (version: string) => (content: {
29 | id: string;
30 | repoName: string;
31 | hash: string;
32 | }) => getDocsPath(version, content);
33 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/layouts/DocsSpecification.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Content } from "@kyma-project/documentation-component";
3 |
4 | import { StylesOpenAPI } from "../render-engines/openapi/StyledOpenApi";
5 |
6 | export const DocsSpecificationLayout: React.FunctionComponent = () => (
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/layouts/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./MobileNavButton";
2 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/layouts/index.ts:
--------------------------------------------------------------------------------
1 | export { DocsLayout } from "./Docs";
2 | export { DocsSpecificationLayout } from "./DocsSpecification";
3 | export { CommunityLayout } from "./Community";
4 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/index.ts:
--------------------------------------------------------------------------------
1 | export { markdownRE } from "./markdown";
2 | export { openApiRE } from "./openapi";
3 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/custom-renderers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Image";
2 | export * from "./Heading";
3 | export * from "./Link";
4 | export { default as CopyButton } from "./CopyButton";
5 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/headers-toc/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./HeadersComponent";
2 | export * from "./RenderedHeader";
3 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/helpers/customFirstNode.ts:
--------------------------------------------------------------------------------
1 | import { Source } from "@kyma-project/documentation-component";
2 | import { plugins } from "@kyma-project/dc-markdown-render-engine";
3 | import { headingPrefix } from "./headingPrefix";
4 |
5 | type Header = plugins.Header;
6 |
7 | export function customFirstNode(
8 | source: Source,
9 | toKebabCase: (str: string) => string,
10 | ): Header {
11 | const title: string =
12 | source.data && source.data.frontmatter && source.data.frontmatter.title;
13 |
14 | return {
15 | title,
16 | id: toKebabCase(headingPrefix(source)),
17 | level: "doc-title",
18 | source,
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/helpers/headingPrefix.ts:
--------------------------------------------------------------------------------
1 | import { Source } from "@kyma-project/documentation-component";
2 | import { toKebabCase } from "@common/utils";
3 |
4 | export function headingPrefix(source: Source): string {
5 | if (source.data && source.data.frontmatter) {
6 | const title = source.data.frontmatter.title;
7 | return toKebabCase(title);
8 | }
9 | return "";
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/helpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./scrollSpyCallback";
2 | export * from "./customFirstNode";
3 | export * from "./headingPrefix";
4 | export * from "./postProcessingHeaders";
5 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/helpers/scrollSpyCallback.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject } from "react";
2 |
3 | export const scrollSpyCallback = (
4 | ref: MutableRefObject,
5 | ) => (element: HTMLAnchorElement) => {
6 | const bounding = element.getBoundingClientRect();
7 | const current = ref && ref.current;
8 |
9 | if (!current) {
10 | return;
11 | }
12 |
13 | if (
14 | bounding.top >= 0 &&
15 | bounding.left >= 0 &&
16 | bounding.right <=
17 | (window.innerWidth || document.documentElement.clientWidth) &&
18 | bounding.bottom <=
19 | (window.innerHeight || document.documentElement.clientHeight)
20 | ) {
21 | return;
22 | }
23 |
24 | current.scrollBy(0, bounding.top - Math.ceil(window.innerHeight * 0.5));
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/plugins/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./replaceImagePaths";
2 | export * from "./tabs";
3 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/plugins/replaceImagePaths/index.ts:
--------------------------------------------------------------------------------
1 | import { Plugin, PluginType } from "@kyma-project/documentation-component";
2 | import { replaceImagePaths } from "./mutationPlugin";
3 |
4 | const replaceImagePathsMutationPlugin: Plugin = {
5 | name: "replace-image-paths-mutation",
6 | type: PluginType.MUTATION,
7 | sourceTypes: ["markdown", "md"],
8 | fn: replaceImagePaths,
9 | };
10 |
11 | export { replaceImagePathsMutationPlugin };
12 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/markdown/plugins/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./parserPlugin";
2 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/openapi/index.ts:
--------------------------------------------------------------------------------
1 | import { RenderEngineWithOptions } from "@kyma-project/documentation-component";
2 | import {
3 | openApiRenderEngine,
4 | OpenApiProps,
5 | } from "@kyma-project/dc-open-api-render-engine";
6 |
7 | import { OpenAPIPlugins } from "./plugins";
8 |
9 | export const openApiRE: RenderEngineWithOptions = {
10 | renderEngine: openApiRenderEngine,
11 | options: {
12 | plugins: OpenAPIPlugins,
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/render-engines/openapi/plugins.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const plugins = {
4 | wrapComponents: {
5 | parameters: (Original: React.ElementType, _: any) => (props: any) => (
6 |
7 | ),
8 | authorizeBtn: () => () => null,
9 | authorizeOperationBtn: () => () => null,
10 | info: () => () => null,
11 | tags: () => () => null,
12 | },
13 | };
14 |
15 | export const OpenAPIPlugins = (_: any) => ({
16 | ...plugins,
17 | });
18 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/renderers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Markdown.renderer";
2 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/services/TabState.service.ts:
--------------------------------------------------------------------------------
1 | import createUseContext from "constate";
2 |
3 | export interface TabServiceProps {
4 | group?: string;
5 | label?: string;
6 | }
7 |
8 | function useTabService({ group, label }: TabServiceProps) {
9 | return {
10 | group,
11 | label,
12 | };
13 | }
14 |
15 | const { Provider, Context } = createUseContext(useTabService);
16 | export { Provider as TabProvider, Context as TabContext };
17 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./GenericDocs.service";
2 | export * from "./TabState.service";
3 |
--------------------------------------------------------------------------------
/src/components/generic-documentation/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const MarkdownWrapper = styled.div`
4 | &&&&& {
5 | > div {
6 | display: flex;
7 | align-items: stretch;
8 | }
9 |
10 | .grid-container > div {
11 | width: 100%;
12 | }
13 | }
14 | `;
15 |
--------------------------------------------------------------------------------
/src/components/shared/Checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | CheckboxContainer,
5 | HiddenCheckbox,
6 | StyledCheckbox,
7 | Icon,
8 | } from "./styled";
9 |
10 | interface Props {
11 | className?: string;
12 | checked?: boolean;
13 | onChange: () => void;
14 | onClick: () => void;
15 | }
16 |
17 | const Checkbox: React.FunctionComponent = ({
18 | className = "",
19 | checked = false,
20 | ...props
21 | }) => (
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 |
32 | export default Checkbox;
33 |
--------------------------------------------------------------------------------
/src/components/shared/Icon/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent } from "react";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import {
4 | IconPrefix,
5 | IconName,
6 | IconProp,
7 | } from "@fortawesome/fontawesome-svg-core";
8 |
9 | export interface IconProps {
10 | iconName: string;
11 | iconPrefix?: string;
12 | className?: string;
13 | [key: string]: any;
14 | }
15 |
16 | const Icon: FunctionComponent = ({
17 | iconName,
18 | iconPrefix = "fab",
19 | className = "",
20 | ...otherProps
21 | }) => {
22 | const icon: IconProp = [iconPrefix as IconPrefix, iconName as IconName];
23 |
24 | return ;
25 | };
26 |
27 | export default Icon;
28 |
--------------------------------------------------------------------------------
/src/components/shared/NotePanel/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { NotePanelWrapper, NotePanelContent } from "./styled";
4 |
5 | export type NotePanelPropsType = "note" | "tip" | "caution" | undefined;
6 | export interface NotePanelProps {
7 | type: NotePanelPropsType;
8 | }
9 |
10 | const NotePanel: React.FunctionComponent = ({
11 | type,
12 | children,
13 | }) => (
14 |
15 | {children}
16 |
17 | );
18 |
19 | export default NotePanel;
20 |
--------------------------------------------------------------------------------
/src/components/shared/NotePanel/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { css } from "@styled";
2 | import { NotePanelProps } from "./index";
3 |
4 | const getColorFromType = (props: NotePanelProps) => {
5 | switch (props.type) {
6 | case "note":
7 | return css`
8 | ${data => data.theme.colors.background.third}
9 | `;
10 | case "tip":
11 | return css`
12 | ${data => data.theme.colors.border.tertiary}
13 | `;
14 | case "caution":
15 | return css`
16 | ${data => data.theme.colors.border.quaternary}
17 | `;
18 | default:
19 | return "unset";
20 | }
21 | };
22 |
23 | export const NotePanelWrapper = styled.blockquote`
24 | margin-left: 0;
25 | margin-right: 0;
26 | padding: 16px;
27 | border-left: 3px solid ${(props: NotePanelProps) => getColorFromType(props)};
28 |
29 | > div {
30 | width: 100%;
31 | }
32 | `;
33 |
34 | export const NotePanelContent = styled.div`
35 | display: inline-block;
36 | > p {
37 | margin-bottom: 5px;
38 | }
39 | > ul > li {
40 | margin-bottom: 3px;
41 | }
42 | `;
43 |
--------------------------------------------------------------------------------
/src/components/shared/Paragraph/index.tsx:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | interface ParagraphProps {
4 | inline?: boolean;
5 | justify?: boolean;
6 | }
7 |
8 | export default styled.p`
9 | ${props => props.justify && "text-align: justify;"};
10 | display: ${props => (props.inline ? "inline" : "block")};
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Break.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Break: React.FunctionComponent = ({ children }) => <>{children};
4 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Definition.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Definition: React.FunctionComponent = ({ children }) => (
4 | <>{children}
5 | );
6 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Delete.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Delete: React.FunctionComponent = ({ children }) => (
4 | <>{children}
5 | );
6 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Emphasis.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Emphasis: React.FunctionComponent = ({ children }) => (
4 | <>{children}
5 | );
6 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/HTML.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const HTML: React.FunctionComponent = () => null;
4 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Image.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "@styled";
3 |
4 | const StyledImage = styled.img`
5 | margin: 16px 0;
6 | border-radius: 3px;
7 | `;
8 |
9 | interface ImageProps {
10 | alt: string;
11 | src: string;
12 | assetsPath?: string;
13 | renderedFileName?: string;
14 | }
15 |
16 | export const Image: React.FunctionComponent = ({
17 | alt,
18 | src,
19 | assetsPath = "",
20 | renderedFileName = "",
21 | }) => {
22 | const getAssetName = (path: string): string => {
23 | const fileNameRegex = /(.*?)\/(.*?).(jpeg|jpg|gif|png|svg)$/;
24 | const match = fileNameRegex.exec(path);
25 |
26 | if (match && match[2]) {
27 | const splitedName = match[2].split("/");
28 | return `${splitedName[splitedName.length - 1]}.${match[3]}`;
29 | }
30 | return "";
31 | };
32 |
33 | if (!assetsPath) {
34 | return null;
35 | }
36 |
37 | const assetName = getAssetName(src);
38 | if (!assetName) {
39 | return null;
40 | }
41 |
42 | return ;
43 | };
44 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/ImageReference.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const ImageReference: React.FunctionComponent = () => null;
4 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/InlineCode.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "@styled";
3 |
4 | import embedVideo from "./EmbedVideo";
5 |
6 | const StyledInlineCode = styled.code`
7 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
8 | monospace;
9 | font-size: 85%;
10 | background-color: rgba(27, 31, 35, 0.05);
11 | padding: 0.2em 0.4em;
12 | margin: 0;
13 | border-radius: 3px;
14 | `;
15 |
16 | interface InlineCodeProps {
17 | inline: boolean;
18 | value: string;
19 | }
20 |
21 | export const InlineCode: React.FunctionComponent = ({
22 | inline = true,
23 | value,
24 | children,
25 | }) => {
26 | let video = null;
27 | if (value) {
28 | video = embedVideo(value);
29 | }
30 |
31 | return video ? (
32 |
33 | ) : (
34 | {children === value ? value : children}
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/LinkReference.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const LinkReference: React.FunctionComponent<{}> = () => null;
4 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/List.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "@styled";
3 |
4 | const StyledOl = styled.ol`
5 | list-style-type: decimal;
6 | margin-left: 28px;
7 | `;
8 |
9 | const StyledUl = styled.ul`
10 | list-style-type: disc;
11 | margin-left: 20px;
12 | `;
13 |
14 | interface ListProps {
15 | start: number;
16 | ordered: boolean;
17 | tight: boolean;
18 | depth: number;
19 | }
20 |
21 | export const List: React.FunctionComponent = ({
22 | start,
23 | ordered,
24 | tight,
25 | depth,
26 | children,
27 | }) => {
28 | if (ordered) {
29 | return {children};
30 | }
31 | return {children};
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/ListItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ListItemProps {
4 | checked: boolean | null;
5 | index: number;
6 | }
7 |
8 | export const ListItem: React.FunctionComponent = ({
9 | index,
10 | children,
11 | }) => {children};
12 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Paragraph.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import P from "@components/shared/Paragraph";
4 |
5 | export const Paragraph: React.FunctionComponent<{}> = ({ children }) => (
6 | {children}
7 | );
8 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/ParsedHTML.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ParsedHTMLProps {
4 | element: any;
5 | }
6 |
7 | export const ParsedHTML: React.FunctionComponent = ({
8 | element,
9 | }) => <>{element};
10 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Root.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "@styled";
3 |
4 | const StyledRoot = styled.div`
5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
6 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7 | `;
8 |
9 | export const Root: React.FunctionComponent = ({ children }) => (
10 | {children}
11 | );
12 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Strong.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "@styled";
3 |
4 | const StyledStrong = styled.strong`
5 | font-weight: ${props => props.theme.fontWeight.bold};
6 | `;
7 |
8 | export const Strong: React.FunctionComponent<{}> = ({ children }) => (
9 | {children}
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Table.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AlignType } from "react-markdown";
3 |
4 | import styled from "@styled";
5 |
6 | const StyledTable = styled.table`
7 | display: block;
8 | width: 100%;
9 | overflow: auto;
10 | `;
11 |
12 | interface TableProps {
13 | columnAlignment: AlignType;
14 | }
15 |
16 | export const Table: React.FunctionComponent = ({
17 | columnAlignment,
18 | children,
19 | }) => {children};
20 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/TableBody.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AlignType } from "react-markdown";
3 |
4 | import styled from "@styled";
5 |
6 | const StyledTableBody = styled.tbody``;
7 |
8 | interface TableBodyProps {
9 | columnAlignment: AlignType;
10 | }
11 |
12 | export const TableBody: React.FunctionComponent = ({
13 | columnAlignment,
14 | children,
15 | }) => {children};
16 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/TableHead.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AlignType } from "react-markdown";
3 |
4 | import styled from "@styled";
5 |
6 | const StyledTableHead = styled.thead``;
7 |
8 | interface TableHeadProps {
9 | columnAlignment: AlignType;
10 | }
11 |
12 | export const TableHead: React.FunctionComponent = ({
13 | columnAlignment,
14 | children,
15 | }) => {children};
16 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/TableRow.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AlignType } from "react-markdown";
3 |
4 | import styled from "@styled";
5 |
6 | const StyledTableRow = styled.tr`
7 | &:nth-child(2n) {
8 | background-color: rgb(246, 248, 250);
9 | }
10 | `;
11 |
12 | interface TableRowProps {
13 | isHeader: boolean;
14 | columnAlignment: AlignType;
15 | }
16 |
17 | export const TableRow: React.FunctionComponent = ({
18 | isHeader = false,
19 | columnAlignment,
20 | children,
21 | }) => {children};
22 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/Text.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Text: React.FunctionComponent<{}> = ({ children }) => (
4 | <>{children}
5 | );
6 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/ThematicBreak.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const ThematicBreak: React.FunctionComponent<{
4 | children: React.ReactNode;
5 | }> = ({ children }) => <>{children};
6 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/VirtualHTML.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const VirtualHTML: React.FunctionComponent<{}> = () => null;
4 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Blockquote";
2 | export * from "./Break";
3 | export * from "./Code";
4 | export * from "./Definition";
5 | export * from "./Delete";
6 | export * from "./Emphasis";
7 | export * from "./Heading";
8 | export * from "./HTML";
9 | export * from "./Image";
10 | export * from "./ImageReference";
11 | export * from "./InlineCode";
12 | export * from "./Link";
13 | export * from "./LinkReference";
14 | export * from "./List";
15 | export * from "./ListItem";
16 | export * from "./Paragraph";
17 | export * from "./ParsedHTML";
18 | export * from "./Root";
19 | export * from "./Strong";
20 | export * from "./Table";
21 | export * from "./TableBody";
22 | export * from "./TableCell";
23 | export * from "./TableHead";
24 | export * from "./TableRow";
25 | export * from "./Text";
26 | export * from "./ThematicBreak";
27 | export * from "./VirtualHTML";
28 |
--------------------------------------------------------------------------------
/src/components/shared/ReactMarkdown/helpers.ts:
--------------------------------------------------------------------------------
1 | const tabsBlockRegex = /(.|\n)*?<\/div>/g;
2 | // Regex for removing blank lines for correct parsing toggle in ReactMarkdown component
3 | const blankLinesRegex = /^\s*$(?:\r\n?|\n)/gm;
4 | const codeBlocksRegex = /^(([ \t]*`{3,4})([^\n]*)([\s\S]+?)(^[ \t]*\2))/gm;
5 | const lessThanChar = "<";
6 |
7 | export const removeBlankLines = (source: string) =>
8 | source.replace(blankLinesRegex, "");
9 |
10 | export const removeBlankLinesFromTabsBlock = (source?: string) =>
11 | source &&
12 | source.replace(tabsBlockRegex, occurrence => removeBlankLines(occurrence));
13 |
14 | export const replaceAllLessThanChars = (source?: string) =>
15 | source &&
16 | source.replace(codeBlocksRegex, occurrence =>
17 | occurrence.replace(/ node.type !== "script";
11 | const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
12 |
13 | export default (headingPrefix: string) =>
14 | htmlParser({
15 | isValidNode,
16 | processingInstructions: [
17 | // Tabs processing
18 | tabs(headingPrefix),
19 | {
20 | // Anything else
21 | shouldProcessNode: (node: any) => true,
22 | processNode: processNodeDefinitions.processDefaultNode,
23 | },
24 | ],
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/shared/Separator/index.tsx:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export default styled.hr`
4 | height: 2px;
5 | object-fit: contain;
6 | background-image: linear-gradient(99deg, rgba(0, 232, 51, 0.5), #0b74de);
7 | margin-bottom: 0;
8 | `;
9 |
--------------------------------------------------------------------------------
/src/components/shared/Tabs/Tab.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { TabLink, TabWrapper } from "./styled";
4 |
5 | export interface TabProps {
6 | group?: string;
7 | label: string;
8 | labelID: string;
9 | isActive?: boolean;
10 | headingPrefix?: string;
11 | parentCallback?: (label: string) => void;
12 | children: React.ReactNode;
13 | }
14 |
15 | const Tab: React.FunctionComponent = ({
16 | label = "",
17 | labelID,
18 | isActive = false,
19 | parentCallback,
20 | }) => (
21 |
22 | {
24 | event.preventDefault();
25 | parentCallback && parentCallback(labelID);
26 | }}
27 | active={isActive}
28 | >
29 | {label}
30 |
31 |
32 | );
33 |
34 | export default Tab;
35 |
--------------------------------------------------------------------------------
/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 | const content: any;
3 | export default content;
4 | }
5 |
6 | declare module "*.png" {
7 | const content: any;
8 | export default content;
9 | }
10 |
11 | declare module "*.gif" {
12 | const content: any;
13 | export default content;
14 | }
15 |
16 | declare module "*.jpg" {
17 | const content: any;
18 | export default content;
19 | }
20 |
21 | declare module "*.json" {
22 | const content: any;
23 | export default content;
24 | }
25 |
26 | declare module "*.js" {
27 | const content: any;
28 | export default content;
29 | }
30 |
31 | declare module "prism-react-renderer";
32 | declare module "react-modal-hook";
33 | declare module "get-video-id";
34 | declare module "react-twitter-embed";
35 |
--------------------------------------------------------------------------------
/src/layouts/404/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DefaultLayout } from "../default";
3 |
4 | export const NotFoundLayout: React.FunctionComponent = ({
5 | children,
6 | ...pageContext
7 | }) => {children};
8 |
--------------------------------------------------------------------------------
/src/layouts/blog/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DefaultLayout } from "../default";
3 |
4 | export const BlogLayout: React.FunctionComponent = ({
5 | children,
6 | ...pageContext
7 | }) => {children};
8 |
--------------------------------------------------------------------------------
/src/layouts/community/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DefaultLayout } from "../default";
3 |
4 | export const CommunityLayout: React.FunctionComponent = ({
5 | children,
6 | ...pageContext
7 | }) => (
8 |
9 | {children}
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/src/layouts/default/components/DocsNavigation.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import NavDropdown from "./NavDropdown";
4 |
5 | import { NavigationItem, NavigationIntLink } from "./styled";
6 |
7 | import config from "@config";
8 |
9 | interface DocsNavigationProps {
10 | toggleVisibility: () => void;
11 | }
12 |
13 | const DocsNavigation: React.FunctionComponent = ({
14 | toggleVisibility,
15 | }) => {
16 | const docsNav = {
17 | path: "/docs/",
18 | title: "Docs",
19 | };
20 | const elements = Object.entries(config.docs).map(([_, doc]) => ({
21 | displayName: doc.displayName,
22 | url: `/docs/${doc.navPath}`,
23 | active: false,
24 | }));
25 |
26 | return (
27 |
28 |
29 | {docsNav.title}
30 |
31 |
32 | );
33 | };
34 |
35 | export default DocsNavigation;
36 |
--------------------------------------------------------------------------------
/src/layouts/default/components/GithubButtons.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { injectIntl, IntlInterface } from "@common/i18n";
4 |
5 | import { IFrameWrapper } from "./styled";
6 |
7 | const GithubButtons: React.FunctionComponent = ({
8 | formatMessage,
9 | }) => (
10 |
11 |
19 |
27 |
28 | );
29 |
30 | export default injectIntl("layout")(GithubButtons);
31 |
--------------------------------------------------------------------------------
/src/layouts/default/components/SlidesBanner/CircleIndicator.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Slide } from "@typings/landingPage";
4 |
5 | import { Circle, CircleWrapper } from "./styled";
6 |
7 | interface CircleIndicatorProps {
8 | slides: Slide[];
9 | currentSlide: number;
10 | onCircleClick: (index: number) => void;
11 | }
12 |
13 | const CircleIndicator: React.FunctionComponent = ({
14 | slides,
15 | currentSlide,
16 | onCircleClick,
17 | }) => (
18 |
19 | {slides.map((_, index: number) => (
20 | onCircleClick(index)}
24 | />
25 | ))}
26 |
27 | );
28 |
29 | export default CircleIndicator;
30 |
--------------------------------------------------------------------------------
/src/layouts/default/components/SlidesBanner/SlideContent.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Link from "@components/shared/Link";
4 |
5 | import { FormattedMessage, getTranslation } from "@common/i18n";
6 |
7 | import { Text } from "./styled";
8 |
9 | const gt = getTranslation("layout.banner");
10 |
11 | interface SlideContentProps {
12 | text: string;
13 | url: string;
14 | openInNewTab?: boolean;
15 | }
16 |
17 | const SlideContent: React.FunctionComponent = ({
18 | text,
19 | url,
20 | openInNewTab = true,
21 | }) => {
22 | if (!text) {
23 | return null;
24 | }
25 |
26 | const linkTranslation = ;
27 | const createLink = (to: string) =>
28 | to.startsWith("http") ? (
29 | {linkTranslation}
30 | ) : (
31 | {linkTranslation}
32 | );
33 |
34 | return (
35 |
36 | {text}
37 | {url ? createLink(url) : null}
38 |
39 | );
40 | };
41 |
42 | export default SlideContent;
43 |
--------------------------------------------------------------------------------
/src/layouts/default/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export const LayoutWrapper = styled.div`
4 | display: flex;
5 | min-height: 100vh;
6 | flex-direction: column;
7 | `;
8 |
9 | export const Content = styled.main`
10 | flex: 1;
11 | `;
12 |
--------------------------------------------------------------------------------
/src/layouts/documentation/index.tsx:
--------------------------------------------------------------------------------
1 | import { DocsPageContext, SpecificationType } from "@typings/docs";
2 | import React from "react";
3 | import { DefaultLayout } from "../default";
4 |
5 | async function loadSwagger(): Promise {
6 | // @ts-ignore
7 | return import("swagger-ui-dist").then(() => null);
8 | }
9 |
10 | export const DocumentationLayout: React.FunctionComponent = ({
11 | children,
12 | ...pageContext
13 | }) => {
14 | const { specifications } = pageContext as DocsPageContext;
15 | if (
16 | specifications &&
17 | specifications.length &&
18 | specifications.some(
19 | specification => specification.type === SpecificationType.OPEN_API,
20 | )
21 | ) {
22 | loadSwagger();
23 | }
24 |
25 | return (
26 |
27 | {children}
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/layouts/landingPage/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DefaultLayout } from "../default";
3 |
4 | export const LandingPageLayout: React.FunctionComponent = ({
5 | children,
6 | ...pageContext
7 | }) => {children};
8 |
--------------------------------------------------------------------------------
/src/modals/docs-specification/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Sources } from "@kyma-project/documentation-component";
3 |
4 | import {
5 | GenericComponent,
6 | LayoutType,
7 | } from "@components/generic-documentation";
8 | import { Specification } from "@typings/docs";
9 |
10 | interface Props {
11 | specification: Specification;
12 | }
13 |
14 | export const ModalContent: React.FunctionComponent = ({
15 | specification,
16 | }) => {
17 | const sources: Sources = [
18 | {
19 | source: {
20 | type: specification.type,
21 | rawContent: specification.spec,
22 | },
23 | },
24 | ];
25 |
26 | return (
27 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/modals/docs-specification/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export const ModalHeaderMeta = styled.ul`
4 | width: 100%;
5 | display: flex;
6 | padding-bottom: 16px;
7 | font-size: 16px;
8 | font-weight: 500;
9 | border-bottom: solid 1px #ffffff;
10 | margin: 0;
11 |
12 | > li {
13 | margin-bottom: 0;
14 | }
15 | `;
16 |
17 | export const ModalHeaderMetaType = styled.li``;
18 |
19 | export const ModalHeaderMetaLicense = styled.li`
20 | margin-left: auto;
21 | order: 2;
22 | `;
23 |
24 | export const ModalHeaderTitle = styled.h3`
25 | margin: 32px 0 28px;
26 | font-size: 24px;
27 | width: 100%;
28 | `;
29 |
30 | export const ModalHeaderTitleVersion = styled.span`
31 | margin-left: 16px;
32 | `;
33 |
34 | export const ModalHeaderDescription = styled.p`
35 | margin: 16px 0 0;
36 | font-size: 16px;
37 | width: 100%;
38 | `;
39 |
--------------------------------------------------------------------------------
/src/root/components/Popup.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import styled from "@styled";
3 |
4 | import PopupState from "@common/state/usePopup";
5 |
6 | interface PopupWrapperProps {
7 | visible?: boolean;
8 | }
9 |
10 | const PopupWrapper = styled.div`
11 | cursor: pointer;
12 | position: fixed;
13 | bottom: -100px;
14 | left: 50%;
15 | transform: translateX(-50%);
16 | padding: 6px 16px;
17 | font-size: ${props => props.theme.fontSize.xs};
18 | border-radius: 4px;
19 | color: #fff;
20 | background-color: #0077e1;
21 | transition: all 0.2s ease-in-out;
22 | z-index: 300;
23 | bottom: ${(props: PopupWrapperProps) => (props.visible ? "16px" : "-100px")};
24 | &:hover {
25 | background-color: #005fb3;
26 | }
27 | `;
28 |
29 | export const Popup: React.FunctionComponent = () => {
30 | const { popup, popupVisible, onDismissPopup } = useContext(
31 | PopupState.Context,
32 | );
33 |
34 | return (
35 |
36 | {popup}
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/root/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Popup";
2 |
--------------------------------------------------------------------------------
/src/root/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./root";
2 |
--------------------------------------------------------------------------------
/src/root/services/root.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { useLocation } from "react-use";
3 | import createUseContext from "constate";
4 |
5 | function useRootService() {
6 | const [language, setLanguage] = useState("en");
7 | const { pathname, hash } = useLocation();
8 |
9 | useEffect(() => {
10 | if (!window.__GATSBY_ROUTE_UPDATED) {
11 | setTimeout(() => {
12 | window.__GATSBY_ROUTE_UPDATED = true;
13 | }, 25);
14 | }
15 | }, [pathname, hash]);
16 |
17 | return {
18 | language,
19 | setLanguage,
20 | };
21 | }
22 |
23 | const { Provider, Context } = createUseContext(useRootService);
24 | export { Provider as RootProvider, Context as RootContext };
25 |
--------------------------------------------------------------------------------
/src/sitemetadata/Twitter.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Helmet from "react-helmet";
3 |
4 | interface TwitterProps {
5 | cardType?: string;
6 | username?: string;
7 | title: string;
8 | description: string;
9 | image: string;
10 | imageAlt?: string;
11 | }
12 |
13 | export const Twitter: React.FunctionComponent = ({
14 | cardType = "summary",
15 | username = "kymaproject",
16 | title,
17 | description,
18 | image,
19 | imageAlt = "",
20 | }) => (
21 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
32 | );
33 |
--------------------------------------------------------------------------------
/src/sitemetadata/extractor/community.ts:
--------------------------------------------------------------------------------
1 | import { DocsPageContext } from "@typings/docs";
2 |
3 | function getPageTitle(pageContext: DocsPageContext): string {
4 | return `${pageContext.content.displayName} - Community`;
5 | }
6 |
7 | export function extractCommunityMetadata(
8 | pageContext: any,
9 | ): {
10 | pageTitle: string;
11 | } {
12 | return {
13 | pageTitle: getPageTitle(pageContext),
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/sitemetadata/extractor/docs.ts:
--------------------------------------------------------------------------------
1 | import { DocsPageContext } from "@typings/docs";
2 |
3 | function getPageTitle(pageContext: DocsPageContext): string {
4 | return `${pageContext.content?.displayName} - Docs`;
5 | }
6 |
7 | export function extractDocsMetadata(
8 | pageContext: any,
9 | ): {
10 | pageTitle: string;
11 | } {
12 | return {
13 | pageTitle: getPageTitle(pageContext),
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/sitemetadata/extractor/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./blog";
2 | export * from "./docs";
3 | export * from "./community";
4 |
--------------------------------------------------------------------------------
/src/styles/font/Poppins-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/Poppins-Bold.ttf
--------------------------------------------------------------------------------
/src/styles/font/Poppins-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/Poppins-Medium.ttf
--------------------------------------------------------------------------------
/src/styles/font/Poppins-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/Poppins-Regular.otf
--------------------------------------------------------------------------------
/src/styles/font/Poppins-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/Poppins-SemiBold.ttf
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-500.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-500.eot
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-500.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-500.ttf
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-500.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-500.woff
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-500.woff2
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-600.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-600.eot
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-600.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-600.ttf
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-600.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-600.woff
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-600.woff2
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-700.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-700.eot
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-700.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-700.ttf
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-700.woff
--------------------------------------------------------------------------------
/src/styles/font/poppins-v5-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/styles/font/poppins-v5-latin-700.woff2
--------------------------------------------------------------------------------
/src/types/common.ts:
--------------------------------------------------------------------------------
1 | export interface PageContext {
2 | pageContext: T;
3 | }
4 |
5 | export interface IntlPageContext {
6 | locale: string;
7 | }
8 |
9 | export interface PreviewPageContext {
10 | inPreview: boolean;
11 | }
12 |
13 | export enum BuildFor {
14 | WEBSITE = "website",
15 | WEBSITE_PREVIEW = "website-preview",
16 | DOCS_PREVIEW = "docs-preview",
17 | COMMUNITY_PREVIEW = "community-preview",
18 | }
19 |
--------------------------------------------------------------------------------
/src/types/landingPage.ts:
--------------------------------------------------------------------------------
1 | import { Post } from "@typings/blog";
2 |
3 | import { CSSProp } from "styled-components";
4 |
5 | export interface LandingPageContext {
6 | adopters: Adopter[];
7 | latestBlogPosts: Post[];
8 | }
9 |
10 | export interface Adopter {
11 | websiteUrl: string;
12 | company: string;
13 | url?: string;
14 | cssProperties?: CSSProp;
15 | logo: string;
16 | content: string;
17 | }
18 |
19 | export interface Slide {
20 | text: string;
21 | url: string;
22 | startDate: string;
23 | endDate?: string;
24 | }
25 |
26 | export interface SlidesBannerProps {
27 | bannerDuration: number;
28 | slides: Slide[];
29 | }
30 |
31 | export enum NewsroomI18nTarget {
32 | TWITTER = "twitter",
33 | YOUTUBE = "youtube",
34 | Blog_POST = "lastBlogPost",
35 | }
36 |
37 | export enum FeaturesI18nTarget {
38 | EXTENSIBILITY = "extensibility",
39 | RUNTIME = "runtime",
40 | SUPPORT = "support",
41 | }
42 |
43 | export enum PersonasI18nTarget {
44 | CODING = "coding",
45 | EFFECTIVE = "effective",
46 | }
47 |
--------------------------------------------------------------------------------
/src/views/404/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Grid from "@styled/Grid";
4 | import H from "@components/shared/H";
5 | import Button from "@components/shared/Button";
6 | import Link from "@components/shared/Link";
7 |
8 | import { FormattedMessage } from "@common/i18n";
9 |
10 | import { NotFoundPageWrapper } from "./styled";
11 |
12 | const NotFoundView: React.FunctionComponent = () => (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {headline => (
24 | {headline}
25 | )}
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 |
35 | export default NotFoundView;
36 |
--------------------------------------------------------------------------------
/src/views/404/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export const NotFoundPageWrapper = styled.div`
4 | margin: 40px 0;
5 | `;
6 |
--------------------------------------------------------------------------------
/src/views/blog/components/PostFooter.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Icon from "@components/shared/Icon";
4 |
5 | import { FormattedMessage, getTranslation } from "@common/i18n";
6 |
7 | import { PostFooterWrapper, PostTagsWrapper, PostTag } from "./styled";
8 |
9 | interface PostFooterProps {
10 | tags: string[];
11 | }
12 |
13 | const gt = getTranslation("blog");
14 |
15 | export const PostFooter: React.FunctionComponent = ({
16 | tags = [],
17 | }) => (
18 |
19 |
20 |
21 | {data => (
22 |
23 |
24 | {data}:
25 |
26 | )}
27 |
28 | {tags.map((tag: string) => (
29 | #{tag}
30 | ))}
31 |
32 |
33 | );
34 |
--------------------------------------------------------------------------------
/src/views/blog/components/Wrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Grid from "@styled/Grid";
4 |
5 | import { Wrapper } from "./styled";
6 |
7 | export const BlogPageWrapper: React.FunctionComponent = ({ children }) => (
8 |
9 |
10 |
11 |
12 | {children}
13 |
14 |
15 |
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/src/views/blog/components/content/PostContent.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import DefaultTemplate from "@views/blog/components/content/templates/Default";
4 | import ReleaseTemplate from "@views/blog/components/content/templates/Release";
5 |
6 | import {
7 | PostMetaData,
8 | PostTypeRelease,
9 | } from "@typings/blog";
10 |
11 | interface PostContentProps {
12 | markdown: string;
13 | assetsPath?: string;
14 | metadata: PostMetaData;
15 | }
16 |
17 | export const PostContent: React.FunctionComponent = ({
18 | markdown,
19 | assetsPath = "",
20 | metadata,
21 | }) => {
22 | if (metadata.type && metadata.type === PostTypeRelease) {
23 | return (
24 |
29 | );
30 | }
31 |
32 | return ;
33 | };
34 |
--------------------------------------------------------------------------------
/src/views/blog/components/content/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | /* Release Template */
4 | export const ReleaseButtonsWrapper = styled.div`
5 | display: flex;
6 | justify-content: center;
7 | margin-bottom: 50px;
8 | `;
9 |
--------------------------------------------------------------------------------
/src/views/blog/components/content/templates/Default.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import ReactMarkdown from "@components/shared/ReactMarkdown";
4 |
5 | interface DefaultTemplatePostProps {
6 | markdown: string;
7 | assetsPath: string;
8 | }
9 |
10 | const DefaultTemplatePost: React.FunctionComponent<
11 | DefaultTemplatePostProps
12 | > = ({ markdown, assetsPath }) => (
13 |
14 | );
15 |
16 | export default DefaultTemplatePost;
17 |
--------------------------------------------------------------------------------
/src/views/blog/root/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@styled";
2 |
3 | export const StyledLink = styled.a`
4 | align-self: flex-end;
5 |
6 | ${media.tablet`
7 | position: relative;
8 | top: 10px;
9 | `};
10 | `;
11 |
12 | export const RSSIcon = styled.div`
13 | position: relative;
14 | width: 3rem;
15 | height: 3rem;
16 | border-radius: 100%;
17 | box-shadow: 0 1px 26px 0 rgba(137, 165, 199, 0.42);
18 | background: #fff;
19 | transition: all 0.2s linear, opacity 0.2s linear;
20 |
21 | &:hover {
22 | cursor: pointer;
23 | background: #0b74de;
24 |
25 | > svg {
26 | color: #fff;
27 | }
28 | }
29 |
30 | > svg {
31 | color: #0b74de;
32 | font-size: 24px;
33 | position: absolute;
34 | top: 50%;
35 | left: 50%;
36 | margin-right: -50%;
37 | transform: translate(-50%, -50%);
38 | transition: color 0.2s linear, opacity 0.2s linear;
39 |
40 | ${media.phone`
41 | font-size: 28px;
42 | `};
43 | }
44 | `;
45 |
--------------------------------------------------------------------------------
/src/views/blog/single/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { PostPage } from "@views/blog/components/Post";
4 | import { BlogPageWrapper } from "@views/blog/components/Wrapper";
5 |
6 | import { PageContext } from "@typings/common";
7 | import { PostPageContext } from "@typings/blog";
8 |
9 | const BlogPostView: React.FunctionComponent> = ({
10 | pageContext: { post, previous, next, assetsPath },
11 | }) => (
12 |
13 |
20 |
21 | );
22 |
23 | export default BlogPostView;
24 |
--------------------------------------------------------------------------------
/src/views/community/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { PageContext } from "@common/types";
4 | import {
5 | GenericComponent,
6 | LayoutType,
7 | } from "@components/generic-documentation";
8 |
9 | import { DocsPageContext } from "@typings/docs";
10 | import { PreviewPageContext } from "@typings/common";
11 |
12 | const CommunityView: React.FunctionComponent> = ({ pageContext }) => (
15 |
16 | );
17 |
18 | export default CommunityView;
19 |
--------------------------------------------------------------------------------
/src/views/docs/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as VersionSwitcher } from "./versionSwitcher";
2 |
--------------------------------------------------------------------------------
/src/views/docs/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { PageContext } from "@common/types";
4 | import {
5 | GenericComponent,
6 | LayoutType,
7 | } from "@components/generic-documentation";
8 |
9 | import { DocsPageContext } from "@typings/docs";
10 | import { PreviewPageContext } from "@typings/common";
11 |
12 | import { VersionSwitcher } from "./components";
13 |
14 | const DocsView: React.FunctionComponent> = ({ pageContext }) => {
17 | const {
18 | version,
19 | versions,
20 | content: { id: topic },
21 | repoName,
22 | } = pageContext;
23 |
24 | const docsVersionSwitcher = (
25 |
31 | );
32 |
33 | return (
34 |
39 | );
40 | };
41 |
42 | export default DocsView;
43 |
--------------------------------------------------------------------------------
/src/views/docs/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@styled";
2 | import Grid from "@styled/Grid";
3 |
4 | export const Toolbar = styled.div`
5 | ${Grid.Container} {
6 | margin-top: 72px;
7 | border-bottom: 1px solid #e5e5e5;
8 |
9 | ${media.tablet`
10 | display: none;
11 | `}
12 | }
13 |
14 | ${Grid.Unit} {
15 | margin-bottom: 27px;
16 | }
17 | `;
18 |
--------------------------------------------------------------------------------
/src/views/landingPage/Features/FeatureCard/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@common/styled";
2 |
3 | export const ImageWrapper = styled.div`
4 | display: flex;
5 | margin-bottom: 90px;
6 | height: 100%;
7 | max-height: 226px;
8 |
9 | img {
10 | height: 226px;
11 | margin: 0 auto;
12 |
13 | ${media.phone`
14 | margin: 0 0;
15 | `};
16 | }
17 |
18 | ${media.phone`
19 | margin-bottom: 32px;
20 | `};
21 | `;
22 |
23 | export const FeatureWrapper = styled.div`
24 | margin-bottom: 64px;
25 | `;
26 |
--------------------------------------------------------------------------------
/src/views/landingPage/Features/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import H from "@components/shared/H";
4 |
5 | import {
6 | FormattedMessage,
7 | getTranslation,
8 | FunctionComponentIntl,
9 | injectIntl,
10 | } from "@common/i18n";
11 |
12 | import { HeaderWrapper } from "./styled";
13 |
14 | const gt = getTranslation("landingPage.keyFeatures");
15 |
16 | const HeaderRaw: FunctionComponentIntl = ({ formatMessage }) => (
17 |
18 |
19 |
20 |
21 |
22 | );
23 |
24 | export const Header = injectIntl("landingPage.keyFeatures")(HeaderRaw);
25 |
--------------------------------------------------------------------------------
/src/views/landingPage/Features/Header/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export const HeaderWrapper = styled.div`
4 | margin-bottom: 75px;
5 |
6 | h2,
7 | > div {
8 | text-align: center;
9 | }
10 |
11 | > div {
12 | max-width: 567px;
13 | margin: 0 auto;
14 | }
15 | `;
16 |
--------------------------------------------------------------------------------
/src/views/landingPage/Features/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Grid from "@styled/Grid";
4 |
5 | import { Header as FeaturesHeader } from "./Header";
6 | import { FeatureCard } from "./FeatureCard";
7 |
8 | import { FeaturesI18nTarget } from "@typings/landingPage";
9 |
10 | const features = Object.values(FeaturesI18nTarget);
11 |
12 | interface FeatureProps {
13 | scrollRef: React.RefObject;
14 | }
15 |
16 | // also used in Manifesto component
17 | export const featuresID = "key-features";
18 |
19 | export const Features: React.FunctionComponent = ({
20 | scrollRef: innerRef,
21 | }) => (
22 |
23 |
24 |
25 |
26 |
27 | {features.map(feature => (
28 |
29 |
30 |
31 | ))}
32 |
33 |
34 | );
35 |
--------------------------------------------------------------------------------
/src/views/landingPage/Headline/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Grid from "@styled/Grid";
4 |
5 | import { FormattedMessage, getTranslation } from "@common/i18n";
6 |
7 | import { HeadlineWrapper } from "./styled";
8 |
9 | const gt = getTranslation("landingPage");
10 |
11 | export const Headline: React.FunctionComponent = () => (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 |
--------------------------------------------------------------------------------
/src/views/landingPage/Headline/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@styled";
2 |
3 | export const HeadlineWrapper = styled.h2`
4 | font-size: 40px;
5 | font-weight: 600;
6 | line-height: 1.2;
7 | margin-top: 70px;
8 |
9 | br {
10 | display: none;
11 | }
12 |
13 | ${media.phone`
14 | font-size: 35px;
15 |
16 | br:first-child {
17 | display: inline;
18 | }
19 | `};
20 |
21 | ${media.smallPhone`
22 | font-size: 30px;
23 | `};
24 | `;
25 |
--------------------------------------------------------------------------------
/src/views/landingPage/Manifesto/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@styled";
2 |
3 | export const HeadlineWrapper = styled.p`
4 | ${media.phone`
5 | margin-top: 80px;
6 | line-height: 1.4;
7 | font-size: 28px;
8 | `};
9 |
10 | margin-top: 180px;
11 | margin-bottom: 39px;
12 |
13 | font-size: 32px;
14 | font-weight: 400;
15 | line-height: 1.5;
16 | `;
17 |
18 | export const FormattedBrand = styled.span`
19 | font-weight: 700;
20 | `;
21 |
22 | export const IconWrapper = styled.div`
23 | margin-top: 135px;
24 | margin-bottom: 55px;
25 | text-align: center;
26 |
27 | ${media.phone`
28 | margin-top: 90px;
29 | `};
30 | `;
31 |
32 | export const ButtonWrapper = styled.div`
33 | button {
34 | :hover {
35 | background-color: #0472e6;
36 | }
37 | color: #0472e6;
38 | border-color: #0472e6;
39 | }
40 |
41 | ${media.phone`
42 | text-align: center;
43 | `};
44 | `;
45 |
46 | export const SpellingOfText = styled.span`
47 | font-family: monospace;
48 | font-size: 32px;
49 | `;
50 |
--------------------------------------------------------------------------------
/src/views/landingPage/Newsroom/TwitterFrame.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TwitterTimelineEmbed } from "react-twitter-embed";
3 |
4 | import { TwitterFrameWrapper } from "./styled";
5 |
6 | interface Props {
7 | twitterUsername: string;
8 | }
9 |
10 | export const TwitterFrame: React.FunctionComponent = ({
11 | twitterUsername,
12 | }) => {
13 | const options = {
14 | tweetLimit: 2,
15 | };
16 |
17 | return (
18 |
19 |
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/views/landingPage/Newsroom/YouTubeFrame.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import YouTube from "react-youtube";
3 |
4 | import { YouTubeFrameWrapper, YouTubeFrameItem } from "./styled";
5 |
6 | interface Props {
7 | videos: string[];
8 | }
9 |
10 | export const YouTubeFrame: React.FunctionComponent = ({
11 | videos = [],
12 | }) => {
13 | if (!videos.length) {
14 | return null;
15 | }
16 |
17 | const list = videos.map(video => (
18 |
19 |
20 |
21 | ));
22 |
23 | return {list};
24 | };
25 |
--------------------------------------------------------------------------------
/src/views/landingPage/Personas/Persona/styled.tsx:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@common/styled";
2 |
3 | export const ImageWrapper = styled.div`
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | height: 100%;
8 |
9 | img {
10 | ${media.phone`
11 | max-height: 400px;
12 | `};
13 | }
14 | `;
15 |
16 | export const TextWrapper = styled.div`
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | height: 100%;
21 | `;
22 |
23 | export const PersonaWrapper = styled.div`
24 | ul {
25 | list-style-type: disc;
26 | }
27 | `;
28 |
--------------------------------------------------------------------------------
/src/views/landingPage/Personas/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Grid from "@styled/Grid";
4 | import { Persona } from "./Persona";
5 | import { PersonasI18nTarget } from "@typings/landingPage";
6 | import { injectIntl, IntlInterface } from "@common/i18n";
7 | import H from "@components/shared/H";
8 | import { HeaderWrapper } from "./styled";
9 |
10 | const personas = Object.values(PersonasI18nTarget);
11 |
12 | const PersonasRaw: React.FunctionComponent = ({
13 | formatMessage,
14 | }) => (
15 |
16 |
17 |
18 |
19 | {formatMessage({ id: `headline` })}
20 |
21 |
22 | {personas.map((persona, index) => (
23 |
24 |
25 |
26 | ))}
27 |
28 |
29 | );
30 |
31 | export const Personas = injectIntl("landingPage.personas")(PersonasRaw);
32 |
--------------------------------------------------------------------------------
/src/views/landingPage/Personas/styled.tsx:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 |
3 | export const HeaderWrapper = styled.div`
4 | margin-bottom: 10px;
5 |
6 | h2 {
7 | text-align: center;
8 | }
9 | `;
10 |
--------------------------------------------------------------------------------
/src/views/landingPage/UsedBy/CustomerPair.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Adopter } from "@typings/landingPage";
3 | import { StyledGridRow } from "./styled";
4 | import Grid from "@styled/Grid";
5 | import { Card } from "./Card";
6 |
7 | export type CustomerPairArray = Array<[Adopter, Adopter?]>;
8 |
9 | export const CustomerPair: React.FunctionComponent<{
10 | customers: CustomerPairArray;
11 | }> = ({ customers }) => (
12 |
13 | {customers.map(([first, second]) => (
14 |
15 |
16 |
17 |
18 | {!!second ? (
19 |
20 |
21 |
22 | ) : null}
23 |
24 | ))}
25 |
26 | );
27 |
--------------------------------------------------------------------------------
/src/views/landingPage/WhatIs/Termynal/Termynal.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import { TermynalStyles } from "./styled";
3 |
4 | export const Termynal: FC = () => (
5 |
6 |
7 | brew install kyma-cli minikube
8 | kyma provision minikube
9 | kyma install
10 | Installation successful! Happy Kyma-ing :)
11 |
12 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/views/landingPage/WhatIs/styled.ts:
--------------------------------------------------------------------------------
1 | import styled, { media } from "@styled";
2 | import Grid from "@styled/Grid";
3 |
4 | export const ParagraphWrapper = styled.section`
5 | padding: 20px 0 7px;
6 | `;
7 |
8 | export const StyledGridContainer = styled(Grid.Container)`
9 | padding-top: 0;
10 | `;
11 |
12 | export const SpellingOfText = styled.pre`
13 | margin: 0;
14 | display: inline;
15 | font-size: 16px;
16 | `;
17 |
18 | export const YoutubeWrapper = styled.section`
19 | padding: 20px 0;
20 |
21 | ${media.phone`
22 | padding: 20px 0 0 0;
23 | `}
24 |
25 | > div {
26 | position: relative;
27 | height: 0;
28 | overflow: hidden;
29 | max-width: 100%;
30 | padding-bottom: 56.25%;
31 | > iframe {
32 | border-radius: 3px;
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | width: 100%;
37 | height: 100%;
38 | }
39 | }
40 | `;
41 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/background/footer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default () => (
4 |
33 | );
34 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/landing-page/checkItOut/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/landing-page/checkItOut/1.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/landing-page/checkItOut/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/landing-page/checkItOut/2.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/landing-page/nutshell/in-the-nutshell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/landing-page/nutshell/in-the-nutshell.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/landing-page/personas/coding.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/landing-page/personas/coding.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/landing-page/personas/effective.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/landing-page/personas/effective.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/dex.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/image.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/istio.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/kiali.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/kubernetes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/make-special/kubernetes.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/loki.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/make-special/loki.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/nats.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/ory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/make-special/ory.png
--------------------------------------------------------------------------------
/src/views/landingPage/assets/make-special/velero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/src/views/landingPage/assets/make-special/velero.png
--------------------------------------------------------------------------------
/src/views/landingPage/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 |
3 | import { PageContext } from "@typings/common";
4 | import { LandingPageContext } from "@typings/landingPage";
5 | import { Manifesto } from "./Manifesto";
6 | import { Features } from "./Features";
7 | import { UsedBy } from "./UsedBy";
8 | import { Nutshell } from "./Nutshell";
9 | import { Personas } from "./Personas";
10 | import { CheckItOut } from "./CheckItOut";
11 |
12 | const LandingPageView: React.FunctionComponent> = ({ pageContext: { adopters, latestBlogPosts } }) => {
15 | const scrollRef = useRef(null);
16 | return (
17 | <>
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export default LandingPageView;
28 |
--------------------------------------------------------------------------------
/src/views/landingPage/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "@styled";
2 | import Link from "@components/shared/Link";
3 |
4 | export const CenteredLink = styled(Link.Internal)`
5 | align-self: center;
6 | `;
7 |
--------------------------------------------------------------------------------
/src/window.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | interface Window {
3 | docsearch: any;
4 | decodeURI: (str: string) => string;
5 | __GATSBY_ROUTE_UPDATED: boolean;
6 | __GATSBY_IN_MODAL_PAGE: boolean;
7 | __GATSBY_INITIAL_RENDER_COMPLETE: boolean;
8 | }
9 | }
10 | export {};
11 |
--------------------------------------------------------------------------------
/static/CNAME:
--------------------------------------------------------------------------------
1 | kyma-project.io
--------------------------------------------------------------------------------
/static/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/android-chrome-512x512.png
--------------------------------------------------------------------------------
/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/apple-touch-icon.png
--------------------------------------------------------------------------------
/static/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | #2b5797
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/static/facebookLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/facebookLogo.png
--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/favicon-16x16.png
--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/favicon-32x32.png
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/favicon.ico
--------------------------------------------------------------------------------
/static/img/adopters-bg.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/img/bottom-long.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/img/bottom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/img/icons-bg.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/logo.png
--------------------------------------------------------------------------------
/static/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kyma-project/website/c46203040d2e06aaf5051e83b1c7b47cf79eead2/static/mstile-150x150.png
--------------------------------------------------------------------------------
/tools/content-loader/.gitignore:
--------------------------------------------------------------------------------
1 | kyma
2 |
--------------------------------------------------------------------------------
/tools/content-loader/Makefile:
--------------------------------------------------------------------------------
1 | clear-cache:
2 | rm -rf kyma cli control-plane tempDir tempDocsDir tempCommunityDir
3 |
4 | fetch-content:
5 | npm run start
--------------------------------------------------------------------------------
/tools/content-loader/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@kyma-project/website-content-loader",
3 | "version": "0.1.0",
4 | "lockfileVersion": 1
5 | }
6 |
--------------------------------------------------------------------------------
/tools/content-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@kyma-project/website-content-loader",
3 | "version": "0.1.0",
4 | "description": "Content loader for kyma-project.io",
5 | "main": "bin/main.ts",
6 | "scripts": {
7 | "start": "../../node_modules/.bin/ts-node bin/main.ts"
8 | },
9 | "author": "The Kyma project authors",
10 | "license": "Apache-2.0"
11 | }
12 |
--------------------------------------------------------------------------------
/tools/content-loader/src/config.ts:
--------------------------------------------------------------------------------
1 | export enum PrepareFor {
2 | WEBSITE = "website",
3 | DOCS_PREVIEW = "docs-preview",
4 | COMMUNITY_PREVIEW = "community-preview",
5 | }
6 |
7 | export interface CoreConfig {
8 | prepareFor: PrepareFor;
9 | prepareForRepo: string;
10 | token: string | null;
11 | organization: string;
12 | repository: string;
13 | }
14 |
15 | const config: CoreConfig = {
16 | prepareFor: (process.env.APP_PREPARE_FOR as PrepareFor) || PrepareFor.WEBSITE,
17 | prepareForRepo: (process.env.APP_PREPARE_FOR_REPO as string) || "kyma",
18 | token: process.env.APP_TOKEN || null,
19 | organization: process.env.APP_ORGANIZATION || "kyma-project",
20 | repository: "",
21 | };
22 |
23 | export default config;
24 |
--------------------------------------------------------------------------------
/tools/content-loader/src/github-client/github-graphql-client.ts:
--------------------------------------------------------------------------------
1 | import to from "await-to-js";
2 | import { VError } from "verror";
3 | import { graphql } from "@octokit/graphql";
4 |
5 | import { CoreConfig } from "../config";
6 |
7 | export class GitHubGraphQLClient {
8 | private config: CoreConfig;
9 | private graphql: any;
10 |
11 | constructor() {
12 | this.graphql = null;
13 | }
14 |
15 | withConfig = (config: CoreConfig) => {
16 | this.config = config;
17 |
18 | if (config.token) {
19 | this.graphql = graphql.defaults({
20 | headers: {
21 | authorization: `token ${config.token}`,
22 | },
23 | });
24 | }
25 | };
26 |
27 | query = async (query: string, options: any) => {
28 | const [err, data] = await to(this.graphql(query, options));
29 | if (err) {
30 | throw new VError(err, `while query: ${query}`);
31 | }
32 |
33 | return data;
34 | };
35 | }
36 |
37 | export default new GitHubGraphQLClient();
38 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/download-resource.ts:
--------------------------------------------------------------------------------
1 | import { createWriteStream } from "fs";
2 | import axios, { AxiosResponse } from "axios";
3 |
4 | export const downloadAndSaveResource: (
5 | url: string,
6 | output: string,
7 | ) => Promise = async (url, output) => {
8 | const writer = createWriteStream(output);
9 | const response: AxiosResponse = await axios({
10 | url,
11 | method: "GET",
12 | responseType: "stream",
13 | });
14 | response.data.pipe(writer);
15 | return new Promise((resolve, reject) => {
16 | writer.on("finish", resolve);
17 | writer.on("error", reject);
18 | });
19 | };
20 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/file-exists.ts:
--------------------------------------------------------------------------------
1 | import { pathExists } from "fs-extra";
2 |
3 | export const fileExists = async (path: string) => await pathExists(path);
4 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/get-unique.ts:
--------------------------------------------------------------------------------
1 | export const getUnique = (
2 | arr: T[],
3 | comp: string,
4 | ): T[] =>
5 | arr
6 | .map(e => e[comp])
7 | .map((e, i, final) => (final.indexOf(e) === i && i) as number)
8 | .filter(e => arr[e])
9 | .map(e => arr[e]);
10 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./copy-resources";
2 | export * from "./file-exists";
3 | export * from "./get-files-paths";
4 | export * from "./read-yaml";
5 | export * from "./make-dir";
6 | export * from "./get-unique";
7 | export * from "./remove-dir";
8 | export * from "./read-file";
9 | export * from "./write-to-json";
10 | export * from "./write-to-yaml";
11 | export * from "./remove-html-comments";
12 | export * from "./helm-tpl-value-resolver";
13 | export * from "./download-resource";
14 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/make-dir.ts:
--------------------------------------------------------------------------------
1 | import { mkdirs } from "fs-extra";
2 | import { removeDir } from "./remove-dir";
3 | import to from "await-to-js";
4 | import { VError } from "verror";
5 |
6 | export const makeDir = async (dir: string, remove?: boolean): Promise => {
7 | let err: Error | null;
8 |
9 | if (remove) {
10 | [err] = await to(removeDir(dir));
11 | if (err) {
12 | throw err;
13 | }
14 | }
15 |
16 | [err] = await to(mkdirs(dir));
17 | if (err) {
18 | throw new VError(err, `while creating dir: ${dir}`);
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/memoize-read.ts:
--------------------------------------------------------------------------------
1 | export type Read = (path: string) => Promise;
2 |
3 | export const memoizeRead = (f: Read) => {
4 | const cache: any = {};
5 | return async (path: string) => {
6 | const cachedResult = cache[path];
7 | if (!cachedResult) {
8 | cache[path] = f(path);
9 | }
10 | return cache[path];
11 | };
12 | };
13 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/memoize-read.unit.test.ts:
--------------------------------------------------------------------------------
1 | import { memoizeRead } from "./memoize-read";
2 |
3 | describe("product of memoizeLoad", () => {
4 | test("should reject load error", () => {
5 | expect(
6 | memoizeRead(p => {
7 | throw "test error";
8 | })("test"),
9 | ).rejects.toEqual("test error");
10 | });
11 | test("should memoize", async () => {
12 | const read = memoizeRead(async () => {
13 | await new Promise(r => setTimeout(r, 100));
14 | });
15 | await read("test");
16 | await read("test");
17 | }, 110);
18 | });
19 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/parent-dir.ts:
--------------------------------------------------------------------------------
1 | import { sep } from "path";
2 |
3 | export const parentDir = (p: string) => {
4 | if (!p) {
5 | return "";
6 | }
7 | const parent = p.substring(0, p.lastIndexOf(sep));
8 | return parent ? parent : "";
9 | };
10 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/parent-dir.unit.test.ts:
--------------------------------------------------------------------------------
1 | import { parentDir } from "./parent-dir";
2 |
3 | describe("parentDir", () => {
4 | const cases = [
5 | [
6 | "/test/me", // path
7 | "/test", // expected
8 | ],
9 | [
10 | "/Applications/Visual Studio Code - Insiders.app/Contents/Frameworks", // path
11 | "/Applications/Visual Studio Code - Insiders.app/Contents", // expected
12 | ],
13 | [
14 | "/Applications/Visual Studio Code - Insiders.app", // path
15 | "/Applications", // expected
16 | ],
17 | ];
18 | test.each(cases)('it should resolve "%s" to "%s"', (path, expected) => {
19 | const actual = parentDir(path);
20 | expect(actual).toEqual(expected);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/read-file.ts:
--------------------------------------------------------------------------------
1 | import { readFile as rF } from "fs-extra";
2 | import { fileExists } from "./file-exists";
3 | import to from "await-to-js";
4 | import { VError } from "verror";
5 |
6 | export const readFile = async (file: string): Promise => {
7 | const [err] = await to(fileExists(file));
8 | if (err) {
9 | throw err;
10 | }
11 | const [rfErr, data] = await to(rF(file));
12 | if (rfErr) {
13 | throw new VError(rfErr, `while reading file: ${file}`);
14 | }
15 | if (!data) {
16 | return "";
17 | }
18 | return data.toString();
19 | };
20 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/read-yaml.ts:
--------------------------------------------------------------------------------
1 | import { safeLoad } from "js-yaml";
2 | import { readFile } from "./read-file";
3 | import to from "await-to-js";
4 |
5 | export const readYaml = async (file: string): Promise => {
6 | const [err, data] = await to(readFile(file));
7 | if (err || !data) {
8 | throw err;
9 | }
10 | if (!data) {
11 | return;
12 | }
13 |
14 | return safeLoad(data);
15 | };
16 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/remove-dir.ts:
--------------------------------------------------------------------------------
1 | import { remove } from "fs-extra";
2 | import to from "await-to-js";
3 | import { VError } from "verror";
4 |
5 | export const removeDir = async (dir: string) => {
6 | const [err] = await to(remove(dir));
7 | if (err) {
8 | throw new VError(err, `while removing dir: ${dir}`);
9 | }
10 | };
11 |
--------------------------------------------------------------------------------
/tools/content-loader/src/helpers/remove-html-comments.ts:
--------------------------------------------------------------------------------
1 | export const removeHTMLComments = (text: string) => {
2 | const regex = new RegExp(
3 | ")?" +
4 | "