refactor chooser to be more exacting, simplified, and maintainable

[possumbilities]

Description

The overall goal here is to make the Chooser smaller, clearer, and more easily maintained, while allowing fresh room to implement changes as needed.

• Fixes [Bug] Links are actually buttons #544
• Fixes [Feature] Error pages are not styled/themed #532
• Fixes [Bug] After finishing the form, clicking "Done" doesn't do anything #502
• Fixes [Bug] Request to Update Twitter Icon to X #489
• Fixes Chooser Markup Buttons As Inline SVG #536
• Refactored approach relies on Vocabulary as much as possible, with minimal overrides or extra styling.
• Stepper flow includes UX improvements to be less confusing, inform the user better, and reduce the number of actions and steps.
• Interface relies more heavily on as many native elements and controls as possible to increase Accessibility, browser compatibility, and reduce future maintenance burdens.
• XMP, ccRel structured data and formats have been removed.
• Improvements with how the chooser functions on smaller viewports.
• Leverages newer stable conventions to allow for iterative improvements in the codebase and functionality from here forward (ie: incorporating more Web Component structure, better isolating all markup to html, etc.)
• Reduces complex dependency-ridden codebase to utilize new vocabulary, and provide a markup, css, and js file for chooser specific functionality. (removes use of npm)
• Chooser is now significantly more hermetic
• Chooser can now be embedded within WordPress theme (vocabulary-theme) as a customized page, no need to host on separate subdomain
• README.md was updated to match new structure, and functionality.
• renders the following Issues obsolete/no longer applicable:
  • CC0 tool outputs bad metadata #538
  • [Feature] Vue 2: migrate Vue CLI from v4 to v5 #528
  • [Bug] No Windows equivalent command for build-component in package.json #480
  • [Feature] Integrate internationalization plugin for multilingual support #451
  • Upgrade project to Vue 3.x #356
  • Add component flowchart in the documentation #304
• renders the following PRs obsolete/no longer applicable:
  • Fixed help section links #566
  • Implement and Style 404 Error Page with Vue Router Integration #532 #561
  • Fixes #528: Migrate project from vue cli v4 to v5 #552
  • Fix semantic conflict in accordion buttons #549
  • Mobile Layout Issue Misalignment on Mobile Devices Above 375px #541
  • Bug/finishingtheform 502 #539
  • Bump json5, @vue/cli-plugin-babel, @vue/cli-plugin-e2e-nightwatch, @vue/cli-plugin-eslint, @vue/cli-plugin-unit-jest, @vue/cli-service and @vue/eslint-config-standard #438
  • Bump json5, sass-loader, @vue/cli-plugin-babel, @vue/cli-service, @vue/cli-plugin-eslint, @vue/cli-plugin-unit-jest, tsconfig-paths and webpack #437

Metrics

npm audit

old dependecies : 2748 dependencies (179 vulnerabilities (10 low, 110 moderate, 41 high, 18 critical))

---	~# lines of code
old JS (and fam):	32,515
old CSS (and fam):	7118
SUBTOTAL:	39,633
TOTAL (with deps):	260,885

refactor dependencies: 1 (Vocabulary)

---	~# lines of code
refactor JS:	621
refactor CSS:	369
refactor HTML:	811
SUBTOTAL:	1801
TOTAL (with deps):	4535

• removed 31,894 lines from core JS
• removed 250,412 lines from JS core + deps
• old JS (and fam): ~32,515 | refactor JS: ~621 | ~98.1% reduction in JavaScript
• old core: ~39,633 | refactor core: ~1801 | ~95.45% reduction in core codebase
• (old core + deps): ~260,885 | refactor (core + deps): ~4535 | ~98.26% reduction in core codebase + deps
• overall code footprint is now 57.52 times smaller!
  • 🌍 If the refactored codebase's footprint was Earth, then old codebase's footprint would be Neptune, since Neptune's volume is 58 times larger than Earth (meaning you could fit 58 Earths within Neptune).

Note: most of the above metrics were gathered originally via the following commands in the correct directories:

find . -name '*.js' | xargs wc -l
find . -name '*.json' | xargs wc -l
find . -name '*.vue' | xargs wc -l
find . -name '*.css' | xargs wc -l
find . -name '*.scss' | xargs wc -l
find . -name '*.sass' | xargs wc -l
find . -name '*.html' | xargs wc -l

Technical details

• tool contents are dynamically pulled via JS through the use of <template> elements
• marking formats are dynamically pulled via JS through the use of JS string interpolation and <template> elements
• overall approach can introduce more Web Component abstraction behavior, including binding all marking formats to only <template>
• styling .css markup is bound to the chooser-page context and intended to be utilzied as an @layer @import within downstream implementation alongside and dependent upon vocabulary
• JS is broken up into relevantly named functions that control everything from stepper flow, recommendation rendering, to marking format rendering; relevant watchers are then set to update state when changes happen within certain elements. When updates occur the rawStatePaths are compared to the current state to verify if a tool has been matched, if so the relevant tool is recommended, if not the tool remains set to unknown
• There is now a default prompt indicating fields have not been completed yet.
• The form's dynamic behavior provides recommendations when conditions are met, which means the form needs no formal submission or "done" button action
• Users can now more easily move backwards in the stepper flow, or change their license selections, with less steps and less friction.
• Important fieldsets for those unfamiliar with the tools, which need help choosing, are now required prior to a tool recommendation; these include the checkbox fields asserting users are aware of what they are doing prior to utilizing the tool.
• the tabbed interface now relies upon <details> and <summary, rather than more bespoke UI/UX. This comes with a lot of given affordances that don't need to be implicitly set.
• The help section has been moved to a more semantic location, that is also more visually helpful to a user during "unknown" and "default" states.
• the help section has been modified to utilize <details> and <summary> elements, rather than non semantic, non accessible "links" which open popup modals.
• A variety of improvements for smaller viewports, making the interface more compact, and more usable where possible
• fields have better defaults, marking formats carry defaults over to give clearer indication of their purpose and rendering.
• Tool recommendation has clearer wording to indicate that it is a recommendation
• Tool recommendation has UX improvements to allow the design to better stand out, and increase clarity and contrast between itself and the marking section
• the marking section has had its semantics updated to be a child of the tool recommendation, rather than a sibling showing a better relationship between the two.
• Chooser can be embedded within vocabulary-theme, which removes the need to update the global header or global footer components anymore, it will instead inherit from the theme itself as changes are dynamically made within WordPress
• refines stepper copy to more smoothly move through steps with less repetition, increasing clarity
• provides a default pathway initially, user can change, but reduces friction for returning users who don't need help.
• utilizes .svgs where feasible within interface
• tool icons within marking formats now all pull from the correct mirrors.creativecommons.org address (in the old chooser some formats pull from the chooser's codebase instead)
• use of user facing language of license has been converted more generally to tool wherever feasible, same with codebase.
• transition away from the use of scss/sass, move to native non-compiled CSS and utilize more current supported features

Screenshots

🖼 default state

🖼 license rec state - don't need help

🖼 CC0 rec state - don't need help

🖼 license rec state - need help

🖼 need help section - open

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[possumbilities]

Note: Checks will fail as the new chooser doesn't include the older workflows tied to npm

[TimidRobot]

@possumbilities this may also interest you:

scc

boyter/scc: Sloc, Cloc and Code: scc is a very fast accurate code counter with complexity calculations and COCOMO estimates written in pure Go

command:

scc --no-duplicates --dryness

old / main output

───────────────────────────────────────────────────────────────────────────────
Language                 Files     Lines   Blanks  Comments     Code Complexity
───────────────────────────────────────────────────────────────────────────────
SVG                         51       956       97       154      705          0
(ULOC)                               381
-------------------------------------------------------------------------------
JavaScript                  37      3416      288       361     2767        150
(ULOC)                              1714
-------------------------------------------------------------------------------
Vue                         26      3238      128       107     3003         59
(ULOC)                              1842
-------------------------------------------------------------------------------
CSS                          7      3389      735       490     2164          0
(ULOC)                              1190
-------------------------------------------------------------------------------
JSON                         6       830        0         0      830          0
(ULOC)                               671
-------------------------------------------------------------------------------
Markdown                     4       403      137         0      266          0
(ULOC)                               215
-------------------------------------------------------------------------------
YAML                         3        78       11        13       54          0
(ULOC)                                64
-------------------------------------------------------------------------------
HTML                         2        32        0         1       31          0
(ULOC)                                32
-------------------------------------------------------------------------------
License                      2       360       62         0      298          0
(ULOC)                               298
-------------------------------------------------------------------------------
Dockerfile                   1        19        5         9        5          0
(ULOC)                                15
-------------------------------------------------------------------------------
Plain Text                   1         2        0         0        2          0
(ULOC)                                 2
-------------------------------------------------------------------------------
Sass                         1       346       65        17      264          0
(ULOC)                               202
-------------------------------------------------------------------------------
Shell                        1        23        4         1       18          0
(ULOC)                                18
───────────────────────────────────────────────────────────────────────────────
Total                      142     13092     1532      1153    10407        209
───────────────────────────────────────────────────────────────────────────────
Unique Lines of Code (ULOC)         6435
DRYness %                           0.49
───────────────────────────────────────────────────────────────────────────────
Estimated Cost to Develop (organic) $316,072
Estimated Schedule Effort (organic) 8.88 months
Estimated People Required (organic) 3.16
───────────────────────────────────────────────────────────────────────────────
Processed 2498165 bytes, 2.498 megabytes (SI)
───────────────────────────────────────────────────────────────────────────────

new / refactor

───────────────────────────────────────────────────────────────────────────────
Language                 Files     Lines   Blanks  Comments     Code Complexity
───────────────────────────────────────────────────────────────────────────────
SVG                         51       963       96       155      712          0
(ULOC)                               387
-------------------------------------------------------------------------------
CSS                          4      3071      622       321     2128          0
(ULOC)                              1177
-------------------------------------------------------------------------------
JavaScript                   2       653      159        97      397         94
(ULOC)                               376
-------------------------------------------------------------------------------
Markdown                     2        81       33         0       48          0
(ULOC)                                49
-------------------------------------------------------------------------------
HTML                         1       811      161        26      624          0
(ULOC)                               355
-------------------------------------------------------------------------------
JSON                         1         1        0         0        1          0
(ULOC)                                 1
-------------------------------------------------------------------------------
License                      1        21        4         0       17          0
(ULOC)                                18
-------------------------------------------------------------------------------
YAML                         1         8        0         4        4          0
(ULOC)                                 8
───────────────────────────────────────────────────────────────────────────────
Total                       63      5609     1075       603     3931         94
───────────────────────────────────────────────────────────────────────────────
Unique Lines of Code (ULOC)         2357
DRYness %                           0.42
───────────────────────────────────────────────────────────────────────────────
Estimated Cost to Develop (organic) $113,716
Estimated Schedule Effort (organic) 6.02 months
Estimated People Required (organic) 1.68
───────────────────────────────────────────────────────────────────────────────
Processed 482292 bytes, 0.482 megabytes (SI)
───────────────────────────────────────────────────────────────────────────────

[TimidRobot]

really great work, thank you!

[possumbilities]

@TimidRobot Oh! That's handy!

[possumbilities]

It seems that this also resolved #590 (it was in the wrong repo, and applied to the Beta Chooser).