# Shopping Mall Chat Bots

______  ___      ___________   ______________        _____     ________      _____        
___   |/  /_____ ___  /__  /   __  ____/__  /_______ __  /_    ___  __ )_______  /________
__  /|_/ /_  __ `/_  /__  /    _  /    __  __ \  __ `/  __/    __  __  |  __ \  __/_  ___/
_  /  / / / /_/ /_  / _  /     / /___  _  / / / /_/ // /_      _  /_/ // /_/ / /_ _(__  ) 
/_/  /_/  \__,_/ /_/  /_/      \____/  /_/ /_/\__,_/ \__/      /_____/ \____/\__/ /____/  

# Mall Chat Bot Generator

# Code Helpers

Some of the code might be a bit confusing, so here is a quick explanation of what is going on.
GitHub Copilot is good at some stuff but not at indexing my code for context search. So I am using SourceGraph for this.
But I this is a manual process to index my code for that: Indexing my code for SourceGraph

# Server API

../server/api/users.get.ts explained byexplain.users.get.ts.md

# TODO

# Code Snippets

User Authentication

# Notion API and SDK

# Useful for this project

# Packages

# Microsoft Clarity

# Data

City Data - back4app

# Pricing Models

Maintenance and costing

# Chat Bot Creation and Optimization

# Information for collaboration

# Packages

# Table of Contents

Mall Chat Admin
- Features
- To Do
- Preview
- Table of Contents
- Quick Start
  - Start with this template
  - Deploy as Static Site
- Built-in Components
- Notes
  - Nuxt Content
  - Custom Workspace Snippets
  - Styles
  - Theme (Dark Mode)
  - Localization
  - Generate Locales
  - Icons
  - Precommit and Postmerge
- License

# Start dev server

Install dependencies pnpm install --shamefully-hoist
Run pnpm dev to start development server and open http://localhost:3000 in your browser

# Deploy as Static Site

Run pnpm generate to build the project
Serve dist/ folder Checkout the deployment documentation.

# Available Components

# Notes

# Nuxt Content

# Styles

Tailwindcss import managed by windicss. and you can add custom styles in :

/path/to/assets/sass/app.scss

# Theme (Dark Mode)

ThemeManager is a plugin that allows you to switch between themes. this lib in :

/path/to/utils/theme.ts

Thememanager is a function-class construct when app.vue before mounted. theme construct inside AppSetup() in /path/to/app.vue :

vue
<!-- /path/to/app.vue -->
<script lang="ts" setup>
import { AppSetup } from '~/utils/app';
// app setup
AppSetup()
</script>

To change theme, you can direct set theme from state theme.setting, example :

vue
<script lang="ts" setup>
  import { IThemeSettingOptions } from '~/utils/theme'
  const themeSetting = useState<IThemeSettingOptions>('theme.setting')
  themeSetting.value = 'dark'
</script>

When you change state theme.setting, it will automatically change theme.

Theme Setting have 4 options :

light
dark
system (operating system theme)
realtime (realtime theme, if 05:00 - 17:00, it will change to light theme, otherwise dark)

We have state theme.current, this state return light or dark theme. basically it's process from theme.setting. don't change theme with this state.

# Localization

Localization is a plugin that allows you to switch between languages. this lib in :

/path/to/utils/lang.ts

LanguageManager is a function-class construct when app.vue before mounted. this lib depend on @intlify/nuxt3 lang construct inside AppSetup() in /path/to/app.vue :

vue
<!-- /path/to/app.vue -->
<script lang="ts" setup>
  import { AppSetup } from '~/utils/app';
  // app setup
  AppSetup()
</script>

To change language, you can direct set language from state lang.setting, example :

vue
<script lang="ts" setup>
const langSetting = useState<string>('locale.setting')
langSetting.value = 'en'
</script>

When you change state locale.setting, it will automatically change language.

# Generate Locales

I made an automatic tool to automatically translate to all languages that have been prepared in the ./locales/ folder So, you can just update "locales/en.yml" and run this tools, it will automatically translate to all languages.

You can just run:

pnpm generate:locales
# or :
node ./tools/translator.js ./locales en.yml

# Icons

This project using unplugin-icons for auto generate and import icon as component.

You can see collection icon list in : https://icones.js.org/

you can use <prefix-collection:icon /> or <PrefixCollection:Icon />.

in this project, configuration prefix as a "icon", you can see in nuxt.config.ts:

export default defineNuxtConfig({
  ...
  vite: {
      plugins: [
          UnpluginComponentsVite({
              dts: true,
              resolvers: [
                  IconsResolver({
                      prefix: 'Icon',
                  }),
              ],
          }),
      ],
  },
  ...
})

# Example:

vue
// use icon from collection "Simple Icons" and name icon is "nuxtdotjs"
<IconSimpleIcons:nuxtdotjs />

// use icon from collection "Unicons" and name icon is "sun"
<IconUil:sun />

# Pre-commit and Post-merge

This project using husky and commit-lint for pre-commit and post-merge. when you commit, it will check your commit message and running pnpm lint-staged to check your staged files. configuration in : /path/to/.husky/pre-commit and /path/to/commitlint.config.js

And when Postmerge, it will run "pnpm" to automatically install new dependencies. configuration in /path/to/.husky/post-merge

# Shopping Mall Chat Bots

# Mall Chat Bot Generator

# Code Helpers

# Server API

# TODO

# Code Snippets

# Notion API and SDK

# Useful for this project

# Packages

# Microsoft Clarity

# Data

# Pricing Models

# Chat Bot Creation and Optimization

# Information for collaboration

# Packages

# Table of Contents

# Start dev server

# Deploy as Static Site

# Available Components

# Notes

# Nuxt Content

# Styles

# Theme (Dark Mode)

# Localization

# Generate Locales

# Icons

# Example:

# Pre-commit and Post-merge

# License