curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh

command -v nvm

# the last stable version like 16.17.0
nvm install

nvm ls

# version like 18.12.1
nvm use

node -v
npm -v

nvm install 'lts/*' --reinstall-packages-from=current

nvm install-latest-npm
npm install -g npm@latest

npm install -g dotenv-cli

npm install -g quicktype

quicktype --src tmp/imgkit.json --top-level ImageKit --just-types --nice-property-names --acronym-style pascal --lang ts -o tmp/tmp.ts

// ./types/imgkit.d.ts
export {}
declare global {
  // Copy Code Here
}

dotenv npm install

# Create .husky folder
npx husky-init

# it will run "npx nuxi dev"
npm run dev

# it will run "npx nuxi build"
npm run build

# it will run "npx nuxi generate"
npm run generate

# it will run "npx nuxi preview"
npm run preview

# please don't use `-f` | `--force` parameter
npx nuxi upgrade

dotenv npm update

# it will run "npx --yes npm-check-updates -u"
dotenv npm run upck

# it will run "eslint . --fix"
npm run eslint-fix

# npm run script
npm run release -- --first-release

# Enable Git Hooks
npm run prepare
# it will run "standard-version -a"
npm run release
# it will run "standard-version -a --release-as patch"
npm run release:patch
# it will run "standard-version -a --release-as minor"
npm run release:minor
# it will run "standard-version -a --release-as major"
npm run release:major

# it will run "npx unlighthouse --site https://www.benjaminoddou-photographe.com"
npm run lighthouse

# using -a to list all files, L <level> to define the depth of the tree and -I <pattern> to ignore patterns
tree -a -L 1 --charset utf-8

tree --help

openssl enc -base64 -in my.key -out my.key.base64

curl -X GET "https://api.imagekit.io/v1/files?<query>" \-u <private_API_key>: | json_pp > tmp/imgkit.json

curl "https://api.imagekit.io/v1/files?<query>" \-H 'Authorization: Basic <Base64_private_API_key>' | json_pp > tmp/imgkit.json

// In nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    IMAGEKIT_B64_API: process.env.IMAGEKIT_B64_API, // Defined in .env file
    public: {
      // public keys here
    }
  },
})

// In server/api/imgkit.ts
export default defineEventHandler(async () => {
  const config = useRuntimeConfig()
  const response = await $fetch('https://api.imagekit.io/v1/files', {
    method: 'GET',
    headers: {
      Authorization: 'Basic ' + config.IMAGEKIT_B64_API
    }
  })
  return response
})

// In pages/components
<script setup>
const { data: images } = useFetch<ImageKit[]>('/api/imgkit')
</script>

.
├── .commitlintrc.json # Commitlint configuration file
├── .env # Environment variables (not in GitHub repo - private 🤐)
├── .eslintrc.json # ESLint config file
├── .github # Assets for GitHub repo
├── .netlify # netlify edge / internal functions (not in GitHub repo ❌)
├── .gitignore # List of files that should be ignore by Git
├── .husky # husky config folder (GitHub hooks)
│   ├── _ # generated by husky init command
│   │   └── .gitignore
│   │   └── husky.sh
│   └── commit-msg # Commitlint with Github hooks
├── .npmrc # Npm config file with GSAP connexion to private repository
├── .nuxt # Nuxt uses the .nuxt/ directory in development to generate Vue application (not in GitHub repo ❌)
├── .output # Nuxt creates the .output/ directory when building the application for production. (not in GitHub repo ❌)
├── .versionrc.json # Changelog format configuration file
├── .vscode
│   └── settings.json # VSCode local settings
├── README.md # This document 👋
├── app.vue # entry point and general backbone of the app. This is the main component in Nuxt 3 applications
├── assets # The assets/ directory is used to add all the website's assets that the build tool (Vite) will process.
│   ├── css
│   │   └── tailwind.css # Tailwind directives
│   ├── pwa-512x512.png # PWA Icon
│   ├── svgs # svgs used in the website
│   │   └── checkmark.svg
├── components # The components/ directory is where all Vue components can be imported inside pages or other components
│   ├── FAQquestion.vue
│   ├── TheAlert.vue
│   ├── theAwwwards.vue
│   ├── theCursor.vue
│   ├── theFooter.vue
│   ├── theForm.vue
│   ├── theHeader.vue
│   ├── theImgDrag.vue
│   ├── theMenu.vue
│   ├── TheMenuLink.vue
│   ├── thePreloader.vue
│   └── theTransition.vue
├── composables # Auto imported functions
│   ├── piniaStore.ts # State Management store functions
│   └── utils.ts # Helper functions
├── dist # folder with built website (not in GitHub repo ❌)
├── node_modules # All modules installed by npm (not in GitHub repo ❌)
├── CHANGELOG.md # File that tracks all changes
├── CODE_OF_CONDUCT.md # Code of conduct
├── CONTRIBUTING.md # Contributing guide
├── LICENSE # MIT License
├── netlify.toml # Configuration file for netlify
├── nuxt.config.ts # Nuxt configuration file
├── package-lock.json # Aggregates an immutable version of the package.json file
├── package.json # Contains all the dependencies and scripts of the application
├── pages # All pages belongs here. Nuxt provides a file-based routing to create routes within the app using Vue Router under the hood.
│   ├── [...slug].vue # catch all route (404 not founf)
│   ├── about.vue # About page
│   ├── gallery.vue # Gallery page
│   └── index.vue # Home page
├── plugins # All Nuxt and Vue plugins
│   └── vue-masonry-wall.ts # Vue masonry plugin
├── public # files that shouldn't be processed by build tool (Vite)
│   ├── _redirects # redirects rules for Netlify
│   ├── banner.jpg
│   ├── browserconfig.xml
│   ├── favicon.ico
│   ├── me.jpg
│   ├── mstile-150x150.png
│   ├── robots.txt
│   └──safari-pinned-tab.svg
├── server # Directory which register API and server handlers (Nitro routes) with HMR support
│   ├── api
│   │   └── imgkit.ts # ImageKit API endpoint (act as proxy)
│   ├── routes
│   │   └── sitemap.xml.ts # Sitemap generator
├── tmp # Temporary files to perform tests on API
│   ├── .gitkeep # empty hidden file to keep tmp folder in GitHub repo
│   ├── imgkit.json # Sample data from ImageKit cURL command (not in GitHub repo ❌)
│   └── tmp.ts # Output typescript API generated with quicktype command (not in GitHub repo ❌)
├── types # Typescript declaration
│   └── imgkit.d.ts # Declaration file for ImageKit API
├── tailwind.config.js # Tailwind config file
└── tsconfig.json # File that references .nuxt/tsconfig.json which resolved aliases used in a Nuxt project

# Classic SSR build
npm run build
# Prerendering routes to optimize SEO and response time
npm run generate