Fix docs and examples

epam · Aug 26, 2024 · 1c68271 · 1c68271
1 parent bd0b044
commit 1c68271
Show file tree

Hide file tree

Showing 23 changed files with 78 additions and 56 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -177,7 +177,7 @@ git fetch upstream
 git rebase upstream/main
 
 # lint, test and build
-npm run ci
+yarn run ci
 
 # run automated and manual tests, etc.
 ...
@@ -190,7 +190,7 @@ Unfortunately, it is still a semi-manual process.
 1.  Ensure that you have a clean repo. Check the build pipeline etc.
 
         git status
-        npm run ci
+        yarn run ci
         ...
 
 2.  Use npm to automatically increment version (patch, minor or major).
@@ -201,9 +201,15 @@ Unfortunately, it is still a semi-manual process.
 
     -   Increment product version in the `sonar-project.properties` file.
 
+    -   Examine the changes since the last version. Check the commit log and follow the external
+        links (PRs, issues) to refresh the knowledge.
+
+            git log v0.0.1..HEAD --reverse \
+                --first-parent --pretty=format:"%as - %s (%an)"
+
     -   Update `CHANGELOG.md` file. Don't copy the git log blindly, summarize, reword and reorder. Use the following groups order:
 
-            ## [0.0.1] - 2000-01-01
+            ## [0.0.2] - 2000-01-01
             ### Added
             ### Changed
             ### Deprecated
@@ -214,13 +220,13 @@ Unfortunately, it is still a semi-manual process.
             
     -   Update unreleased link in `CHANGELOG.md` file.
 
-            [Unreleased]: https://github.com/epam/miew/compare/v0.0.1...HEAD
+            [Unreleased]: https://github.com/epam/miew/compare/v0.0.2...HEAD
 
     -   Replace the automatic commit and move the tag.
 
             git add sonar-project.properties CHANGELOG.md 
             git commit --amend
-            git tag -fa v0.0.1 -m "0.0.1"
+            git tag -fa v0.0.2 -m "0.0.2"
 
 4.  Merge `main` into `latest` branch.
 
@@ -239,4 +245,4 @@ Unfortunately, it is still a semi-manual process.
     *  Select the new version tag among existing and fill in a description text box with new release link and list of changes (see `CHANGELOG.md`)
     *  Press `Publish`.
 
-Upon push, GitHub Actions build `main`, `latest` branches and `v0.0.1` tag. The tag automatically initiates NPM publish process if the build is successful.
+Upon push, GitHub Actions build `main`, `latest` branches and `v0.0.2` tag. The tag automatically initiates NPM publish process if the build is successful.
diff --git a/README.md b/README.md
@@ -39,10 +39,10 @@ is to reference a CDN version:
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="https://unpkg.com/[email protected].15/lodash.js"></script>
-    <script src="https://unpkg.com/three@0.112.1/build/three.min.js"></script>
-    <script src="https://unpkg.com/miew@0.9.0/dist/Miew.min.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/miew@0.9.0/dist/Miew.min.css" />
+    <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
+    <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
+    <script src="https://unpkg.com/miew@0.11.0/dist/Miew.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/miew@0.11.0/dist/Miew.min.css" />
   </head>
   <body>
     <div class="miew-container" style="width:640px; height:480px"></div>

diff --git a/packages/miew-react/README.md b/packages/miew-react/README.md
@@ -19,24 +19,25 @@ Please refer to the topmost [README][] for an overview of the entire project.
 The component is available as an [npm package](https://www.npmjs.com/package/miew-react).
 
 ```sh
-npm i --save miew-react
+# npm create vite@latest .
+npm i miew-react
 ```
 
-index.jsx
+src/main.jsx
 
-```js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+```jsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import Viewer from 'miew-react';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
     <Viewer options={{ load: '1crn' }} />
-  </React.StrictMode>,
+  </StrictMode>,
 );
 ```
 
-index.html (e.g., using Vite)
+index.html
 
 ```html
 <!doctype html>
@@ -46,7 +47,7 @@ index.html (e.g., using Vite)
   </head>
   <body>
     <div id="root" style="width:640px; height:480px"></div>
-    <script type="module" src="index.jsx"></script>
+    <script type="module" src="src/main.jsx"></script>
   </body>
 </html>
 ```

diff --git a/packages/miew/README.md b/packages/miew/README.md
@@ -30,10 +30,10 @@ or built with a bundler of your choice. For more details refer to:
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="https://unpkg.com/[email protected].15/lodash.js"></script>
-    <script src="https://unpkg.com/three@0.112.1/build/three.min.js"></script>
-    <script src="https://unpkg.com/miew@0.9.0/dist/Miew.min.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/miew@0.9.0/dist/Miew.min.css" />
+    <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
+    <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
+    <script src="https://unpkg.com/miew@0.11.0/dist/Miew.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/miew@0.11.0/dist/Miew.min.css" />
   </head>
   <body>
     <div class="miew-container" style="width:640px; height:480px"></div>
@@ -55,10 +55,12 @@ or built with a bundler of your choice. For more details refer to:
 Install using npm:
 
 ```sh
-npm i --save miew
+# npm init
+# npm i -D webpack webpack-cli style-loader css-loader
+npm i miew
 ```
 
-index.js
+src/index.js
 
 ```js
 import Miew from 'miew';
@@ -72,27 +74,40 @@ window.onload = function () {
 };
 ```
 
-index.css
+src/index.css
 
 ```css
 @import 'miew';
 ```
 
-index.html
+dist/index.html
 
 ```html
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="./dist/main.js"></script>
+    <script src="main.js"></script>
   </head>
   <body>
     <div class="miew-container" style="width:640px; height:480px"></div>
   </body>
 </html>
 ```
 
+webpack.config.js
+
+```js
+module.exports = {
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader'],
+    }],
+  },
+};
+```
+
 ## Contribution
 
 Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

diff --git a/packages/miew/docs/tutorials/embed.md b/packages/miew/docs/tutorials/embed.md
@@ -31,11 +31,11 @@ _index.html_
   <meta charset="UTF-8">
   <title>Miew via Global</title>
 
-  <link rel="stylesheet" href="https://unpkg.com/miew@0.9.0/dist/Miew.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/miew@0.11.0/dist/Miew.min.css">
   <script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
-  <script src="https://unpkg.com/[email protected].15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.112.1/build/three.min.js"></script>
-  <script src="https://unpkg.com/miew@0.9.0/dist/Miew.min.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/miew@0.11.0/dist/Miew.min.js"></script>
 </head>
 <body>
   <h1>Use Miew via browser globals</h1>
@@ -64,7 +64,7 @@ _index.html_
   <meta charset="UTF-8">
   <title>Miew via Require.js</title>
 
-  <link rel="stylesheet" href="https://unpkg.com/miew@0.9.0/dist/Miew.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/miew@0.11.0/dist/Miew.min.css">
   <script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
 </head>
@@ -75,11 +75,11 @@ _index.html_
   <script>
     require.config({
       paths: {
-        'lodash': 'https://unpkg.com/lodash@^4.17.15/lodash',
-        'three': 'https://unpkg.com/three@0.112.0/build/three.min',
+        'lodash': 'https://unpkg.com/lodash@^4.17.21/lodash',
+        'three': 'https://unpkg.com/three@0.153.0/build/three.min',
       }
     });
-    require(['https://unpkg.com/miew@0.9.0/dist/Miew.min.js'], function(Miew) {
+    require(['https://unpkg.com/miew@0.11.0/dist/Miew.min.js'], function(Miew) {
       var viewer = new Miew({ load: '1CRN' });
       if (viewer.init()) {
         viewer.run();
@@ -120,7 +120,7 @@ _index.html_
   <meta charset="UTF-8">
   <title>Miew via Browserify</title>
 
-  <link rel="stylesheet" href="https://unpkg.com/miew@0.9.0/dist/Miew.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/miew@0.11.0/dist/Miew.min.css">
   <script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
   <script src="bundle.js"></script>
 </head>

diff --git a/packages/miew/examples/api.html b/packages/miew/examples/api.html
@@ -5,7 +5,7 @@
   <title>Miew API</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/empty.html b/packages/miew/examples/empty.html
@@ -5,7 +5,7 @@
   <title>Miew via Global</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/events.html b/packages/miew/examples/events.html
@@ -5,7 +5,7 @@
   <title>Miew events</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/fullscreen.html b/packages/miew/examples/fullscreen.html
@@ -37,7 +37,7 @@
     }
   </style>
 
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/grid.html b/packages/miew/examples/grid.html
@@ -91,7 +91,7 @@ <h2>Adverse effects</h2>
   </div>
 
 
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
   <script>

diff --git a/packages/miew/examples/labels.html b/packages/miew/examples/labels.html
@@ -5,7 +5,7 @@
   <title>Miew labels</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/load_from_string.html b/packages/miew/examples/load_from_string.html
@@ -5,7 +5,7 @@
   <title>Load serotonin from string</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.js"></script>
 </head>

diff --git a/packages/miew/examples/miew_via_global.html b/packages/miew/examples/miew_via_global.html
@@ -5,7 +5,7 @@
   <title>Miew via Global</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/miew_via_require.html b/packages/miew/examples/miew_via_require.html
@@ -14,7 +14,7 @@ <h1>Use Miew via Require.js</h1>
   <script>
     require.config({
       paths: {
-        'lodash': 'https://unpkg.com/lodash@^4.17.15/lodash',
+        'lodash': 'https://unpkg.com/lodash@^4.17.21/lodash',
         'three': 'https://unpkg.com/[email protected]/build/three.min',
       }
     });

diff --git a/packages/miew/examples/multiple.html b/packages/miew/examples/multiple.html
@@ -5,7 +5,7 @@
   <title>Multiple Miew Instances</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/options.html b/packages/miew/examples/options.html
@@ -5,7 +5,7 @@
   <title>Miew options</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/options_fromAttr.html b/packages/miew/examples/options_fromAttr.html
@@ -5,7 +5,7 @@
   <title>.options.fromAttr() - Miew API</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/options_fromURL.html b/packages/miew/examples/options_fromURL.html
@@ -5,7 +5,7 @@
   <title>.options.fromURL() - Miew API</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/projected.html b/packages/miew/examples/projected.html
@@ -25,7 +25,7 @@
     }
   </style>
 
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/sequence.html b/packages/miew/examples/sequence.html
@@ -5,7 +5,7 @@
   <title>Select residues from sequence</title>
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
   <style>

diff --git a/packages/miew/examples/terminal.html b/packages/miew/examples/terminal.html
@@ -19,7 +19,7 @@
 
   <script src="https://unpkg.com/jquery@3/dist/jquery.min.js"></script>
   <script src="https://unpkg.com/jquery.terminal@2/js/jquery.terminal.min.js"></script>
-  <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+  <script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
   <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>

diff --git a/packages/miew/examples/transparent_background.html b/packages/miew/examples/transparent_background.html
@@ -34,7 +34,7 @@ <h1>Use transparent background</h1>
 <div class="miew-container" style="width:640px; height:480px"></div>
 </div>
 
-<script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
+<script src="https://unpkg.com/lodash@^4.17.21/lodash.js"></script>
 <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
 <script src="../dist/Miew.min.js"></script>
 <script>