Skip to content

Commit

Permalink
Cleaned up vc-repository, fixed code issues, fixed names, updated dep…
Browse files Browse the repository at this point in the history
…endencies, removed unused dependencies
  • Loading branch information
waltkb committed Feb 13, 2024
1 parent 283a487 commit ab2033b
Show file tree
Hide file tree
Showing 16 changed files with 209 additions and 343 deletions.
9 changes: 8 additions & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default defineNuxtConfig({
"@nuxt/content",
["@unocss/nuxt", { autoImport: false }],
"nuxt-icon",
"nuxt-monaco-editor",
// "nuxt-monaco-editor", // not used right now
"@nuxt/image",
"@vueuse/nuxt",
"nuxt-security"
Expand All @@ -28,5 +28,12 @@ export default defineNuxtConfig({
theme: "github-dark",
preload: ["json", "kotlin", "http", "js", "ts", "md", "shell"]
}
},


router: {
options: {
scrollBehaviorType: "smooth"
}
}
});
27 changes: 12 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,21 @@
"preview": "nuxt preview"
},
"devDependencies": {
"@nuxt/content": "^2.8.5",
"@nuxt/devtools": "1.0.0-beta.3",
"@unocss/nuxt": "^0.56.5",
"monaco-editor": "^0.44.0",
"nuxt": "^3.7.4",
"nuxt-icon": "^0.5.0",
"nuxt-monaco-editor": "^1.2.3",
"nuxt-security": "1.0.0-rc.2",
"tailwindcss": "^3.3.3",
"@nuxt/content": "^2.12.0",
"@nuxt/devtools": "1.0.8",
"@unocss/nuxt": "^0.58.5",
"nuxt": "^3.10.1",
"nuxt-icon": "^0.6.8",
"nuxt-security": "1.1.1",
"tailwindcss": "^3.4.1",
"vue-router": "^4.2.5"
},
"dependencies": {
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
"@julr/unocss-preset-forms": "^0.0.5",
"@headlessui/vue": "^1.7.19",
"@heroicons/vue": "^2.1.1",
"@julr/unocss-preset-forms": "^0.1.0",
"@nuxt/image": "rc",
"@unocss/reset": "^0.56.5",
"@vueuse/nuxt": "^10.6.1",
"fetch-to-curl": "^0.6.0"
"@unocss/reset": "^0.58.5",
"@vueuse/nuxt": "^10.7.2"
}
}
31 changes: 15 additions & 16 deletions src/components/content/Callout/Callout.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div class="pt-4 px-4 bg-slate-800 text-slate-50 rounded-md border-l-4 flex gap-3" :class="borderClass">
<div>
<CheckCircleIcon v-if="type==='Success'" class="text-green-700 h-6 mt-1"/>
<InformationCircleIcon v-if="type==='Info'" class="text-primary-300 h-6 mt-1"/>
<ExclamationTriangleIcon v-if="type==='Error'" class="text-red-400 h-6 mt-1"/>
<CheckCircleIcon v-if="type === 'Success'" class="text-green-700 h-6 mt-1" />
<InformationCircleIcon v-if="type === 'Info'" class="text-primary-300 h-6 mt-1" />
<ExclamationTriangleIcon v-if="type === 'Error'" class="text-red-400 h-6 mt-1" />
</div>
<slot />
</div>
Expand All @@ -16,23 +16,22 @@ import { computed } from "vue";
const props = defineProps({
type: {
type: String,
default: 'Info',
validator: (value: string) => ['Success', 'Error', 'Info'].includes(value),
default: "Info",
validator: (value: string) => ["Success", "Error", "Info"].includes(value),
required: false,
}
})
},
});
const borderClass = computed(() => {
switch (props.type) {
case 'Success':
return 'border-green-500';
case 'Error':
return 'border-red-400';
case 'Info':
return 'border-primary-400';
case "Success":
return "border-green-500";
case "Error":
return "border-red-400";
case "Info":
return "border-primary-400";
default:
return '';
return "";
}
})
});
</script>
55 changes: 27 additions & 28 deletions src/components/content/HttpRequest.vue
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<template>
<div class="border pt-2 pb-3 px-3">
<!-- <div class="border pt-2 pb-3 px-3">
<div class="px-4 sm:px-0 flex justify-between items-center">
<h3 class="text-base leading-7 text-white">
<span class="text-white mr-1">HTTP:</span> <span class="font-extrabold mr-0.5">{{ method }}</span> <a :href="url">{{ url }}</a>
<hr />
</h3>
<!-- <span class="isolate inline-flex rounded-md shadow-sm">-->
<!-- <button-->
<!-- class="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-gray-800 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"-->
<!-- type="button"-->
<!-- >-->
<!-- <BookmarkIcon aria-hidden="true" class="-ml-0.5 h-5 w-5 text-gray-400" />-->
<!-- Bookmark for your use-case-->
<!-- </button>-->
<!-- <button-->
<!-- class="relative -ml-px inline-flex items-center rounded-r-md bg-gray-600 px-3 py-2 text-sm font-semibold text-gray-200 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"-->
<!-- type="button"-->
<!-- >-->
<!-- 12-->
<!-- </button>-->
<!-- </span>-->
&lt;!&ndash; <span class="isolate inline-flex rounded-md shadow-sm">&ndash;&gt;
&lt;!&ndash; <button&ndash;&gt;
&lt;!&ndash; class="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-gray-800 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"&ndash;&gt;
&lt;!&ndash; type="button"&ndash;&gt;
&lt;!&ndash; >&ndash;&gt;
&lt;!&ndash; <BookmarkIcon aria-hidden="true" class="-ml-0.5 h-5 w-5 text-gray-400" />&ndash;&gt;
&lt;!&ndash; Bookmark for your use-case&ndash;&gt;
&lt;!&ndash; </button>&ndash;&gt;
&lt;!&ndash; <button&ndash;&gt;
&lt;!&ndash; class="relative -ml-px inline-flex items-center rounded-r-md bg-gray-600 px-3 py-2 text-sm font-semibold text-gray-200 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"&ndash;&gt;
&lt;!&ndash; type="button"&ndash;&gt;
&lt;!&ndash; >&ndash;&gt;
&lt;!&ndash; 12&ndash;&gt;
&lt;!&ndash; </button>&ndash;&gt;
&lt;!&ndash; </span>&ndash;&gt;
</div>
<p v-if="description" class="max-w-2xl text-sm leading-6 text-gray-400">{{ description }}</p>
<div class="mt-2 border-t border-white/10">
Expand All @@ -32,7 +32,7 @@
</span>
</dt>
<dd class="mt-1 text-sm leading-6 text-gray-400 sm:col-span-2 sm:mt-0">
<input v-bind="headerValue.value" :placeholder="headerValue.example" class="bg-gray-700 text-white px-1 w-full" />
<input :placeholder="headerValue.example" class="bg-gray-700 text-white px-1 w-full" v-bind="headerValue.value" />
</dd>
</div>
<div v-for="[key, value] in queryParamMap" v-if="queryParamMap && queryParamMap.size >= 1" class="px-4 py-1 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
Expand All @@ -50,11 +50,11 @@
</dl>
</div>
<!-- v-if="body"-->
<!-- @update:model-value="$emit('update:modelValue', $event.target.value)"-->
&lt;!&ndash; v-if="body"&ndash;&gt;
&lt;!&ndash; @update:model-value="$emit('update:modelValue', $event.target.value)"&ndash;&gt;
<div v-if="body" class="">
Body:
<monaco-editor v-if="body" :model-value="bodyString" :options="{ theme: 'vs-dark', fontSize: 12 }" class="h-56 w-full" lang="json"> Loading editor... </monaco-editor>
<LazyMonacoEditor v-if="body" :model-value="bodyString" :options="{ theme: 'vs-dark', fontSize: 12 }" class="h-56 w-full" lang="json"> Loading editor... </LazyMonacoEditor>
</div>
<span class="flex gap-3 items-center mt-1">
Expand All @@ -76,7 +76,7 @@
<div v-if="loading">Loading...</div>
<div v-if="result">
Result:
<monaco-editor
<LazyMonacoEditor
v-if="result"
:lang="resultLang"
:model-value="result"
Expand All @@ -86,17 +86,17 @@
class="h-44"
>
Loading result...
</monaco-editor>
</LazyMonacoEditor>
</div>
<div v-if="requestSendError">
Error:
{{ requestSendError }}
</div>
</div>
</div>-->
</template>

<script lang="ts" setup>
import { Ref } from "@vue/reactivity";
/*import { Ref } from "@vue/reactivity";
import fetchToCurl from "fetch-to-curl";
export interface Props {
Expand Down Expand Up @@ -179,7 +179,7 @@ async function sendRequest() {
if (contentType == "application/json") {
resultLang.value = "json";
} /*if (contentType == "text/plain")*/ else {
} /!*if (contentType == "text/plain")*!/ else {
resultLang.value = "text";
}
result.value = await fetched.text();
Expand All @@ -191,12 +191,11 @@ async function sendRequest() {
function toCurl() {
//<div v-for="[headerKey, heIaderValue] in headersMap" v-if="headersMap && headersMap.size >= 1";
headersMap.value?.entries
headersMap.value?.entries;
const fetched = fetchToCurl(props.url, {
method: props.method,
});
window.alert(fetched);
}
}*/
</script>
6 changes: 3 additions & 3 deletions src/components/content/ProseA.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<NuxtLink :href="href" :target="target" class="underline underline-primary-300 hover:underline-primary-400 font-bold text-gray-50">
<NuxtLink :href="href" :target="target" class="underline underline-primary-300 hover:underline-primary-400 font-bold text-gray-50 cursor-pointer">
<slot />
</NuxtLink>
</template>

<script lang="ts" setup>
defineProps({
const props = defineProps({
href: {
type: String,
default: "",
Expand All @@ -15,5 +15,5 @@ defineProps({
default: undefined,
required: false,
},
});
})
</script>
3 changes: 1 addition & 2 deletions src/components/content/ProseCodeInline.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<code
class="bg-gray-900 py-0.9 px-1.8 rounded-md border-inline border-1 border-gray-700 text-sm text-gray-50 font-bold">
<code class="bg-gray-900 py-0.9 px-1.8 rounded-md border-inline border-1 border-gray-700 text-sm text-gray-50 font-bold">
<slot />
</code>
</template>
34 changes: 9 additions & 25 deletions src/components/content/ProseH1.vue
Original file line number Diff line number Diff line change
@@ -1,35 +1,19 @@
<template>
<h1
:id="id"
class="relative font-semibold text-4xl mb-10 text-gray-50 cursor-pointer"
@pointerenter="showHashtag = true"
@pointerleave="showHashtag = false"
@click.prevent="handleClick"
>
<span v-if="showHashtag" class="absolute left-[-32px] text-primary-300"
>#</span
>
<a v-if="generate" :href="`#${id}`">
<slot />
</a>
<slot v-else />
</h1>
<h1 :id="id" class="relative font-semibold text-4xl mb-10 text-gray-50 cursor-pointer group">
<span class="absolute left-[-32px] text-primary-300 hidden group-hover:block">#</span>
<NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
<slot />
</NuxtLink>
<slot v-else />
</h1>
</template>

<script setup lang="ts">
import { computed, useRuntimeConfig, ref } from "#imports";
import { scroll } from "~/lib/navHelper/scroll";
<script lang="ts" setup>
import { computed, useRuntimeConfig } from "#imports";
const route = useRoute();
const showHashtag = ref(false);
const props = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => props.id && headings?.anchorLinks?.h1);
function handleClick() {
if (props.id) {
scroll(props.id, route.path);
}
}
</script>
35 changes: 9 additions & 26 deletions src/components/content/ProseH2.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,19 @@
<template>
<h2
:id="id"
class="font-semibold text-3xl mb-2 mt-10 text-gray-50"
@pointerenter="showHashtag = true"
@pointerleave="showHashtag = false"
@click.prevent="handleClick"
>
<span v-if="showHashtag" class="absolute left-[-2%] text-primary-300"
>#</span
>
<a v-if="id && generate" :href="`#${id}`">
<slot />
</a>
<slot v-else />
</h2>
<h2 :id="id" class="font-semibold text-3xl mb-2 mt-10 text-gray-50 group">
<span class="absolute left-[-2%] text-primary-300 hidden group-hover:block">#</span>
<NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
<slot />
</NuxtLink>
<slot v-else />
</h2>
</template>

<script setup lang="ts">
import { computed, ref, useRuntimeConfig } from "#imports";
import { scroll } from "~/lib/navHelper/scroll";
<script lang="ts" setup>
import { computed, useRuntimeConfig } from "#imports";
const route = useRoute();
const showHashtag = ref(false);
const props = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => props.id && headings?.anchorLinks?.h2);
function handleClick() {
if (props.id) {
scroll(props.id, route.path);
}
}
</script>
33 changes: 8 additions & 25 deletions src/components/content/ProseH3.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,19 @@
<template>
<h3
:id="id"
class="font-semibold text-2xl mb-2 mt-10 text-gray-50"
@pointerenter="showHashtag = true"
@pointerleave="showHashtag = false"
@click.prevent="handleClick"
>
<span v-if="showHashtag" class="absolute left-[-8px] text-primary-300"
>#</span
>
<a v-if="id && generate" :href="`#${id}`">
<slot />
</a>
<slot v-else />
</h3>
<h3 :id="id" class="font-semibold text-2xl mb-2 mt-10 text-gray-50 group">
<span class="absolute left-[-8px] text-primary-300 hidden group-hover:block">#</span>
<NuxtLink v-if="id && generate" :to="{ hash: `#${id}` }">
<slot />
</NuxtLink>
<slot v-else />
</h3>
</template>

<script setup lang="ts">
import { computed, ref, useRuntimeConfig } from "#imports";
import { scroll } from "~/lib/navHelper/scroll";
import { computed, useRuntimeConfig } from "#imports";
const route = useRoute();
const showHashtag = ref(false);
const props = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => props.id && headings?.anchorLinks?.h3);
function handleClick() {
if (props.id) {
scroll(props.id, route.path);
}
}
</script>
Loading

0 comments on commit ab2033b

Please sign in to comment.