File size: 6,413 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
import React from "react";
import Head from "next/head";
import { Group, Paper, Stack, Text, Title } from "@mantine/core";
import { CodeHighlight } from "@mantine/code-highlight";
import styled from "styled-components";
import Layout from "src/layout/Layout";
const StyledFrame = styled.iframe`
border: none;
width: 80%;
flex: 500px;
margin: 3% auto;
`;
const StyledContentBody = styled.div`
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
line-height: 1.8;
overflow-x: auto;
`;
const StyledHighlight = styled.span<{ $link?: boolean; $alert?: boolean }>`
display: inline-block;
text-align: left;
color: ${({ theme, $link, $alert }) =>
$alert ? theme.DANGER : $link ? theme.BLURPLE : theme.TEXT_POSITIVE};
background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
border-radius: 4px;
font-weight: 500;
padding: 2px 4px;
font-size: 14px;
margin: ${({ $alert }) => ($alert ? "8px 0" : "1px")};
`;
const Docs = () => {
return (
<Layout>
<Head>
<title>Documentation - JSON Crack</title>
<meta name="description" content="Embedding JSON Crack tutorial into your websites." />
</Head>
<Stack mx="auto" maw="75%">
<Group mb="lg" mt={40}>
<Title order={1} c="dark">
Documentation
</Title>
</Group>
<Paper p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Fetching from URL
</Title>
<StyledContentBody>
<Text>
By adding <StyledHighlight>?json=https://catfact.ninja/fact</StyledHighlight> query at
the end of iframe src you will be able to fetch from URL at widgets without additional
scripts. This applies to editor page as well, the following link will fetch the url at
the editor:{" "}
<StyledHighlight
as="a"
href="https://jsoncrack.com/editor?json=https://catfact.ninja/fact"
$link
>
https://jsoncrack.com/editor?json=https://catfact.ninja/fact
</StyledHighlight>
</Text>
<StyledFrame
title="Untitled"
src="https://codepen.io/AykutSarac/embed/KKBpWVR?default-tab=html%2Cresult"
loading="eager"
>
See the Pen <a href="https://codepen.io/AykutSarac/pen/KKBpWVR">Untitled</a> by Aykut
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
<a href="https://codepen.io">CodePen</a>.
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Embed Saved JSON
</Title>
<StyledContentBody>
<Text>
Just like fetching from URL above, you can embed saved public json by adding the json
id to "json" query{" "}
<StyledHighlight>?json=639b65c5a82efc29a24b2de2</StyledHighlight>
</Text>
<StyledFrame
title="Untitled"
src="https://codepen.io/AykutSarac/embed/vYaORgM?default-tab=html%2Cresult"
loading="lazy"
>
See the Pen <a href="https://codepen.io/AykutSarac/pen/vYaORgM">Untitled</a> by Aykut
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
<a href="https://codepen.io">CodePen</a>.
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Communicating with API
</Title>
<Title order={4}>◼︎ Post Message to Embed</Title>
<StyledContentBody>
<Text>
Communicating with the embed is possible with{" "}
<StyledHighlight
as="a"
href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage"
$link
>
MessagePort
</StyledHighlight>
, you should pass an object consist of "json" and "options" key
where json is a string and options is an object that may contain the following:
<CodeHighlight
w={500}
language="json"
code={
'{\n theme: "light" | "dark",\n direction: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}'
}
withCopyButton={false}
/>
</Text>
<StyledFrame
scrolling="no"
title="Untitled"
src="https://codepen.io/AykutSarac/embed/rNrVyWP?default-tab=html%2Cresult"
loading="lazy"
>
See the Pen <a href="https://codepen.io/AykutSarac/pen/rNrVyWP">Untitled</a> by Aykut
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
<a href="https://codepen.io">CodePen</a>.
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Title order={4}>◼︎ On Page Load</Title>
<StyledContentBody>
<Text>
<Text>
⚠️ <b>Important!</b> - iframe should be defined before the script tag
</Text>
<Text>
⚠️ <b>Note</b> - Widget is not loaded immediately with the parent page. The widget
sends its <b>id</b> attribute so you can listen for it as in the example below to
ensure its loaded and ready to listen for messages.
</Text>
</Text>
<StyledFrame
title="Untitled"
src="https://codepen.io/AykutSarac/embed/QWBbpqx?default-tab=html%2Cresult"
loading="lazy"
>
See the Pen <a href="https://codepen.io/AykutSarac/pen/QWBbpqx">Untitled</a> by Aykut
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
<a href="https://codepen.io">CodePen</a>.
</StyledFrame>
</StyledContentBody>
</Paper>
</Stack>
</Layout>
);
};
export default Docs;
|