Skip to content

Commit

Permalink
save
Browse files Browse the repository at this point in the history
  • Loading branch information
konfig-bot committed Oct 20, 2023
1 parent fc68569 commit d6f0b35
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 37 deletions.
4 changes: 4 additions & 0 deletions konfigthis.com/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
"@types/react-dom": "18.2.4",
"eslint": "8.41.0",
"eslint-config-next": "13.4.4",
"highlight.js": "^11.9.0",
"marked": "^9.1.2",
"next": "13.4.4",
"next-image-export-optimizer": "^1.8.1",
"react": "18.2.0",
Expand All @@ -30,6 +32,8 @@
"typescript": "5.0.4"
},
"devDependencies": {
"@types/highlight.js": "^10.1.0",
"@types/marked": "^6.0.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.27",
"tailwindcss": "^3.3.3"
Expand Down
Binary file added konfigthis.com/public/interactive-demo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 39 additions & 33 deletions konfigthis.com/src/components/CustomFlowsDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,39 @@
import { Title, Box, Anchor, clsx } from "@mantine/core";
import { Title, Box } from "@mantine/core";

import "reactflow/dist/style.css";
import { useGraphicStyles } from "@/utils/use-graphic-styles";
import { TitleHighlight } from "./TitleHighlight";
import { SdkSectionFlex } from "./SdkSectionFlex";
import { useSectionStyles } from "./GetSdksWithZeroEffort/GetSdksWithZeroEffort";
import { MarkdownRenderer } from "./MarkdownRenderer";

const markdown = `# Getting Started
This is an interactive tutorial the Pet Store API.
## 1) Log user into the system
::::form
::input{name="KEY" label="API Key" placeholder="Your API Key"}
::input{name=USERNAME label="Username" placeholder="Username"}
::input{name=PASSWORD label="Password" placeholder="Password"}
\`\`\`python
from pprint import pprint
from petstore import Petstore
pestore = Petstore()
response = pestore.user.login(
username="USERNAME",
password="PASSWORD"
)
pprint(response.body)
\`\`\`
::button[Login]
::::`;

export function CustomFlowsDemo() {
const { classes, cx } = useSectionStyles();
Expand All @@ -16,14 +45,14 @@ export function CustomFlowsDemo() {
return (
<Box className={"my-[200px]"}>
<Box className={classes.sectionInner}>
<SdkSectionFlex>
<SdkSectionFlex breakpoint="lg">
<Box className={cx(classes.textColor, classes.textSection)}>
<div
className={cx(
classes.triangle,
classes.triangle1,
classes.triangleTopRight,
texture
texture,
"rounded-full"
)}
/>
<Box className={classes.textLayer}>
Expand All @@ -35,43 +64,20 @@ export function CustomFlowsDemo() {
Markdown
</Title>
<div className={classes.textSize}>
<ul className="list-decimal list-inside sm:list-outside space-y-4">
<ul className="list-disc list-inside lg:list-outside space-y-4">
<li>
Easily import an{" "}
<Anchor
className={classes.link}
target="_blank"
href="https://konfigthis.com/docs/getting-started/openapi-specification"
>
OpenAPI Specification
</Anchor>{" "}
or{" "}
<Anchor
className={classes.link}
target="_blank"
href="https://konfigthis.com/docs/getting-started/postman-collections"
>
Postman Collection
</Anchor>{" "}
and Konfig automatically generates and publishes SDKs in the
most popular languages with no further work from you.
Write and style text, add forms, and embed code snippets
</li>
<li>
Whenever you update your spec, Konfig{" "}
<Anchor
className={classes.link}
target="_blank"
href="https://konfigthis.com/docs/tutorials/automate-sdk-updates"
>
instantly republishes all your SDKs
</Anchor>
—keeping them current.
Run code and make live calls to your API from the browser
</li>
</ul>
</div>
</Box>
</Box>
<Box className={clsx(classes.diagram, "w-[1500px]")}>hello</Box>
<div className="p-4 relative text-sm bg-[#002b36] rounded-xl shadow-xl w-full lg:w-3/5">
<MarkdownRenderer>{markdown}</MarkdownRenderer>
</div>
</SdkSectionFlex>
</Box>
</Box>
Expand Down
45 changes: 45 additions & 0 deletions konfigthis.com/src/components/MarkdownRenderer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { PropsWithChildren } from "react";
import highlightjs from "highlight.js";
import "highlight.js/styles/base16/solarized-dark.css";

export const MarkdownRenderer: React.FC<PropsWithChildren<{}>> = ({
children,
}) => {
if (typeof children !== "string")
throw new Error("MarkdownRenderer only accepts string children");

// Split the markdown content at code block boundaries
const parts = children.split(/(```[a-z]*\n[\s\S]*?\n```)/);

// Highlight each part
const highlightedParts = parts.map((part) => {
// Check if the part is a code block
if (part.startsWith("```")) {
const match = part.match(/```([a-z]+)\n([\s\S]*?)\n```/);
if (match) {
const [, lang, code] = match;
return (
"```" +
lang +
"\n" +
highlightjs.highlight(code, { language: lang }).value +
"\n```"
);
}
}
// Highlight the part as markdown if it's not a code block
return highlightjs.highlight("markdown", part).value;
});

// Combine the highlighted parts
const highlightedMarkdown = highlightedParts.join("");

return (
<pre>
<code
className="hljs markdown"
dangerouslySetInnerHTML={{ __html: highlightedMarkdown }}
></code>
</pre>
);
};
13 changes: 9 additions & 4 deletions konfigthis.com/src/components/SdkSectionFlex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@ import { PropsWithChildren } from "react";
export function SdkSectionFlex({
children,
reverse,
}: PropsWithChildren<{ reverse?: boolean }>) {
breakpoint,
}: PropsWithChildren<{ reverse?: boolean; breakpoint?: "lg" }>) {
return (
<div
className={clsx("flex flex-col sm:flex-row gap-4 sm:gap-20", {
["sm:flex-row"]: !reverse,
["sm:flex-row-reverse"]: reverse,
className={clsx("flex flex-col gap-4 sm:gap-20", {
["sm:gap-20"]: breakpoint !== "lg",
["lg:gap-20"]: breakpoint === "lg",
["lg:flex-row-reverse"]: breakpoint === "lg" && reverse,
["lg:flex-row"]: breakpoint === "lg" && !reverse,
["sm:flex-row"]: breakpoint !== "lg" && !reverse,
["sm:flex-row-reverse"]: breakpoint !== "lg" && reverse,
})}
>
{children}
Expand Down
24 changes: 24 additions & 0 deletions konfigthis.com/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -815,11 +815,25 @@
resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==

"@types/highlight.js@^10.1.0":
version "10.1.0"
resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-10.1.0.tgz#89bb0c202997d7a90a07bd2ec1f7d00c56bb90b4"
integrity sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==
dependencies:
highlight.js "*"

"@types/json5@^0.0.29":
version "0.0.29"
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

"@types/marked@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-6.0.0.tgz#4dbc7df4add578ef87eb6ca2c6927c97b0531abf"
integrity sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==
dependencies:
marked "*"

"@types/[email protected]":
version "20.2.5"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.5.tgz#26d295f3570323b2837d322180dfbf1ba156fefb"
Expand Down Expand Up @@ -2277,6 +2291,11 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"

highlight.js@*, highlight.js@^11.9.0:
version "11.9.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==

hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
Expand Down Expand Up @@ -2729,6 +2748,11 @@ lru-cache@^6.0.0:
dependencies:
yallist "^4.0.0"

marked@*, marked@^9.1.2:
version "9.1.2"
resolved "https://registry.yarnpkg.com/marked/-/marked-9.1.2.tgz#a54ca772d2b5a43de7d8ed40111354b4b7985527"
integrity sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==

merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
Expand Down

0 comments on commit d6f0b35

Please sign in to comment.