diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..a810923 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,42 @@ +name: Build + +on: + push: + branches: + - main + - master + +permissions: + contents: read + pages: write + +jobs: + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '22' + + - name: Enable Corepack + run: corepack enable + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build project + run: yarn build + + - name: Copy CNAME file + run: cp CNAME dist/CNAME + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./dist + diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..9afe441 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,33 @@ +name: Deploy + +on: + workflow_run: + workflows: ["Build"] + types: + - completed + branches: + - main + - master + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + name: Deploy + runs-on: ubuntu-latest + if: ${{ github.event.workflow_run.conclusion == 'success' }} + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 + diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml new file mode 100644 index 0000000..0f0c08a --- /dev/null +++ b/.github/workflows/test-e2e.yml @@ -0,0 +1,36 @@ +name: Test E2E + +on: + push: + branches: + - main + - master + +permissions: + contents: read + +jobs: + test-e2e: + name: Test E2E + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '22' + + - name: Enable Corepack + run: corepack enable + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Install Playwright browsers + run: yarn playwright install --with-deps chromium + + - name: Run E2E tests + run: yarn test:e2e + diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..5c50418 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,37 @@ +name: Test Unit + +on: + push: + branches: + - main + - master + pull_request: + branches: + - main + - master + +permissions: + contents: read + +jobs: + test-unit: + name: Test Unit + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '22' + + - name: Enable Corepack + run: corepack enable + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Run unit tests + run: yarn test:unit + diff --git a/.gitignore b/.gitignore index c2658d7..4a13c77 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,13 @@ node_modules/ +dist/ + +.pnp.* +.yarn/* +!.yarn/releases +!.yarn/plugins +!.yarn/sdks +!.yarn/versions + +# Test outputs +playwright-report/ +test-results/ diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000..3186f3f --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/README.md b/README.md index 7ac89fe..0c95168 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ A modern and responsive web application that converts text to speech, allowing u - **Speed Control**: Adjust playback speed from 0.5x to 2.0x using a desktop slider or a mobile-friendly drop-down - **Modern Interface**: Clean and responsive design with attractive visual gradient - **Data Persistence**: Save text in the browser for later access -- **Play and Pause**: Full control over playback with intuitive buttons +- **Play and Stop**: Full control over playback with intuitive buttons - **Brazilian Portuguese Support**: Automatic detection and selection of pt-BR voices when available - **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices, with a full-width layout and tighter spacing on small screens for better readability @@ -16,7 +16,7 @@ A modern and responsive web application that converts text to speech, allowing u ## 🎨 Branding -- The official application logo is available at [`assets/logo.svg`](assets/logo.svg) and is used as the in-app badge and site favicon. +- The official application logo is available at [`public/assets/logo.svg`](public/assets/logo.svg) and is used as the in-app badge and site favicon. ## 🚀 How to Use @@ -24,31 +24,43 @@ A modern and responsive web application that converts text to speech, allowing u 2. Type or paste the text you want to hear in the text field 3. Click the **Play** button (▶) to start reading 4. Use the slider (desktop/tablet) or the drop-down select (mobile) to adjust the playback speed (0.5x to 2.0x) -5. Click the **Pause** button (⏸) to pause playback +5. Click the **Stop** button (⏹) to stop playback 6. Click the **Save** button (💾) to save the text in your browser ## 📋 Requirements - Modern browser with Web Speech API support - JavaScript enabled -- Internet connection (to load CDN dependencies) ## 🛠️ Technologies Used - **HTML5**: Semantic structure - **CSS3**: Styles with backdrop-filter and gradient support -- **JavaScript**: Application logic -- **Tailwind CSS**: Utility-first CSS framework -- **Inline SVG Icons**: Lucide icons embutidos diretamente no markup (sem dependências externas) +- **TypeScript (ESM)**: Application logic compiled for modern browsers +- **Vite**: Build tool and development server +- **Tailwind CSS**: Utility-first CSS framework (installed via npm) +- **PostCSS**: CSS processing and transformation +- **Inline SVG Icons**: Icons embedded directly in the markup (no external dependencies) - **Web Speech API**: Native browser speech synthesis +- **Jest**: Unit testing framework +- **Playwright**: End-to-end testing framework ## 📦 Dependencies -- [Tailwind CSS](https://tailwindcss.com/) - via CDN +This project uses modern build tools and development dependencies. For end users, no installation is required - the application runs directly in the browser. + +### Development Dependencies + +- **Vite**: Build tool and development server +- **TypeScript**: Type-safe JavaScript +- **Tailwind CSS**: Utility-first CSS framework +- **PostCSS**: CSS processing +- **Jest**: Unit testing framework +- **Playwright**: End-to-end testing framework ## 📈 Analytics & Privacy -- Google Analytics (GA4) and Google Tag Manager now load from the deferred [`analytics.js`](analytics.js) file instead of inline snippets. +- Google Analytics (GA4) and Google Tag Manager now load from the deferred [`analytics.js`](public/analytics.js) file instead of inline snippets. - The script waits for `requestIdleCallback` or the first user interaction (click, key press, pointer/touch) before injecting GA/GTM assets, freeing the critical rendering path while keeping telemetry intact. - The GTM `