├── core ├── src │ ├── assets │ │ ├── main.css │ │ └── logo.svg │ ├── types │ │ └── theme.ts │ ├── main.ts │ ├── components │ │ ├── BgCircle.vue │ │ ├── Mask.vue │ │ ├── mouths │ │ │ ├── SeriousMouth.vue │ │ │ ├── Grin.vue │ │ │ ├── Mouth.vue │ │ │ ├── OpenMouth.vue │ │ │ ├── SmileOpen.vue │ │ │ ├── Sad.vue │ │ │ ├── Tongue.vue │ │ │ └── Lips.vue │ │ ├── clothingGraphics │ │ │ ├── Vue.vue │ │ │ ├── Gatsby.vue │ │ │ ├── ClothingGraphic.vue │ │ │ ├── GraphQL.vue │ │ │ ├── Nuxt.vue │ │ │ ├── Redwood.vue │ │ │ └── React.vue │ │ ├── eyebrows │ │ │ ├── SeriousEyebrows.vue │ │ │ ├── AngryEyebrows.vue │ │ │ ├── ConcernedEyebrows.vue │ │ │ ├── Normal.vue │ │ │ ├── LeftLoweredEyebrows.vue │ │ │ └── Eyebrows.vue │ │ ├── accessories │ │ │ ├── Accessory.vue │ │ │ ├── TinyGlasses.vue │ │ │ ├── RoundGlasses.vue │ │ │ └── Shades.vue │ │ ├── facialHairs │ │ │ ├── FacialHair.vue │ │ │ ├── Stubble.vue │ │ │ └── MediumBeard.vue │ │ ├── eyes │ │ │ ├── HappyEyes.vue │ │ │ ├── ContentEyes.vue │ │ │ ├── Lashes.vue │ │ │ ├── SimpleEyes.vue │ │ │ ├── DizzyEyes.vue │ │ │ ├── Eye.vue │ │ │ ├── Wink.vue │ │ │ ├── NormalEyes.vue │ │ │ ├── HeartEyes.vue │ │ │ ├── LeftTwitchEyes.vue │ │ │ └── SquintEyes.vue │ │ ├── hats │ │ │ ├── Hat.vue │ │ │ └── Turban.vue │ │ ├── bodies │ │ │ ├── Body.vue │ │ │ ├── Chest.vue │ │ │ └── Breasts.vue │ │ ├── clothings │ │ │ ├── Clothing.vue │ │ │ ├── TankTop.vue │ │ │ ├── Dress.vue │ │ │ ├── VNeck.vue │ │ │ ├── Shirt.vue │ │ │ └── DressShirt.vue │ │ ├── hairs │ │ │ ├── Hair.vue │ │ │ ├── LongHair.vue │ │ │ ├── BuzzCut.vue │ │ │ ├── ShortHair.vue │ │ │ ├── BaldingHair.vue │ │ │ ├── Afro.vue │ │ │ ├── PixieCut.vue │ │ │ ├── BobCut.vue │ │ │ └── BunHair.vue │ │ ├── FaceMask.vue │ │ ├── Avatar.vue │ │ └── Base.vue │ ├── composables │ │ └── useTheme.ts │ ├── App.vue │ ├── beanheads-vue.ts │ └── constants │ │ └── theme.ts ├── env.d.ts ├── .npmignore ├── public │ └── favicon.ico ├── tsconfig.json ├── index.html ├── tsconfig.app.json ├── .gitignore ├── tsconfig.node.json ├── vite.config.ts ├── package.json └── README.md ├── site ├── public │ ├── robots.txt │ └── thumbnail.png ├── server │ └── tsconfig.json ├── app │ ├── app.vue │ ├── assets │ │ └── css │ │ │ └── main.css │ ├── composables │ │ └── useCoreVersion.ts │ └── utils │ │ └── random.ts ├── tsconfig.json ├── README.md ├── .gitignore ├── package.json └── nuxt.config.ts ├── .gitignore ├── pnpm-workspace.yaml ├── .vscode └── extensions.json ├── demo ├── website.png └── beanheads-demo.gif ├── package.json ├── LICENSE ├── .github └── workflows │ └── publish.yml ├── .cursorrules └── README.md /core/src/assets/main.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/public/robots.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules -------------------------------------------------------------------------------- /core/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /core/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | src 4 | index.html 5 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "./core/**" 3 | - "./site/**" 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /site/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /demo/website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heunsig/beanheads-vue/HEAD/demo/website.png -------------------------------------------------------------------------------- /site/app/app.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /core/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heunsig/beanheads-vue/HEAD/core/public/favicon.ico -------------------------------------------------------------------------------- /demo/beanheads-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heunsig/beanheads-vue/HEAD/demo/beanheads-demo.gif -------------------------------------------------------------------------------- /site/public/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heunsig/beanheads-vue/HEAD/site/public/thumbnail.png -------------------------------------------------------------------------------- /site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /core/src/types/theme.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue'; 2 | 3 | export interface Theme { 4 | skin: Ref<{ base: string; shadow: string }> 5 | } 6 | -------------------------------------------------------------------------------- /core/src/main.ts: -------------------------------------------------------------------------------- 1 | import './assets/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /site/app/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @import "@nuxt/ui"; 3 | 4 | html { 5 | font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; 6 | font-weight: normal; 7 | } -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | # Beanheads Vue Generator 2 | 3 |

4 | Beanheads Vue Generator 5 |

6 | 7 | Easily generate avatars for Vue and Nuxt projects with [Beanheads Vue Generator](https://beanheads-vue.heunsig.com/). 8 | 9 | -------------------------------------------------------------------------------- /site/app/composables/useCoreVersion.ts: -------------------------------------------------------------------------------- 1 | import corePackageJson from '../../../core/package.json' 2 | 3 | /** 4 | * Core 패키지(beanheads-vue)의 버전을 가져오는 composable 5 | */ 6 | export const useCoreVersion = () => { 7 | return { 8 | version: corePackageJson.version 9 | } 10 | } -------------------------------------------------------------------------------- /core/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /core/src/components/BgCircle.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /core/src/components/Mask.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /core/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /core/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 8 | 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /core/src/composables/useTheme.ts: -------------------------------------------------------------------------------- 1 | import { reactive, readonly, toRef } from 'vue'; 2 | import { colors } from '@/constants/theme'; 3 | 4 | const theme = reactive({ 5 | skin: colors.skin.light 6 | }); 7 | 8 | export function useTheme() { 9 | function setSkin(skin: keyof typeof colors.skin) { 10 | theme.skin = colors.skin[skin] 11 | } 12 | 13 | return { 14 | skin: readonly(toRef(theme, 'skin')), 15 | setSkin 16 | } 17 | } -------------------------------------------------------------------------------- /core/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /core/src/components/mouths/SeriousMouth.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/Vue.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /core/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node22/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | "noEmit": true, 13 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 14 | 15 | "module": "ESNext", 16 | "moduleResolution": "Bundler", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /core/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/SeriousEyebrows.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "beanheads-monorepo", 3 | "version": "1.0.0", 4 | "description": "Easily generate avatars for your Vue and Nuxt projects with Beanheads Vue.", 5 | "main": "index.js", 6 | "scripts": { 7 | "core": "pnpm --filter beanheads-vue", 8 | "site": "pnpm --filter beanheads-site", 9 | "dev": "pnpm --recursive --parallel --stream run dev", 10 | "build-site": "pnpm --filter beanheads-vue build && pnpm --filter beanheads-site build", 11 | "start-site": "pnpm --filter beanheads-site start" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c" 17 | } 18 | -------------------------------------------------------------------------------- /core/src/components/accessories/Accessory.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 29 | -------------------------------------------------------------------------------- /core/src/components/facialHairs/FacialHair.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 30 | -------------------------------------------------------------------------------- /core/src/components/eyes/HappyEyes.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/AngryEyebrows.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/eyes/ContentEyes.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | -------------------------------------------------------------------------------- /core/src/components/hats/Hat.vue: -------------------------------------------------------------------------------- 1 | 2 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /core/src/components/bodies/Body.vue: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | 37 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "beanheads-site", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare", 11 | "start-ssg": "http-server .output/public -p 0", 12 | "start": "node .output/server/index.mjs" 13 | }, 14 | "dependencies": { 15 | "@nuxt/ui": "3.3.0", 16 | "@tailwindcss/vite": "^4.1.11", 17 | "@vueuse/core": "^12.0.0", 18 | "@vueuse/nuxt": "12.0.0", 19 | "beanheads-vue": "workspace:^", 20 | "nuxt": "4.0.3", 21 | "nuxt-gtag": "3.0.2", 22 | "nuxt-shiki": "0.3.0", 23 | "tailwindcss": "^4.1.11", 24 | "vue": "latest", 25 | "vue-router": "latest" 26 | }, 27 | "devDependencies": { 28 | "http-server": "^14.1.1", 29 | "shiki": "^1.24.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/ConcernedEyebrows.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /core/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import dts from 'vite-plugin-dts' 6 | 7 | // https://vite.dev/config/ 8 | export default defineConfig({ 9 | build: { 10 | lib: { 11 | entry: fileURLToPath(new URL('./src/beanheads-vue.ts', import.meta.url)), 12 | name: 'beanheads-vue', 13 | fileName: 'beanheads-vue' 14 | }, 15 | rollupOptions: { 16 | external: ['vue'], 17 | output: { 18 | globals: { 19 | vue: 'Vue' 20 | } 21 | } 22 | } 23 | }, 24 | plugins: [ 25 | vue(), 26 | dts({ 27 | rollupTypes: true, 28 | tsconfigPath: fileURLToPath(new URL('./tsconfig.app.json', import.meta.url)) 29 | }) 30 | ], 31 | resolve: { 32 | alias: { 33 | '@': fileURLToPath(new URL('./src', import.meta.url)) 34 | }, 35 | }, 36 | }) 37 | -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/Gatsby.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/Normal.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /core/src/components/eyes/Lashes.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/ClothingGraphic.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 35 | -------------------------------------------------------------------------------- /core/src/components/mouths/Grin.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/LeftLoweredEyebrows.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /core/src/components/mouths/Mouth.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | -------------------------------------------------------------------------------- /core/src/components/eyebrows/Eyebrows.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 33 | -------------------------------------------------------------------------------- /core/src/components/mouths/OpenMouth.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2024 Heunsig Jo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /core/src/components/eyes/SimpleEyes.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /core/src/components/clothings/Clothing.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 41 | -------------------------------------------------------------------------------- /core/src/components/eyes/DizzyEyes.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/mouths/SmileOpen.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/components/mouths/Sad.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /core/src/beanheads-vue.ts: -------------------------------------------------------------------------------- 1 | export { default as Beanhead } from './components/Avatar.vue' 2 | export type { AccessoryType } from './components/accessories/Accessory.vue'; 3 | export type { BodyType } from './components/bodies/Body.vue'; 4 | export type { ClothingType } from './components/clothings/Clothing.vue'; 5 | export type { ClothingGraphicType } from './components/clothingGraphics/ClothingGraphic.vue'; 6 | export type { EyeType } from './components/eyes/Eye.vue'; 7 | export type { EyebrowsType } from './components/eyebrows/Eyebrows.vue'; 8 | export type { FacialHairType } from './components/facialHairs/FacialHair.vue'; 9 | export type { HairType } from './components/hairs/Hair.vue'; 10 | export type { HatType } from './components/hats/Hat.vue'; 11 | export type { MouthType } from './components/mouths/Mouth.vue'; 12 | 13 | import { colors } from '@/constants/theme'; 14 | 15 | type SkinColor = keyof typeof colors.skin; 16 | type HairColor = keyof typeof colors.hair; 17 | type ClothingColor = keyof typeof colors.clothing; 18 | type HatColor = ClothingColor; 19 | type FaceMaskColor = ClothingColor; 20 | type LipColor = keyof typeof colors.lipColors; 21 | 22 | export type { SkinColor, HairColor, ClothingColor, HatColor, FaceMaskColor, LipColor } 23 | 24 | export { colors } 25 | -------------------------------------------------------------------------------- /core/src/components/eyes/Eye.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | -------------------------------------------------------------------------------- /core/src/components/hairs/Hair.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 50 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish to NPM 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | publish: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v4 12 | 13 | - name: Install pnpm 14 | uses: pnpm/action-setup@v4 15 | 16 | - name: Setup Node.js 17 | uses: actions/setup-node@v4 18 | with: 19 | node-version: 20 20 | registry-url: 'https://registry.npmjs.org' 21 | cache: 'pnpm' 22 | 23 | - name: Install dependencies 24 | run: pnpm core install 25 | 26 | - name: Build 27 | run: pnpm core build 28 | 29 | - name: Get package version 30 | run: | 31 | cd core 32 | VERSION=$(node -p "require('./package.json').version") 33 | echo "PACKAGE_VERSION=$VERSION" >> $GITHUB_ENV 34 | 35 | - name: Publish 36 | run: | 37 | cd core 38 | npm publish --access public 39 | env: 40 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 41 | 42 | - name: Create GitHub Release 43 | uses: softprops/action-gh-release@v2 44 | env: 45 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 46 | with: 47 | tag_name: v${{ env.PACKAGE_VERSION }} 48 | name: v${{ env.PACKAGE_VERSION }} 49 | draft: true 50 | -------------------------------------------------------------------------------- /core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "beanheads-vue", 3 | "version": "1.2.1", 4 | "license": "MIT", 5 | "author": "Heunsig", 6 | "description": "Easily generate avatars for your Vue and Nuxt projects with Beanheads Vue.", 7 | "private": false, 8 | "type": "module", 9 | "main": "./dist/beanheads-vue.umd.cjs", 10 | "module": "./dist/beanheads-vue.js", 11 | "exports":{ 12 | ".": { 13 | "import": "./dist/beanheads-vue.js", 14 | "require": "./dist/beanheads-vue.umd.cjs" 15 | } 16 | }, 17 | "homepage": "https://beanheads-vue.heunsig.com/", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/Heunsig/beanheads-vue" 21 | }, 22 | "scripts": { 23 | "dev": "vite build --watch", 24 | "dev-core": "vite", 25 | "build": "run-p type-check \"build-only {@}\" --", 26 | "preview": "vite preview", 27 | "build-only": "vite build", 28 | "type-check": "vue-tsc --build --force" 29 | }, 30 | "dependencies": { 31 | "vue": "^3.5.12" 32 | }, 33 | "devDependencies": { 34 | "@tsconfig/node22": "^22.0.0", 35 | "@types/node": "^22.9.0", 36 | "@vitejs/plugin-vue": "^5.1.4", 37 | "@vue/tsconfig": "^0.5.1", 38 | "npm-run-all2": "^7.0.1", 39 | "typescript": "~5.6.3", 40 | "vite": "^5.4.10", 41 | "vite-plugin-dts": "^4.3.0", 42 | "vite-plugin-vue-devtools": "^7.5.4", 43 | "vue-tsc": "^2.1.10" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /core/src/components/mouths/Tongue.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | -------------------------------------------------------------------------------- /core/src/components/facialHairs/Stubble.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /site/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | export default defineNuxtConfig({ 6 | vite: { 7 | plugins: [ 8 | tailwindcss(), 9 | ], 10 | }, 11 | css: ['~/assets/css/main.css'], 12 | app: { 13 | head: { 14 | title: 'Beanheads Vue', 15 | link: [ 16 | { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } 17 | ], 18 | meta: [ 19 | { name: 'description', content: 'Create billions of unique characters by mixing and matching colors, hairstyles, and clothing.' }, 20 | { name: 'author', content: '@heunsig' }, 21 | { name: 'og:title', content: 'Beanheads Vue' }, 22 | { name: 'og:description', content: 'Create billions of unique characters by mixing and matching colors, hairstyles, and clothing.' }, 23 | { name: 'og:image', content: '/thumbnail.png' }, 24 | { name: 'og:url', content: 'https://beanheads-vue.heunsig.com' }, 25 | { name: 'og:type', content: 'website' }, 26 | { name: 'twitter:creator', content: '@heunsig' }, 27 | { name: 'twitter:title', content: 'Beanheads Vue' }, 28 | { name: 'twitter:description', content: 'Create billions of unique characters by mixing and matching colors, hairstyles, and clothing.' }, 29 | { name: 'twitter:image', content: '/thumbnail.png' }, 30 | ] 31 | } 32 | }, 33 | compatibilityDate: '2024-11-01', 34 | devtools: { enabled: false }, 35 | modules: ['@nuxt/ui', '@vueuse/nuxt', 'nuxt-shiki', 'nuxt-gtag'], 36 | colorMode: { 37 | preference: 'light', 38 | }, 39 | shiki: { 40 | bundledThemes: ['github-light-default', 'github-dark'], 41 | bundledLangs: ['vue-html', 'bash'], 42 | }, 43 | gtag: { 44 | enabled: process.env.NODE_ENV === 'production', 45 | id: 'G-6K665MD6XP' 46 | } 47 | }) -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/GraphQL.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/eyes/Wink.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /core/src/components/accessories/TinyGlasses.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/Nuxt.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/clothingGraphics/Redwood.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/hairs/LongHair.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | -------------------------------------------------------------------------------- /core/src/components/accessories/RoundGlasses.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /core/src/components/mouths/Lips.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /core/src/constants/theme.ts: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | skin: { 3 | light: { 4 | base: '#fdd2b2', 5 | shadow: '#f3ab98', 6 | }, 7 | yellow: { 8 | base: '#FBE8B3', 9 | shadow: '#EDD494', 10 | }, 11 | brown: { 12 | base: '#D8985D', 13 | shadow: '#C6854E', 14 | }, 15 | dark: { 16 | base: '#A56941', 17 | shadow: '#8D5638', 18 | }, 19 | red: { 20 | base: '#CC734C', 21 | shadow: '#B56241', 22 | }, 23 | black: { 24 | base: '#754437', 25 | shadow: '#6B3D34', 26 | }, 27 | }, 28 | hair: { 29 | blonde: { 30 | base: '#FEDC58', 31 | shadow: '#EDBF2E', 32 | }, 33 | orange: { 34 | base: '#D96E27', 35 | shadow: '#C65C22', 36 | }, 37 | black: { 38 | base: '#592d3d', 39 | shadow: '#592d3d', 40 | }, 41 | white: { 42 | base: '#ffffff', 43 | shadow: '#E2E2E2', 44 | }, 45 | brown: { 46 | base: '#A56941', 47 | shadow: '#8D5638', 48 | }, 49 | blue: { 50 | base: '#85c5e5', 51 | shadow: '#67B7D6', 52 | }, 53 | pink: { 54 | base: '#D69AC7', 55 | shadow: '#C683B4', 56 | }, 57 | green: { 58 | base: '#4AB749', 59 | shadow: '#3CA047', 60 | }, 61 | red: { 62 | base: '#DD3E3E', 63 | shadow: '#C43333', 64 | }, 65 | purple: { 66 | base: '#B256A1', 67 | shadow: '#9C4490', 68 | }, 69 | }, 70 | lipColors: { 71 | red: { 72 | base: '#DD3E3E', 73 | shadow: '#C43333', 74 | }, 75 | purple: { 76 | base: '#B256A1', 77 | shadow: '#9C4490', 78 | }, 79 | pink: { 80 | base: '#D69AC7', 81 | shadow: '#C683B4', 82 | }, 83 | turquoise: { 84 | base: '#5CCBF1', 85 | shadow: '#49B5CD', 86 | }, 87 | green: { 88 | base: '#4AB749', 89 | shadow: '#3CA047', 90 | }, 91 | }, 92 | clothing: { 93 | white: { 94 | base: '#FFFFFF', 95 | shadow: '#E2E2E2', 96 | }, 97 | blue: { 98 | base: '#85c5e5', 99 | shadow: '#67B7D6', 100 | }, 101 | black: { 102 | base: '#633749', 103 | shadow: '#5E3244', 104 | }, 105 | green: { 106 | base: '#89D86F', 107 | shadow: '#7DC462', 108 | }, 109 | red: { 110 | base: '#D67070', 111 | shadow: '#C46565', 112 | }, 113 | pink: { 114 | base: '#E8A5C8', 115 | shadow: '#D18FB5', 116 | }, 117 | }, 118 | bgColors: { 119 | blue: '#85c5e5', 120 | green: '#89D86F', 121 | red: '#ED9191', 122 | }, 123 | outline: '#592d3d', 124 | white: '#ffffff', 125 | tongue: '#f28195', 126 | } 127 | -------------------------------------------------------------------------------- /core/src/components/eyes/NormalEyes.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 62 | -------------------------------------------------------------------------------- /core/src/components/clothings/TankTop.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /core/src/components/bodies/Chest.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 49 | -------------------------------------------------------------------------------- /.cursorrules: -------------------------------------------------------------------------------- 1 | # Git Commit Message Guidelines 2 | 3 | 1. Always write commit messages in **English**. 4 | 5 | 2. Follow the format below for commit messages: 6 | 7 | ``` 8 | (): 9 | 10 | 11 | 12 |