diff --git a/app.config.ts b/app.config.ts index 65cfd5d..1210bf5 100644 --- a/app.config.ts +++ b/app.config.ts @@ -7,9 +7,9 @@ export default defineAppConfig({ version: pkg.version, description: pkg.description, homepage: pkg.homepage, - logo: '/img/svg/text-logo.svg' + logo: 'Kyrie Eleison' }, - menu: { btn: 'Google' }, + menu: { btn: 'Blog' }, author: pkg.author, email: 'jur.eleison@gmail.com', avatar: '/img/svg/avatar.svg', @@ -17,9 +17,9 @@ export default defineAppConfig({ assetTypes: [], giscus: { repo: 'lovkyndig/pwa-starter-app', - repoId: 'R_kgDOKmGHzA', + repoId: 'R_kgDOKuIfCwR_kgDOKuIfCwR_kgDOKuIfCw', category: 'Comments', - categoryId: 'DIC_kwDOKmGHzM4Cavwl', + categoryId: 'DIC_kwDOKuIfC84Ca_5_', mapping: 'url', reactionsEnabled: '1', emitMetadata: '0', diff --git a/content/1.about.md b/content/1.about.md index 53a1954..264afbe 100644 --- a/content/1.about.md +++ b/content/1.about.md @@ -3,23 +3,30 @@ head.description: 'I am using this starter kit to hold all my apps that I have o --- # About PWA Starter App -:MdcHeader{ line1="Welcome to PWA Starter App!" line2="line2" } +:MdcHeader{ line1="I'm a PWA Starter App" line2="and a layer two template" line3="based on Create Google App" line4="simplify the app-building"} ::TabGroup ::::TabItem{name="Why?"} -I'm using it as a starter kit, because I want the same theme in all my apps, and fokus on the content when I'm writing content. +I'm using this as a starter kit, because I want the same theme in all my apps, and fokus on the content when I'm writing content. Maybe the most important thing is that the content on my pages is heavy (and serious) - and its about words, not pictures or videos. -When it takes about on hour to read only one article, you need the futrues in this repo with search-functionalities and collapseble accordions, and a amazing catalog with overview of the content.[^1] +When it takes about on hour to read only one article, you need the futures in this repo; +- with search-functionalities, +- collapseble accordions, +- and a amazing catalog with overview of the content.[^1] :::: -::::TabItem{name="Content"} -All the _articles_ in the _content_-folder is a copy of the content in one of my other apps; [Create Google App](https://github.com/lovkyndig/create-google-app){:target="_blank" .text-blue-500 .hover:text-blue-600 .transition-colors .duration-300}. +::::TabItem{name="Layer1 and 2"} +This layer 2 have only one package that this app is created from: [Create Google App](https://github.com/lovkyndig/create-google-app){:target="_blank" .text-blue-500 .hover:text-blue-600 .transition-colors .duration-300}. + +The parent them "Create Google App" is the layer1, who holds all the css, javascript, plugins etc. etc. + +If you want to focus on the content, this template givs the oportunity to that. :::: ::::TabItem{name="Support?"} -If you are a new in this games, please ask me questions! Write a [question](https://github.com/lovkyndig/pwa-starter-app/discussions/categories/q-a){:target="_blank" .text-blue-500 .hover:text-blue-600 .transition-colors .duration-300}, or a comment below. Then I will get in touch as soon I get the message. +If you are new in this games, please ask me questions! Write a [question](https://github.com/lovkyndig/pwa-starter-app/discussions/categories/q-a){:target="_blank" .text-blue-500 .hover:text-blue-600 .transition-colors .duration-300}, or a comment below. Then I will get in touch as soon I get the message. :::: :: diff --git a/content/1.article/1.intro.md b/content/1.article/1.intro.md index 6318a4f..c6240b4 100644 --- a/content/1.article/1.intro.md +++ b/content/1.article/1.intro.md @@ -1,49 +1,55 @@ --- articleType: note -head.title: How to Create Google App? -created: 2023-10-10 -updated: 2023-11-03 +head.title: How to use this PWA Starter App? +created: 2023-11-16 +updated: 2023-11-16 tags: - Overview --- -# How to become a google app developer? -In this tutorial you will learn to create an app and publish it; first as as an homepage, and then on Google Play Store, in less than one week. The tutorial is split in to foure step. +# How to use this PWA Starter App? +The easiest wat is to install it as a template from [GitHub](https://github.com/lovkyndig/pwa-starter-app), and then create the content in markdown-format. Thats it. Don't thing about html, css and javascript. -## Install and Setup -The goal on this **first step** is to install the _template_-package on our local machine. +## Ordinary Install +```bash +# Change yarn with "npm", "npmn" or wathever you want +yarn install +``` -If you are already familiar with GitHub, then you can download this app, install the packages and get a local _copy_ of it on your local machine in 10 minutes. +## Use this template +![How to Use this template to install this theme from GitHub?](./use-this-template.webp "How to Use this template to install this theme from GitHub?") -Is that's the case you can jump to the last step about Using [bubblewrap](/article/create-and-upload/create-app/bubblewrap) and [Google Play Console](/article/create-and-upload/upload-app/play-console). +Well, here you see a screen-clip of the screen you have to find to do it. [Here is the link](https://github.com/lovkyndig/pwa-starter-app) -But still, if you have downloaded packages that stands on its own feet, be aware of that this package is also a template. In this tutorial we will try to help people that have no programming skills, therefore we will use the template (then you get better owerview - of the content). +## Content and config-files +The `md`-content and the constants in `app.config`and `nuxt.config` is all that need to be changed to create a new website or app. -The first step (for non-developers) is to [create GitHub-account](https://github.com/join){:target="_blank"}.[^1] +### Content +The content is written in markdown (md) format. All files in the `content`-folder. -### Setup and install -Download or clone the repo. Read more about it in [Setup and install](/article/setup-and-deploy/setup/setup-and-install) +### app.config +The `app.config`- holds all the constants. Change them like you want. -## Content and config -The goal in this **second step** is to have our own content in markdown-format. Read about it in [Content and config](/article/setup-and-deploy/content/content-and-config) +`App.config` is a copy of the same file in layer 1 _Create Google App_. -## GitHub and Vercel -In **this third step** the goal is to push the repo on our local machine out to GitHub and connect it to Vercel. Read about it in [GitHub and Vercel](/article/setup-and-deploy/deploy/github-and-vercel) +### nuxt.config +`nuxt.config` holds only the **runtimeConfig**-constants. -### Verification and Analytics -After deploying the GitHub-repo to Vercel we can verify our ownership in [Google Search Console](/article/setup-and-deploy/deploy/verification-and-analytics#google-search-console) and connect to [Vercel Analytics](/article/setup-and-deploy/deploy/verification-and-analytics#vercel-analytics). +## Images +Well, don't forget to change all the images in the `public/pwa`-folder. -## Create and upload app -The goal in **this last step** is to publish an app on `Google App Store`. +All the images in the `content`-folder is cloned and inserted automatic in the `public`-folder, on `dev`-command. -If you already are a open-source-programmer and familiar with github and deploying repos on _vercel_, you can skip the step abowe and jump right to this step (as said above). +## manifest.webmanifest +This file holds all the info for the PWA. Changes all text and images. Here you see what size your pwa-images has to have. -This step have two substep: -1. [Using bubblewrap](/article/create-and-upload/create-app/bubblewrap) -2. [Google App Console](/article/create-and-upload/upload-app/play-console) +## Privacy policy +Don't forget to change the names in the `privacy policy`. -## Note -[^1]: Not necessary on this time in the tutorial, but the best time to do it. So please return to the tutorial, after the creating;) +## rss and sitemap +Rss and sitemap is created on build or generate. + +Copy them from the `build`-folders and put them inside `public`-folder. \ No newline at end of file diff --git a/content/1.article/2.catechism/3.the-creed.md b/content/1.article/2.catechism/3.the-creed.md new file mode 100644 index 0000000..1731ccd --- /dev/null +++ b/content/1.article/2.catechism/3.the-creed.md @@ -0,0 +1,26 @@ +--- +series: 5.parts +articleType: note +showTime: false +showOutdatedWarning: false +created: 2023-11-21 +updated: 2023-11-21 +tags: + - 3 Creed +--- + +# The Creed +THE CHIEF ARTICLES OF OUR FAITH + +## The Father +1. I believe in God the Father Almighty, Maker of heaven and earth. + +## The Son +2. And in Jesus Christ, His only Son, our Lord; who was conceived by the Holy Ghost, born of the Virgin Mary; suffered under Pontius Pilate, was crucified, dead and buried; He descended into hell; the third day He rose again from the dead; He ascended into heaven, and sitteth on the right hand of God the Father Almighty; from thence He shall come to judge the quick and the dead. + +## The Holy Ghost +3. I believe in the Holy Ghost, the holy Christian Church, the communion of saints, the forgiveness of sins, the resurrection of the body, and the life everlasting. Amen. + + \ No newline at end of file diff --git a/content/1.article/2.catechism/4.the-lords paryer copy 2.md b/content/1.article/2.catechism/4.the-lords paryer copy 2.md new file mode 100644 index 0000000..a7f5f19 --- /dev/null +++ b/content/1.article/2.catechism/4.the-lords paryer copy 2.md @@ -0,0 +1,45 @@ +--- +series: 5.parts +articleType: note +showTime: false +showOutdatedWarning: false +created: 2023-11-22 +updated: 2023-11-22 +tags: + - Lord's Prayer +--- + +# The lord's prayer +THE PRAYER, OR "OUR FATHER," WHICH CHRIST TAUGHT + +Our Father who art in heaven. + +## 1. Hallowed be Thy name. +1. Hallowed be Thy name. + +## 2. Thy kingdom come. +2. Thy kingdom come. + +## 3. Thy will be done on earth as it is in heaven. +3. Thy will be done on earth as it is in heaven. + +## 4. Give us this day our daily bread. +4. Give us this day our daily bread. + +## 5. And forgive us +5. And forgive us our trespasses as we for give those who trespass against us. + +## 6. And lead us not into temptation. +6. And lead us not into temptation. + +## 7. But deliver us from evil. +7. But deliver us from evil. [For Thine is the kingdom and the power and the glory, forever and ever.] Amen. + +## Summa +These are the most necessary parts which one should first learn to repeat word for word, and which our children should be accustomed to recite daily when they arise in the morning, when they sit down to their meals, and when they retire at night; and until they repeat them, they should be given neither food nor drink. Likewise every head of a household is obliged to do the same with respect to his domestics, man-servants and maid-servants, and not to keep them in his house if they do not know these things and are unwilling to learn them. For a person who is so rude and unruly as to be unwilling to learn these things is not to be tolerated; for in these three parts everything that we have in the Scriptures is comprehended in short, plain, and simple terms. For the holy Fathers or apostles (whoever they were) have thus embraced in a summary the doctrine, life, wisdom, and art of Christians, of which they speak and treat, and with which they are occupied. + +Now, when these three parts are apprehended, it behooves a person also to know what to say concerning our Sacraments, which Christ Himself instituted, Baptism and the holy body and blood of Christ, namely, the text which Matthew 28, 19ff and Mark 16, 15f record at the close of their Gospels when Christ said farewell to His disciples and sent them forth. + + \ No newline at end of file diff --git a/content/1.article/2.catechism/5.the-baptism.md b/content/1.article/2.catechism/5.the-baptism.md new file mode 100644 index 0000000..f75f359 --- /dev/null +++ b/content/1.article/2.catechism/5.the-baptism.md @@ -0,0 +1,20 @@ +--- +series: 5.parts +articleType: note +showTime: false +showOutdatedWarning: false +created: 2023-11-23 +updated: 2023-11-23 +tags: + - The Baptism +--- + +# The baptism +Go ye and teach all nations, baptizing them in the name of the Father, and of the Son, and of the Holy Ghost. He that believeth and is baptized shall be saved; but he that believeth not shall be damned. + +## 1 Cor. 11, 23f +So much is sufficient for a simple person to know from the Scriptures concerning Baptism. In like manner, also, concerning the other Sacrament, in short, simple words, namely, the text of St. Paul [1 Cor. 11, 23f ]. + + \ No newline at end of file diff --git a/content/1.article/2.catechism/6.the-sacrament.md b/content/1.article/2.catechism/6.the-sacrament.md new file mode 100644 index 0000000..b5e0e5a --- /dev/null +++ b/content/1.article/2.catechism/6.the-sacrament.md @@ -0,0 +1,30 @@ +--- +series: 5.parts +articleType: note +showTime: false +showOutdatedWarning: false +created: 2023-11-24 +updated: 2023-11-24 +tags: + - The Sacrament +--- + +# The sacrament of the altar +OF THE SACRAMENT (The Lord's Supper) + +## My body +Our Lord Jesus Christ, the same night in which He was betrayed, took bread; and when He had given thanks, He brake it, and gave it to His disciples and said, Take, eat; this is, My body, which is given for you: this do in remembrance of Me. + +## My blood +After the same manner also He took the cup, when He had supped, gave thanks, and gave it to them, saying, Drink ye all of it; this cup is the new testament in My blood, which is shed for you for the remission of sins: this do ye, as oft as ye drink it, in remembrance of Me. + +## Summa +Thus would have, in all, five parts of the entire Christian doctrine which should be constantly treated and required [of children], and heard recited word for word. For you must not rely upon it that the young people will learn and retain these things from the sermon alone. When these parts have been well learned, you may, as a supplement and to fortify them, lay before them also some psalms or hymns, which have been composed on these parts, and thus lead the young into the Scriptures, and make daily progress therein. + +However, it is not enough for them to comprehend and recite these parts according to the words only, but the young people should also be made to attend the preaching, especially during the time which is devoted to the Catechism, that they may hear it explained, and may learn to understand what every part contains, so as to be able to recite it as they have heard it, and, when asked, may give a correct answer, so that the preaching may not be without profit and fruit. For the reason why we exercise such diligence in preaching the Catechism so often is that it may be inculcated on our youth, not in a high and subtile manner, but briefly and with the greatest simplicity, so as to enter the mind readily and be fixed in the memory. + +Therefore we shall now take up the above-mentioned articles one by one and in the plainest manner possible say about them as much as is necessary. + + \ No newline at end of file diff --git a/content/1.article/2.setup-and-deploy/1.setup/2.setup-and-install.md b/content/1.article/2.setup-and-deploy/1.setup/2.setup-and-install.md deleted file mode 100644 index 7e287ab..0000000 --- a/content/1.article/2.setup-and-deploy/1.setup/2.setup-and-install.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -series: setup -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-11 -updated: 2023-10-11 -tags: - - Install ---- - -# Setup and install -*How can we use this nuxt layer as a template and create our own app and publish it on Google App Store? I will tell you everything you need to know, as to a child that never have writed any code in your life.* - -## Setup -If you are a open-cource-developer, you have probably downloaded ant installed some repos from GitHub or GitLab. - -This step is for they who isn't there yet, they who need someone to show them the way. - -### Node -It is requried to install a develper environment on the local mashine. We need the most basic envirnoment, `node`.[^1] - -Download and follow the instruction on the homepage to [node](https://nodejs.org/en/download){:target="_blank"}. - -### CMD - VS Code -Now you are ready to open up the CMD. (Everything that happens in `node` happends in CMD.) - -If you don't know how to use CMD,you should install `Visual Studio Code`. Its necessary to have when we will edit or write code and content (later in this tutorial). -- Visual Studio Code have a window that is called `Terminal`. In this window we can write node-commands and see everything that happens in `node`. Another window showing directories and another showing content of readable files. - -Download Visual Studio Code [here](https://code.visualstudio.com/){:target="_blank"} - -NB! Both `node` and `Visual Studio Code` is totally free, and the tools that are most used by programmers. - -Now we are ready to go on to the install-fase: - -## Download & install -Start with downloading and the install it in the normal way. - -### Download -The easiest way is to download this package as it is. Unzip the downloaded file and copy it to a local _github_-folder. Then you can rename the folder to a name you want as a subdomene to vercel. Check if the name isn't busy. [Read more here about it](/article/setup-and-deploy/deploy/github-and-vercel#check-if-a-subdomene-isnt-busy). - -### Install -_Intro for beginners_ -To install you can open up the VS Code and select `Open Folder` in the `File`, and in this window you can select the folder you want to be parent (dont click **select** yet), rightclick and create a new folder with name _GitHub_ - and then you select _GitHub_ and your copy of my repo in _VS Code_. - -Now you have the possibillity to open the `terminal` and do some node-commands. -First we have to install the dependencies in the package-json-file. - -```bash -# npm (If you haven't installed yarn or pnpm) -npm install -``` - -### Dev-server -```bash -# Test if all is working with: -npm run dev -``` -You will see a similar picture like this, in the terminal: -![Screen Clip of the terminal on the command: npm run dev](./npm-run-dev.webp#60 "Screen Clip of the terminal on the command: npm run dev"){.border-solid .border-4} - -When you are running this dev-command you are starting a node-server that makes it possible to use the browser to look on the website, as it was on a server out on the internet (without internet-connection). - -No you can open your browser and write the following url: -`localhost:3000` -![Image of url to localhost](./localhost3000.webp "Image of url to localhost:3000"){.border-solid .border-4 width="300"} - -Then the website will loads. - -## Installing bubblewrap -There are also one another package we need to install. We don't need it before after the website is published to GitHub and Vercel. - -Please install bubblewrap globally (with the `-g`-word), if you want to create more than this app.[^2] -```bash -# Installing bubblewrap -npm install -g bubblewrap -``` -## Notes - -[^1]: There can be many kinds of environments, depending of what programming-language or framework you want to use. To download and install repos from GitHub we need `node`. - -[^2]: Remember you get lifetime access to _Google Play Console_ for 25 dollar, and think about your first app as a learning-project. - - \ No newline at end of file diff --git a/content/1.article/2.setup-and-deploy/1.setup/localhost3000.webp b/content/1.article/2.setup-and-deploy/1.setup/localhost3000.webp deleted file mode 100644 index e7ad90f..0000000 Binary files a/content/1.article/2.setup-and-deploy/1.setup/localhost3000.webp and /dev/null differ diff --git a/content/1.article/2.setup-and-deploy/1.setup/npm-run-dev.webp b/content/1.article/2.setup-and-deploy/1.setup/npm-run-dev.webp deleted file mode 100644 index 1aaec4a..0000000 Binary files a/content/1.article/2.setup-and-deploy/1.setup/npm-run-dev.webp and /dev/null differ diff --git a/content/1.article/2.setup-and-deploy/2.content/3.content-and-config.md b/content/1.article/2.setup-and-deploy/2.content/3.content-and-config.md deleted file mode 100644 index c8e030a..0000000 --- a/content/1.article/2.setup-and-deploy/2.content/3.content-and-config.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -series: content -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-12 -updated: 2023-10-12 -tags: - - template - - pagefind ---- - -# Content and configuration -Normally it's necessary to know html, css and javascript to build a app. That is not necessary for this app. The only thing you need to learn is markdown-syntax to write your content - almost like you write your content in ms-word or another text-editor. The configuration is a little bit more tricky (but there isn't much we need to do about it). - -## Content -Look on the content in _content_-directory, if there is content. If you are using the template, there shouldn't be any content. Then you can copy/past the content/folder from one of this repos: -- [Create Google App](https://github.com/laywer Kyrie Eleison/create-google-app){:target="_blank"} -- [Nuxt3-pwa-offline](https://github.com/laywer Kyrie Eleison/nuxt3-pwa-offline){:target="_blank"} -- [BlogiNote](https://github.com/benbinbin/bloginote){:target="_blank"} - -The last repo is the best repo with a lot of examples of use in the markdown-files. - -## Template-related topic -*The _app.config_- and _nuxt.config_-file holds the constants and configuration of the app.* - -Change the constants and configurations as you want. - -Please take contact with me if you have problems with this! I will be happy if you allow me to help you. Click my name [`Kyrie Eleison`](mailto:jur.eleison@gmail.com){:target="_blank"} to write e-mail to me. - -Updating this content if I get respond on that it is needed. - -## Pagefind search -The search-functionality on the website is from the `pagefind`-package. - -If you not are using this repo as a template, you have to add `npx pagefind` to the generate-script in package.json, like this: - -```json [package.json] -# Only on updating to a newer version of the app -"scripts": { - "generate": "nuxt generate && npx pagefind" -} -``` - -Read the [`pagefind.yml`](https://github.com/laywer Kyrie Eleison/create-google-app/blob/main/pagefind.yml){:target="_blank"} and [`pagefind.playground.bat`](https://github.com/laywer Kyrie Eleison/create-google-app/blob/main/pagefind.playground.bat){:target="_blank"} [in the root folder](https://github.com/laywer Kyrie Eleison/create-google-app){:target="_blank"} to get knowledge about using pagefind in `.playground`. - - \ No newline at end of file diff --git a/content/1.article/2.setup-and-deploy/3.deploy/4.github-and-vercel.md b/content/1.article/2.setup-and-deploy/3.deploy/4.github-and-vercel.md deleted file mode 100644 index 01279a4..0000000 --- a/content/1.article/2.setup-and-deploy/3.deploy/4.github-and-vercel.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -series: deploy -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-13 -updated: 2023-10-13 -tags: - - github - - vercel ---- - -# GitHub and Vercel -We need to push our local repo to github and then connect it to vercel. Than we have our app published on vercel. If the name you have set for your repo is [my-google-app](https://my-google-app.vercel.app){:target="_blank"}, then you will find your app on internet with that url (if you don't change it manually on vercel): -- "https://my-google-app.vercel.app" - -## GitHub -If your username on github is `super-user`, than I can find you on this url: -- "https://github.com/super-user" - -If you create a repo with name `my-first-repo`, than the url to this repo will be: -- "https://github.com/super-user/my-first-repo" - -## Vercel -The repo-name on vercel well be a subdomene of vercel, like this: -- "my-first-repo.vercel.app" - -If I want my repo to be published on vercel, I normally check if the subdomene isn't used by anyone else. This is how I check it out: - -### Check if a subdomene isn't busy -Write the url you want to have (in the browsers url-field): -- https://iwantthisurl.vercel.app - -If this name isn't busy and used by anyone, you will get a 404-error, like the one in the following picture. -![Error 404: The url dosn't exist! Take it if you want it:)](./404-not-found.webp "Error 404: The url dosn't exist! Take it if you want it:)"){.border-solid .border-4} - -### Connect Vercel to GitHub -Read about how to connect Vercel to your GitHub [here](https://vercel.com/docs/deployments/git/vercel-for-github){:target="_blank"}. - -Normally when you connect your github account to vercel, all pushes to github will be published on vercel as default, as described [here](https://vercel.com/docs/deployments/git/vercel-for-github){:target="_blank"}. - - \ No newline at end of file diff --git a/content/1.article/2.setup-and-deploy/3.deploy/404-not-found.webp b/content/1.article/2.setup-and-deploy/3.deploy/404-not-found.webp deleted file mode 100644 index 570357d..0000000 Binary files a/content/1.article/2.setup-and-deploy/3.deploy/404-not-found.webp and /dev/null differ diff --git a/content/1.article/2.setup-and-deploy/3.deploy/5.verification-and-analytics.md b/content/1.article/2.setup-and-deploy/3.deploy/5.verification-and-analytics.md deleted file mode 100644 index a37b8a6..0000000 --- a/content/1.article/2.setup-and-deploy/3.deploy/5.verification-and-analytics.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -series: deploy -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-14 -updated: 2023-10-14 -tags: - - google - - verification ---- - -# Verification and Analytics -After the first publication on vercel, we have to verify our ownership of the domain. This is requried if we want google know about our website. It maybe not requried to publish the app (I'm not shoure yet). Then we also want to use Vercel Analytics for checking visitors. - -## Google Search Console -The verification process can start when we add our site in Google Search Console. - -There are several ways to verify that we are the owner of the website. -1. Download from Search Console a html-file and put it in the public-directory. -2. Insert a code into the `.env`-file that we we get in the Search Console. - -### About the main method -The google-file to put in public is a html-file, who name starts with "google*" - -This is a easy method, and it's not necessary to use more methods to verify the ownership, but you can: - -### About the alternative method -_Image: This is a capture of the verification screen in `Search Console`_ -![Capture of the second verification method in Google Search Console.](./verification-picture.webp "Capture of the second verification method in Google Search Console."){.border-solid .border-4} - -The problem with (one of) the alternative method, is that we normally put the string key in a `.env`-file. The _.env_file is normally added in the `.gitignore`-file. If that's the case - the _.env_-file will not follow to the vercel-deployment. The solution is to add the code trough the `settings` in our vercel-account, or (not recommended) to remove the line with the _.env_ in the _.gitignore_-file. - -## Vercel Analytics -I have already prepared for use of Vercel Analytics. The only thin we need to do is to start the service on vercel. - -NB! To get Vercel Analytics working there is a **js**-file in the `_vercel`-directory thats need to be in your root directory. - -If _Vercel Analytics_ isn't working, a missing _js_-file can be the answer. Copy it from [here](https://github.com/laywer Kyrie Eleison/create-google-app/blob/main/_vercel/insights/script.js){:target="_blank"}, create the `_vercel/insights`-folders, and put the _js_-file there. - -Try again to go to you project on _vercel.app_ and activate it. See the screen clip below: -![Screen clip about how to activate Vercel Analytics](./vercel-analytics.webp "Screen clip about how to activate Vercel Analytics"){.border-solid .border-4} - - \ No newline at end of file diff --git a/content/1.article/2.setup-and-deploy/3.deploy/vercel-analytics.webp b/content/1.article/2.setup-and-deploy/3.deploy/vercel-analytics.webp deleted file mode 100644 index 2f2ced0..0000000 Binary files a/content/1.article/2.setup-and-deploy/3.deploy/vercel-analytics.webp and /dev/null differ diff --git a/content/1.article/2.setup-and-deploy/3.deploy/verification-picture.webp b/content/1.article/2.setup-and-deploy/3.deploy/verification-picture.webp deleted file mode 100644 index 82ff39f..0000000 Binary files a/content/1.article/2.setup-and-deploy/3.deploy/verification-picture.webp and /dev/null differ diff --git a/content/1.article/3.create-and-upload/4.create-app/6.bubblewrap.md b/content/1.article/3.create-and-upload/4.create-app/6.bubblewrap.md deleted file mode 100644 index d1db829..0000000 --- a/content/1.article/3.create-and-upload/4.create-app/6.bubblewrap.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -series: create-app -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-15 -updated: 2023-10-15 -tags: - - bubblewrap ---- - -# Using bubblewrap -*Bubblewrap is the tool that converts a pwa-homepage into a format that can be uploaded to Google Play Console. Using bubblewrap is very difficult, and on this page we need to focus only on how to install bubblewrap and how to use this tool (to create an aab-file).* - -## Installing bubblewrap -The best way to install bubblewrap is globally, thats the reson it isn't included as a package in this app. Just install it globally with the `-g`-word.[^1] - -## 1.step - init -The first time you use bubblewrap is the most important step. You have to take this step very carefully, don't be in a hurry when you do this step. Write down all the inputs you do, or copy/past the content in the terminal/ cmd (after the bubblewrap-work is done) to a text-file.txt, and keep it in a safe place (for the rest of the apps life). - -```bash -# This will start a big work that you have to take care of everything you input in the prosess. -bubblewrap init --manifest="https://github-repo-name.vercel.app/manifest.webmanifest" --directory="bubblewrap -``` - -Instead of writing this on the command line, in the root, you will be guided if you run this command: - -```bash -create-app -# OR -./create-app.bat -# The last one if you jusing Git Bash or not windows cmd. -``` - -::TipBox{type="warning" name="Never again"} -Never do this step again in this app. - -Well, there is a solution if you don't have uploaded the bundle to _Google Play Console_. Then you can just delete the folder and start ower again. - -If you have upladed the _aab_-bundle to _Google Play Console_: -You can never delete an app from the _Console_ - so the only solution is to not transfer it to _production_, and create a new app (with another name). -:: - -## 2.step - build -After the init is done, there is only two commands. Take it easy with the second step. If you get problems, read the _info_-box below. - -```bash -# This commands is needed also when updating -cd bubblewrap -# Here comes a command that is needed when updating (look below). -bubblewrap build -``` - -::TipBox{type="info" name="If problems"} -If you want to create a new bundle, you can't do it IF you have published the _bundle_ to _Google Play Console_. - -You can never delete an app from the _Console_. One solution is not to transfer it to _production_, copy what you have done and start with a new app. - -There is a solution if you don't have uploaded the bundle to _Google Play Console_. Then you can just delete the _bubblewrap_-folder and start ower again (with init). -:: - -Read more about using bubblewrap in this sources: -- [GoogleChromeLabs](https://github.com/GoogleChromeLabs/bubblewrap/blob/main/packages/cli/README.md){:target="_blank"} -- [PWA in Play](https://developers.google.com/codelabs/pwa-in-play#1){:target="_blank"} -- [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/){:target="_blank"} -- [Mikael Sukoinen](https://vaadin.com/blog/submitting-a-pwa-to-google-play-store-using-bubblewrap){:target="_blank"} - -## 3.step - updating -Note.[^2] - -```bash -# Only on updating to a newer version of the app -cd bubblewrap -bubblewrap update -bubblewrap build -``` - -## Notes -[^1]: `npm install -g bubblewrap`. See the last chapter in the _setup_-page for [more info](/article/setup-and-deploy/setup/setup-and-install). -[^2]: This step is coming when you will update your app to a newer version. Its normally taks a while to you need to update your app, but when you need - you can't if you don't remember EVERY input you did, in the first step. - - \ No newline at end of file diff --git a/content/1.article/3.create-and-upload/5.upload-app/7.play-console.md b/content/1.article/3.create-and-upload/5.upload-app/7.play-console.md deleted file mode 100644 index c276621..0000000 --- a/content/1.article/3.create-and-upload/5.upload-app/7.play-console.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -series: upload-app -articleType: note -showTime: false -showOutdatedWarning: false -created: 2023-10-16 -updated: 2023-10-16 -tags: - - github - - vercel ---- - -# Google Play Console -When we have created the app with bubblewrap, then we can go on to `Goole Play console`. You need an google account to get access to the Play Console. Be aware of that publishing apps isn't totally free. To get lifetime access, you have to pay 25 dollar. Then you can publish apps the rest of your life, without paying anything. It's everything or nothing. - -## The Play Console -_Image: Here we se a minimal screen clip of the console:_ -![Screen clip of the top of the _Google Search Console_](./google-play-console.webp "Screen clip of the top of the Google Search Console"){.border-solid .border-4} - -When you have deside a name of the app, its just to start adding the app. Google will try to guide you trough the prosess. - -Here is the first screen you should find and start with (screen clip): -![Screen clip from _Google Search Console_ of how to _set up your app_](./set-up-your-app.webp "Screen clip from _Google Search Console_ of how to _set up your app_ "){.border-solid .border-4} - -## Images -If all the images in the manifest is inserted, you can take from this images and insert into _Play Console_, except one picture. The size of this one is 1024x500. - -The format is png or jpg. Play Console dosn't allow other formats of any images. - -## Send to review -Google will guide you trough the prosess, and when all is done you have to send everything to Google to review. The review-prosess will take about 7 days. - -## Problems? -This guidelines is written to guide me, and there is a lot more that need to be said to people with less experience and knowledge than me. - -Please take contact with me if you have problem. I will be happe to help you. - -Click my name [`Kyrie Eleison`](mailto:jur.eleison@gmail.com){:target="_blank"} to write e-mail to me. - - \ No newline at end of file diff --git a/content/1.article/3.create-and-upload/5.upload-app/google-play-console.webp b/content/1.article/3.create-and-upload/5.upload-app/google-play-console.webp deleted file mode 100644 index 197208d..0000000 Binary files a/content/1.article/3.create-and-upload/5.upload-app/google-play-console.webp and /dev/null differ diff --git a/content/1.article/3.create-and-upload/5.upload-app/set-up-your-app.webp b/content/1.article/3.create-and-upload/5.upload-app/set-up-your-app.webp deleted file mode 100644 index a0df95e..0000000 Binary files a/content/1.article/3.create-and-upload/5.upload-app/set-up-your-app.webp and /dev/null differ diff --git a/content/1.article/use-this-template.webp b/content/1.article/use-this-template.webp new file mode 100644 index 0000000..be6613b Binary files /dev/null and b/content/1.article/use-this-template.webp differ diff --git a/package.json b/package.json index 8c545c8..eb1caf0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lovkyndig/pwa-starter-app", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.2", "description": "This repo is used as starter for all new apps of Kyrie Eleison, published on Google App Store.", "homepage": "https://pwa-starter-app.vercel.app", "author": "Kyrie Eleison", diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index e592cc7..dee825c 100644 --- a/public/manifest.webmanifest +++ b/public/manifest.webmanifest @@ -144,29 +144,6 @@ "label": "Article wide" } ], - "shortcuts": [ - { - "name": "About the app", - "short_name": "About", - "description": "About this amazing app", - "url": "/about", - "icons": [{ "src": "/pwa/shortcuts/about.png", "sizes": "96x96" }] - }, - { - "name": "Privacy Policy", - "short_name": "Privacy", - "description": "Privacy Statement", - "url": "/privacy", - "icons": [{ "src": "/pwa/shortcuts/privacy.png", "sizes": "96x96" }] - }, - { - "name": "Content-list", - "short_name": "List", - "description": "List of the content", - "url": "/list", - "icons": [{ "src": "/pwa/shortcuts/list.png", "sizes": "96x96" }] - } - ], "id": "/", "scope": "/", "lang": "en",