try code reviewing tools

[OlafurTorfi]

Summary by CodeRabbit

• New Features

  • Migrated to Vue 3 single-page application with Vite as the build tool
  • Added GitHub Actions CI workflow for automated testing and builds

• Chores

  • Updated Node.js engine requirement to version 20
  • Modernized project dependencies and development tooling
  • Replaced legacy build system with Vite and updated npm scripts

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR comprehensively migrates the project from an AngularJS application with Grunt and Bower to a modern Vue 3 single-page application (SPA) powered by Vite. Legacy build tooling, AngularJS code, and old dependencies are removed; Vue components, modern configuration files, and updated server setup are added.

Changes

Cohort / File(s)	Summary
Legacy Build Tooling Gruntfile.js, bower.json, .bowerrc, .jshintrc, .travis.yml	Removed Grunt configuration, Bower dependencies, and Travis CI configuration; eliminated JSHint linting rules.
Legacy Test Configuration test/.jshintrc, test/karma.conf.js, test/spec/controllers/*	Deleted Karma and Jasmine test setup along with AngularJS controller test specs; replaced with Vitest.
Legacy AngularJS Application app/scripts/app.js, app/scripts/controllers/*, app/styles/main.css, app/views/*, app/index.html, app/404.html, app/.buildignore, app/.htaccess	Removed entire AngularJS module, controllers (MainCtrl, AboutCtrl, RulesCtrl), CSS styling, HTML views, and Apache server directives; eliminated from project structure.
Project Configuration & Dependencies package.json, .gitignore, .nvmrc, Procfile, README.md	Updated to Node.js v20 requirement, added Vue/Vite/Express dependencies, removed Grunt/Bower/Angular dependencies, added build/dev/preview npm scripts, and updated documentation with Vue 3 SPA instructions.
Modern CI/CD Configuration .github/workflows/ci.yml	Added GitHub Actions workflow for Node.js CI with npm test and npm build steps.
New Vue 3 Application src/main.js, src/App.vue, src/components/SiteHeader.vue, src/views/*.vue, src/styles/main.css	Introduced Vue 3 application entry point with router configuration, header component with navigation, view components (Home, About, Rules, NotFound), and comprehensive dark-themed CSS stylesheet with responsive design.
Server & Build Configuration web.js, public/.htaccess, public/404.html, vite.config.js, index.html	Migrated Express server to ES modules, configured SPA fallback routing, added Vite build configuration with Vue and jsdom test support, and added root HTML entry point and 404 page for public distribution.
Testing Framework src/__tests__/smoke.test.js	Added Vitest smoke test for new testing infrastructure.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 From Angular's old ways, we hop anew,
With Vue and Vite, the code shines true!
Grunt be gone, and Bower too—
A modern SPA carousel, just built for you! 🎪

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'try code reviewing tools' is vague and generic, using non-descriptive language that doesn't convey meaningful information about the substantial migration from an AngularJS/Grunt/Bower stack to a modern Vue 3/Vite setup.	Use a more specific title describing the main change, such as 'Migrate from AngularJS to Vue 3 with Vite' or 'Replace legacy build tooling with Vite and modernize stack'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Docstrings were successfully generated.

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

.github/workflows/ci.yml (1)

3-5: Consider restricting workflow triggers to specific branches.

The workflow triggers on all push and pull_request events without branch filters. This may cause unnecessary CI runs on feature branches. If this is intentional for comprehensive testing, this is fine. Otherwise, consider limiting to main/master:

💡 Optional: Add branch filters

 on:
-  push:
-  pull_request:
+  push:
+    branches: [master, main]
+  pull_request:
+    branches: [master, main]

src/App.vue (1)

4-4: Redundant role="main" attribute.

The <main> element already has an implicit ARIA role of "main", so the explicit role="main" attribute is unnecessary.

♻️ Suggested simplification

-    <main class="page" role="main">
+    <main class="page">

web.js (1)

15-18: Consider using a string path instead of regex for the SPA fallback.

The regex /.*// works but is non-idiomatic for Express. A cleaner pattern would be '*' or using a middleware function:

♻️ Suggested alternative

 // SPA fallback.
-app.get(/.*/, (_req, res) => {
+app.use((_req, res) => {
   res.sendFile(path.join(__dirname, 'dist', 'index.html'))
 })

Using app.use as a catch-all after static middleware is the typical Express pattern for SPA fallback.

src/views/HomeView.vue (2)

48-55: Consider using a unique identifier for the v-for key.

Using post.title as the key works if titles are guaranteed unique, but a dedicated id field or the index would be safer for future-proofing when more posts are added.

♻️ Suggested improvement

-              :key="post.title"
+              :key="idx"

Or add an id field to each post object for more robust keying.

---

30-38: The frameborder attribute is deprecated in HTML5.

Use CSS instead for modern HTML compliance.

♻️ Suggested fix

             :src="`https://www.youtube-nocookie.com/embed/${current.youtubeId}`"
             title="YouTube video"
-            frameborder="0"
+            style="border: 0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

Or define a CSS class with border: none.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Docstrings generation - FAILED

No docstrings were generated.