3058f251bc
This commit establishes the foundational structure for the Cheatsheet Hub project. It includes the setup of a Vue 3, Vite, and TailwindCSS stack, along with core application features: - **Routing:** Configures `vue-router` for Home, Cheatsheet List, and Cheatsheet Detail pages. - **State Management:** Implements a `pinia` store for theme management (dark/light mode) and mock data. - **UI Components:** Adds reusable components like `NavBar`, `CheatsheetCard`, and `PrintButton`. - **Styling:** Integrates TailwindCSS with custom base styles, dark mode support, and print-friendly optimizations. - **Dependencies:** Adds key libraries including `marked` for content rendering.
26 lines
608 B
Vue
26 lines
608 B
Vue
<template>
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-8">All Cheatsheets</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<CheatsheetCard v-for="cheatsheet in cheatsheets" :key="cheatsheet.id" :cheatsheet="cheatsheet" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapState } from 'pinia'
|
|
import { useAppStore } from '../stores'
|
|
import CheatsheetCard from '../components/CheatsheetCard.vue'
|
|
|
|
export default {
|
|
name: 'CheatsheetListView',
|
|
components: {
|
|
CheatsheetCard
|
|
},
|
|
computed: {
|
|
...mapState(useAppStore, ['cheatsheets'])
|
|
}
|
|
}
|
|
</script>
|