Untitled
unknown
plain_text
2 months ago
2.2 kB
6
Indexable
<template> <div class="inter-300"> <span @click="toggleAll" class="space-mono-regular text-lg text-gray-500">> Technologies <</span> <br><br> <div v-for="(obj, index) in CollapsibleObjects" class="collapse-list-wrapper"> <div @click="CollapsibleObjects[index].expanded = !CollapsibleObjects[index].expanded" class="collapse-list-label"> <span class="text-xl lg:text-3xl">{{ obj.label }}</span> <span v-if="!CollapsibleObjects[index].expanded" class="collapse-list-button">+</span> <span v-if="CollapsibleObjects[index].expanded" class="collapse-list-button">-</span> </div> <div> <ul class="collapsible-list" v-if="CollapsibleObjects[index].expanded"> <li class="text-xl lg:text-xl" v-for="list in obj.list"> {{ list.item }} </li> </ul> </div> </div> </div> </template> <script setup lang="ts"> type CollapsibleObject = { label: string; collapsed: boolean; list: Array<Object>; }; const CollapsibleObjects = ref<Array<CollapsibleObject>>([ {label: 'Operating Systems', collapsed: false, list: [{ item: 'GNU/Linux' }, { item: 'macOS' }, { item: 'FreeBSD' }, { item: 'Windows' }]}, {label: 'Programming/Scripting', collapsed: false, list: [{ item: 'Golang' }, { item: 'Bash' }, { item: 'Python' }, { item: 'C' }, { item: 'Javascript/Typescript' }, { item: 'Java' }, { item: 'PowerShell' }]}, {label: 'Frameworks', collapsed: false, list: [{ item: 'Bubbletea (Golang)' }, { item: 'NuxtJS' }]}, {label: 'Monitoring Tools', collapsed: false, list: [{ item: 'Node Exporter (Prometheus)' }, { item: 'Grafana' }, { item: 'OpsGenie' }, { item: 'auditd (UNIX)' }]}, {label: 'Database Management', collapsed: false, list: [{ item: 'MySQL' }, { item: 'PostgreSQL' }, { item: 'SQLite' } ]}, {label: 'Webservers', collapsed: false, list: [{ item: 'Nginx' }, { item: 'Apache 2.0' }]}, {label: 'Configuration Management Systems', collapsed: false, list: [{ item: 'Puppet' }, { item: 'Ansible' }]}, {label: 'Networking', collapsed: false, list: [{ item: 'Cisco IOS' }, { item: 'Tailscale' }, { item: 'Wireguard' }]}, ]); </script>
Editor is loading...
Leave a Comment