## Vue Component Coding Patterns and Rules

This section describes some patterns to follow when creating new or updating existing Vue components.

- Shad-cn Vue is installed and can be used to generate most common UI elements. Only create a new custom component is shad-cn doesn't already have a solution.
- Shad-cn Vue components can be installed with a bash command like so: npx shadcn-vue@latest add button [or any other component]
- NEVER try to generate a ShadCN component, rather always prompt me to install it when needed
- Do NOT create long components with a lot of responsibilities. Instead, break components down into smaller, more focused components
- make most components "dumb" components. These focus on:
  - presentation
  - simple logic
  - Dumb components should include the keyword `Dumb` before the file suffix like this: `UserProfileCardDumb.vue`
- Limit "smart" components that make requests to API endpoints to only what's absolutely necessary
- break complex logic into composables or utility functions
- Always use TypeScript to define all components.
- Use Typescript to define component props and emits.
- use JS docs to document component props and emits
- Use script setup
- Provide the component sections in the following order:
  - script
  - template
  - style
- Use the built in Nuxt $fetch function instead of browser native fetch when reacting to user events and in lifecylcle hooks (except setup). Basically, anything that only runs in the browser (in the client) should use $fetch
- Any code that runs at the root level of script setup, should make https requests with useFetch or useAsyncData. Prefer useFetch when possible.
- Example of when to use $fetch vs useFetch:

```
<script setup lang="ts">
  const { data: users } = await useFetch("/api/users");
  async function createUser(newUser: User){
   const newUser = await $fetch('/api/users', {
       method: 'POST',
       body: newUser
   })
  }
```

-Components are named and auto imported based on their location within the components directory. For example:

- A component stored in `@/components/MyComponent` will be named MyComponent.
- A component stored in `@/components/users/UsersMyComponent` will be named UsersMyComponent
- ALWAYS prefix the component name with any directory it's nested under within the components directory

- Always use NuxtImg as a drop in replacement for ANY img tag. Be sure to specify appropriate width and heights to prevent CLS and configure styles so that the image is NEVER stretched or distorted
- When using NuxtImg on a src url that is from another site, make sure the domain is registered in nuxt.config.ts like this:

  ```
  image: {
    domains: ["images.unsplash.com", "[the-domain-here]", "etc"],
  },
  ```

Please extract and return all the text content from this textbook page. 

Format it naturally, preserving paragraphs, headings, 
and any important structural elements. 

Output the text in a markdown format, to preserve structures 
like lists, tables, and headings, etc.

Return ONLY a JSON object with the following structure:

{
  "pageNumber": "The page number of the textbook page if found as a string, otherwise null",
  "text": "The extracted text content in markdown format. Escape all new lines and line breaks."
}

// ... prompt from previous slide

DO NOT RETURN ANYTHING ELSE.
ONLY RETURN THE JSON OBJECT as a raw string, 
no other text or formatting.

export default defineNuxtConfig({
  nitro: {
    scheduledTasks: {
      // Run `scannedPages:process` task every minute
	 "* * * * *": ["scannedPages:process"],
    }
  }
})