Feature/update document (#6)

* update readme

* v1.0.2

* update

---------

Co-authored-by: nusuke <[email protected]>

README.md

@@ -6,7 +6,7 @@
 
 ![development CI](https://github.com/nusuke/chrome-extention-json-viewer-jq/actions/workflows/development.yml/badge.svg)[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/nusuke/chrome-extention-json-viewer-jq)
 
-![introduction](document/introductionJq.gif)
+![introduction](document/introduction.gif)
 
 </div>
 

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "JSON viewer +jq",
-  "description": "ブラウザ上でjqによる絞り込みを行えます。jqクエリをURLで共有することもできます。",
-  "version": "1.0.1",
+  "description": "You can also share your jq queries by URL. Recommended for large JSON viewers. Narrow it down for easier viewing.",
+  "version": "1.0.2",
   "icons": {
     "16": "logo16.png",
     "48": "logo48.png",

src/styles/json-preview.scss

@@ -11,8 +11,13 @@ select {
   appearance: none;
   color: #000;
 }
-
 // ##################### reset css ↑ ###################
+
+// ##################### 変数 ###################
+
+$app-gray: rgb(70, 70, 70);
+
+// ##################### 変数 ↑ ###################
 body {
   padding: 8px;
   display: flex;
@@ -54,7 +59,7 @@ button:focus {
     &::before,
     &::after {
       content: '"';
-      color: rgb(70, 70, 70);
+      color: $app-gray;
     }
   }
 }
@@ -69,8 +74,7 @@ button:focus {
   }
 
   &Summary {
-    color: rgb(70, 70, 70);
-    // font-size: small;
+    color: $app-gray;
   }
 }
 
@@ -92,14 +96,15 @@ button:focus {
       left: 2px;
       height: calc(100% - 30px);
       width: 1px;
-      border-left: dotted 0.5px rgb(70, 70, 70);
+      border-left: dotted 0.5px $app-gray;
     }
   }
 }
 
 // FIXME リファクタで場所を移す
 .queryInput {
   width: 100%;
+  max-width: 800px;
   min-height: 64px;
   display: flex;
   flex-direction: column;
@@ -126,15 +131,17 @@ button:focus {
 
   &ShareButton {
     background: rgb(150, 150, 239);
+    border-radius: 4px;
     color: white;
+    margin-left: 8px;
     padding: 8px 16px;
   }
   &HistoryButton {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
-    background-color: rgba(70, 70, 70, 0.7);
+    background-color: rgba($app-gray, 0.7);
     color: white;
     height: 80%;
     padding: 4px 8px;

webpack.config.js

@@ -38,6 +38,7 @@ module.exports = {
         { from: "manifest.json", to: "" },
         { from: "assets", to: "" },
         { from: "node_modules/jq-web/jq.wasm.wasm", to: "" },
+        { from: "LICENSE", to: "" },
       ],
     }),
   ],