Icons for languages

frontend/components/VCard.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { UCard } from "#components";
+let props = defineProps<{
+	color?: string;
+	title?: string;
+	"prepend-icon"?: string;
+	"append-icon"?: string;
+	subtitle?: string;
+	text?: string;
+	loading?: boolean;
+	class?: string;
+}>();
+let ui = reactive({
+	background:
+		"bg-" + (props.color != undefined ? props.color : "indigo") + "-950",
+	header: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	},
+	body: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	},
+	footer: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	}
+});
+</script>
+<template>
+	<UCard :ui="ui">
+		<template #header>
+			<template v-if="loading">
+				<UProgress animation="carousel" />
+			</template>
+			<div class="flex flex-row">
+				<div v-if="prependIcon" class="mr-3 pt-3">
+					<Icon :name="prependIcon" :size="25" />
+				</div>
+				<div class="text-left">
+					<h4>{{ title }}</h4>
+					<p class="text-slate-400">{{ subtitle }}</p>
+				</div>
+				<div v-if="appendIcon" class="ml-3 pt-3">
+					<Icon :name="appendIcon" :size="25" />
+				</div>
+			</div>
+		</template>
+		<template v-if="$slots.body || text">
+			<div v-if="$slots.body">
+				<slot name="body" />
+			</div>
+			<div v-else-if="text">
+				{{ text }}
+			</div>
+		</template>
+		<template #footer v-if="$slots.actions">
+			<slot name="actions" />
+		</template>
+	</UCard>
+</template>

frontend/nuxt.config.ts

@@ -14,11 +14,9 @@ export default defineNuxtConfig({
 	],
 	alias: {
 		server: "./server",
-		"#components": "./.nuxt/components.d.ts",
-		"#imports": "./.nuxt/imports.d.ts",
 		composables: "./composables",
+		"#components": "./.nuxt/components.d.ts",
 		"~~": "./assets",
-		"~/plugins": "./plugins",
-		"#ui/types": "./node_modules/@nuxt/ui/dist/runtime/types/index.d.ts"
+		"~/plugins": "./plugins"
 	}
 });

frontend/pages/about/index.vue

@@ -79,6 +79,21 @@ useHead({
 		</ul>
 		<hr class="border-gray-700" />
 		<page-header description="About Me" />
+		<div class="flex justify-center mt-5">
+			<v-card
+				title="About me"
+				subtitle="About me"
+				prepend-icon="i-heroicons-rocket-launch-solid"
+				append-icon="i-devicon-githubcodespaces"
+			>
+				<template #body>
+					<p class="text-blue-500">Name: Jaipal</p>
+				</template>
+				<template #actions>
+					<UButton>Click</UButton>
+				</template>
+			</v-card>
+		</div>
 		<div class="flex justify-center mt-5">
 			<UCard class="w-1/4">
 				<template #header>

frontend/pages/index.vue

@@ -111,6 +111,10 @@ onMounted(async function () {
 								padding: { sm: 'p-3' }
 							}"
 						>
+							<Icon
+								:name="useNuxtApp().$icons(item.langName)"
+								:size="20"
+							/>
 							<span class="truncate">
 								{{
 									useNuxtApp().$langNamesPrint(item.langName)

frontend/plugins/langNames.ts

@@ -13,6 +13,71 @@ export const langNamesPrint = (lang: string) => {
 		? langs[lang]
 		: lang.charAt(0).toUpperCase() + lang.slice(1);
 };
+export const icons = (lang: string) => {
+	let langs: Record<string, string> = {
+		actionscript: "vscode-icons:file-type-actionscript",
+		ada: "vscode-icons:file-type-ada",
+		armasm: "vscode-icons:file-type-assembly",
+		asciidoc: "vscode-icons:file-type-asciidoc",
+		bash: "vscode-icons:file-type-shell",
+		batch: "vscode-icons:file-type-bat",
+		c: "vscode-icons-file-type-c3",
+		cmake: "vscode-icons:file-type-cmake",
+		clojure: "vscode-icons:file-type-clojure",
+		cpp: "vscode-icons-file-type-cpp",
+		csharp: "vscode-icons-file-type-csharp",
+		css: "vscode-icons-file-type-css",
+		dart: "vscode-icons:file-type-dartlang",
+		django: "vscode-icons:file-type-django",
+		docker: "vscode-icons:file-type-docker",
+		elixir: "vscode-icons:file-type-elixir",
+		elm: "vscode-icons:file-type-elm",
+		erlang: "vscode-icons:file-type-erlang",
+		fortran: "vscode-icons:file-type-fortran",
+		go: "vscode-icons:file-type-go",
+		gradle: "vscode-icons:file-type-gradle",
+		graphql: "vscode-icons-file-type-graphql",
+		groovy: "vscode-icons:file-type-groovy",
+		haml: "vscode-icons:file-type-haml",
+		handlebars: "vscode-icons:file-type-handlebars",
+		html: "vscode-icons-file-type-html",
+		http: "vscode-icons-file-type-http",
+		java: "vscode-icons:file-type-jar",
+		javascript: "vscode-icons-file-type-js-official",
+		json: "vscode-icons-file-type-json",
+		julia: "vscode-icons:file-type-julia",
+		kotlin: "vscode-icons:file-type-kotlin",
+		less: "vscode-icons:file-type-less",
+		lisp: "vscode-icons:file-type-lisp",
+		lua: "vscode-icons:file-type-lua",
+		markdown: "vscode-icons:file-type-markdown",
+		makefile: "vscode-icons:file-type-gnu",
+		nix: "vscode-icons:file-type-nix",
+		perl: "vscode-icons:file-type-perl",
+		php: "vscode-icons-file-type-php",
+		python: "vscode-icons-file-type-python",
+		r: "vscode-icons:file-type-r",
+		ruby: "vscode-icons-file-type-ruby",
+		rust: "vscode-icons-file-type-rust",
+		scala: "vscode-icons:file-type-scala",
+		scss: "vscode-icons-file-type-scss",
+		sql: "vscode-icons:file-type-sql",
+		stylus: "vscode-icons:file-type-stylus",
+		swift: "vscode-icons:file-type-swift",
+		toml: "vscode-icons:file-type-toml",
+		typescript: "vscode-icons-file-type-typescript-official",
+		vim: "vscode-icons:file-type-vim",
+		xquery: "vscode-icons:file-type-xquery",
+		yaml: "vscode-icons:file-type-yaml"
+	};
+	return (
+		"i-" +
+		(langs[lang]
+			? langs[lang].replace(":", "-")
+			: "vscode-icons-default-file")
+	);
+};
 export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.provide("langNamesPrint", langNamesPrint);
+	nuxtApp.provide("icons", icons);
 });

frontend/tsconfig.json

@@ -8,7 +8,7 @@
 			"#imports": ["./.nuxt/imports.d.ts"],
 			"#components": ["./.nuxt/components.d.ts"],
 			"#app/nuxt": ["./node_modules/nuxt/dist/app/index.d.ts"],
-			"~/plugins": ["./plugins"]
+			"~/plugins/": ["./plugins/"]
 		},
 		"lib": ["DOM", "ESNext"]
 	}