Create Google App

Clone this repository and/or use it as a template for a website.

• The documentation/ guidelines shows how to install, setup and publish it on Google Play.

Package

This repo can be downloaded or installed as a package. I am using this package in PWA Starter App, and all my other apps on Google Play.

Futures

100% Healt Score	Lighthouse => 99.6%

1. 100% Health Score with ahrefs website-checker:¹
2. 100% in Accessibility, Best Practices, SEO and PWA (Progressive Web App) on Lighthouse-report. 98% on Performance. Total 99.6%.²

Full search functionality

3. Full search functionality with use of pagefind. (Not in offline-mode)³
4. window.find()-function is used to continue searching in a article. (Not in Edge.)⁴

Style and icons

5. Accordion style, all collapsed on start with better overview of content.⁵
6. Advanced catalog or index to see the structure of the content in a hierarchy or graphical map.⁶
7. Offline icons, nuxt-svgo.⁷

Helpers (functions/methods)

8. Providing helpers to all my functionalities (methods).⁸
9. WebNotification can be used in this package to send msg to the user.⁹
10. Typescript checker in developer-mode (vue-tsc).¹⁰
11. Images in content is copied to public folder trough the "copy-images-files"-module. (Have to be done because of an nuxt-content-issue).¹¹

Arrangement for PWA

12. Privacy policy statement with route, ready to be used on Google Play Store.¹²
13. @vite-pwa/nuxt is setting up the PWA. Manifest is loaded trough the settings in nuxt.config.¹³
14. BubbleWrap guide. See assets/guide. Required to be read.¹⁴
15. Hosted on Vercel.¹⁵

Extra Futures

16. Caching in dev-mode: Run rss-sitemap.bat after build or generate.[16]
17. Vercel Analytics, can be used when hosted on vercel.¹⁶
18. Verification of ownership with google-site-verification-file in public-folder, and code in .env-file.¹⁷
19. GitHub-Comments, giscus.¹⁸

To do-list (plan)

• Add Translate option.
• Add nuxt/ui or/and add dark-light-theme-toggle.

License

MIT

Updated 21.11.2023

Footnotes

1. Prov from 02.11.2023 - version 1.0.1-rc.15. ↩

2. ((4 x 100)% + 98)%/5 = 99.6%. ↩

3. The bundle that is used for searching is normally created on generate. If you are using .playground (and want to test it there), you can use this command to create the bundle: - npx -y pagefind --site .output/public --output-path public/_pagefind. - Maybe you need to change --site .output/public to --site ../.output/public. NB! Offline-search ins't available. ↩

4. The style and the find-next-btn isn't good, and this "add-on" search-functionality isn't working in Edge, only on Chrome and on Phones. ↩

5. Most of the accordion functions are from BlogiNote. - style.css is added in assets-folder with style for the accordions. - All headers is collapsed and the Catalog (Table of contents) is closed on load, except; - The headers is not collapsed when using the search-functionality. ↩

6. Four packages from d3 is making this possibly. Which ones? See the package.json. ↩

7. All icons are downloaded and saved in assets/icons-folder. Don't try to use nuxt-icons, it will not work for layer 2. ↩

8. Most of my functions and methods are located in plugin-folder as helpers, and other is located in the utils-folder. ↩

9. If the notifications don't shows, changed the settings. Add the sites url in the allow-settings. - In Chrome: chrome://settings/content/notifications - In Edge: edge://settings/content/notifications ↩

10. Typescript-issues in my base theme (BlogiNote)-files are fixed and javascript is converted to typescript. ↩

11. Needs to be there because of issues in nuxt-content. The inspiration for the module is this package. ↩

12. Privacy is mandatory for all Google Apps (and therefore needed in my apps). - privacy.txt.ts is added in server/routes-folder, and privacy.txt is added to public-folder. ↩

13. PWA is the first step on the way to Google Store. Remember to host your site (vercel). Se more in pkt 15 below. ↩

14. Bubblewrap has to be used to create the aab-package before uploading it to Google Play Store. - Bubblewrap are installed Globally on the local mashine, for use on development, because; - I'm using bubblewrap in a subfolder under the root, because the bubblewrap are creating so many files that have to be keeped away from the github-repo-files. - Guide-folder with links and info about using bubblewrap is added inside the assets-folder. - bubblewrap-folder is added to .gitignore-file. Read more. ↩

15. All public repos on github can be hosted on vercel for free. ↩

16. Vercel Analytics don't use cookies and this app isn't using cookies at all, therefore it's not need for a plugin that pop up with a question if you accept cookies. See the doc. ↩

17. google.site-verification-file (or code) is necessary for indexing the pages in google-search-console, before Ahrefs website-checker can be used. Read more. ↩

18. Added in version 1.0.1 as component with @giscus/vue. The repo-id etc. have to be set in app.config.ts. The following regeg pattern have to be added to navigateFallbackDenylist: /^\/.*\\?giscus=.*/, to get it works properly. ↩