diff --git a/package-lock.json b/package-lock.json index 0ae64b0..03c5e54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,9 @@ "version": "0.0.0", "dependencies": { "@tailwindcss/vite": "^4.1.1", + "buffer": "^6.0.3", "gif.js": "^0.2.0", + "gray-matter": "^4.0.3", "jszip": "^3.10.1", "marked": "^15.0.7", "pinia": "^3.0.1", @@ -19,9 +21,10 @@ }, "devDependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.1", + "@tailwindcss/typography": "^0.5.19", "@tsconfig/node22": "^22.0.1", "@types/gif.js": "^0.2.5", - "@types/node": "^22.13.14", + "@types/node": "^22.19.1", "@vitejs/plugin-vue": "^5.2.3", "@vue/tsconfig": "^0.7.0", "autoprefixer": "^10.4.21", @@ -1934,6 +1937,19 @@ "node": ">= 10" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz", + "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" + } + }, "node_modules/@tailwindcss/vite": { "version": "4.1.17", "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz", @@ -2329,6 +2345,15 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "license": "MIT", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, "node_modules/autoprefixer": { "version": "10.4.22", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz", @@ -2374,6 +2399,26 @@ "dev": true, "license": "MIT" }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/baseline-browser-mapping": { "version": "2.8.31", "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.31.tgz", @@ -2450,6 +2495,30 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/buffer-builder": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", @@ -2583,6 +2652,19 @@ "node": ">= 8" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -2759,6 +2841,19 @@ "node": ">=6" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "license": "BSD-2-Clause", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", @@ -2792,6 +2887,18 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", + "license": "MIT", + "dependencies": { + "is-extendable": "^0.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/figures": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz", @@ -2903,6 +3010,21 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "license": "ISC" }, + "node_modules/gray-matter": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz", + "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==", + "license": "MIT", + "dependencies": { + "js-yaml": "^3.13.1", + "kind-of": "^6.0.2", + "section-matter": "^1.0.0", + "strip-bom-string": "^1.0.0" + }, + "engines": { + "node": ">=6.0" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -2939,6 +3061,26 @@ "node": ">=18.18.0" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, "node_modules/immediate": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", @@ -2974,6 +3116,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -3125,6 +3276,19 @@ "dev": true, "license": "MIT" }, + "node_modules/js-yaml": { + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz", + "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==", + "license": "MIT", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -3186,6 +3350,15 @@ "setimmediate": "^1.0.5" } }, + "node_modules/kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/kolorist": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz", @@ -3815,6 +3988,20 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -4331,6 +4518,19 @@ "node": ">=14.0.0" } }, + "node_modules/section-matter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", + "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", + "license": "MIT", + "dependencies": { + "extend-shallow": "^2.0.1", + "kind-of": "^6.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/semver": { "version": "7.7.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", @@ -4432,6 +4632,12 @@ "node": ">=0.10.0" } }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "license": "BSD-3-Clause" + }, "node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -4441,6 +4647,15 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/strip-bom-string": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", + "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/strip-final-newline": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz", diff --git a/package.json b/package.json index f8abf74..38e9d84 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.1", + "buffer": "^6.0.3", "gif.js": "^0.2.0", + "gray-matter": "^4.0.3", "jszip": "^3.10.1", "marked": "^15.0.7", "pinia": "^3.0.1", @@ -23,9 +25,10 @@ }, "devDependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.1", + "@tailwindcss/typography": "^0.5.19", "@tsconfig/node22": "^22.0.1", "@types/gif.js": "^0.2.5", - "@types/node": "^22.13.14", + "@types/node": "^22.19.1", "@vitejs/plugin-vue": "^5.2.3", "@vue/tsconfig": "^0.7.0", "autoprefixer": "^10.4.21", diff --git a/public/blog/1.png b/public/blog/1.png new file mode 100644 index 0000000..4813326 Binary files /dev/null and b/public/blog/1.png differ diff --git a/public/sitemap.xml b/public/sitemap.xml index d9d19af..9037c94 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -4,8 +4,6 @@ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> - - https://spritesheetgenerator.online/ @@ -23,6 +21,14 @@ https://spritesheetgenerator.online/privacy-policy 2025-11-26T15:50:00+00:00 + + https://spritesheetgenerator.online/blog + 2025-11-26T15:50:00+00:00 + + + https://spritesheetgenerator.online/blog/welcome + 2025-11-26T15:50:00+00:00 + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index d347693..d34e15d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,39 +11,19 @@
Home + Blog About Us Contact Privacy Policy + Sitemap
diff --git a/src/assets/main.css b/src/assets/main.css index d4c8126..1eddbcf 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -90,4 +90,89 @@ html.dark { .card { @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg; } + + /* Custom prose styles for blog content */ + .prose { + @apply text-gray-700 dark:text-gray-300 leading-7; + } + + .prose h1 { + @apply text-4xl font-bold text-gray-900 dark:text-white mb-4 mt-0; + } + + .prose h2 { + @apply text-3xl font-bold text-gray-900 dark:text-white mt-8 mb-4; + } + + .prose h3 { + @apply text-2xl font-bold text-gray-900 dark:text-white mt-6 mb-3; + } + + .prose h4 { + @apply text-xl font-bold text-gray-900 dark:text-white mt-4 mb-2; + } + + .prose p { + @apply text-gray-700 dark:text-gray-300 mb-4 leading-7; + } + + .prose a { + @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300; + } + + .prose strong { + @apply text-gray-900 dark:text-white font-semibold; + } + + .prose em { + @apply italic; + } + + .prose code { + @apply text-sm font-mono bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-1 py-0.5 rounded; + } + + .prose pre { + @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 p-4 rounded-lg overflow-x-auto mb-4; + } + + .prose pre code { + @apply bg-transparent p-0; + } + + .prose ul { + @apply list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300; + } + + .prose ol { + @apply list-decimal pl-6 mb-4 text-gray-700 dark:text-gray-300; + } + + .prose li { + @apply mb-2 leading-7; + } + + .prose blockquote { + @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-4; + } + + .prose img { + @apply rounded-lg shadow-md my-6; + } + + .prose hr { + @apply border-gray-300 dark:border-gray-700 my-8; + } + + .prose table { + @apply border-collapse w-full my-6; + } + + .prose th { + @apply bg-gray-100 dark:bg-gray-800 p-2 text-left font-semibold border border-gray-300 dark:border-gray-700; + } + + .prose td { + @apply border border-gray-300 dark:border-gray-700 p-2; + } } diff --git a/src/blog/welcome.md b/src/blog/welcome.md new file mode 100644 index 0000000..70aea57 --- /dev/null +++ b/src/blog/welcome.md @@ -0,0 +1,23 @@ +--- +title: 'Welcome to the Spritesheet generator blog' +date: '2025-11-26' +description: 'This is the first post on our new blog. Learn about how we built this tool.' +image: '/blog/1.png' +--- + +## Welcome! + +We are excited to launch our new blog. Here we will share updates, tutorials, and tips on how to get the most out of the Sprite Sheet Generator. + +### What is this tool? + +This tool allows you to easily combine multiple images into a single sprite sheet. It's perfect for game developers and web designers. + +### Features + +- Drag and drop interface +- Customizable grid size +- Export to PNG and JSON +- Dark mode support + +Stay tuned for more updates! diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue index a04d677..2dc7fe9 100644 --- a/src/components/SpriteCanvas.vue +++ b/src/components/SpriteCanvas.vue @@ -20,9 +20,7 @@
-

- Tip: Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites. -

+

Tip: Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites.

@@ -63,7 +61,11 @@
- diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue index 2c60bbd..06124b0 100644 --- a/src/components/SpritePreview.vue +++ b/src/components/SpritePreview.vue @@ -110,7 +110,7 @@

Animation

- +
@@ -148,16 +148,20 @@ @@ -171,8 +175,10 @@
@@ -199,7 +205,13 @@
- +
diff --git a/src/components/utilities/DarkModeToggle.vue b/src/components/utilities/DarkModeToggle.vue index cb4f00c..3df98ab 100644 --- a/src/components/utilities/DarkModeToggle.vue +++ b/src/components/utilities/DarkModeToggle.vue @@ -1,12 +1,5 @@ + + diff --git a/src/views/BlogOverview.vue b/src/views/BlogOverview.vue new file mode 100644 index 0000000..5e847d6 --- /dev/null +++ b/src/views/BlogOverview.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/views/Contact.vue b/src/views/Contact.vue index e793341..8cc7275 100644 --- a/src/views/Contact.vue +++ b/src/views/Contact.vue @@ -3,9 +3,7 @@

Contact Us

-

- We'd love to hear from you! Whether you have a question, feedback, or just want to say hi, feel free to reach out. -

+

We'd love to hear from you! Whether you have a question, feedback, or just want to say hi, feel free to reach out.

@@ -14,7 +12,7 @@
Chat with the community and developers
- +
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0f7cff0..461e194 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -56,7 +56,10 @@ JSON
- @@ -135,23 +138,9 @@
- + × - +
{{ cellSize.width }} × {{ cellSize.height }}px
@@ -222,10 +211,7 @@
diff --git a/tailwind.config.js b/tailwind.config.js index ad26f77..f5bd828 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -68,5 +68,7 @@ export default { }), }, }, - plugins: [], + plugins: [ + require('@tailwindcss/typography'), + ], } \ No newline at end of file