Set up Cypress with a single initial test, which loads the page.

• test that the page loads
• run tests during deployment workflow
• run tests on PRs
• run tests during release workflow

Add attribution details to readme.

Add package.json and initialize the npm project.

Add a badge to the readme for passing build / deployment.

• contact Zenodo about reenabling repo
• set up Zenodo
• add badge to readme
• add Zenodo DOI to attribution in readme

Add a pull request template.

Describe the solution you'd like
It would be great if the user could keep track of which utterances have been used as examples in various publications, with a counter they increment each time they use it.

Create a notification system that allows dismissable messages. Notifications should persist until dismissed.

Add a Home page. The Home page should be contained within the app shell by default, and be shown when the page loads.

• Cache all assets for the app when the service worker installs.
• Fetch a generated JSON file of assets to cache.

Lifecycle

• install: This is typically where you cache files.
• activate: This is typically where you clean up the cache. Skip waiting when you're done.
• fetch: Return response from cache, falling back to network. Cache the network response.
• You don't need to do an immediate claim during activation. This only matters on the very first load.

Resources

• https://serviceworke.rs/json-cache_service-worker_doc.html
• https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
• https://www.oreilly.com/library/view/building-progressive-web/9781491961643/ch04.html

Add an app banner at the top of the page.

• add an ARIA live region in the HTML
• add an announce() method to App

We can't test this for now, but we should remember to test that the text content of the ARIA live region updates on page changes later (assuming this is possible with Cypress; it might not be because the ARIA live region is hidden).

Existing Code

• https://github.com/digitallinguistics/app-old/blob/3726e8f19e5f6d054ae48ae8c5fac931be91d684/src/app/App.js#L112-L118
• https://github.com/digitallinguistics/app-old/blob/3726e8f19e5f6d054ae48ae8c5fac931be91d684/src/index.html#L129-L130

Resources

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
• https://rishabhsrao.medium.com/aria-live-regions-6cc96e1a8b72
• https://timwright.org/blog/2017/02/18/using-aria-live-regions/

This can only be a redirect to app.digitallinguistics.io, however, since otherwise you risk storing data on two different subdomains.

Add test for outdated copyright year in license and readme.

Clear out issues from old repo, creating new issues in this one as you go.

• deleted issues
• open issues
• project cards

Add a favicon. It should adjust its color based on the background.

• manifest (#28)
• app icon (#29)
• service worker (#30)

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started

Add a CONTRIBUTING.md file.

Create a Page view, which is an instance of the View class, but which renders by finding its element on instantiation.

When a new page renders, the focus should shift to the <main> element for accessibility.

Add a test for this to the app shell tests, if possible.

Render the Home page with a Coming Soon! placeholder.

The text to use is below. The "Coming soon!" can be an <h2> (since the "Lotus" title is the <h1>), and the rest can be in several <p> tags. For now, don't add any stylesheet for this - just use the default browser styles.

Coming soon!

The Lotus app is a tool for linguists to manage their linguistic data, including lexicons, texts, and cognate sets. Keep checking back for updates!

Learn more about the Digital Linguistics project here!

Follow Digital Linguistics on Twitter!

All database objects should have a dateModified property. If the Model class is instantiated without a dateModified property, the property should be added.

This property should be updated in the Database layer.

Create a build script that builds the app to the /dist folder.

Add GitHub issue count to readme.

Set up ESBuild. This is primarily a JavaScript bundler, but it also transpiles code, making Babel unnecessary for this project.

Add a button to install the app to the Home page.

https://web.dev/promote-install/
https://web.dev/define-install-strategy/
https://web.dev/customize-install/

Also show them a post-install message about how to access the app.

Install the Lotus App

Did you know that you can install the Lotus app on your computer? It works completely offline, without needing to open a browser. Click the Install button below.

Add license badge to readme.

add Facebook and Twitter meta tags

Add a service worker that runs the app offline.

Add GitHub stars to readme.

Add a PNG version of the app icon.

Deployment to Azure should only happen on tagged releases.

Add app manifest.

Add skip link for main content.

• Lotus icon should be centered (probably needs absolute positioning)
• banner should be sticky
• banner should be blue

Create developer documentation and deploy it to developer.digitalinguistics.io/app.

This should primarily document the App object, the structure of the HTML, and the structure of the CSS. In essence, it should describe the environment / API that developers have at their disposal.

Add the App controller. For the time being all this will do is export a no-op App class. Then, in the app shell (index.html), import this module and instantiate a new app object, storing it to window.app.

• App.js should be located in src/app/.
• Include JSDoc comments documenting the app object (see old App.js code below, specifically lines 1-3 and 17-22).
• For now, this won't be an instance of the View class (we'll add that later).
• No new tests are necessary for this change.

See the old code for guidance:

• https://github.com/digitallinguistics/app-old/blob/master/src/app/App.js
• https://github.com/digitallinguistics/app-old/blob/master/src/index.html

Add an app icon.

Deploy developer docs to GitHub Pages.

• set up SVG sprite creation tool
• buildSVG.js
• include SVG sprite in app shell using a partial
  • All sprites will be located in the app shell for the time being.
• use an SVG sprite for the Lotus icon
• document location of SVG sprites in HTML
• document build process for SVG
• add note about icon sources (Flaticon, Feather Icons)

https://www.npmjs.com/package/svgstore
https://github.com/mrmlnc/svg2sprite
https://github.com/digitallinguistics/digitallinguistics.io/blob/master/build/buildSVG.js

Create the app shell, with an empty <body>.

Change danielhieber.com > danielhieber.info.

Assign labels to any open issues.

Organize issue labels.

Compile all HTML for the app shell.

Set up ESLint.

Set up Stylelint for linting CSS.

Set up a pattern library.

Set up Bulma.

Add documentation for maintainers.

• branching workflow
• deployment workflow
• release workflow
• targeted browsers