|
1 | | - [](https://codecov.io/gh/internetarchive/iaux-typescript-wc-template) |
| 1 | +@@ -1,144 +1,17 @@ |
| 2 | + [](https://codecov.io/gh/internetarchive/iaux-monthly-giving-circle) |
2 | 3 |
|
3 | | -# Internet Archive Typescript WebComponent Template |
| 4 | +# \<iaux-monthly-giving-circle> |
4 | 5 |
|
5 | | -This is a base template for creating Typescript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities. |
| 6 | +The Internet Archive monthly donation management, web components. |
6 | 7 |
|
7 | | -## Usage |
8 | | - |
9 | | -1. Click the "Use this Template" button in GitHub to create a new repository based on this one. |
10 | | -2. Clone your new repo and update the things below: |
11 | | - |
12 | | -### Things to update in your copy |
13 | | -1. Remove this section |
14 | | -2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated. |
15 | | -3. `README.md` (this file). Update the readme in general, but also the badge URLs |
16 | | -4. `package.json` Update the name and description |
17 | | -5. Rename the `your-webcomponent.ts` and its associated `.test` file |
18 | | - |
19 | | -## Local Demo with `web-dev-server` |
20 | | -```bash |
21 | | -yarn start |
22 | | -``` |
23 | | -To run a local development server that serves the basic demo located in `demo/index.html` |
24 | | - |
25 | | -## Testing with Web Test Runner |
26 | | -To run the suite of Web Test Runner tests, run |
27 | | -```bash |
28 | | -yarn run test |
29 | | -``` |
30 | | - |
31 | | -To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run |
32 | | - |
33 | | -```bash |
34 | | -yarn run test:watch |
35 | | -``` |
36 | | - |
37 | | -## Linting with ESLint, Prettier, and Types |
38 | | -To scan the project for linting errors, run |
39 | | -```bash |
40 | | -yarn run lint |
41 | | -``` |
42 | | - |
43 | | -You can lint with ESLint and Prettier individually as well |
44 | | -```bash |
45 | | -yarn run lint:eslint |
46 | | -``` |
| 8 | +## Installation |
47 | 9 | ```bash |
48 | | -yarn run lint:prettier |
| 10 | +npm i @internetarchive/donation-monthly-portal |
49 | 11 | ``` |
50 | 12 |
|
51 | | -To automatically fix many linting errors, run |
52 | | -```bash |
53 | | -yarn run format |
| 13 | +## Usage |
| 14 | +```html |
| 15 | +please see demo. |
54 | 16 | ``` |
55 | 17 |
|
56 | | -You can format using ESLint and Prettier individually as well |
57 | 18 | ```bash |
58 | | -yarn run format:eslint |
59 | | -``` |
60 | | -```bash |
61 | | -yarn run format:prettier |
62 | | -``` |
63 | | - |
64 | | -## Tooling configs |
65 | | - |
66 | | -For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project. |
67 | | - |
68 | | -If you customize the configuration a lot, you can consider moving them to individual files. |
69 | | - |
70 | | -### Add Codecov |
71 | | -- after forking, add your repo to the authorized codecov list: `https://github.com/organizations/internetarchive/settings/installations/1268216` |
72 | | -- then, go to the badge maker page for your repo: `https://app.codecov.io/gh/internetarchive/<repo-name>/settings/badge` |
73 | | -- copy link & paste into top of README.md |
74 | | - |
75 | | -## Steps to setup `gh-pages` static site generator |
76 | | - |
77 | | -Let's start with creating a `gh-pages` branch. |
78 | | - |
79 | | -This branch is where Github will look for the `index.html` to be hosted |
80 | | - |
81 | | -``` |
82 | | -git checkout --orphan gh-pages |
83 | | -git reset --hard |
84 | | -git commit --allow-empty -m "Initializing gh-pages branch" |
85 | | -git push origin gh-pages |
86 | | -``` |
87 | | - |
88 | | -### Additional setup |
89 | | - |
90 | | -- Go to repo `Settings` -> sidebar `Pages` |
91 | | -- In the `Source` drop-down, choose the branch where you want to host your Github Pages and the `directory` where it was hosted |
92 | | - - We'll use `gh-pages` branch for this but you can use other branch name for this |
93 | | - - Just make sure that's the branch where the `index.html` that you want to host lives in |
94 | | - |
95 | | -<p align="center"> |
96 | | - <img src="screenshot/gh-pages-settings.png" alt="Github Pages Settings" style="height:720px; width:890px;"> |
97 | | -</p> |
98 | | - |
99 | | -## Manual Deploy using `gh-pages` |
100 | | - |
101 | | -You can update the current Github Page without pushing a commit by running: |
| 19 | +npm i && npm start |
102 | 20 | ``` |
103 | | -yarn run ghpages:publish |
104 | | -``` |
105 | | - |
106 | | -This build script does the following, see `package.json`: |
107 | | -- `ghpages:publish` |
108 | | - - This executes `ghpages:prepare` in the current branch you are currently working on |
109 | | - - Note: The branch name is required so that it will not override the whole Github Pages directory |
110 | | - - You can check it by navigating through the branch name files directory you set from the [step to setup `gh-pages` branch](#steps-to-setup-gh-pages) |
111 | | - - You can checkout how it looks like in one of our projects here: [https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages](https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages) |
112 | | - |
113 | | -- `ghpages:prepare` |
114 | | - - This executes `ghpages:build` that builds the project dependencies and generates `vite` build from it |
115 | | - - We use [vite](https://vitejs.dev/) to bundle and generate the static assets that we host in Github Pages |
116 | | - - See `vite.config.ts` related to this |
117 | | - |
118 | | -- `ghpages:generate` |
119 | | - - This executes `gh-pages` [npm package](https://www.npmjs.com/package/gh-pages) command to publish/upload the generated files from our `vite` build files |
120 | | - - Upon executing this command: |
121 | | - - This generates a commit message formatted from the most recent commit message of the branch |
122 | | - - Push the commit to `gh-pages` branch that we setup earlier |
123 | | - |
124 | | -The live demo app URL from current branch will look something like this: |
125 | | -`https://<organization_name_or_username>.github.io/<repo_name>/<branch_name>/demo` |
126 | | - |
127 | | -## Automatic Deploy of Demo App |
128 | | - |
129 | | -Things that trigger automatic site generation: |
130 | | -- a merge to `main` |
131 | | - - See workflow: `gh-pages-main.yml` |
132 | | - - Example: `https://<organization_name_or_username>.github.io/<repo_name>/main` |
133 | | - |
134 | | -- a pull request against `main` |
135 | | - - See workflow: `pr-preview.yml` |
136 | | - - The URL for your Pull Request will be deleted after merging to main but you can update that in the config |
137 | | - - When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base URL/pull request number. |
138 | | - - Example: `https://<organization_name_or_username>.github.io/<repo_name>/pr/<pr-number>/demo` |
139 | | - - Note that `demo` is another directory where the `index.html` lives in |
140 | | - - You are free to playaround with it and set your desired file directory/structure on your end |
141 | | - |
142 | | -Another thing to note: pushing a branch up alone will not trigger site creation. |
143 | | - |
144 | | -Happy devving ^_^ 🥳 🎉 |
0 commit comments