refactor: standardize code formatting and improve consistency

- Updated various configuration files to use single quotes for strings.
- Removed unnecessary trailing commas and improved formatting in JavaScript files.
- Enhanced consistency in import statements and object properties across the project.
- Cleaned up CSS files for better readability and organization.

Author: bestony

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 };

src/App.vue

@@ -36,11 +36,11 @@
 </template>
 
 <script setup>
-import Logo from "@/components/Logo.vue";
-import Description from "@/components/Description.vue";
-import Slogan from "@/components/Slogan.vue";
-import Faq from "@/components/Faq.vue";
-import Author from "@/components/Author.vue";
-import Ribbon from "@/components/Ribbon.vue";
-import Copyright from "@/components/Copyright.vue";
+import Logo from '@/components/Logo.vue';
+import Description from '@/components/Description.vue';
+import Slogan from '@/components/Slogan.vue';
+import Faq from '@/components/Faq.vue';
+import Author from '@/components/Author.vue';
+import Ribbon from '@/components/Ribbon.vue';
+import Copyright from '@/components/Copyright.vue';
 </script>

src/__tests__/AboutView.test.js

@@ -1,13 +1,13 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import AboutView from "@/views/AboutView.vue";
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AboutView from '@/views/AboutView.vue';
 
-describe("AboutView", () => {
-  it("links to the GitHub repository", () => {
+describe('AboutView', () => {
+  it('links to the GitHub repository', () => {
     const wrapper = mount(AboutView);
-    expect(wrapper.text()).toContain("Logoly.pro");
-    const link = wrapper.get("a");
-    expect(link.attributes("href")).toBe("https://github.com/bestony/logoly");
-    expect(link.attributes("target")).toBe("_blank");
+    expect(wrapper.text()).toContain('Logoly.pro');
+    const link = wrapper.get('a');
+    expect(link.attributes('href')).toBe('https://github.com/bestony/logoly');
+    expect(link.attributes('target')).toBe('_blank');
   });
 });

src/__tests__/ExportBtn.test.js

@@ -1,33 +1,25 @@
-import {
-  describe,
-  it,
-  expect,
-  beforeAll,
-  afterAll,
-  beforeEach,
-  vi,
-} from "vitest";
-import { mount } from "@vue/test-utils";
-import { createPinia, setActivePinia } from "pinia";
-import ExportBtn from "@/components/ExportBtn.vue";
-import { useStore } from "@/stores/store";
+import { describe, it, expect, beforeAll, afterAll, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import ExportBtn from '@/components/ExportBtn.vue';
+import { useStore } from '@/stores/store';
 
 const domToImageMock = vi.hoisted(() => ({
-  toPng: vi.fn(() => Promise.resolve("data:image/png;base64,mock")),
-  toSvg: vi.fn(() => Promise.resolve("data:image/svg+xml,mock")),
+  toPng: vi.fn(() => Promise.resolve('data:image/png;base64,mock')),
+  toSvg: vi.fn(() => Promise.resolve('data:image/svg+xml,mock'))
 }));
 
 const onClickOutsideMock = vi.hoisted(() => vi.fn((_, handler) => handler()));
 
-vi.mock("dom-to-image", () => ({
+vi.mock('dom-to-image', () => ({
   __esModule: true,
-  default: domToImageMock,
+  default: domToImageMock
 }));
 
-vi.mock("@vueuse/core", () => ({
-  onClickOutside: onClickOutsideMock,
+vi.mock('@vueuse/core', () => ({
+  onClickOutside: onClickOutsideMock
 }));
-describe("ExportBtn", () => {
+describe('ExportBtn', () => {
   let OriginalImage;
   let clickSpy;
 
@@ -50,9 +42,7 @@ describe("ExportBtn", () => {
         this._onload?.();
       }
     };
-    clickSpy = vi
-      .spyOn(window.HTMLAnchorElement.prototype, "click")
-      .mockImplementation(() => {});
+    clickSpy = vi.spyOn(window.HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
   });
 
   afterAll(() => {
@@ -71,60 +61,53 @@ describe("ExportBtn", () => {
   const mountButton = () => mount(ExportBtn);
   const flush = () => new Promise((resolve) => setTimeout(resolve));
 
-  it("exports the editable area as PNG", async () => {
+  it('exports the editable area as PNG', async () => {
     const store = useStore();
-    store.prefix = "Porn";
-    store.suffix = "hub";
+    store.prefix = 'Porn';
+    store.suffix = 'hub';
     const wrapper = mountButton();
 
-    await wrapper.find('[value="png"]').trigger("click");
-    expect(domToImageMock.toPng).toHaveBeenCalledWith(
-      document.getElementById("logo"),
-    );
+    await wrapper.find('[value="png"]').trigger('click');
+    expect(domToImageMock.toPng).toHaveBeenCalledWith(document.getElementById('logo'));
 
     await flush();
 
     expect(store.editable).toBe(true);
     expect(onClickOutsideMock).toHaveBeenCalled();
   });
 
-  it("exports the editable area as SVG", async () => {
+  it('exports the editable area as SVG', async () => {
     const store = useStore();
-    store.prefix = "Only";
-    store.suffix = "Fans";
+    store.prefix = 'Only';
+    store.suffix = 'Fans';
     const wrapper = mountButton();
 
-    await wrapper.find('[value="svg"]').trigger("click");
-    expect(domToImageMock.toSvg).toHaveBeenCalledWith(
-      document.getElementById("logo"),
-    );
+    await wrapper.find('[value="svg"]').trigger('click');
+    expect(domToImageMock.toSvg).toHaveBeenCalledWith(document.getElementById('logo'));
 
     await flush();
 
     expect(clickSpy).toHaveBeenCalled();
     expect(store.editable).toBe(true);
   });
 
-  it("skips exporting when the logo node is missing", async () => {
-    document.body.innerHTML = "";
+  it('skips exporting when the logo node is missing', async () => {
+    document.body.innerHTML = '';
     setActivePinia(createPinia());
     const wrapper = mountButton();
 
-    await wrapper.find('[value="png"]').trigger("click");
+    await wrapper.find('[value="png"]').trigger('click');
 
     expect(domToImageMock.toPng).not.toHaveBeenCalled();
   });
 
-  it("falls back to the default filename when none is provided", () => {
-    const dispatchSpy = vi.spyOn(
-      window.HTMLAnchorElement.prototype,
-      "dispatchEvent",
-    );
+  it('falls back to the default filename when none is provided', () => {
+    const dispatchSpy = vi.spyOn(window.HTMLAnchorElement.prototype, 'dispatchEvent');
     const wrapper = mountButton();
     const { downloadImage } = wrapper.vm.$.setupState;
 
-    expect(typeof downloadImage).toBe("function");
-    downloadImage("data:image/png;base64,stub");
+    expect(typeof downloadImage).toBe('function');
+    downloadImage('data:image/png;base64,stub');
 
     expect(dispatchSpy).toHaveBeenCalled();
     dispatchSpy.mockRestore();

src/__tests__/FontSelectorComponent.test.js

@@ -1,58 +1,58 @@
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import { defineComponent } from "vue";
-import { createPinia, setActivePinia } from "pinia";
-import FontSelector from "@/components/FontSelector.vue";
-import { useStore } from "@/stores/store";
-import { loadGoogleFont } from "@/utils/fontLoader";
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import FontSelector from '@/components/FontSelector.vue';
+import { useStore } from '@/stores/store';
+import { loadGoogleFont } from '@/utils/fontLoader';
 
-vi.mock("@/utils/fontLoader", () => ({
-  loadGoogleFont: vi.fn(),
+vi.mock('@/utils/fontLoader', () => ({
+  loadGoogleFont: vi.fn()
 }));
 
 const VSelectStub = defineComponent({
-  name: "VSelectStub",
+  name: 'VSelectStub',
   props: {
     modelValue: {
       type: String,
-      default: "",
+      default: ''
     },
     items: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue'],
   template: `<select class="v-select-stub" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)">
     <option v-for="option in items" :key="option" :value="option">{{ option }}</option>
-  </select>`,
+  </select>`
 });
 
-describe("FontSelector component", () => {
+describe('FontSelector component', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
     vi.clearAllMocks();
   });
 
-  it("loads the current font immediately and on selection changes", async () => {
+  it('loads the current font immediately and on selection changes', async () => {
     const wrapper = mount(FontSelector, {
       global: {
         stubs: {
-          "v-select": VSelectStub,
-        },
-      },
+          'v-select': VSelectStub
+        }
+      }
     });
     const store = useStore();
 
     expect(loadGoogleFont).toHaveBeenCalledTimes(1);
     expect(loadGoogleFont).toHaveBeenCalledWith(store.font);
 
     loadGoogleFont.mockClear();
-    const select = wrapper.get("select");
-    await select.setValue("Lora");
+    const select = wrapper.get('select');
+    await select.setValue('Lora');
 
     expect(loadGoogleFont).toHaveBeenCalledTimes(1);
-    expect(loadGoogleFont).toHaveBeenCalledWith("Lora");
-    expect(wrapper.html()).toContain("Font");
+    expect(loadGoogleFont).toHaveBeenCalledWith('Lora');
+    expect(wrapper.html()).toContain('Font');
   });
 });

src/__tests__/fontLoader.test.js

@@ -1,54 +1,54 @@
-import { describe, it, expect, beforeEach, vi } from "vitest";
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 
 const loadModule = async () => {
   vi.resetModules();
-  const module = await import("@/utils/fontLoader.js");
+  const module = await import('@/utils/fontLoader.js');
   return module;
 };
 
-describe("loadGoogleFont", () => {
+describe('loadGoogleFont', () => {
   beforeEach(() => {
-    document.head.innerHTML = "";
+    document.head.innerHTML = '';
   });
 
-  it("creates a preload link and converts it to stylesheet on load", async () => {
+  it('creates a preload link and converts it to stylesheet on load', async () => {
     const { loadGoogleFont } = await loadModule();
-    loadGoogleFont("  Roboto  ");
-    const link = document.head.querySelector("link");
+    loadGoogleFont('  Roboto  ');
+    const link = document.head.querySelector('link');
     expect(link).toBeTruthy();
-    expect(link.rel).toBe("preload");
-    expect(link.href).toContain("Roboto");
+    expect(link.rel).toBe('preload');
+    expect(link.href).toContain('Roboto');
 
     link.onload();
-    expect(link.rel).toBe("stylesheet");
+    expect(link.rel).toBe('stylesheet');
   });
 
-  it("avoids duplicate requests while a font is pending or already loaded", async () => {
+  it('avoids duplicate requests while a font is pending or already loaded', async () => {
     const { loadGoogleFont } = await loadModule();
-    loadGoogleFont("Lora");
-    loadGoogleFont("Lora");
-    expect(document.head.querySelectorAll("link").length).toBe(1);
+    loadGoogleFont('Lora');
+    loadGoogleFont('Lora');
+    expect(document.head.querySelectorAll('link').length).toBe(1);
 
-    const [first] = document.head.querySelectorAll("link");
+    const [first] = document.head.querySelectorAll('link');
     first.onload();
-    loadGoogleFont("Lora");
-    expect(document.head.querySelectorAll("link").length).toBe(1);
+    loadGoogleFont('Lora');
+    expect(document.head.querySelectorAll('link').length).toBe(1);
   });
 
-  it("retries after an error by cleaning the pending state", async () => {
+  it('retries after an error by cleaning the pending state', async () => {
     const { loadGoogleFont } = await loadModule();
-    loadGoogleFont("Inter");
-    let link = document.head.querySelector("link");
+    loadGoogleFont('Inter');
+    let link = document.head.querySelector('link');
     expect(link).toBeTruthy();
     link.onerror();
-    expect(document.head.querySelector("link")).toBeNull();
+    expect(document.head.querySelector('link')).toBeNull();
 
-    loadGoogleFont("Inter");
-    link = document.head.querySelector("link");
+    loadGoogleFont('Inter');
+    link = document.head.querySelector('link');
     expect(link).toBeTruthy();
   });
 
-  it("no-ops when the DOM is unavailable", async () => {
+  it('no-ops when the DOM is unavailable', async () => {
     const originalWindow = globalThis.window;
     const originalDocument = globalThis.document;
     vi.resetModules();
@@ -57,8 +57,8 @@ describe("loadGoogleFont", () => {
       globalThis.window = undefined;
       // @ts-expect-error override for test
       globalThis.document = undefined;
-      const { loadGoogleFont } = await import("@/utils/fontLoader.js");
-      expect(() => loadGoogleFont("Roboto")).not.toThrow();
+      const { loadGoogleFont } = await import('@/utils/fontLoader.js');
+      expect(() => loadGoogleFont('Roboto')).not.toThrow();
     } finally {
       globalThis.window = originalWindow;
       globalThis.document = originalDocument;

src/__tests__/fontsConfig.test.js

@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
-import { fonts } from "@/config/fonts";
+import { describe, it, expect } from 'vitest';
+import { fonts } from '@/config/fonts';
 
-describe("fonts config", () => {
-  it("exports a de-duplicated, trimmed list", () => {
+describe('fonts config', () => {
+  it('exports a de-duplicated, trimmed list', () => {
     expect(fonts.length).toBe(new Set(fonts).size);
     expect(fonts.every((font) => font === font.trim())).toBe(true);
-    expect(fonts).toContain("Roboto");
-    expect(fonts).not.toContain("Roboto ");
+    expect(fonts).toContain('Roboto');
+    expect(fonts).not.toContain('Roboto ');
   });
 });