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

<script>
	import { envs } from "../envs";
	import { vars } from "../store";
	let displayEnvs = () => {
		$vars.display_env = !$vars.display_env;
	};

	let displayVars = () => {
		$vars.display_var = !$vars.display_var;
	};

	let selectEnv = (env) => {
		$vars.environment = env;
	};
	let env_vars;
	$: {
		env_vars = $envs[$vars.environment];
	}
</script>

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="p-4 fixed inline-block text-left">
	<div class="flex">
		<button
			on:click={displayVars}
			type="button"
			class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm mx-4 px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
			id="menu-button"
			aria-expanded="true"
			aria-haspopup="true">
			Variables
			<!-- Heroicon name: solid/chevron-down -->
			<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				<path
					fill-rule="evenodd"
					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
					clip-rule="evenodd" />
			</svg>
		</button>
		<button
			on:click={displayEnvs}
			type="button"
			class="inline-flex justify-center whitespace-nowrap w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
			id="menu-button"
			aria-expanded="true"
			aria-haspopup="true">
			{#if $vars.environment == ""}
				Environment
			{:else}
				{$vars.environment}
			{/if}
			<!-- Heroicon name: solid/chevron-down -->
			<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				<path
					fill-rule="evenodd"
					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
					clip-rule="evenodd" />
			</svg>
		</button>
	</div>

	<!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
</div>
{#if $vars.display_env}
	<div
		class="fixed origin-top-right top-20 right-4 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
		role="menu"
		aria-orientation="vertical"
		aria-labelledby="menu-button"
		tabindex="-1">
		<div class="p-2" role="none">
			{#each Object.keys($envs) as env}
				<button class="text-gray-700 block p-2 text-sm" on:click={() => selectEnv(env)} role="menuitem" tabindex="-1" id="menu-item-6"
					>{env}</button>
			{/each}
		</div>
	</div>
{/if}
{#if $vars.display_var}
	<div
		class="fixed text-gray-700 p-4 right-64 top-20 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
		role="menu"
		aria-orientation="vertical"
		aria-labelledby="menu-button"
		tabindex="-1">
		<div class="p-2" role="none">
			{#each Object.keys(env_vars) as key}
				<div class="p-1">
					<div class="flex justify-between">
						<span class="p-1">{`${key}: `}</span><input class="p-1" bind:value={$envs[$vars.environment][key]} />
					</div>
				</div>
			{/each}
		</div>
	</div>
{/if}