ultdocs 0.1.1

(Experimental) Static site generator for API's, Postman and markdown documents
Documentation 
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

<script lang="ts">
	import Code from "../components/Code.svelte";
	import Dropdown from "../components/Dropdown.svelte";
	import Copy from "../svgs/Copy.svelte";
	import Copied from "../svgs/Copied.svelte";
	import Logo from "../svgs/Logo.svelte";
	import { requests } from "../requests";
	import { vars } from "../store";
	import { envs } from "../envs";
	let requestStatus = "request-good";

	export let key = "0";
	export let title = "Get Institutions";
	let code = $requests[key];
	$: code = $requests[key];

	let responseText = "";
	let copied = false;
	let copyToClipboard = async () => {
		let copyText = document.getElementById(`copy-text-${key}`).innerText;
		navigator.clipboard.writeText(copyText);
		copied = true;
	};
	// This may look overcomplicated, but it's being used on every route and it covers many different
	// failure possibilites, if the response body is json, it returns the formatted text.
	// Raise a pull request if you can simplify this without using an external library.
	let runCode = async () => {
		let base_url = "";
		if ("base_url" in $envs[$vars.environment]) {
			base_url = $envs[$vars.environment].base_url;
		}
		if ("baseUrl" in $envs[$vars.environment]) {
			base_url = $envs[$vars.environment].baseUrl;
		}
		console.log($requests[key].body);
		let data: string = await fetch(`${base_url}${$requests[key].path}`, {
			method: code.method,
			headers: code.headers,
			body: code.body,
		})
			.then((res) => {
				if (res.status < 200 || res.status > 299) {
					requestStatus = "request-bad";
				} else {
					requestStatus = "request-good";
				}
				return res.text();
			})
			.catch((err) => {
				requestStatus = "request-bad";
				if (err) {
					return err.message + " - check console for more details";
				}
			});

		console.log(data);
		if (data == null) {
			responseText = "No body returned";
			return;
		}

		try {
			let json = JSON.parse(data);
			responseText = JSON.stringify(json, null, 2);
		} catch (err) {
			responseText = data;
		}
	};

	// import "newman";
	// newman.run({ collection: require("../../../collections/example.json"), reporters: "cli" }, () => console.log("collection run complete!"));
</script>

<div class="grid grid-cols-1 xl:grid-cols-2">
	<div>
		<h3 class="rest-headers" id={key}>{title}</h3>
		<slot />
	</div>
	<div>
		<div class="flex items-center justify-between px-10 xl:mt-8">
			<div class="text-xl">Code Examples</div>
			<div class="flex">
				<Dropdown />
				<button on:click={copyToClipboard}>
					{#if copied}
						<Copied />
					{:else}
						<Copy />
					{/if}
				</button>
				<button on:click={runCode}>
					<Logo />
				</button>
			</div>
		</div>
		<div class="border-primary-100 border rounded-xl p-4 mx-10 bg-primary-800 ">
			<div class="scroll-horizontal overflow-auto ">
				<Code codeKey={key} />
			</div>
		</div>
		{#if responseText}
			<div class="text-xl pl-10 py-4">Response</div>
			<div class="{requestStatus} border rounded-xl p-4 mx-10">
				<div class="scroll-horizontal overflow-auto ">
					<pre>{responseText}</pre>
				</div>
			</div>
		{/if}
	</div>
</div>