feat: scaffold initial Cheatsheet Hub application
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.
This commit is contained in:
25
src/views/CheatsheetListView.vue
Normal file
25
src/views/CheatsheetListView.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user