├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   └── validate_translation.yml
├── .gitignore
├── CNAME
├── Gemfile
├── Gemfile.lock
├── README.md
├── _config.yml
├── _layouts
    └── default.html
├── admin
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package.json
    ├── public
    │   ├── export.html
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── img
    │   │   │   └── icon-webpage.svg
    │   ├── components
    │   │   ├── ExportDropdown.vue
    │   │   ├── ImportDropdown.vue
    │   │   ├── Navbar.vue
    │   │   ├── SessionCard.vue
    │   │   ├── SessionHub.vue
    │   │   ├── SessionSidebar.vue
    │   │   ├── Sessions.vue
    │   │   └── TabSpaceBridge.vue
    │   ├── config.js
    │   ├── constants.js
    │   ├── lang.json
    │   ├── main.js
    │   ├── notificationCount.json
    │   ├── pages
    │   │   ├── Admin.vue
    │   │   └── Settings.vue
    │   ├── store.js
    │   ├── tips.json
    │   └── utility.js
    ├── upload.js
    ├── validate_translation.js
    ├── vue.config.js
    └── yarn.lock
├── assets
    ├── JetBrainsMono-Regular.woff2
    ├── Tab_Space_Demo.mp4
    ├── css
    │   ├── main.css
    │   └── style.scss
    └── img
    │   ├── Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg
    │   ├── desktop.png
    │   ├── preview1.png
    │   ├── preview2.png
    │   ├── preview3.png
    │   ├── publicity.001.jpeg
    │   ├── publicity.002.jpeg
    │   ├── publicity.003.jpeg
    │   ├── publicity.004.jpeg
    │   ├── publicity.005.jpeg
    │   ├── publicity.006.jpeg
    │   ├── publicity.007.jpeg
    │   ├── publicity.008.jpeg
    │   ├── publicity.009.jpeg
    │   └── publicity.010.jpeg
├── beta
    ├── css
    │   └── app.fd6330c6.css
    ├── export.html
    ├── favicon.ico
    ├── img
    │   └── icon-webpage.397ba490.svg
    ├── index.html
    └── js
    │   ├── app.f0d04f6b.js
    │   └── chunk-vendors.f5e4d5e8.js
├── icon.png
├── index-zh.html
├── index.html
├── redirect.html
├── storage.html
└── translate.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: yuanzhoucq
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: "[BUG]"
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. macOS 10.15.5]
28 |  - Version [e.g. 3.7.1]
29 | 
30 | **Additional context**
31 | Add any other context about the problem here.
32 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: "[FEATURE]"
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/validate_translation.yml:
--------------------------------------------------------------------------------
 1 | name: Validate Tranlation File for Localization
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |   pull_request:
 7 |     branches: [ master ]
 8 | 
 9 | jobs:
10 |   validate:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |     - uses: actions/checkout@v2
14 |       
15 |     - name: Setup Node.js environment
16 |       uses: actions/setup-node@v2.1.2
17 |       with:
18 |         node-version: '10.x'
19 |     
20 |     - name: Run script
21 |       run: node admin/validate_translation.js
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | mytab.space


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | gem 'github-pages', group: :jekyll_plugins
3 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (4.2.11.1)
  5 |       i18n (~> 0.7)
  6 |       minitest (~> 5.1)
  7 |       thread_safe (~> 0.3, >= 0.3.4)
  8 |       tzinfo (~> 1.1)
  9 |     addressable (2.6.0)
 10 |       public_suffix (>= 2.0.2, < 4.0)
 11 |     coffee-script (2.4.1)
 12 |       coffee-script-source
 13 |       execjs
 14 |     coffee-script-source (1.11.1)
 15 |     colorator (1.1.0)
 16 |     commonmarker (0.17.13)
 17 |       ruby-enum (~> 0.5)
 18 |     concurrent-ruby (1.1.5)
 19 |     dnsruby (1.61.3)
 20 |       addressable (~> 2.5)
 21 |     em-websocket (0.5.1)
 22 |       eventmachine (>= 0.12.9)
 23 |       http_parser.rb (~> 0.6.0)
 24 |     ethon (0.12.0)
 25 |       ffi (>= 1.3.0)
 26 |     eventmachine (1.2.7)
 27 |     execjs (2.7.0)
 28 |     faraday (0.15.4)
 29 |       multipart-post (>= 1.2, < 3)
 30 |     ffi (1.11.1)
 31 |     forwardable-extended (2.6.0)
 32 |     gemoji (3.0.1)
 33 |     github-pages (198)
 34 |       activesupport (= 4.2.11.1)
 35 |       github-pages-health-check (= 1.16.1)
 36 |       jekyll (= 3.8.5)
 37 |       jekyll-avatar (= 0.6.0)
 38 |       jekyll-coffeescript (= 1.1.1)
 39 |       jekyll-commonmark-ghpages (= 0.1.5)
 40 |       jekyll-default-layout (= 0.1.4)
 41 |       jekyll-feed (= 0.11.0)
 42 |       jekyll-gist (= 1.5.0)
 43 |       jekyll-github-metadata (= 2.12.1)
 44 |       jekyll-mentions (= 1.4.1)
 45 |       jekyll-optional-front-matter (= 0.3.0)
 46 |       jekyll-paginate (= 1.1.0)
 47 |       jekyll-readme-index (= 0.2.0)
 48 |       jekyll-redirect-from (= 0.14.0)
 49 |       jekyll-relative-links (= 0.6.0)
 50 |       jekyll-remote-theme (= 0.3.1)
 51 |       jekyll-sass-converter (= 1.5.2)
 52 |       jekyll-seo-tag (= 2.5.0)
 53 |       jekyll-sitemap (= 1.2.0)
 54 |       jekyll-swiss (= 0.4.0)
 55 |       jekyll-theme-architect (= 0.1.1)
 56 |       jekyll-theme-cayman (= 0.1.1)
 57 |       jekyll-theme-dinky (= 0.1.1)
 58 |       jekyll-theme-hacker (= 0.1.1)
 59 |       jekyll-theme-leap-day (= 0.1.1)
 60 |       jekyll-theme-merlot (= 0.1.1)
 61 |       jekyll-theme-midnight (= 0.1.1)
 62 |       jekyll-theme-minimal (= 0.1.1)
 63 |       jekyll-theme-modernist (= 0.1.1)
 64 |       jekyll-theme-primer (= 0.5.3)
 65 |       jekyll-theme-slate (= 0.1.1)
 66 |       jekyll-theme-tactile (= 0.1.1)
 67 |       jekyll-theme-time-machine (= 0.1.1)
 68 |       jekyll-titles-from-headings (= 0.5.1)
 69 |       jemoji (= 0.10.2)
 70 |       kramdown (= 1.17.0)
 71 |       liquid (= 4.0.0)
 72 |       listen (= 3.1.5)
 73 |       mercenary (~> 0.3)
 74 |       minima (= 2.5.0)
 75 |       nokogiri (>= 1.8.5, < 2.0)
 76 |       rouge (= 2.2.1)
 77 |       terminal-table (~> 1.4)
 78 |     github-pages-health-check (1.16.1)
 79 |       addressable (~> 2.3)
 80 |       dnsruby (~> 1.60)
 81 |       octokit (~> 4.0)
 82 |       public_suffix (~> 3.0)
 83 |       typhoeus (~> 1.3)
 84 |     html-pipeline (2.12.0)
 85 |       activesupport (>= 2)
 86 |       nokogiri (>= 1.4)
 87 |     http_parser.rb (0.6.0)
 88 |     i18n (0.9.5)
 89 |       concurrent-ruby (~> 1.0)
 90 |     jekyll (3.8.5)
 91 |       addressable (~> 2.4)
 92 |       colorator (~> 1.0)
 93 |       em-websocket (~> 0.5)
 94 |       i18n (~> 0.7)
 95 |       jekyll-sass-converter (~> 1.0)
 96 |       jekyll-watch (~> 2.0)
 97 |       kramdown (~> 1.14)
 98 |       liquid (~> 4.0)
 99 |       mercenary (~> 0.3.3)
100 |       pathutil (~> 0.9)
101 |       rouge (>= 1.7, < 4)
102 |       safe_yaml (~> 1.0)
103 |     jekyll-avatar (0.6.0)
104 |       jekyll (~> 3.0)
105 |     jekyll-coffeescript (1.1.1)
106 |       coffee-script (~> 2.2)
107 |       coffee-script-source (~> 1.11.1)
108 |     jekyll-commonmark (1.3.1)
109 |       commonmarker (~> 0.14)
110 |       jekyll (>= 3.7, < 5.0)
111 |     jekyll-commonmark-ghpages (0.1.5)
112 |       commonmarker (~> 0.17.6)
113 |       jekyll-commonmark (~> 1)
114 |       rouge (~> 2)
115 |     jekyll-default-layout (0.1.4)
116 |       jekyll (~> 3.0)
117 |     jekyll-feed (0.11.0)
118 |       jekyll (~> 3.3)
119 |     jekyll-gist (1.5.0)
120 |       octokit (~> 4.2)
121 |     jekyll-github-metadata (2.12.1)
122 |       jekyll (~> 3.4)
123 |       octokit (~> 4.0, != 4.4.0)
124 |     jekyll-mentions (1.4.1)
125 |       html-pipeline (~> 2.3)
126 |       jekyll (~> 3.0)
127 |     jekyll-optional-front-matter (0.3.0)
128 |       jekyll (~> 3.0)
129 |     jekyll-paginate (1.1.0)
130 |     jekyll-readme-index (0.2.0)
131 |       jekyll (~> 3.0)
132 |     jekyll-redirect-from (0.14.0)
133 |       jekyll (~> 3.3)
134 |     jekyll-relative-links (0.6.0)
135 |       jekyll (~> 3.3)
136 |     jekyll-remote-theme (0.3.1)
137 |       jekyll (~> 3.5)
138 |       rubyzip (>= 1.2.1, < 3.0)
139 |     jekyll-sass-converter (1.5.2)
140 |       sass (~> 3.4)
141 |     jekyll-seo-tag (2.5.0)
142 |       jekyll (~> 3.3)
143 |     jekyll-sitemap (1.2.0)
144 |       jekyll (~> 3.3)
145 |     jekyll-swiss (0.4.0)
146 |     jekyll-theme-architect (0.1.1)
147 |       jekyll (~> 3.5)
148 |       jekyll-seo-tag (~> 2.0)
149 |     jekyll-theme-cayman (0.1.1)
150 |       jekyll (~> 3.5)
151 |       jekyll-seo-tag (~> 2.0)
152 |     jekyll-theme-dinky (0.1.1)
153 |       jekyll (~> 3.5)
154 |       jekyll-seo-tag (~> 2.0)
155 |     jekyll-theme-hacker (0.1.1)
156 |       jekyll (~> 3.5)
157 |       jekyll-seo-tag (~> 2.0)
158 |     jekyll-theme-leap-day (0.1.1)
159 |       jekyll (~> 3.5)
160 |       jekyll-seo-tag (~> 2.0)
161 |     jekyll-theme-merlot (0.1.1)
162 |       jekyll (~> 3.5)
163 |       jekyll-seo-tag (~> 2.0)
164 |     jekyll-theme-midnight (0.1.1)
165 |       jekyll (~> 3.5)
166 |       jekyll-seo-tag (~> 2.0)
167 |     jekyll-theme-minimal (0.1.1)
168 |       jekyll (~> 3.5)
169 |       jekyll-seo-tag (~> 2.0)
170 |     jekyll-theme-modernist (0.1.1)
171 |       jekyll (~> 3.5)
172 |       jekyll-seo-tag (~> 2.0)
173 |     jekyll-theme-primer (0.5.3)
174 |       jekyll (~> 3.5)
175 |       jekyll-github-metadata (~> 2.9)
176 |       jekyll-seo-tag (~> 2.0)
177 |     jekyll-theme-slate (0.1.1)
178 |       jekyll (~> 3.5)
179 |       jekyll-seo-tag (~> 2.0)
180 |     jekyll-theme-tactile (0.1.1)
181 |       jekyll (~> 3.5)
182 |       jekyll-seo-tag (~> 2.0)
183 |     jekyll-theme-time-machine (0.1.1)
184 |       jekyll (~> 3.5)
185 |       jekyll-seo-tag (~> 2.0)
186 |     jekyll-titles-from-headings (0.5.1)
187 |       jekyll (~> 3.3)
188 |     jekyll-watch (2.2.1)
189 |       listen (~> 3.0)
190 |     jemoji (0.10.2)
191 |       gemoji (~> 3.0)
192 |       html-pipeline (~> 2.2)
193 |       jekyll (~> 3.0)
194 |     kramdown (1.17.0)
195 |     liquid (4.0.0)
196 |     listen (3.1.5)
197 |       rb-fsevent (~> 0.9, >= 0.9.4)
198 |       rb-inotify (~> 0.9, >= 0.9.7)
199 |       ruby_dep (~> 1.2)
200 |     mercenary (0.3.6)
201 |     mini_portile2 (2.4.0)
202 |     minima (2.5.0)
203 |       jekyll (~> 3.5)
204 |       jekyll-feed (~> 0.9)
205 |       jekyll-seo-tag (~> 2.1)
206 |     minitest (5.11.3)
207 |     multipart-post (2.1.1)
208 |     nokogiri (1.10.4)
209 |       mini_portile2 (~> 2.4.0)
210 |     octokit (4.14.0)
211 |       sawyer (~> 0.8.0, >= 0.5.3)
212 |     pathutil (0.16.2)
213 |       forwardable-extended (~> 2.6)
214 |     public_suffix (3.1.1)
215 |     rb-fsevent (0.10.3)
216 |     rb-inotify (0.10.0)
217 |       ffi (~> 1.0)
218 |     rouge (2.2.1)
219 |     ruby-enum (0.7.2)
220 |       i18n
221 |     ruby_dep (1.5.0)
222 |     rubyzip (1.2.3)
223 |     safe_yaml (1.0.5)
224 |     sass (3.7.4)
225 |       sass-listen (~> 4.0.0)
226 |     sass-listen (4.0.0)
227 |       rb-fsevent (~> 0.9, >= 0.9.4)
228 |       rb-inotify (~> 0.9, >= 0.9.7)
229 |     sawyer (0.8.2)
230 |       addressable (>= 2.3.5)
231 |       faraday (> 0.8, < 2.0)
232 |     terminal-table (1.8.0)
233 |       unicode-display_width (~> 1.1, >= 1.1.1)
234 |     thread_safe (0.3.6)
235 |     typhoeus (1.3.1)
236 |       ethon (>= 0.9.0)
237 |     tzinfo (1.2.5)
238 |       thread_safe (~> 0.1)
239 |     unicode-display_width (1.6.0)
240 | 
241 | PLATFORMS
242 |   ruby
243 | 
244 | DEPENDENCIES
245 |   github-pages
246 | 
247 | BUNDLED WITH
248 |    2.0.2
249 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Tab Space is a Safari extension app which is born for improving web browsing productivity. It offers tab management ability and some useful shortcuts for Safari.
 2 | 
 3 | > Note: this repo contains the project site and the web app cooperating with Tab Space in Safari. It **does not contain** the Xcode project which builds the entire app. 
 4 | 
 5 | 
 6 | ## Contributing
 7 | ### For translation
 8 | - [Translation page](https://mytab.space/translate.html)
 9 | ### For web app
10 | ```
11 | $ git clone https://github.com/yuanzhoucq/Tab-Space.git
12 | $ cd Tab-Space/admin
13 | $ npm install
14 | $ npm run serve
15 | ```
16 | Note that you need to have Tab Space installed and activated in Safari or the web app will not work properly.
17 | 
18 | ## Related links
19 | - [Tab Space Homepage](http://mytab.space)
20 | - [Product Hunt page](https://www.producthunt.com/posts/tab-sapce)
21 | - [中文介绍](https://sspai.com/post/56315)
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ site.lang | default: "en-US" }}">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 |   {% seo %}
 9 |   <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
10 |   <!--[if lt IE 9]>
11 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
12 |   <![endif]-->
13 | </head>
14 | <body>
15 | <div class="wrapper">
16 |   <header>
17 |     <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
18 | 
19 |     {% if site.logo %}
20 |     <img src="{{site.logo | relative_url}}" alt="Logo" />
21 |     {% endif %}
22 | 
23 |     <p>{{ site.description | default: site.github.project_tagline }}</p>
24 | 
25 |     {% if site.github.is_project_page %}
26 |     <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
27 |     {% endif %}
28 | 
29 |     <a href="https://www.producthunt.com/posts/tab-space?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tab-space" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=165389&theme=light" alt="Tab Space - Improve your web browsing productivity with Safari | Product Hunt Embed" style="width: 250px; height: 54px; margin-bottom: 16px" width="250px" height="54px" /></a>
30 | 
31 | 
32 |     {% if site.github.is_user_page %}
33 |     <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
34 |     {% endif %}
35 | 
36 |   </header>
37 |   <section>
38 | 
39 |     {{ content }}
40 | 
41 |   </section>
42 |   <footer>
43 |     <p><a href="https://apps.apple.com/cn/app/tab-space/id1473726602?mt=12" target="_blank"><img src="assets/img/Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg" alt=""></a></p>
44 | 
45 |     <p><a href="mailto:joyuercn@icloud.com">Contact / Feedback</a></p>
46 |     {% if site.github.is_project_page %}
47 |     <p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
48 |     {% endif %}
49 |     <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
50 |   </footer>
51 | </div>
52 | <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
53 | {% if site.google_analytics %}
54 | <script>
55 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
56 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
57 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
58 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
59 | ga('create', '{{ site.google_analytics }}', 'auto');
60 | ga('send', 'pageview');
61 | </script>
62 | {% endif %}
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/admin/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/admin/README.md:
--------------------------------------------------------------------------------
 1 | # tab-space-admin
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/admin/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/admin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tab-space-admin",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "postbuild": "node validate_translation.js",
 9 |     "build-beta": "vue-cli-service build --mode development && rm -r ../beta && mv dist ../beta",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^3.6.4",
14 |     "lodash": "^4.17.15",
15 |     "mdurl": "^1.0.1",
16 |     "velocity-animate": "^1.5.2",
17 |     "vue": "^2.6.11",
18 |     "vue-autosuggest": "^2.2.0",
19 |     "vue-icon": "https://github.com/yuanzhoucq/vue-icon.git",
20 |     "vue-js-toggle-button": "^1.3.3",
21 |     "vue-loading-template": "^1.3.2",
22 |     "vue-router": "^3.1.6",
23 |     "vuedraggable": "^2.23.2",
24 |     "vuex": "^3.1.3"
25 |   },
26 |   "devDependencies": {
27 |     "@vue/cli-plugin-babel": "^4.2.0",
28 |     "@vue/cli-plugin-eslint": "^4.2.0",
29 |     "@vue/cli-service": "^4.2.0",
30 |     "ali-oss": "^6.10.0",
31 |     "babel-eslint": "^10.0.3",
32 |     "eslint": "^6.7.2",
33 |     "eslint-plugin-vue": "^6.1.2",
34 |     "table-builder": "^2.1.1",
35 |     "vue-template-compiler": "^2.6.11"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "eslint:recommended"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions"
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------
/admin/public/export.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>Tab Space Exported Tabs</title>
  6 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  7 |   <!-- prod -->
  8 |   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
  9 |   <!-- dev -->
 10 |   <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>-->
 11 |   <style>
 12 |     body {
 13 |       background-image: linear-gradient(-45deg, #efefef, #fbfbfb);
 14 |       font-family: "PingFang SC",sans-serif;
 15 |     }
 16 | 
 17 |     li {
 18 |       list-style: none;
 19 |       margin-left: -20px;
 20 |       display: flex;
 21 |       align-items: center;
 22 |     }
 23 | 
 24 |     ul {
 25 |       margin: 4px 0;
 26 |     }
 27 | 
 28 |     #main {
 29 |       min-height: calc(100vh - 35px);
 30 |     }
 31 | 
 32 |     footer {
 33 |       display: flex;
 34 |       justify-content: center;
 35 |       font-size: 14px;
 36 |     }
 37 | 
 38 |     .link {
 39 |       color: rgb(54, 49, 61);
 40 |       font-weight: normal;
 41 |     }
 42 | 
 43 |     .link:hover {
 44 |       box-shadow: inset 0 -10px rgba(0, 181, 29, 0.17451);
 45 |       color: rgb(0, 181, 29);
 46 |     }
 47 | 
 48 |     #title {
 49 |       max-width: 600px;
 50 |       margin: 0 auto;
 51 |       margin-top: -20px;
 52 |     }
 53 | 
 54 |     .sessions-container {
 55 |       display: flex;
 56 |       transition: 0.2s;
 57 |       flex-direction: row;
 58 |       justify-content: center;
 59 |     }
 60 | 
 61 |     .session-filter {
 62 |       width: 100px;
 63 |       margin-right: 25px;
 64 |       display: flex;
 65 |       flex-direction: column;
 66 |     }
 67 | 
 68 |     .tag-filter {
 69 |       background-color: white;
 70 |       padding: 5px;
 71 |       padding-left: 10px;
 72 |       border-radius: 5px;
 73 |       cursor: pointer;
 74 |     }
 75 | 
 76 |     .tag-filter:hover {
 77 |       background-color: lightsalmon;
 78 |       border-width: 0;
 79 |       transition: 0.15s;
 80 |       margin-right: -5px;
 81 |       color: whitesmoke;
 82 |     }
 83 | 
 84 |     .active-tag {
 85 |       background-color: salmon;
 86 |       color: white !important;
 87 |       transition: 0.1s;
 88 |       font-weight: bold;
 89 |       margin-right: -10px;
 90 |     }
 91 | 
 92 |     .session {
 93 |       border-radius: 5px;
 94 |       text-decoration: none;
 95 |       width: 600px;
 96 |       margin: 20px auto;
 97 |       margin-top: 0;
 98 |       padding: 15px 80px 10px 40px;
 99 |       background-color: white;
100 |       box-shadow: rgba(46, 41, 51, 0.0784314) 0 1px 2px, rgba(71, 63, 79, 0.0784314) 0 2px 4px;
101 |       transition-duration: 250ms, 250ms, 250ms;
102 |       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
103 |       transition-property: transform, box-shadow, padding;
104 |     }
105 | 
106 |     .session:hover {
107 |       transform: translateY(-0.5px);
108 |       box-shadow: rgba(46, 41, 51, 0.0784314) 0 3px 6px, rgba(71, 63, 79, 0.156863) 0 6px 12px;
109 |     }
110 | 
111 |     .session-tags {
112 |       display: flex;
113 |       flex-direction: row;
114 |       flex-wrap: wrap;
115 |     }
116 | 
117 |     .tag {
118 |       background-color: #f5f5f5;
119 |       border: 1px solid #dddddd;
120 |       padding: 3px;
121 |       color: #333333;
122 |       font-size: 12px;
123 |       border-radius: 8px;
124 |       margin-right: 5px;
125 |       margin-bottom: 5px;
126 |     }
127 | 
128 |     .tag:hover {
129 |       opacity: 0.8;
130 |       transition: 0.2s;
131 |     }
132 | 
133 |     .tag-editor input {
134 |       width: 40px;
135 |       margin-left: 5px;
136 |     }
137 | 
138 |     .session-title {
139 |       font-size: 20px;
140 |       font-weight: bold;
141 |       transition: box-shadow .2s linear;
142 |       box-shadow: inset 0 -10px #fadc23;
143 |       display: inline-block;
144 |       min-height: 26px;
145 |       margin-right: 20px;
146 |     }
147 | 
148 |     .btn {
149 |       display: inline-block;
150 |       padding: 3px 5px;
151 |       color: rgb(255, 255, 255);
152 |       font-family: Helvetica, Arial, sans-serif;
153 |       font-size: 12px;
154 |       height: 16px;
155 |       line-height: 16px;
156 |       background-color: rgb(0, 181, 29);
157 |       cursor: pointer;
158 |       font-weight: 400;
159 |       border-radius: 2px;
160 |       min-width: 50px;
161 |       text-align: center;
162 |     }
163 | 
164 |     .btn:hover {
165 |       font-weight: 700;
166 |     }
167 | 
168 |     .footer-sep {
169 |       width: 10px;
170 |     }
171 | 
172 |     .upper-border {
173 |       border-top: 1px solid #eeeeee;
174 |       color: #555555;
175 |     }
176 | 
177 |     .session-move {
178 |       transition: transform 0.5s;
179 |     }
180 | 
181 |     .fav {
182 |       display: inline-block;
183 |       margin-right: 5px;
184 |       width: 16px;
185 |       height: 16px;
186 |     }
187 | 
188 |     .fav-img {
189 |       width: 100%;
190 |       max-height: 100%;
191 |     }
192 | 
193 |   </style>
194 | </head>
195 | 
196 | <body>
197 | <div id="app">
198 |   <div id="main">
199 |     <nav style="height: 20px"></nav>
200 |     <div id="title">
201 |       <h1>Tab Space</h1>
202 |     </div>
203 |     <div class="sessions-container">
204 |       <div class="session-filter">
205 |         <div class="tag-filter" :class="{'active-tag': activeTag===''}" @click="()=>activeTag=''"><b>{{ lang.all }}</b></div>
206 |         <div class="tag-filter upper-border" v-for="tag in tags" :class="{'active-tag': activeTag===tag}"
207 |              @click="()=>activeTag=tag">{{tag}}</div>
208 |       </div>
209 |       <transition-group tag="div" name="session" v-bind:css="false"
210 |                         v-on:before-enter="beforeEnter"
211 |                         v-on:enter="enter"
212 |                         v-on:leave="leave">
213 |         <div class="session" v-for="session in selectedSessions" :key="session[0]">
214 |           <div class="session-title" :id="'id'+session[0]"
215 |           >{{ session[2] || (`${lang.saveAt} ${(new Date(Number(session[0]))).Format("yyyy-MM-dd hh:mm:ss")}`) }}</div>
216 |           <a class="btn" @click.stop="restore(session[0], true, false)">{{lang.restore}}</a>
217 |           <ul class="session-sites" v-for="tab in session[1]">
218 |             <li><div class="fav"><img class="fav-img" :src="getFavicon(tab[1])" alt="">
219 |             </div><span><a class="link" :href="tab[1]">{{ (tab[0] || tab[1]) | wrap }}</a></span></li>
220 |           </ul>
221 |           <div class="session-tags">
222 |             <div class="tag" v-for="tag in (session[3] || [])">{{ tag }}</div>
223 |           </div>
224 |         </div>
225 |       </transition-group>
226 |     </div>
227 |   </div>
228 |   <footer>
229 |     <a class="link" href="mailto:joyuercn@icloud.com">{{lang.contact}}</a><span class="footer-sep"></span>
230 |     <a class="link" href="https://twitter.com/joyuer/status/1164816334305157120">Twitter</a><span class="footer-sep"></span>
231 |     <a class="link" href="http://joyuer.cn/Tab-Space" target="_blank">{{lang.about}}</a>
232 |   </footer>
233 | </div>
234 | </body>
235 | <script>
236 |   function download(filename, text) {
237 |     var element = document.createElement('a');
238 |     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
239 |     element.setAttribute('download', filename);
240 | 
241 |     element.style.display = 'none';
242 |     document.body.appendChild(element);
243 | 
244 |     element.click();
245 | 
246 |     document.body.removeChild(element);
247 |   }
248 |   Date.prototype.Format = function (fmt) {
249 |     var o = {
250 |       "y+": this.getFullYear(),
251 |       "M+": this.getMonth() + 1,
252 |       "d+": this.getDate(),
253 |       "h+": this.getHours(),
254 |       "m+": this.getMinutes(),
255 |       "s+": this.getSeconds(),
256 |       "q+": Math.floor((this.getMonth() + 3) / 3),
257 |       "S+": this.getMilliseconds()
258 |     };
259 |     for (var k in o) {
260 |       if (new RegExp("(" + k + ")").test(fmt)) {
261 |         if (k == "y+") {
262 |           fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
263 |         } else if (k == "S+") {
264 |           var lens = RegExp.$1.length;
265 |           lens = lens == 1 ? 3 : lens;
266 |           fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1, lens));
267 |         } else {
268 |           fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
269 |         }
270 |       }
271 |     }
272 |     return fmt;
273 |   }
274 | </script>
275 | <script>
276 |   let data = JSON.parse(localStorage.getItem("bookmarks") || "[]")
277 |   try {
278 |     Vue
279 |   } catch (e) {
280 |     document.body.innerText = "Please go online to view contents. 请联网以查看内容。"
281 |   }
282 |   const app = new Vue({
283 |     el: '#app',
284 |     data: {
285 |       data: data,
286 |       lang: {},
287 |       activeId: "",
288 |       tmpText: "",
289 |       tagEditorId: false,
290 |       activeTag: ""
291 |     },
292 |     mounted() {
293 |       document.addEventListener('keydown', e => {
294 |         if (e.code === 'Enter') {
295 |           e.preventDefault()
296 |           try { document.querySelector('.tag-editor input').blur() } catch (e) {}
297 |           try { document.querySelector(`#id${this.activeId}`).blur() } catch (e) {}
298 |         }
299 |       })
300 |       const urlParams = new URLSearchParams(window.location.search);
301 |       let sites = urlParams.get('site');
302 |       if (sites) {
303 |         sites = sites.split("TS#SEP")
304 |         sites = sites.map((site, id, array) => [site, array[id + 1]].reverse()).filter((site, id) => id % 2 === 0)
305 |         const time = String(Date.now())
306 |         const new_session = [time, sites]
307 |         const last_session = this.data[0] || [0, 1]
308 |         if (JSON.stringify(sites) !== JSON.stringify(last_session[1])) {
309 |           this.data.unshift(new_session)
310 |         } else {
311 |           this.data[0][0] = time
312 |         }
313 |         localStorage.setItem("bookmarks", JSON.stringify(this.data))
314 |       }
315 |       this.fetchLang()
316 |     },
317 |     filters: {
318 |       wrap: function (value) {
319 |         return (value.length > 53 ? value.slice(0, 50) + "..." : value)
320 |       }
321 |     },
322 |     computed: {
323 |       tags() {
324 |         let tags = []
325 |         this.data.forEach(session => {
326 |           session[3] && session[3].forEach(tag => tags.indexOf(tag) === -1 && tags.push(tag))
327 |         })
328 |         return tags
329 |       },
330 |       selectedSessions() {
331 |         return this.activeTag === '' ? this.data :
332 |           this.data.filter(session => session[3] && session[3].indexOf(this.activeTag) > -1)
333 |       }
334 |     },
335 |     methods: {
336 |       feedLang(lang) {
337 |         if (navigator.language.toLowerCase() === "zh-cn") {
338 |           this.lang = lang["zh-cn"]
339 |         } else {
340 |           this.lang = lang["en-us"]
341 |         }
342 |       },
343 |       getSessionById(id) {
344 |         return this.data.filter(r => r[0] === id)[0]
345 |       },
346 |       getFavicon(url) {
347 |         try {
348 |           let origin = (new URL(url)).origin
349 |           return origin + "/favicon.ico"
350 |         } catch {
351 |           return ""
352 |         }
353 |       },
354 |       restore(key, open, del) {
355 |         console.log("Restore", key)
356 |         if (open) {
357 |           this.data.map(session => {
358 |             if (session[0] === key) {
359 |               session[1].forEach(site => {
360 |                 window.open(site[1])
361 |               })
362 |             }
363 |           })
364 |         }
365 |         if (del) {
366 |           this.data = this.data.filter(session => session[0] !== key)
367 |           localStorage.setItem("bookmarks", JSON.stringify(this.data))
368 |         }
369 |       },
370 |       beforeEnter: function (el) {
371 |         el.style.opacity = 0
372 |       },
373 |       enter: function (el, done) {
374 |         setTimeout(function () {
375 |           Velocity(
376 |             el,
377 |             { opacity: 1},
378 |             { complete: done }
379 |           )
380 |         }, 0)
381 |       },
382 |       leave: function (el, done) {
383 |         el.style.padding = 0
384 |         el.style.height = 0
385 |         el.style.margin = 0
386 |         el.style.opacity = 0.1
387 |         setTimeout(function () {
388 |           Velocity(
389 |             el,
390 |             { opacity: 0},
391 |             { complete: done }
392 |           )
393 |         }, 0)
394 |       }
395 |     }
396 |   })
397 | </script>
398 | </html>
399 | 


--------------------------------------------------------------------------------
/admin/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/admin/public/favicon.ico


--------------------------------------------------------------------------------
/admin/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Tab Space</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/admin/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-view></router-view>
 4 |     <tab-space-bridge></tab-space-bridge>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import TabSpaceBridge from './components/TabSpaceBridge'
10 | 
11 |   export default {
12 |     name: "App",
13 |     components: {
14 |       TabSpaceBridge
15 |     }
16 |   }
17 | </script>
18 | 
19 | <style>
20 | .icon {
21 |   color:#666;
22 |   width: 18px;
23 | }
24 | .icon-filled {
25 |   fill: salmon
26 | }
27 | 
28 | .autosuggest ul {
29 |   margin: 5px;
30 |   padding-left: 0;
31 | }
32 | 
33 | .autosuggest input {
34 |   width: 92px;
35 |   margin: 0 2px;
36 | }
37 | 
38 | .autosuggest li {
39 |   padding: 3px;
40 |   opacity: 0.9;
41 |   cursor: pointer;
42 |   width: calc(100% - 10px);
43 |   margin-left: -1.8px;
44 |   padding-left: 10px;
45 |   font-size: 12px;
46 |   border-radius: 3px;
47 | }
48 | 
49 | .autosuggest li:hover {
50 |   background-color: #ddd;
51 | }
52 | 
53 | .autosuggest .autosuggest__results-container {
54 |   position: absolute;
55 |   width: 100px;
56 |   background-color: #f5f5f5;
57 |   margin-top: 3px;
58 |   border-radius: 4px;
59 |   z-index: 999;
60 | }
61 | 
62 | #mergeSuggest .autosuggest__results-container {
63 |   width: 12em;
64 |   max-height: 300px;
65 |   overflow-y: scroll;
66 | }
67 | 
68 | #mergeSuggest input {
69 |   width: 12em;
70 | }
71 | 
72 | 
73 | @media (prefers-color-scheme: dark) {
74 | .icon {
75 |   color:#888;
76 | }
77 | .autosuggest .autosuggest__results-container {
78 |   background-color: #555555;
79 | }
80 | .autosuggest li:hover {
81 |   background-color: #777777;
82 | }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/admin/src/assets/img/icon-webpage.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M896 64H128a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64zM128 128h768v192H128V128z m768 768H128V384h768v512z"  /><path d="M256 576h512a32 32 0 0 0 0-64H256a32 32 0 0 0 0 64zM256 736h512a32 32 0 0 0 0-64H256a32 32 0 0 0 0 64zM768 192h-64a32 32 0 0 0 0 64h64a32 32 0 0 0 0-64z"  /></svg>


--------------------------------------------------------------------------------
/admin/src/components/ExportDropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="export-dropdown">
  3 |     <span class="link" href="#" @click="exportTabs('Text')">{{lang.exportText}}</span>
  4 |     <br />
  5 |     <span class="link" href="#" @click="exportTabs('MD')">{{lang.exportMD}}</span>
  6 |     <br />
  7 |     <span class="link" href="#" @click="exportTabs('HTML')">{{lang.exportHTML}}</span>
  8 |     <br />
  9 |     <span class="link" href="#" @click="exportTabs('JSON')">{{lang.exportJSON}}</span>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import { mapState } from "vuex"
 15 | import { encode } from "mdurl"
 16 | import { download, Clipboard } from "../utility.js"
 17 | 
 18 | export default {
 19 |   name: "ExportDropdown",
 20 |   props: ["selectedSessions"],
 21 |   computed: mapState(["lang", "sessions"]),
 22 |   methods: {
 23 |     exportTabs(type) {
 24 |       let tabs = this.selectedSessions || this.sessions;
 25 |       let s = "";
 26 |       switch (type.toLowerCase()) {
 27 |         case "html":
 28 |           s = tabs.map(session => [
 29 |             session.timestamp, 
 30 |             session.sites.map(s => [s.title, s.url]),
 31 |             session.title,
 32 |             session.tags.map(t => t.name)
 33 |             ])
 34 |           fetch("export.html")
 35 |             .then(r => r.text())
 36 |             .then(r => {
 37 |               let content = r.replace(
 38 |                 'JSON.parse(localStorage.getItem("bookmarks") || "[]")',
 39 |                 JSON.stringify(s)
 40 |               );
 41 |               content = content.replace(
 42 |                 "<h1>Tab Space</h1>",
 43 |                 `<h1>{{lang.exportTitle}}</h1>`
 44 |               );
 45 |               content = content.replace(
 46 |                 `lang: {}`,
 47 |                 `lang: ${JSON.stringify(this.lang)}`
 48 |               );
 49 |               download("Tab-Space-Exported.html", content);
 50 |             });
 51 |           break;
 52 |         case "json":
 53 |           download("backup.tabspace", JSON.stringify(tabs));
 54 |           break;
 55 |         case "text":
 56 |           tabs.forEach(i => (s += this.sessionTo("text", i) + "\n\n"));
 57 |           Clipboard.copy(s);
 58 |           break;
 59 |         case "md":
 60 |           tabs.forEach(i => (s += this.sessionTo("md", i) + "\n\n"));
 61 |           Clipboard.copy(s);
 62 |           break;
 63 |         default:
 64 |           console.log("Exporting type not supported.");
 65 |       }
 66 |       let text = this.lang["export" + type];
 67 |       this.$store.commit("updateLang", {key: "export" + type, value: "OK"})
 68 |       this.lang["export" + type] = "OK";
 69 |       setTimeout(() => this.$store.commit("updateLang", {key: "export" + type, value: text}), 1000);
 70 |     },
 71 |     sessionTo(type, session) {
 72 |       let s = "";
 73 |       switch (type.toLowerCase()) {
 74 |         case "text":
 75 |           s += session.title;
 76 |           session.sites.forEach(i => {
 77 |             s += "\n- ";
 78 |             if (i.title) s += i.title + ": ";
 79 |             s += i.url;
 80 |           });
 81 |           break;
 82 |         case "md":
 83 |           s += session.title;
 84 |           session.sites.forEach(i => {
 85 |             // exclude default chars except `()`
 86 |             s += `\n- [${i.title}](${encode(i.url, ";/?:@&=+$,-_.!~*'#")})`;
 87 |           });
 88 |           break;
 89 |       }
 90 |       return s;
 91 |     }
 92 |   }
 93 | };
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | .export-dropdown {
 98 |   display: none;
 99 |   position: absolute;
100 |   margin-left: -40px;
101 |   padding: 3px;
102 |   font-size: 12px;
103 |   border: 1px solid gray;
104 |   border-radius: 5px;
105 |   text-align: left;
106 |   background-color: #fbfbfb;
107 | }
108 | 
109 | .link {
110 |   cursor: pointer;
111 | }
112 | 
113 | @media (prefers-color-scheme: dark) {
114 |   .export-dropdown {
115 |     background-color: #353535;
116 |   }
117 | }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/admin/src/components/ImportDropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="import-dropdown">
  4 |     <span>
  5 |       <label for="file-input" class="link">
  6 |         {{lang.import}}(<code>.tabspace</code>)
  7 |       </label>
  8 |       <input type="file" id="file-input" @change="importTabs" accept=".tabspace" />
  9 |     </span>
 10 |     <br />
 11 |     <span class="link" href="#" @click="displayImportOneTab">{{lang.import}} OneTab</span>
 12 |     </div>
 13 |     <div id="import-modal">
 14 |       <h3 style="margin-left: 20px">{{lang.import}} OneTab</h3>
 15 |       <textarea name="" id="import-content" cols="80" rows="30" 
 16 |       style="margin: 0 auto; display: block;"></textarea>
 17 |        <span class="link" href="#" @click="cancelImport" 
 18 |       style="float:right; margin: 10px; border: #dddddd 1px solid; padding: 3px 8px; border-radius: 4px;">{{lang.cancel}}</span>
 19 |       <span class="link" href="#" @click="importOneTab" 
 20 |       style="float:right; margin: 10px 0px 10px 10px; border: #dddddd 1px solid; padding: 3px 8px; border-radius: 4px;">{{lang.import}}</span>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import { mapState } from "vuex"
 27 | import { validateSessions, validURL } from "../utility"
 28 | 
 29 | export default {
 30 |   name: "ExportDropdown",
 31 |   props: ["selectedSessions"],
 32 |   computed: mapState(["lang", "bridge"]),
 33 |   mounted() {
 34 |     this.color = document.querySelector("#import-modal").style.color
 35 |   },
 36 |   methods: {
 37 |     importTabs(e) {
 38 |       const file = new FileReader();
 39 |       file.onload = e => {
 40 |         let importedSessions = JSON.parse(e.target.result);
 41 |         if (Array.isArray(importedSessions[0])) {
 42 |           importedSessions = importedSessions.map(session => {
 43 |             return {
 44 |               timestamp: parseInt(session[0] / 1000),
 45 |               sites: session[1].map(s => { return {title: s[0], url: s[1]} }),
 46 |               title: session[2],
 47 |               tags: session[3] ? session[3].map(t => { return {name: t} }) : []
 48 |             }
 49 |           })
 50 |         }
 51 |         console.log(importedSessions)
 52 |         if (validateSessions(importedSessions)) this.bridge.send({ cmd: "AppendSessions", bookmarks: importedSessions });
 53 |       };
 54 |       file.readAsText(e.target.files[0]);
 55 |     },
 56 |     displayImportOneTab() {
 57 |       document.querySelector("#import-modal").style.display = "block"
 58 |     },
 59 |     cancelImport() {
 60 |       document.querySelector("#import-modal").style.display = "none"
 61 |     },
 62 |     importOneTab() {
 63 |       let importedSessions = document.querySelector("#import-content").value
 64 |       document.querySelector("#import-modal").style.color = this.color
 65 |       importedSessions = importedSessions.split("\n\n")
 66 |       importedSessions = importedSessions.map(session => {
 67 |         let sites = []
 68 |         session.split("\n").forEach(site => {
 69 |           const s = {
 70 |             title: site.slice(site.indexOf(" | ") + 3),
 71 |             url: site.slice(0, site.indexOf(" | "))
 72 |           }
 73 |           if (validURL(s.url) && s.url !== s.title) sites.push(s)
 74 |         })
 75 |         return {
 76 |           timestamp: parseInt(Date.now() / 1000),
 77 |           sites: sites,
 78 |           title: "From OneTab",
 79 |           tags: []
 80 |         }
 81 |       })
 82 |       console.log(importedSessions)
 83 |       if (validateSessions(importedSessions)) {
 84 |         this.bridge.send({ cmd: "AppendSessions", bookmarks: importedSessions });
 85 |         document.querySelector("#import-content").value = ""
 86 |         document.querySelector("#import-modal").style.display = "none"
 87 |       } else {
 88 |         document.querySelector("#import-modal").style.color = "red"
 89 |       }
 90 |     }
 91 |   }
 92 | };
 93 | </script>
 94 | 
 95 | <style scoped>
 96 | .import-dropdown {
 97 |   display: none;
 98 |   position: absolute;
 99 |   margin-left: -40px;
100 |   padding: 3px;
101 |   font-size: 12px;
102 |   border: 1px solid gray;
103 |   border-radius: 5px;
104 |   text-align: left;
105 |   background-color: #fbfbfb;
106 | }
107 | 
108 | #import-modal {
109 |   display: none;
110 |   position: absolute;
111 |   width: 50vw;
112 |   top: 20vh;
113 |   left: 25vw;
114 |   right: 25vw;
115 |   z-index: 1000;
116 |   background-color: #fbfbfb;
117 |   border-radius: 10px;
118 |   border: #eeeeee 1px solid;
119 | }
120 | 
121 | @media (prefers-color-scheme: dark) {
122 |   .import-dropdown, #import-modal {
123 |     background-color: #353535;
124 |   }
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/admin/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <div>
 4 |       <a class="link" href="https://joyuer.notion.site/What-s-New-in-Tab-Space-66063fc8afea4f54906f32ef92915ea7" 
 5 |         target="_blank" style="text-decoration: none; font-style: italic" v-html="lang.whatsNew"></a>
 6 |     </div>
 7 |     <div class="export">
 8 |       <span class="link">
 9 |         {{lang.export}}
10 |         <small>▼</small>
11 |       </span>
12 |       <export-dropdown></export-dropdown>
13 |     </div>
14 |     <div class="import">
15 |       <span class="link">
16 |         {{lang.import}}
17 |         <small>▼</small>
18 |       </span>
19 |       <import-dropdown></import-dropdown>
20 |     </div>
21 |     <div>
22 |       <router-link class="link" to="/settings">{{lang.settings}}</router-link>
23 |     </div>
24 |   </nav>
25 | </template>
26 | 
27 | <script>
28 | import { mapState } from "vuex"
29 | import ExportDropdown from "./ExportDropdown"
30 | import ImportDropdown from "./ImportDropdown"
31 | 
32 | export default {
33 |   name: "Navbar",
34 |   computed: mapState(["lang", "bridge"]),
35 |   components: {
36 |     ExportDropdown,
37 |     ImportDropdown
38 |   }
39 | };
40 | </script>
41 | 
42 | <style scope>
43 |   nav {
44 |     display: flex;
45 |     justify-content: flex-end;
46 |   }
47 | 
48 |   nav > div {
49 |     margin-right: 5px;
50 |   }
51 | 
52 |   .export, .import {
53 |     display: inline-block;
54 |   }
55 | 
56 |   #file-input {
57 |     position: fixed;
58 |     right: -500px;
59 |   }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/admin/src/components/SessionCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="session" :id="session.uuid">
  3 |     <div style="display: flex; justify-content: space-between">
  4 |       <div>
  5 |         <div class="tag-btn handle" v-if="showTagBtns && activeTag === ''" :title="lang.movePrompt">
  6 |           <v-icon name="align-justify" :stroke-width="1.8" style="margin-left:1px"></v-icon>
  7 |         </div>
  8 |         <div
  9 |             class="session-title"
 10 |             :id="'id'+session.uuid"
 11 |             @click.stop="editSessionName(session.uuid)"
 12 |             @blur="updateSessionName"
 13 |             v-html="highlight(session.title || (`${lang.saveAt} ${(new Date(Number(session.timestamp))).Format('yyyy-MM-dd hh:mm')}`))"
 14 |         ></div>
 15 |       </div>
 16 |       <div style="display:inline-block; white-space:nowrap;">
 17 |         <a class="btn" @click.stop="restore(session.uuid, true, false)">
 18 |           <v-icon name="external-link" class="btn-icon"></v-icon>
 19 |         </a>
 20 |         <a class="btn del-btn" @click.stop="restore(session.uuid, false, true)">
 21 |           <v-icon name="trash-2" class="btn-icon"></v-icon>
 22 |         </a>
 23 |         <a
 24 |             class="btn del-res-btn"
 25 |             @click.stop="restore(session.uuid, true, true)"
 26 |         >
 27 |           <v-icon name="external-link" class="btn-icon"></v-icon>
 28 |           <span style="display: inline-block; transform: translateY(-3px); margin: 0 2px;"> + </span>
 29 |           <v-icon name="trash-2" class="btn-icon"></v-icon>
 30 |         </a>
 31 |         <div class="export">
 32 |           <a class="btn del-res-btn">
 33 |             <v-icon name="share-2" class="btn-icon"></v-icon>
 34 |           </a>
 35 |           <export-dropdown :selectedSessions="[session]"></export-dropdown>
 36 |         </div>
 37 |       </div>
 38 |     </div>
 39 |     <ul :class="['session-sites', {'collapsed-sites': collapse}]">
 40 |       <draggable :disabled="isEditingSession(session) || collapse" :forceFallback="true" fallbackTolerance="10" 
 41 |       :list="session.sites" group="shared" @start="() => startDragSite(session)" @end="endDragSite">
 42 |         <li :class="{'collapsed-site': collapse}" v-for="(tab, tid) in session.sites" v-bind:key="tid">
 43 |           <div v-if="editingSessionUuid === session.uuid">
 44 |             <v-icon name="compass" :stroke-width="1.5" style="margin-bottom: -3px"></v-icon>
 45 |             <input class="tab-edit" placeholder="url" type="text" v-model="tab.url"><br>
 46 |             <v-icon name="corner-down-right" :stroke-width="1" style="margin-left: 30px"></v-icon>
 47 |             <input class="tab-edit" placeholder="title" type="text" v-model="tab.title">
 48 |           </div>
 49 |           <div v-if="!isEditingSession(session) && !collapse" class="del-item" @click="delItem(tid,session)" >
 50 |             <small>X</small>
 51 |           </div>
 52 |           <div v-if="!isEditingSession(session)" class="fav">
 53 |             <img
 54 |                 class="fav-img"
 55 |                 :src="getFavicon(tab.url)"
 56 |                 :onerror="`src='${WangYeIcon}'`"
 57 |                 alt
 58 |             />
 59 |           </div>
 60 |           <span v-if="!isEditingSession(session) && !collapse" class="site-title">
 61 |             <span v-if="tabSpaceSettings['remove-site-after-click'] === 'true'" class="link" v-html="highlight(tab.title || tab.url)"
 62 |             @click="() => removeAndOpen(tid, session, tab.url)"></span>
 63 |             <a v-else class="link" :href="wrapUrl(tab.url)" v-html="highlight(tab.title || tab.url)"></a>
 64 |           </span>
 65 |         </li>
 66 |         <li v-if="isEditingSession(session)">
 67 |           <div class="tag-btn" @click="() => { session.sites.push({title: '', url: ''}) }">
 68 |             <v-icon name="file-plus" :stroke-width="2" stroke="green"></v-icon>
 69 |           </div>
 70 |         </li>
 71 |       </draggable>
 72 |     </ul>
 73 |     <div class="session-tags">
 74 |       <div
 75 |           class="tag"
 76 |           v-for="tag in session.tags"
 77 |           @click="removeTag(tag.name, session)"
 78 |           v-bind:key="tag.name"
 79 |       >
 80 |         {{ tag.name }}
 81 |       </div>
 82 |       <div class="tag-btn" :title="lang.tagPrompt" v-if="tagEditorId !== session.uuid" @click="e => addTag(e, session.uuid)">
 83 |         <v-icon name="tag" style="margin-bottom: -4px" :stroke-width="1.5"></v-icon>
 84 |       </div>
 85 |       <vue-autosuggest
 86 |         class="autosuggest"
 87 |         v-if="tagEditorId === session.uuid"
 88 |         v-model="tagKeyword"
 89 |         :suggestions="[{data: tagOptions(session.tags)}]"
 90 |         :should-render-suggestions="shouldRenderTagSuggestions" 
 91 |         :input-props="{id: 'autosuggest__input', placeholder: lang.tagPrompt, autofocus: 'autofocus'}"
 92 |         @blur="saveTag"
 93 |         @selected="chooseTag"
 94 |       >  
 95 |         <template slot-scope="{suggestion}">
 96 |           <span class="suggest-tag">{{suggestion.item}}</span>
 97 |         </template>
 98 |       </vue-autosuggest>
 99 |       <div class="tag-btn" v-if="showTagBtns || isFavorite(session)" @click="() => toggleFavorite(session)">
100 |         <v-icon name="star" :stroke-width="1.5"
101 |         :fill="isFavorite(session) ? 'salmon' : 'none'"
102 |         :stroke="isFavorite(session) ? 'salmon' : 'currentColor'"
103 |         ></v-icon>
104 |       </div>
105 |       <div v-if="showTagBtns" style="display: flex; transition: 3s">
106 |         <div :title="lang.editPrompt" v-if="editingSessionUuid !== session.uuid" class="tag-btn" 
107 |         @click="() => { editingSessionUuid = session.uuid; session.sites.push({title: '', url: ''})}">
108 |           <v-icon name="edit" :stroke-width="1.5"></v-icon>
109 |         </div>
110 |         <div v-else class="tag-btn" @click="() => { editingSessionUuid = ''; updateSession(session) }">
111 |           <v-icon name="check" :stroke-width="4" stroke="green"></v-icon>
112 |         </div>
113 |         <div class="tag-btn" :title="lang.topPrompt" @click="() => upSession(session)">
114 |           <v-icon name="arrow-up-circle" :stroke-width="1.5"></v-icon>
115 |         </div>
116 |         <div class="tag-btn" :title="lang.mergePrompt" v-if="mergeEditorId !== session.uuid" 
117 |           @click="() => mergeEditorId = session.uuid">
118 |           <v-icon name="git-merge" :stroke-width="1.8"></v-icon>
119 |         </div>
120 |         <vue-autosuggest
121 |           class="autosuggest"
122 |           id="mergeSuggest"
123 |           v-if="mergeEditorId === session.uuid"
124 |           v-model="mergeKeyword"
125 |           :suggestions="[{data: (() => mergeOptions(session.uuid))()}]"
126 |           :should-render-suggestions="shouldRenderMergeSuggestions" 
127 |           :input-props="{id: 'autosuggest__input_merge', placeholder: lang.mergePrompt, autofocus: 'autofocus'}"
128 |           @selected="(s) => chooseMerge(s.item, session)"
129 |         >  
130 |           <template slot-scope="{suggestion}">
131 |             <span>{{suggestion.item.title}}</span>
132 |           </template>
133 |         </vue-autosuggest>
134 |       </div>
135 |     </div>
136 |   </div>
137 | </template>
138 | 
139 | <script>
140 |   import { mapState, mapGetters } from 'vuex';
141 |   import { VueAutosuggest } from 'vue-autosuggest';
142 | 
143 |   import WangYeIcon from '../assets/img/icon-webpage.svg';
144 |   import Draggable from 'vuedraggable';
145 |   import ExportDropdown from './ExportDropdown';
146 | 
147 |   export default {
148 |     name: "SessionCard",
149 |     components: {
150 |       Draggable,
151 |       ExportDropdown,
152 |       VueAutosuggest
153 |     },
154 |     props: ["session", "showTagBtns"],
155 |     data() {
156 |       return {
157 |         tagEditorId: false,
158 |         mergeEditorId: false,
159 |         WangYeIcon: WangYeIcon,
160 |         tagKeyword: "",
161 |         mergeKeyword: ""
162 |       }
163 |     },
164 |     computed: {
165 |       ...mapState(["lang", "bridge", "keyword", "collapse", "sessions", "activeTag", "editingSessionUuid", "tabSpaceSettings"]),
166 |       ...mapGetters(["tags"]),
167 |       editingSessionUuid: {
168 |         get() {
169 |           return this.$store.state.editingSessionUuid
170 |         },
171 |         set(id) {
172 |           this.$store.commit("setEditingSessionUuid", id)
173 |         }
174 |       },
175 |       tagOptions() {
176 |         return function(exsitingTags) {
177 |           exsitingTags = exsitingTags.map(t => t.name)
178 |           if (Array.isArray(this.tags)) {
179 |             let pattern = ".*" + this.tagKeyword.toLowerCase().split("").join(".*") + ".*"
180 |             return this.tags.filter(tag => {
181 |               let res = tag.toLowerCase().match(new RegExp(pattern, "gi"))
182 |               return exsitingTags.indexOf(tag) === -1 && (res && res[0]) === tag.toLowerCase()
183 |             })
184 |           }
185 |           return []
186 |         }
187 |       }
188 |     },
189 |     watch: {
190 |       showTagBtns() {
191 |         this.tagEditorId = false
192 |         this.mergeEditorId = false
193 |       }
194 |     },
195 |     methods: {
196 |       mergeOptions(selfUuid) {
197 |         if (Array.isArray(this.sessions)) {
198 |           let pattern = ".*" + this.mergeKeyword.toLowerCase().split("").join(".*") + ".*"
199 |           return this.sessions.filter(session => {
200 |             let res = session.title.toLowerCase().match(new RegExp(pattern, "gi"))
201 |             return session.uuid !== selfUuid && (res && res[0]) === session.title.toLowerCase()
202 |           })
203 |         }
204 |         return []
205 |       },
206 |       isEditingSession(session) {
207 |         return this.editingSessionUuid === session.uuid
208 |       },
209 |       wrapUrl(url) {
210 |         return (url.indexOf("://") === -1) ? "http://" + url : url
211 |       },
212 |       highlight(value) {
213 |         let re = new RegExp(this.keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "i")
214 |         let res = value.match(re)
215 |         if (res) return value.replace(res[0], `<span class="highlight">${res[0]}</span>`)
216 |         return value
217 |       },
218 |       getSessionById(id) {
219 |         return this.sessions.find(session => session.uuid === id)
220 |       },
221 |       removeSessions(sessions) {
222 |         sessions.forEach(session => {
223 |           if (session.uuid.slice(0,3) === "new") {
224 |             this.$store.commit("spliceSessions", {start: this.sessions.findIndex(s => s.uuid = session.uuid), deleteCount: 1, items: []})
225 |           }
226 |         })
227 |         sessions = sessions.filter(s => s.uuid.slice(0,3) !== "new")
228 |         if (sessions.filter(s => s.sites.length === 0).length > 0)
229 |           this.bridge.send({ cmd: 'DeleteSession', bookmarks: sessions.filter(s => s.sites.length === 0) })
230 |         sessions.filter(s => s.sites.length > 0).forEach(s => {
231 |           if (s.tags.map(t => t.name).includes("@Trash")) this.bridge.send({ cmd: 'DeleteSession', bookmarks: [s] })
232 |           else this.setTag("@Trash", s)
233 |         })
234 |       },
235 |       updateSession(session) {
236 |         // delete session without any sites
237 |         console.log(session)
238 |         session.sites = session.sites.map(site => {
239 |           if (site.url && !site.title) return {url: site.url, title: site.url}
240 |           else return site
241 |         })
242 |         session.sites = session.sites.filter(site => site.title && site.url)
243 |         if (session.sites.length === 0) {
244 |           this.removeSessions([session])
245 |         } else {
246 |           let isNewSession = session.uuid.slice(0,3) === "new"
247 |           this.bridge.send({ cmd: isNewSession ? 'AppendSessions' : 'UpdateSession', bookmarks: [session] })
248 |         }
249 |       },
250 |       upSession(session) {
251 |         this.bridge.send({ cmd: 'UpSession', bookmarks: [session]})
252 |       },
253 |       getFavicon(url) {
254 |         try {
255 |           let origin = (new URL(this.wrapUrl(url))).origin
256 |           return origin + "/favicon.ico"
257 |         } catch {
258 |           return ""
259 |         }
260 |       },
261 |       restore(key, open, del) {
262 |         if (open) {
263 |           let session = this.sessions.find(s => s.uuid === key)
264 |           if (session) {
265 |             this.bridge.send({ cmd: 'RestoreSession', bookmarks: [session]})
266 |           }
267 |         }
268 |         if (del) {
269 |           const sessionsToDelete = this.sessions.filter(session => session.uuid === key)
270 |           this.removeSessions(sessionsToDelete)
271 |         }
272 |       },
273 |       editSessionName(id) {
274 |         this.activeId = id
275 |         const div = document.querySelector(`#id${id}`)
276 |         div.setAttribute('contentEditable', "true")
277 |         div.style.whiteSpace = "normal";
278 |         div.style.minWidth = "150px";
279 |         div.focus()
280 |         this.tmpText = div.innerText
281 |         document.execCommand('selectAll', false, null)
282 |       },
283 |       updateSessionName() {
284 |         const div = document.querySelector(`#id${this.activeId}`)
285 |         div.style.whiteSpace = "nowrap";
286 |         div.style.minWidth = "0";
287 |         let session = this.getSessionById(this.activeId)
288 |         session.title = div.innerText
289 |         if (session.title) this.updateSession(session)
290 |         else div.innerText = this.tmpText
291 |       },
292 |       removeAndOpen(tid, session, url) {
293 |         this.delItem(tid, session)
294 |         window.open(url)
295 |       },
296 |       delItem(tid, session) {
297 |         session.sites.splice(tid, 1)
298 |         this.updateSession(session)
299 |       },
300 |       addTag(e, id) {
301 |         this.tagEditorId = id
302 |       },
303 |       setTag(tagName, session) {
304 |         if (!tagName) return
305 |         if (!session.tags.map(t => t.name).includes(tagName)) {
306 |           session.tags.push({name: tagName})
307 |         }
308 |         this.tagKeyword = ""
309 |         this.updateSession(session)
310 |       },
311 |       saveTag() {
312 |         setTimeout(() => {
313 |           let session = this.getSessionById(this.tagEditorId) 
314 |           this.setTag(this.tagKeyword, session)
315 |           this.tagEditorId = false
316 |         }, 100)
317 |       },
318 |       chooseTag(tag) {
319 |         let session = this.getSessionById(this.tagEditorId) 
320 |         this.setTag(tag.item, session)
321 |         this.tagEditorId = false
322 |       },
323 |       chooseMerge(session, toSession) {
324 |         this.bridge.send({ cmd: 'MergeSessions', bookmarks: [toSession, session]})
325 |         this.mergeEditorId = false
326 |       },
327 |       removeTag(tag, session) {
328 |         session.tags = session.tags.filter(t => t.name !== tag)
329 |         this.updateSession(session)
330 |       },
331 |       shouldRenderTagSuggestions(size, loading) {
332 |         return size > 0 && (this.tagKeyword === "" || !loading)
333 |       },
334 |       shouldRenderMergeSuggestions(size, loading) {
335 |         return size > 0 && (this.mergeKeyword === "" || !loading)
336 |       },
337 |       isFavorite(session) {
338 |         return Boolean(session.tags.find(t => t.name === "@Favorite"))
339 |       },
340 |       toggleFavorite(session) {
341 |         if (this.isFavorite(session)) {
342 |           session.tags = session.tags.filter(t => t.name !== "@Favorite")
343 |         } else {
344 |           session.tags.push({name: "@Favorite"})
345 |         }
346 |         this.updateSession(session)
347 |       },
348 |       getSessionIdFromDraggingSite(site) {
349 |         return site.parentElement.parentElement.firstElementChild.firstElementChild.lastElementChild.id.slice(2)
350 |       },
351 |       startDragSite(session) {
352 |         let timestamp = (new Date()).getTime()
353 |         this.newSession = {
354 |           uuid: "new-" + timestamp,
355 |           title: "",
356 |           timestamp,
357 |           sites: [],
358 |           tags: this.activeTag ? [{name: this.activeTag}] : []
359 |         }
360 |         this.crtId = this.sessions.findIndex(i => i.uuid === session.uuid)
361 |         this.$store.commit("spliceSessions", {start: this.crtId + 1, deleteCount: 0, items: [this.newSession]})
362 |       },
363 |       endDragSite(e) {
364 |         if (this.newSession.sites.length === 0) this.$store.commit("spliceSessions", {start: this.crtId + 1, deleteCount: 1, items: []})
365 |         const fromId = this.getSessionIdFromDraggingSite(e.from)
366 |         const toId = this.getSessionIdFromDraggingSite(e.to)
367 |         if (fromId === toId) {
368 |           if (e.newIndex !== e.oldIndex) {
369 |             this.updateSession(this.sessions.find(item => item.uuid === fromId))
370 |           }
371 |         } else {
372 |           this.updateSession(this.sessions.find(item => item.uuid === fromId))
373 |           this.updateSession(this.sessions.find(item => item.uuid === toId))
374 |         }
375 |       }
376 |     }
377 |   }
378 | </script>
379 | 
380 | <style scoped>
381 |   .handle {
382 |     position: absolute;
383 |     margin-left: -24px;
384 |   }
385 | 
386 |   .session {
387 |     border-radius: 5px;
388 |     text-decoration: none;
389 |     width: 600px;
390 |     margin: 0 auto 20px;
391 |     padding: 15px 20px 10px 30px;
392 |     background-color: white;
393 |     box-shadow: rgba(46, 41, 51, 0.0784314) 0 1px 2px, rgba(71, 63, 79, 0.0784314) 0 2px 4px;
394 |     transition-duration: 250ms, 250ms, 250ms;
395 |     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
396 |     transition-property: transform, box-shadow, padding;
397 |   }
398 | 
399 |   .session:hover {
400 |     /* transform: translateY(-0.5px); */
401 |     box-shadow: rgba(46, 41, 51, 0.0784314) 0 2px 4px, rgba(71, 63, 79, 0.156863) 0 5px 10px;
402 |   }
403 | 
404 |   .session-tags {
405 |     display: flex;
406 |     flex-direction: row;
407 |     flex-wrap: wrap;
408 |     margin-top: 6px;
409 |   }
410 | 
411 |   .tag {
412 |     background-color: #f5f5f5;
413 |     border: 1px solid #dddddd;
414 |     padding: 3px;
415 |     color: #333333;
416 |     font-size: 12px;
417 |     border-radius: 8px;
418 |     margin-right: 5px;
419 |     margin-bottom: 5px;
420 |   }
421 | 
422 |   .tag:hover {
423 |     cursor: pointer;
424 |     text-decoration: line-through;
425 |     opacity: 0.8;
426 |     transition: 0.2s;
427 |   }
428 | 
429 |   .btn-icon {
430 |     color: white;
431 |     width: 14px;
432 |   }
433 | 
434 |   .tag-btn {
435 |     opacity: 1;
436 |     margin-top: 2px;
437 |     margin-right: 4px;
438 |     width: 20px;
439 |     height: 20px;
440 |     cursor: pointer;
441 |     transition: 0.6s;
442 |   }
443 | 
444 |   .tag-btn:hover {
445 |     opacity: 0.7;
446 |     transition: 0.1s;
447 |   }
448 | 
449 |   .session-title {
450 |     font-size: 18px;
451 |     font-weight: bold;
452 |     transition: box-shadow .2s linear;
453 |     box-shadow: inset 0 -10px #fadc23;
454 |     display: inline-block;
455 |     min-height: 22px;
456 |     max-width: 350px;
457 |     white-space: nowrap;
458 |     overflow: hidden;
459 |     text-overflow: ellipsis;
460 |     margin-right: 20px;
461 |     margin-bottom: 5px;
462 |   }
463 | 
464 |   .session-title:hover {
465 |     cursor: pointer;
466 |   }
467 | 
468 |   .site-title {
469 |     white-space: nowrap;
470 |     overflow-x: hidden;
471 |     text-overflow: ellipsis;
472 |   }
473 | 
474 |   .session-sites {
475 |     user-select: none; 
476 |     transition: 0.2s;
477 |     margin: 0 0 0 -45px;
478 |   }
479 | 
480 |   .collapsed-sites {
481 |     margin-top: 5px;
482 |     margin-left: -10px;
483 |     padding-right: 25px;
484 |   }
485 | 
486 |   .collapsed-site {
487 |     display: inline-block;
488 |     margin: 0;
489 |     padding: 0;
490 |     transition: 0.2s;
491 |   }
492 | 
493 |   .btn {
494 |     display: inline-block;
495 |     padding: 3px 5px;
496 |     margin-right: 5px;
497 |     color: rgb(255, 255, 255);
498 |     font-family: Helvetica, Arial, sans-serif;
499 |     font-size: 12px;
500 |     height: 16px;
501 |     line-height: 16px;
502 |     background-color: rgb(0, 181, 29);
503 |     cursor: pointer;
504 |     font-weight: 400;
505 |     border-radius: 2px;
506 |     min-width: 40px;
507 |     text-align: center;
508 |     box-shadow: 0.5px 0.5px 0.5px rgba(46, 41, 51, 0.0784314);
509 |   }
510 | 
511 |   .btn:hover {
512 |     opacity: 0.8;
513 |     transition: 0.1s;
514 |   }
515 | 
516 |   .del-btn {
517 |     background-color: #eb5205;
518 |   }
519 | 
520 |   .del-res-btn {
521 |     background-color: #35abe5;
522 |   }
523 | 
524 |   .tag-prompt {
525 |     font-size: 14px;
526 |     color: #999999;
527 |     margin-top: 2px;
528 |     margin-right: 5px;
529 |   }
530 | 
531 |   .fav {
532 |     display: inline-block;
533 |     margin-right: 5px;
534 |     width: 14px;
535 |     height: 14px;
536 |   }
537 | 
538 |   .fav-img {
539 |     width: 14px;
540 |     height: 14px;
541 |   }
542 | 
543 |   .del-item {
544 |     padding:0 10px;
545 |     color: #eb5205;
546 |     display: none;
547 |     font-weight: bold;
548 |     font-style: italic;
549 |     cursor: pointer;
550 |   }
551 | 
552 |   .tab-edit {
553 |     background-color: #dedede;
554 |     outline: none;
555 |     border-radius: 3px;
556 |     border-width: 0;
557 |     padding-left: 5px;
558 |     width: 400px;
559 |     font-size: 14px;
560 |     height: 18px;
561 |     line-height: 18px;
562 |     margin: 4px;
563 |   }
564 | 
565 |   @media (prefers-color-scheme: dark) {
566 |     .tab-edit {
567 |       background-color: #555;
568 |     }
569 | 
570 |     .session {
571 |       background-color: #252525;
572 |       color: #d0d0d0;
573 |     }
574 | 
575 |     .link {
576 |       background-color: #00000000;
577 |     }
578 | 
579 |     .session-title {
580 |       color: #f5f5f5;
581 |       box-shadow: inset 0 -10px #685e02;
582 |     }
583 | 
584 |     .btn {
585 |       opacity: 0.9;
586 |     }
587 | 
588 |     .fav > img {
589 |       background-color: #aaaaaa;
590 |       border-radius: 2px;
591 |     }
592 | 
593 |     .tag {
594 |       background-color: #555555;
595 |       border: #555555;
596 |       color: #eeeeee;
597 |     }
598 |   }
599 | 
600 | </style>
601 | 


--------------------------------------------------------------------------------
/admin/src/components/SessionHub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="margin-left: 30px; transition: 0.3s">
 3 |       <div @click="insertSession">
 4 |           <v-icon class="button" :stroke-width="1.2" name="plus-circle" fill="rgba(0, 181, 29, 0.2)" 
 5 |       stroke="rgb(0, 181, 29)"></v-icon>
 6 |       </div>
 7 |       <div @click="toggleCollapse">
 8 |           <v-icon class="button" :stroke-width="1.5" :name="collapse ? 'maximize' : 'minimize'" 
 9 |       :stroke="'rgb(0, 181, 29)'" style="width:26px;margin-left:2px"></v-icon>
10 |       </div>
11 |       <div @click="emptyTrash" v-if="activeTag === '@Trash'">
12 |           <v-icon class="button" :stroke-width="1.2" name="trash" fill="rgba(0, 181, 29, 0.2)" 
13 |       stroke="rgb(0, 181, 29)"></v-icon>
14 |       </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import { mapState, mapGetters } from 'vuex'
20 | export default {
21 |     computed: {
22 |       ...mapState(["bridge", "sessions", "collapse", "activeTag"]),
23 |       ...mapGetters(["displaySessions"]),
24 |     },
25 |     methods: {
26 |         insertSession() {
27 |             let timestamp = (new Date()).getTime()
28 |             let newSession = {
29 |                 uuid: "new-" + timestamp,
30 |                 title: "",
31 |                 timestamp,
32 |                 sites: [],
33 |                 tags: this.activeTag ? [{name: this.activeTag}] : []
34 |             }
35 |             this.$store.commit("spliceSessions", {start: 0, deleteCount: 0, items: [newSession]})
36 |         },
37 |         toggleCollapse() {
38 |             this.$store.commit("toggleCollapse")
39 |         },
40 |         emptyTrash() {
41 |             this.bridge.send({ cmd: "DeleteSession", bookmarks: this.sessions.filter(s => s.tags.map(t => t.name).includes("@Trash")) })
42 |         }
43 |     }
44 | }
45 | </script>
46 | 
47 | <style scoped>
48 | .button {
49 |     width: 30px;
50 |     cursor: pointer;
51 | }
52 | 
53 | .button:hover {
54 |     opacity: 0.7;
55 | }
56 | </style>


--------------------------------------------------------------------------------
/admin/src/components/SessionSidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="session-sidebar">
  3 |     <div
  4 |       class="tag-filter"
  5 |       :class="{'active-tag': activeTag===''}"
  6 |       @click="setActiveTag('')"
  7 |     >
  8 |       <b>{{ lang.all }}</b>
  9 |     </div>
 10 |     
 11 |     <div
 12 |       class="tag-filter upper-border"
 13 |       :class="{'active-tag': activeTag==='untagged'}"
 14 |       @click="setActiveTag('untagged')"
 15 |     >
 16 |       {{ lang.untagged }}
 17 |     </div>
 18 |     
 19 |     <div
 20 |       class="tag-filter upper-border"
 21 |       v-for="tag in tags"
 22 |       :key="tag"
 23 |       :class="{'active-tag': activeTag===tag}"
 24 |       @click="setActiveTag(tag)"
 25 |     >{{tag}}</div>
 26 |     <div v-if="tips.length > 0" class="tips">{{ displayTips }}</div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import _ from 'lodash'
 32 | import { mapState, mapGetters } from 'vuex'
 33 | import Constants from '../constants'
 34 | 
 35 | export default {
 36 |   name: "SessionSidebar",
 37 |   data() {
 38 |     return {
 39 |       tips: [],
 40 |       tipLang: ""
 41 |     }
 42 |   },
 43 |   computed: {
 44 |     ...mapState(["lang", "activeTag", "tabSpaceSettings"]),
 45 |     ...mapGetters(["tags"]),
 46 |     displayTips() {
 47 |       return this.tips.reduce((s, item, id) => `${s} ${this.tips.length > 1 ? String(id+1)+"." : ""} ${String(item)}`,
 48 |        this.lang["tips"])
 49 |     }
 50 |   },
 51 |   watch: {
 52 |     tabSpaceSettings(settings) {
 53 |       const newLang = settings[Constants.preferredLanguageKey]
 54 |       if (newLang && newLang !== this.tipLang) this.getTips()
 55 |     }
 56 |   },
 57 |   mounted() {
 58 |     this.getTips();
 59 |   },
 60 |   methods: {
 61 |     getTips() {
 62 |       this.tipLang = this.tabSpaceSettings[Constants.preferredLanguageKey]
 63 |       fetch(this.$myConfig.staticResourceEndpoint + "/tips.json").then(r => r.json()).then(r => {
 64 |         const allTips = r[this.tipLang] || r["en-us"]
 65 |         const { importantTips, commonTips } = allTips
 66 |         if (Array.isArray(importantTips)) this.tips = importantTips
 67 |         if (Array.isArray(commonTips)) this.tips.push(_.sample(allTips["commonTips"]))
 68 |       })
 69 |     },
 70 |     setActiveTag(tag) {
 71 |       this.$store.commit("setActiveTag", tag)
 72 |     }
 73 |   }
 74 | };
 75 | </script>
 76 | 
 77 | <style scoped>
 78 | .session-sidebar {
 79 |   width: 100px;
 80 |   margin-right: 25px;
 81 |   display: flex;
 82 |   flex-direction: column;
 83 |   transition: 0.2s;
 84 | }
 85 | 
 86 | .tag-filter {
 87 |   background-color: white;
 88 |   padding: 5px;
 89 |   padding-left: 10px;
 90 |   border-radius: 5px;
 91 |   cursor: pointer;
 92 | }
 93 | 
 94 | .tag-filter:hover {
 95 |   background-color: lightsalmon;
 96 |   border-width: 0;
 97 |   transition: 0.15s;
 98 |   margin-right: -5px;
 99 |   color: whitesmoke;
100 | }
101 | 
102 | .active-tag {
103 |   background-color: salmon;
104 |   color: white !important;
105 |   transition: 0.1s;
106 |   font-weight: bold;
107 |   margin-right: -10px;
108 | }
109 | 
110 | .tips {
111 |   margin-top: 20px;
112 |   font-size: 12px;
113 |   color: #aaaaaa;
114 | }
115 | 
116 | .upper-border {
117 |   border-top: 1px solid #eeeeee;
118 | }
119 | 
120 | @media (prefers-color-scheme: dark) {
121 |   .tag-filter {
122 |     background-color: #252525;
123 |     color: #d0d0d0;
124 |   }
125 | 
126 |   .tag-filter:hover {
127 |     color: #eeeeee;
128 |     background-color: rgba(255, 160, 122, 0.705);
129 |   }
130 | 
131 |   .active-tag {
132 |     background-color: rgba(250, 128, 114, 0.719);
133 |   }
134 | }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/admin/src/components/Sessions.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="displaySessions.length===0" class="session-placeholder">Nothing here...</div>
  4 |     <draggable
  5 |         handle=".handle"
  6 |         :list="displaySessions"
  7 |         :supportPointer="false"
  8 |         @end="endDragSession"
  9 |     >
 10 |       <transition-group
 11 |           tag="div"
 12 |           name="session"
 13 |           v-bind:css="false"
 14 |           v-on:before-enter="beforeEnter"
 15 |           v-on:enter="enter"
 16 |           v-on:leave="leave"
 17 |       >
 18 |         <session-card v-for="session in displaySessions" :key="session.uuid" :session="session"
 19 |           :showTagBtns="hoverId===session.uuid" @mouseenter.native="setHoverId(session.uuid)" @mouseleave.native="() => hoverId=null"
 20 |         ></session-card>
 21 |       </transition-group>
 22 |     </draggable>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   import Velocity from 'velocity-animate'
 28 |   import Draggable from 'vuedraggable';
 29 |   import { mapState, mapGetters } from 'vuex'
 30 | 
 31 |   import SessionCard from './SessionCard';
 32 | 
 33 |   export default {
 34 |     name: "Sessions",
 35 |     components: {
 36 |       Draggable,
 37 |       SessionCard,
 38 |     },
 39 |     data() {
 40 |       return {
 41 |         hoverId: null,
 42 |       }
 43 |     },
 44 |     computed: {
 45 |       ...mapState(["bridge", "sessions", "activeTag"]),
 46 |       ...mapGetters(["displaySessions"]),
 47 |     },
 48 |     watch: {
 49 |       displaySessions(sessions) {
 50 |         if (this.activeTag && sessions.length === 0) this.$store.commit("setActiveTag", "")
 51 |       }
 52 |     },
 53 |     mounted() {
 54 |       document.addEventListener('keydown', e => {
 55 |         if (e.code === 'Enter') {
 56 |           e.preventDefault()
 57 |           e.target.blur()
 58 |         }
 59 |       })
 60 |     },
 61 |     methods: {
 62 |       setHoverId(uuid) {
 63 |         this.hoverId=uuid
 64 |       },
 65 |       endDragSession(e) {
 66 |         if (e.newIndex !== e.oldIndex) {
 67 |           let targetSessionId = this.displaySessions[e.newIndex].uuid
 68 |           let prevSessionId = targetSessionId // while moving target to bottom
 69 |           if (e.newIndex < this.displaySessions.length - 1) { 
 70 |             prevSessionId = this.displaySessions[e.newIndex + 1].uuid
 71 |           }
 72 |           this.bridge.send({
 73 |             cmd: 'MoveSession',
 74 |             uuids: [targetSessionId, prevSessionId]
 75 |           })
 76 |         }
 77 |       },
 78 |       // List animation
 79 |       beforeEnter: function (el) {
 80 |         el.style.opacity = 0
 81 |       },
 82 |       enter(el, done) {
 83 |         Velocity(
 84 |           el,
 85 |           { opacity: 1 },
 86 |           { complete: done }
 87 |         )
 88 |       },
 89 |       leave(el, done) {
 90 |         el.style.display = 'none'
 91 |         Velocity(
 92 |           el,
 93 |           { opacity: 0 },
 94 |           { complete: done }
 95 |         )
 96 |       }
 97 |     }
 98 |   };
 99 | </script>
100 | 
101 | <style scoped>
102 |   .session-placeholder {
103 |     position: absolute;
104 |     left: calc(50vw - 55px);
105 |     top: 180px;
106 |     color: #555555;
107 |     transition: 0.3s;
108 |   }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/admin/src/components/TabSpaceBridge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <iframe id="bridgeStorage"
 3 |           :src="`${$myConfig.staticResourceEndpoint}/storage.html?method=get`"
 4 |           height="0"
 5 |           style="border: none"
 6 |   >
 7 |   </iframe>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapState } from 'vuex'
12 | import Constants from '../constants'
13 | 
14 | export default {
15 |   name: "TabSpaceBridge",
16 |   data() {
17 |     return {
18 |       iframeLoaded: false
19 |     }
20 |   },
21 |   computed: {
22 |     ...mapState(["bridge"]),
23 |     sessions: {
24 |       get() {
25 |         return this.$store.state.sessions;
26 |       },
27 |       set(value) {
28 |         this.$store.commit("setSessions", value)
29 |       }
30 |     },
31 |   },
32 |   mounted() {
33 |     this.iframe = document.querySelector("#bridgeStorage")
34 |     this.iframe.onload = () => {
35 |       console.log("Bridge iframe loaded.")
36 |       this.iframeLoaded = true
37 |       this.$store.commit("setBridge", {
38 |         send: msg => this.iframe.contentWindow.postMessage(msg, "*")
39 |       })
40 |     }
41 |     window.addEventListener("message", evt => {
42 |       // Filter out other sites' postMessage
43 |       if (
44 |         !evt.origin.includes("joyuer.cn") 
45 |         && !evt.origin.includes("mytab.space") 
46 |         && evt.origin !== "yuanzhoucq.github.io"
47 |       ) return
48 | 
49 |       switch (evt.data.cmd) {
50 |         case "ReturnBookmarks":
51 |           console.log("Received checked bookmarks from Tab Space.app.")
52 |           this.syncBookmarks(evt)
53 |           break
54 |         case "ReturnDefault":
55 |           this.$store.commit("setTabSpaceSetting", {key: evt.data.id, value: evt.data.value})
56 |       }
57 |     })
58 |     this.checkDefaults()
59 |   },
60 |   methods: {
61 |     checkDefaults() {
62 |       if (this.bridge) {
63 |         this.bridge.send({cmd: "CheckDefault", name: Constants.preferredLanguageKey})
64 |         this.bridge.send({cmd: "CheckDefault", name: Constants.externalBrowser1Key})
65 |         this.bridge.send({cmd: "CheckDefault", name: Constants.externalBrowser2Key})
66 |         Constants.settings.forEach(setting => {
67 |           this.bridge.send({cmd: "CheckDefault", name: setting})
68 |         });
69 |         this.bridge.send({cmd: "CheckDefault", name: "notification-count"})
70 |       }
71 |       else setTimeout(this.checkDefaults, 200)
72 |     },
73 |     syncBookmarks(evt) {
74 |       if (this.iframeLoaded) {
75 |         try {
76 |           const bookmarks = JSON.parse(evt.data.bookmarks)
77 |           this.sessions = bookmarks
78 |         } catch (e) {
79 |           console.log("Synced bookmarks are not valid.")
80 |         }
81 |       } else {
82 |         setTimeout(() => this.syncBookmarks(evt), 200)
83 |       }
84 |     }
85 |   }
86 | }
87 | </script>
88 | 
89 | <style>
90 | 
91 | </style>
92 | 


--------------------------------------------------------------------------------
/admin/src/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     staticResourceEndpoint: "http://static.mytab.space"
3 | }
4 | 


--------------------------------------------------------------------------------
/admin/src/constants.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     settings: [
 3 |         "ignore-pinned-tabs",
 4 |         "ignore-duplicated-tabs",
 5 |         "save-all-windows",
 6 |         "remove-site-after-click",
 7 |         "shift-shortcuts",
 8 |         "disable-shortcuts",
 9 |         "disable-context-menus"
10 |     ],
11 |     preferredLanguageKey: "preferred-language",
12 |     languages: [
13 |         {code: "ar-ae", name: "Arabic (U.A.E.)"},
14 |         {code: "zh-cn", name: "Chinese"},
15 |         {code: "da", name: "Danish"},
16 |         {code: "nl", name: "Dutch"},
17 |         {code: "en-us", name: "English"},
18 |         {code: "fr", name: "French"},
19 |         {code: "de", name: "German"},
20 |         {code: "it", name: "Italian"},
21 |         {code: "ja", name: "Japanese"},
22 |         {code: "ko", name: "Korean"},
23 |         {code: "pl", name: "Polish"},
24 |         {code: "ru", name: "Russian"},
25 |         {code: "es", name: "Spanish"},
26 |         {code: "sv", name: "Swedish"},
27 |         {code: "tr", name: "Turkish"},
28 |         {code: "uk", name: "Ukrainian"},
29 |     ],
30 |     externalBrowser1Key: "externalBrowser1",
31 |     externalBrowser2Key: "externalBrowser2",
32 |     browsers: [
33 |         "Google Chrome",
34 |         "Microsoft Edge",
35 |         "FireFox",
36 |         "Arc",
37 |         "Brave Browser"
38 |     ]
39 | }
40 | 


--------------------------------------------------------------------------------
/admin/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import App from './App';
 4 | import Admin from './pages/Admin.vue'
 5 | import Settings from './pages/Settings.vue'
 6 | import feather from 'vue-icon'
 7 | 
 8 | import store from './store'
 9 | import config from './config'
10 | Vue.config.productionTip = false
11 | Vue.prototype.$myConfig = config
12 | 
13 | Vue.use(VueRouter)
14 | Vue.use(feather, 'v-icon')
15 | 
16 | const routes = [
17 |   { path: '/', component: Admin },
18 |   { path: '/settings', component: Settings }
19 | ]
20 | 
21 | const router = new VueRouter({
22 |   routes
23 | })
24 | 
25 | new Vue({
26 |   store,
27 |   router,
28 |   render: h => h(App),
29 | }).$mount('#app')
30 | 


--------------------------------------------------------------------------------
/admin/src/notificationCount.json:
--------------------------------------------------------------------------------
1 | {
2 |     "count": 0
3 | }


--------------------------------------------------------------------------------
/admin/src/pages/Admin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="main">
  4 |       <navbar></navbar>
  5 |       <div id="title">
  6 |         <h1 style="display: inline-block; margin-left: 125px;">Tab Space</h1>
  7 |         <div id="notification" v-if="notificationCount && notificationCount !== '0' && notificationCount !== tabSpaceSettings['notification-count']">
  8 |           <span @click="openNewMsgPage">New message</span>&nbsp;
  9 |           <span v-if="showCloseMsg" @click="closeNewMsgBox">×</span>
 10 |         </div>
 11 |         <input type="text" name="keyword" id="keyword" v-model="keyword"
 12 |                placeholder="Search title, url, tag...">
 13 |         <div style="width: 55px"></div>
 14 |       </div>
 15 |       <div v-if="!bridge || !initialRefresh" style="margin-top: 160px; color: #999999">
 16 |         <vue-loading type="bars" color="#eb5205" :size="{ width: '50px', height: '50px' }"></vue-loading>
 17 |         <p align="center">Connecting to Tab Space App...</p>
 18 |       </div>
 19 |       <div class="lose-tabs" v-if="bridge && sessions.length < 1">
 20 |         <span><a class="link" @click="reload" href="#">{{lang.loseTabs}}</a></span><br/><br/>
 21 |         <router-link class="link" to="/settings">{{lang.migrateTip}}</router-link>
 22 |       </div>
 23 |       <div v-if="bridge" class="sessions-container">
 24 |         <session-sidebar></session-sidebar>
 25 |         <sessions></sessions>
 26 |         <session-hub></session-hub>
 27 |       </div>
 28 |     </div>
 29 |     <footer>
 30 |       <a class="link" href="mailto:joyuercn@icloud.com">{{lang.contact}}</a>
 31 |       <span class="footer-sep"></span>
 32 |       <a class="link" href="https://twitter.com/joyuer/status/1164816334305157120" target="_blank">Twitter</a>
 33 |       <span class="footer-sep"></span>
 34 |       <a class="link" href="https://mytab.space" target="_blank">{{lang.about}}</a>
 35 |       <span class="footer-sep"></span>
 36 |       <a class="link" href="https://joyuer.notion.site/Tab-Space-FAQ-6d9383b54d704f6d85d404be96c31dd5" target="_blank">FAQ</a>
 37 |     </footer>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 |   import _ from 'lodash'
 43 |   import { VueLoading } from 'vue-loading-template'
 44 |   import { mapState } from 'vuex'
 45 | 
 46 |   import Navbar from '../components/Navbar'
 47 |   import SessionSidebar from '../components/SessionSidebar'
 48 |   import SessionHub from '../components/SessionHub'
 49 |   import Sessions from '../components/Sessions'
 50 | 
 51 |   export default {
 52 |     components: {
 53 |       VueLoading,
 54 |       Navbar,
 55 |       SessionSidebar,
 56 |       SessionHub,
 57 |       Sessions,
 58 |     },
 59 |     data() {
 60 |       return {
 61 |         keyword: "",
 62 |         notificationCount: "",
 63 |         showCloseMsg: false
 64 |       }
 65 |     },
 66 |     computed: {
 67 |       ...mapState(["lang", "bridge", "sessions", "initialRefresh", "tabSpaceSettings"])
 68 |     },
 69 |     watch: {
 70 |       keyword(value) {
 71 |         _.debounce(() => this.$store.commit('setKeyword', value), 500)()
 72 |       }
 73 |     },
 74 |     mounted() {
 75 |       setTimeout(() => {
 76 |         fetch(this.$myConfig.staticResourceEndpoint + "/notificationCount.json").then(r => r.json()).then(r => {
 77 |           this.notificationCount = String(r["count"])
 78 |         })
 79 |       }, 1000)
 80 |     },
 81 |     methods: {
 82 |       reload() {
 83 |         window.location.reload()
 84 |       },
 85 |       openNewMsgPage() {
 86 |         this.showCloseMsg = true
 87 |         window.open("https://joyuer.notion.site/Tab-Space-Messages-cfd1c7fec58d4b36876b8484637745c2")
 88 |       },
 89 |       closeNewMsgBox() {
 90 |         this.bridge.send({cmd: "SetDefault", name: "notification-count", value: this.notificationCount})
 91 |       }
 92 |     }
 93 |   }
 94 | </script>
 95 | 
 96 | <style>
 97 |   body {
 98 |     background-image: linear-gradient(-45deg, #efefef, #fbfbfb);
 99 |     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
100 |   }
101 | 
102 |   li {
103 |     list-style: none;
104 |     padding: 4px 0 4px 15px;
105 |     margin-right: 60px;
106 |     display: flex;
107 |     align-items: center;
108 |   }
109 | 
110 |   li:hover .del-item {
111 |     display: block;
112 |     margin-left: -29.5px;
113 |     transition: 0.3s;
114 |   }
115 | 
116 |   #main {
117 |     min-height: calc(100vh - 35px);
118 |   }
119 | 
120 |   footer {
121 |     display: flex;
122 |     justify-content: center;
123 |     font-size: 14px;
124 |   }
125 | 
126 |   .link {
127 |     color: rgb(54, 49, 61);
128 |     font-weight: normal;
129 |     cursor: pointer;
130 |     text-decoration: none;
131 |   }
132 | 
133 |   li .link {
134 |     font-size: 14px;
135 |     font-weight: 500;
136 |   }
137 | 
138 |   .link:hover {
139 |     box-shadow: inset 0 -10px rgba(0, 181, 29, 0.17451);
140 |     color: rgb(0, 181, 29);
141 |   }
142 | 
143 |   #title {
144 |     width: 840px;
145 |     margin: -20px auto 0;
146 |     display: flex;
147 |     justify-content: space-between;
148 |     align-items: end;
149 |   }
150 | 
151 |   .footer-sep {
152 |     width: 10px;
153 |   }
154 | 
155 |   .sessions-container {
156 |     display: flex;
157 |     transition: 0.2s;
158 |     flex-direction: row;
159 |     justify-content: left;
160 |     width: 840px;
161 |     margin: 0 auto;
162 |   }
163 | 
164 |   .session-move {
165 |     transition: transform 0.5s;
166 |   }
167 | 
168 |   .export:hover .export-dropdown {
169 |     display: block;
170 |   }
171 | 
172 |   .import:hover .import-dropdown {
173 |     display: block;
174 |   }
175 | 
176 | 
177 |   .msg-prompt {
178 |     color: red;
179 |     font-weight: bold;
180 |   }
181 | 
182 |   .msg {
183 |     max-width: 900px;
184 |     margin: 0 auto;
185 |     color: #444444;
186 |     background-color: #dddddd;
187 |     padding: 3px 10px;
188 |   }
189 | 
190 |   .lose-tabs {
191 |     max-width: 600px;
192 |     text-align: center;
193 |     text-decoration: underline;
194 |     margin: 20px auto;
195 |     color: #444444;
196 |     padding: 3px 10px;
197 |     font-size: 12px;
198 |   }
199 | 
200 |   #keyword {
201 |     margin: 10px;
202 |     outline: none;
203 |     border-radius: 4px;
204 |     border-width: 0;
205 |     height: 30px;
206 |     font-size: 16px;
207 |     color: #444444;
208 |     width: 200px;
209 |     padding-left: 10px;
210 |     margin-left: auto;
211 |   }
212 | 
213 |   .highlight {
214 |     background-color: #fadd23;
215 |   }
216 | 
217 |   #notification {
218 |       display: inline-block;
219 |       background-color: #eb2405;
220 |       margin-left: 10px;
221 |       margin-bottom: 40px;
222 |       width: 120px;
223 |       text-align: center;
224 |       padding: 2px;
225 |       border-radius: 5px;
226 |       color: white;
227 |       cursor: pointer;
228 |     }
229 | 
230 |   @media (prefers-color-scheme: dark) {
231 |     body {
232 |       background-image: linear-gradient(-45deg, #343434, #343536);
233 |       color: #eeeeee;
234 |     }
235 | 
236 |     input {
237 |       background-color: #252525;
238 |       color: #d0d0d0;
239 |     }
240 | 
241 |     .link {
242 |       color: #d0d0d0;
243 |     }
244 | 
245 |     #keyword {
246 |       color: #eeeeee;
247 |     }
248 | 
249 |     .highlight {
250 |       background-color: #fadd236e;
251 |       color: #ffffff;
252 |     }
253 |   }
254 | </style>
255 | 


--------------------------------------------------------------------------------
/admin/src/pages/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="main">
  4 |       <nav>
  5 |         <router-link class="link" to="/">{{lang.back}}</router-link>
  6 |       </nav>
  7 |       <div id="title">
  8 |         <h1>Tab Space {{lang.settings}}</h1>
  9 |       </div>
 10 |       <div id="settings">
 11 |         <div class="setting" v-for="setting in settings" :key="setting">
 12 |           <toggle-button
 13 |           :value="tabSpaceSettings[setting]==='true'"
 14 |           :sync="true"
 15 |           @change="(e) => setDefault(e, setting)"
 16 |         ></toggle-button><label :id="setting" class="toggle-label">{{lang[setting]}}</label><br>
 17 |         </div>
 18 |         <hr style="border-width: 0; height: 1px; background-color: #dddddd; margin: 20px 0;" />
 19 |         <div>
 20 |           <label id="language" style="margin-right: 10px;">Language</label>
 21 |           <select name="languages" id="language-select" v-model="tabSpaceSettings[preferredLanguageKey]" @change="setLanguage">
 22 |             <option v-for="language in languages" :key="`lang-${language.code}`" :value="language.code">{{language.name}}</option>
 23 |           </select>
 24 |           <p>
 25 |             <a style="color: gray" href="https://joyuer.cn/Tab-Space/translate.html">Help us translate Tab Space</a>
 26 |           </p>
 27 |         </div>
 28 |       </div>
 29 |       <div class="tips">
 30 |         <hr style="border-width: 0; height: 1px; background-color: #dddddd; margin: 20px 0;" />
 31 |         <small>{{lang.goTip}}</small>
 32 | 
 33 |         <h3>{{lang.shortcuts}}</h3>
 34 |         <p>
 35 |           <small>{{lang.shortcutTip}}</small>
 36 |         </p>
 37 |         <p>
 38 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} D</code>
 39 |           {{lang.ctrlD}}
 40 |         </p>
 41 |         <p>
 42 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} L</code>
 43 |           {{lang.ctrlL}}
 44 |         </p>
 45 |         <p>
 46 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} R</code>
 47 |           {{lang.ctrlR}}
 48 |         </p>
 49 |         <p>
 50 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} K</code>
 51 |           {{lang.ctrlK}}
 52 |         </p>
 53 |         <p>
 54 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} Q</code>
 55 |           {{lang.ctrlQ}}
 56 |         </p>
 57 |         <p>
 58 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} ;</code>
 59 |           {{lang.saveAndCloseTabs}}
 60 |         </p>
 61 |         <p>
 62 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} S</code>
 63 |           {{lang.saveCurrentTab}}
 64 |         </p>
 65 |         <p>
 66 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} C</code>
 67 |           {{lang.openIn}} 
 68 |           <select name="browser1" id="browser1-select" v-model="tabSpaceSettings[externalBrowser1Key]" @change="(e) => setExternalBrowser(1, e)">
 69 |             <option v-for="browser in browsers" :key="`lang-${browser}`" :value="browser">{{browser}}</option>
 70 |           </select>
 71 |         </p>
 72 |         <p>
 73 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} F</code>
 74 |           {{lang.openIn}}
 75 |           <select name="browser2" id="browser2-select" v-model="tabSpaceSettings[externalBrowser2Key]" @change="(e) => setExternalBrowser(2, e)">
 76 |             <option v-for="browser in browsers" :key="`lang-${browser}`" :value="browser">{{browser}}</option>
 77 |           </select>
 78 |         </p>
 79 |         <p>
 80 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} T</code>
 81 |           {{lang.ctrlT}}
 82 |         </p>
 83 |         <p>
 84 |           <code>Ctrl + {{ tabSpaceSettings["shift-shortcuts"] === "true" ? "Shift +" : "" }} B</code>
 85 |           {{lang.ctrlB}}
 86 |         </p>
 87 | 
 88 |         <hr style="border-width: 0; height: 1px; background-color: #dddddd; margin: 20px 0;" />
 89 |         <span class="link" @click="manuallyMigrate" style="cursor: pointer"><small>{{lang.manuallyMigrate}}</small></span> <br/><br/>
 90 |       </div>
 91 | 
 92 |     </div>
 93 |     <footer>
 94 |       <a class="link" href="mailto:joyuercn@icloud.com">{{lang.contact}}</a>
 95 |       <span class="footer-sep"></span>
 96 |       <a class="link" href="https://twitter.com/joyuer/status/1164816334305157120" target="_blank">Twitter</a>
 97 |       <span class="footer-sep"></span>
 98 |       <a class="link" href="https://mytab.space" target="_blank">{{lang.about}}</a>
 99 |       <span class="footer-sep"></span>
100 |       <a class="link" href="https://www.notion.so/joyuer/Tab-Space-FAQ-6d9383b54d704f6d85d404be96c31dd5" target="_blank">FAQ</a>
101 |     </footer>
102 |   </div>
103 | </template>
104 | 
105 | <script>
106 | import { ToggleButton } from 'vue-js-toggle-button'
107 | import { mapState } from 'vuex'
108 | import Constants from '../constants'
109 | 
110 | export default {
111 |   name: "Settings",
112 |   components: {
113 |     ToggleButton
114 |   },
115 |   data() {
116 |     return {
117 |       ...Constants
118 |     };
119 |   },
120 |   computed: mapState(["lang", "bridge", "tabSpaceSettings"]),
121 |   methods: {
122 |     setDefault(e, setting) {
123 |       const value = e.value ? "true" : "false";
124 |       this.bridge.send({cmd: "SetDefault", name: setting, value})
125 |     },
126 |     setLanguage(e) {
127 |       this.bridge.send({cmd: "SetDefault", name: Constants.preferredLanguageKey, value: e.target.value})
128 |     },
129 |     setExternalBrowser(number, e) {
130 |       let key = number == 1 ? Constants.externalBrowser1Key : Constants.externalBrowser2Key
131 |       this.bridge.send({cmd: "SetDefault", name: key, value: e.target.value})
132 |     },
133 |     manuallyMigrate() {
134 |       this.bridge.send({cmd: "ManuallyMigrate"})
135 |       this.$router.replace({path: "/"})
136 |     }
137 |   }
138 | };
139 | </script>
140 | 
141 | <style scoped>
142 | body {
143 |   background-color: #fbfbfb;
144 |   font-family: "PingFang SC", sans-serif;
145 | }
146 | 
147 | #main {
148 |   min-height: calc(100vh - 80px);
149 | }
150 | 
151 | footer {
152 |   display: flex;
153 |   justify-content: center;
154 | }
155 | 
156 | .footer-sep {
157 |   width: 10px;
158 | }
159 | 
160 | .link {
161 |   color: rgb(54, 49, 61);
162 |   font-weight: normal;
163 | }
164 | 
165 | .link:hover {
166 |   box-shadow: inset 0 -10px rgba(0, 181, 29, 0.17451);
167 |   color: rgb(0, 181, 29);
168 | }
169 | 
170 | #title {
171 |   max-width: 600px;
172 |   margin: 0 auto;
173 | }
174 | 
175 | #settings {
176 |   max-width: 600px;
177 |   margin: 0 auto;
178 | }
179 | 
180 | .tips {
181 |   max-width: 600px;
182 |   margin: 0 auto;
183 | }
184 | 
185 | code {
186 |   background-color: darkorange;
187 |   padding: 4px;
188 |   border-radius: 3px;
189 |   color: whitesmoke;
190 | }
191 | 
192 | .setting {
193 |   margin-bottom: 10px;
194 | }
195 | 
196 | .toggle-label {
197 |   margin-left: 15px;
198 | }
199 | 
200 | @media (prefers-color-scheme: dark) {
201 |   .link {
202 |     color: #eeeeee;
203 |   }
204 | }
205 | </style>
206 | 


--------------------------------------------------------------------------------
/admin/src/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import _ from 'lodash'
  4 | import LangData from './lang'
  5 | import Constants from './constants'
  6 | 
  7 | Vue.use(Vuex);
  8 | 
  9 | const defaultTabSpaceSettings = {
 10 |     [Constants.preferredLanguageKey]: navigator.language.toLowerCase()
 11 | }
 12 | function setLang(languageCode) {
 13 |     // fallback to en-us for lang.json
 14 |     let lang = LangData[languageCode || defaultTabSpaceSettings[Constants.preferredLanguageKey]] || LangData["en-us"];
 15 |     for (let key in LangData["en-us"]) lang[key] = lang[key] || LangData["en-us"][key];
 16 |     return lang;
 17 | }
 18 | 
 19 | const store = new Vuex.Store({
 20 |     // strict: true,
 21 |     state: {
 22 |         lang: setLang(),
 23 |         bridge: null,
 24 |         initialRefresh: false,
 25 |         sessions: [],
 26 |         keyword: "",
 27 |         collapse: false,
 28 |         activeTag: "",
 29 |         editingSessionUuid: "",
 30 |         tabSpaceSettings: {
 31 |             ...defaultTabSpaceSettings
 32 |         }
 33 |     },
 34 |     getters: {
 35 |         tags: state => {
 36 |             let tags = new Set()
 37 |             state.sessions.forEach(session => {
 38 |                 if (session.tags.map(t => t.name).includes("@Trash")) {
 39 |                     // Tags of session in @Trash should not display
 40 |                     tags.add("@Trash")
 41 |                 } else {
 42 |                     session.tags.forEach(tag => tags.add(tag.name))
 43 |                 }
 44 |                 
 45 |             })
 46 |             return Array.from(tags).sort()
 47 |         },
 48 |         displaySessions: state => {
 49 |             let displaySessions = state.sessions;
 50 |             if (state.activeTag)
 51 |                 if (state.activeTag === 'untagged') {
 52 |                     displaySessions = state.sessions.filter(session => session.tags.length === 0)
 53 |                 } else {
 54 |                     displaySessions = displaySessions.filter(session => session.tags.length > 0 
 55 |                         && session.tags.map(tag => tag.name).includes(state.activeTag))
 56 |                 }
 57 |             if (state.activeTag !== '@Trash')
 58 |                 displaySessions = displaySessions.filter(session =>  
 59 |                     !session.tags.map(tag => tag.name).includes('@Trash'))
 60 |             if (state.keyword) {
 61 |                 displaySessions = displaySessions.filter(session =>
 62 |                     _.chain(session)
 63 |                     .pick(["title", "sites", "tags", "comment"])
 64 |                     .values()
 65 |                     .flatten()
 66 |                     .map(o => _.isObject(o) ? _.values(o) : o)
 67 |                     .flatten()
 68 |                     .value()
 69 |                     .join("§")
 70 |                     .toLowerCase()
 71 |                     .includes(state.keyword.toLowerCase())
 72 |                 )
 73 |                 displaySessions = displaySessions.map(s => {
 74 |                     s.comment = state.keyword
 75 |                     return s
 76 |                 })
 77 |             }
 78 |             return displaySessions
 79 |         }
 80 |     },
 81 |     mutations: {
 82 |         updateLang(state, {key, value}) {
 83 |             state.lang[key] = value
 84 |         },
 85 |         setBridge(state, bridge) {
 86 |             state.bridge = bridge
 87 |         },
 88 |         setSessions(state, newSessions) {
 89 |             state.sessions = newSessions
 90 |             state.initialRefresh = true
 91 |         },
 92 |         spliceSessions(state, payload) {
 93 |             const {start, deleteCount, items} = payload
 94 |             state.sessions.splice(start, deleteCount, ...items)
 95 |         },
 96 |         setKeyword(state, newKeyword) {
 97 |             state.keyword = newKeyword
 98 |         },
 99 |         toggleCollapse(state) {
100 |             state.collapse = !state.collapse
101 |         },
102 |         setActiveTag(state, newTag) {
103 |             state.activeTag = newTag
104 |         },
105 |         setEditingSessionUuid(state, newId) {
106 |             state.editingSessionUuid = newId
107 |         },
108 |         setTabSpaceSetting(state, {key, value}) {
109 |             let settings = { ...state.tabSpaceSettings }
110 |             settings[key] = value
111 |             if (key === Constants.preferredLanguageKey && Constants.languages.map(i=>i.code).includes(value)) {
112 |                 state.lang = setLang(value)
113 |             }
114 |             state.tabSpaceSettings = settings
115 |         }
116 |     }
117 | })
118 | 
119 | export default store;
120 | 


--------------------------------------------------------------------------------
/admin/src/tips.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "en-us": {
  3 |         "importantTips": [],
  4 |         "commonTips": [
  5 |             "You can help us translate Tab Space to your mother tongue in settings page.",
  6 |             "From Tab Space 3.6, optimized iCloud Sync will need macOS 10.15 to work. If you still use macOS 10.13/10.14 and want to use iCloud Sync of Tab Space, please turn off \"Automatic Updates\" in App Store's preferences and do not upgrade Tab Space.",
  7 |             "If you hit \"save tabs\" and found no tabs were saved, it is because Tab Space just upgraded, please restart Safari to enable it. ",
  8 |             "Your sessions are now synced across all your devices with iCloud. (macOS 10.15 required)",
  9 |             "You can now use Drag and Drop to reorganize your sessions or sites.",
 10 |             "Please rate Tab Space on Mac App Store if you like this app.",
 11 |             "Tab Space shortcuts will not work when Safari address bar is empty. Because empty address bar means a special page where extension could not be loaded."
 12 |         ]
 13 |     },
 14 |     "zh-cn": {
 15 |         "importantTips": [],
 16 |         "commonTips": [
 17 |             "从 Tab Space 3.6 开始，优化的 iCloud 同步功能需要在 macOS 10.15 上运行。如果您仍在使用 macOS 10.13/10.14 并且需要使用 Tab Space 的 iCloud 同步功能，请在 App Store 的偏好设置中关闭“自动更新”，以及请勿升级 Tab Space。",
 18 |             "如果您发现点击“保存”按钮后标签页没有被保存，这很可能是由于 Tab Space 刚刚更新，重启 Safari 以使其生效即可恢复正常。",
 19 |             "您的书签组现通过 iCloud 在设备间同步。(要求 macOS 10.15 版本）",
 20 |             "您现在可以通过拖拽保存的会话或站点以重新组织您的记录。",
 21 |             "如果您喜欢 Tab Space，请在 Mac App Store 进行评分。",
 22 |             "Tab Space 在 Safari 地址栏为空时无法使用，因为空地址栏意味着当前处于插件无法访问的特殊页面。"
 23 |         ]
 24 |     },
 25 |     "ru": {
 26 |         "importantTips": [],
 27 |         "commonTips": [
 28 |             "Если вы нажали \"сохранить вкладки\" и обнаружили что вкладки не сохранились, это потому-что Tab Space только что обновился, пожалуйста перезапустите Safari, что-бы заработало.",
 29 |             "Ваш сеанс синхронизирован со всеми вашими устройствами через iCloud. (Требуется macOS 10.15)",
 30 |             "Вы теперь можете перетаскивать ссылки для организации сеансов или сайтов.",
 31 |             "Пожалуйста оцените Tab Space на Mac App Store, если вам нравится это приложение.",
 32 |             "Быстрые комбинации Tab Space не будут работать при пустой поисковой строке Safari. Поскольку пустая поисковая строка означает особую страницу где расширения не работают. "
 33 |         ]
 34 |     },
 35 |     "tr": {
 36 |         "importantTips": [],
 37 |         "commonTips": [
 38 |             "Eğer \"save tabs\" tıklayıp hiç kayıtlı sekme bulamadıysanız, bunun nedeni Tab Space yeni güncellenmiş olmasıdır, lütfen Safari'yi yeniden başlatın. ",
 39 |             "Oturumlarınız bütün cihazlarınız arasında iCloud üzerinden senkronize oluyor. (macOS 10.15 gerektirir)",
 40 |             "Artık Tut ve Sürükle yaparak oturumlarınızı ve websitelerinizi organize edebilirsiniz.",
 41 |             "Lütfen Tab Space'yi Mac App Store üzerinden yorumlamayı unutmayın.",
 42 |             "Safari adres çubuğu boş iken kısayollar çalışmaz. Bunun nedeni boş adres çubuğu Safari uzantılarını bloklar."
 43 |         ]
 44 |     },
 45 |     "de": {
 46 |         "importantTips": [],
 47 |         "commonTips": [
 48 |             "Wenn du \"Tabs speichern\" drückst, aber keine Tabs gespeichert wurden, liegt es daran, dass Tab Space gerade aktualisiert wurde. Bitte schließe Safari und starte es erneut, um es zu aktivieren",
 49 |             "Deine Sitzungen sind nun auf all deinen Geräten über iCloud synchronisiert. (macOS 10.15 wird benötigt)",
 50 |             "Du kannst nun Drag and Drop nutzen, um deine Sitzungen und Seiten zu reorganisieren.",
 51 |             "Bitte bewerte Tab Space im Mac App Store, wenn dir die App gefällt.",
 52 |             "Tab Space Shortcuts funktionieren nicht, wenn die Safari Address-Leiste leer ist. Denn eine leere Adress-Leiste bedeutet, dass eine besondere Seite offen ist. Hier können Erweiterungen nicht geladen werden."
 53 |         ]
 54 |     },
 55 |     "sv": {
 56 |         "importantTips": [],
 57 |         "commonTips": [
 58 |             "Om du trycker på \"Spara flikar\" och inga flikar sparas är det för att Tab Space precis uppgraderats. Starta om Safari för att aktivera det igen.",
 59 |             "Dina sessioner är nu synkade till alla dina enheter i iCloud (kräver macOS 10.15)",
 60 |             "Du kan dra och släppa för att organisera om dina sessioner och sidor",
 61 |             "Betygsätt gärna Tab Space i Mac Appstore om du gillar detta program",
 62 |             "Tab Space kortkommandon kommer inte fungera om Safaris adressfält är tomt. Detta för att ett tomt adressfält laddar in en speciell sida som inte laddar in Safaris tillägg."
 63 |         ]
 64 |     },
 65 |     "it": {
 66 |         "importantTips": [],
 67 |         "commonTips": [
 68 |             "Se hai selezionato \"Salva le Tab\" e non hai trovato le tab salvate, è perchè Tab Space si è appena aggiornato. Riavvia Safari per rendere effettivo l'aggiornamento. ",
 69 |             "Le tue sessioni sono ora sincronizzate su tutti i tuoi device con iCloud (richiede macOS 10.15)",
 70 |             "Puoi ora usare il Drag and Drop per riorganizzare le tue sessioni o i tuoi siti",
 71 |             "Per favore, dai un voto a Tab Space sul Mac App Store se ti piace quest'app.",
 72 |             "Le scorciatoie di Tab Space non funzionano quando la barra di navigazione di Safari è vuota. Questo perchè quando la barra di navigazione è vuota si è in una speciale pagina dove le estensioni sono disattivate"
 73 |         ]
 74 |     },
 75 |     "ko": {
 76 |         "importantTips": [],
 77 |         "commonTips": [
 78 |             "Tab Space가 방금 업그레이드 된 경우 \"탭 저장\"을 클릭해도 탭이 저장되지 않을 수 있습니다. Safari를 재시작하여 활성화 하십시오. ",
 79 |             "저장된 세션은 이제 iCloud를 통해 여러분이 연결한 모든 장치로 동기화 됩니다. (macOS 10.15 필요)",
 80 |             "드래그 앤 드롭으로 세션이나 사이트 위치를 바꿀 수 있습니다.",
 81 |             "Tab Space가 마음에 드신다면 Mac App Store에 평가를 남겨주세요.",
 82 |             "Safari 주소창이 비어 있으면 Tab Space 단축키가 작동하지 않습니다. 빈 주소창은 확장 기능이 작동하지 않는 특수 페이지를 뜻하기 때문입니다."
 83 |         ]
 84 |     },
 85 |     "pl": {
 86 |         "importantTips": [],
 87 |         "commonTips": [
 88 |             "Jeśli klikniesz \"zapisz karty\" i żadna z kart nie zostanie zapisana, to dlatego, że Tab Space właśnie został zaktualizowany. Zrestartuj Safari, aby móc używać Tab Space ponownie.",
 89 |             "Twoje sesje zostały zsynchronizowane pomiędzy wszystkimi urządzeniami w iCloud. (wymagany macOS 10.15)",
 90 |             "Teraz możesz Przeciągać i Upuszczać swoje sesje i strony, aby dowolnie nimi zarządzać.",
 91 |             "Proszę oceń Tab Space w Mac App Store jeśli podoba ci się aplikacja.",
 92 |             "Skróty Tab Space nie działają gdy pasek adresu Safari jest pusty. Pusty pasek adresu oznacza specjalną stronę, która nie obsługuje rozszerzeń."
 93 |         ]
 94 |     },
 95 |     "es": {
 96 |         "importantTips": [],
 97 |         "commonTips": [
 98 |             "Si pulsaste \"guardar pestañas\" y las pestañas no se guardaron puede ser porque Tab Space ha sido actualizado recientemente. Por favor reinica Safari para habilitarlo. ",
 99 |             "Tus sesiones están ahora sincronizadas con todos tus dispositivos utilizando iCloud. (macOS 10.15 requerido)",
100 |             "Ahora puedes arrastrar y colocar para reorganizar tus sesiones o tus sitios.",
101 |             "Por favor califica Tab Space en el Mac App Store si te gusta la aplicación.",
102 |             "Los atajos de Tab Space no funcionan cuando la barra de dirección de Safarí está vacía. TabSpace interpreta una página vacía como algo especial donde la extensión no ha sido cargada."
103 |         ]
104 |     },
105 |     "nl": {
106 |         "importantTips": [],
107 |         "commonTips": [
108 |             "Als je op ‘Bewaar tabbladen' drukt en je ziet dat er geen tabbladen zijn opgeslagen, is het omdat Tab Space net is geüpgraded, start dan alsjeblieft Safari opnieuw op om het in te schakelen. ",
109 |             "Uw sessies worden nu op al uw apparaten gesynchroniseerd met iCloud. (macOS 10.15 vereist)",
110 |             "U kunt nu gebruik maken van Drag and Drop om uw sessies of sites te reorganiseren.",
111 |             "Beoordeel Tab Space op de Mac App Store als je dit programma leuk vindt.",
112 |             "Tab Space shortcuts werkt niet als de adresbalk van Safari leeg is. Omdat een lege adresbalk een speciale pagina betekent waardoor de extensie niet kon worden geladen."
113 |         ]
114 |     }
115 | }
116 | 


--------------------------------------------------------------------------------
/admin/src/utility.js:
--------------------------------------------------------------------------------
  1 | Date.prototype.Format = function (fmt) {
  2 |   var o = {
  3 |     "y+": this.getFullYear(),
  4 |     "M+": this.getMonth() + 1,
  5 |     "d+": this.getDate(),
  6 |     "h+": this.getHours(),
  7 |     "m+": this.getMinutes(),
  8 |     "s+": this.getSeconds(),
  9 |     "q+": Math.floor((this.getMonth() + 3) / 3),
 10 |     "S+": this.getMilliseconds()
 11 |   };
 12 |   for (var k in o) {
 13 |     if (new RegExp("(" + k + ")").test(fmt)) {
 14 |       if (k == "y+") {
 15 |         fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
 16 |       } else if (k == "S+") {
 17 |         var lens = RegExp.$1.length;
 18 |         lens = lens == 1 ? 3 : lens;
 19 |         fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1, lens));
 20 |       } else {
 21 |         fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 22 |       }
 23 |     }
 24 |   }
 25 |   return fmt;
 26 | };
 27 | 
 28 | 
 29 | module.exports = {
 30 |   validURL(str) {
 31 |     // adopted from https://stackoverflow.com/a/43467144/12251250
 32 |     // note that a scheme http or https must be present as a valid url here
 33 |     let url;
 34 |     try {
 35 |       url = new URL(str);
 36 |     } catch (_) {
 37 |       return false;  
 38 |     }
 39 |     return url.protocol === "http:" || url.protocol === "https:";
 40 |   },
 41 |   validateSessions(sessions) {
 42 |     try {
 43 |       if (!sessions.every(s => s.sites.length > 0)) throw Error
 44 |       JSON.parse(JSON.stringify(sessions))
 45 |       return true
 46 |     } catch {
 47 |       return false
 48 |     }
 49 |   },
 50 |   Clipboard: (function (window, document, navigator) {
 51 |     var textArea,
 52 |       copy;
 53 | 
 54 |     function isOS() {
 55 |       return navigator.userAgent.match(/ipad|iphone/i);
 56 |     }
 57 | 
 58 |     function createTextArea(text) {
 59 |       textArea = document.createElement('textArea');
 60 |       textArea.value = text;
 61 |       document.body.appendChild(textArea);
 62 |     }
 63 | 
 64 |     function selectText() {
 65 |       var range,
 66 |         selection;
 67 | 
 68 |       if (isOS()) {
 69 |         range = document.createRange();
 70 |         range.selectNodeContents(textArea);
 71 |         selection = window.getSelection();
 72 |         selection.removeAllRanges();
 73 |         selection.addRange(range);
 74 |         textArea.setSelectionRange(0, 999999);
 75 |       } else {
 76 |         textArea.select();
 77 |       }
 78 |     }
 79 | 
 80 |     function copyToClipboard() {
 81 |       document.execCommand('copy');
 82 |       document.body.removeChild(textArea);
 83 |     }
 84 | 
 85 |     copy = function (text) {
 86 |       createTextArea(text);
 87 |       selectText();
 88 |       copyToClipboard();
 89 |     };
 90 | 
 91 |     return {
 92 |       copy: copy
 93 |     };
 94 |   })(window, document, navigator),
 95 | 
 96 |   download(filename, text) {
 97 |     var element = document.createElement('a');
 98 |     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 99 |     element.setAttribute('download', filename);
100 | 
101 |     element.style.display = 'none';
102 |     document.body.appendChild(element);
103 | 
104 |     element.click();
105 | 
106 |     document.body.removeChild(element);
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/admin/upload.js:
--------------------------------------------------------------------------------
 1 | const OSS = require('ali-oss')
 2 | 
 3 | const client = new OSS({
 4 |   bucket: process.env['TS_BUCKET'],
 5 |   region: process.env['TS_BUCKET_LOCATION'],
 6 |   accessKeyId: process.env['ALI_ACCESSKEY'],
 7 |   accessKeySecret: process.env['ALI_ACCESSSECRET'],
 8 | });
 9 | 
10 | async function put () {
11 |   try {
12 |     let result1 = await client.put('tips.json', 'src/tips.json');
13 |     let result2 = await client.put('notificationCount.json', 'src/notificationCount.json');
14 |     console.log(result1, result2);
15 |   } catch (e) {
16 |     console.log(e);
17 |   }
18 | }
19 | 
20 | put();


--------------------------------------------------------------------------------
/admin/validate_translation.js:
--------------------------------------------------------------------------------
  1 | const assert = require("assert")
  2 | const LangData = require("./src/lang.json")
  3 | 
  4 | var langCodes = {
  5 |     "af":    "Afrikaans",
  6 |     "sq":    "Albanian",
  7 |     "an":    "Aragonese",
  8 |     "ar":    "Arabic (Standard)",
  9 |     "ar-dz": "Arabic (Algeria)",
 10 |     "ar-bh": "Arabic (Bahrain)",
 11 |     "ar-eg": "Arabic (Egypt)",
 12 |     "ar-iq": "Arabic (Iraq)",
 13 |     "ar-jo": "Arabic (Jordan)",
 14 |     "ar-kw": "Arabic (Kuwait)",
 15 |     "ar-lb": "Arabic (Lebanon)",
 16 |     "ar-ly": "Arabic (Libya)",
 17 |     "ar-ma": "Arabic (Morocco)",
 18 |     "ar-om": "Arabic (Oman)",
 19 |     "ar-qa": "Arabic (Qatar)",
 20 |     "ar-sa": "Arabic (Saudi Arabia)",
 21 |     "ar-sy": "Arabic (Syria)",
 22 |     "ar-tn": "Arabic (Tunisia)",
 23 |     "ar-ae": "Arabic (U.A.E.)",
 24 |     "ar-ye": "Arabic (Yemen)",
 25 |     "hy":    "Armenian",
 26 |     "as":    "Assamese",
 27 |     "ast":   "Asturian",
 28 |     "az":    "Azerbaijani",
 29 |     "eu":    "Basque",
 30 |     "bg":    "Bulgarian",
 31 |     "be":    "Belarusian",
 32 |     "bn":    "Bengali",
 33 |     "bs":    "Bosnian",
 34 |     "br":    "Breton",
 35 |     "bg":    "Bulgarian",
 36 |     "my":    "Burmese",
 37 |     "ca":    "Catalan",
 38 |     "ch":    "Chamorro",
 39 |     "ce":    "Chechen",
 40 |     "zh":    "Chinese",
 41 |     "zh-hk": "Chinese (Hong Kong)",
 42 |     "zh-cn": "Chinese (PRC)",
 43 |     "zh-sg": "Chinese (Singapore)",
 44 |     "zh-tw": "Chinese (Taiwan)",
 45 |     "cv":    "Chuvash",
 46 |     "co":    "Corsican",
 47 |     "cr":    "Cree",
 48 |     "hr":    "Croatian",
 49 |     "cs":    "Czech",
 50 |     "da":    "Danish",
 51 |     "nl":    "Dutch (Standard)",
 52 |     "nl-be": "Dutch (Belgian)",
 53 |     "en":    "English",
 54 |     "en-au": "English (Australia)",
 55 |     "en-bz": "English (Belize)",
 56 |     "en-ca": "English (Canada)",
 57 |     "en-ie": "English (Ireland)",
 58 |     "en-jm": "English (Jamaica)",
 59 |     "en-nz": "English (New Zealand)",
 60 |     "en-ph": "English (Philippines)",
 61 |     "en-za": "English (South Africa)",
 62 |     "en-tt": "English (Trinidad & Tobago)",
 63 |     "en-gb": "English (United Kingdom)",
 64 |     "en-us": "English (United States)",
 65 |     "en-zw": "English (Zimbabwe)",
 66 |     "eo":    "Esperanto",
 67 |     "et":    "Estonian",
 68 |     "fo":    "Faeroese",
 69 |     "fa":    "Farsi",
 70 |     "fj":    "Fijian",
 71 |     "fi":    "Finnish",
 72 |     "fr":    "French (Standard)",
 73 |     "fr-be": "French (Belgium)",
 74 |     "fr-ca": "French (Canada)",
 75 |     "fr-fr": "French (France)",
 76 |     "fr-lu": "French (Luxembourg)",
 77 |     "fr-mc": "French (Monaco)",
 78 |     "fr-ch": "French (Switzerland)",
 79 |     "fy":    "Frisian",
 80 |     "fur":   "Friulian",
 81 |     "gd":    "Gaelic (Scots)",
 82 |     "gd-ie": "Gaelic (Irish)",
 83 |     "gl":    "Galacian",
 84 |     "ka":    "Georgian",
 85 |     "de":    "German (Standard)",
 86 |     "de-at": "German (Austria)",
 87 |     "de-de": "German (Germany)",
 88 |     "de-li": "German (Liechtenstein)",
 89 |     "de-lu": "German (Luxembourg)",
 90 |     "de-ch": "German (Switzerland)",
 91 |     "el":    "Greek",
 92 |     "gu":    "Gujurati",
 93 |     "ht":    "Haitian",
 94 |     "he":    "Hebrew",
 95 |     "hi":    "Hindi",
 96 |     "hu":    "Hungarian",
 97 |     "is":    "Icelandic",
 98 |     "id":    "Indonesian",
 99 |     "iu":    "Inuktitut",
100 |     "ga":    "Irish",
101 |     "it":    "Italian (Standard)",
102 |     "it-ch": "Italian (Switzerland)",
103 |     "ja":    "Japanese",
104 |     "kn":    "Kannada",
105 |     "ks":    "Kashmiri",
106 |     "kk":    "Kazakh",
107 |     "km":    "Khmer",
108 |     "ky":    "Kirghiz",
109 |     "tlh":   "Klingon",
110 |     "ko":    "Korean",
111 |     "ko-kp": "Korean (North Korea)",
112 |     "ko-kr": "Korean (South Korea)",
113 |     "la":    "Latin",
114 |     "lv":    "Latvian",
115 |     "lt":    "Lithuanian",
116 |     "lb":    "Luxembourgish",
117 |     "mk":    "FYRO Macedonian",
118 |     "ms":    "Malay",
119 |     "ml":    "Malayalam",
120 |     "mt":    "Maltese",
121 |     "mi":    "Maori",
122 |     "mr":    "Marathi",
123 |     "mo":    "Moldavian",
124 |     "nv":    "Navajo",
125 |     "ng":    "Ndonga",
126 |     "ne":    "Nepali",
127 |     "no":    "Norwegian",
128 |     "nb":    "Norwegian (Bokmal)",
129 |     "nn":    "Norwegian (Nynorsk)",
130 |     "oc":    "Occitan",
131 |     "or":    "Oriya",
132 |     "om":    "Oromo",
133 |     "fa":    "Persian",
134 |     "fa-ir": "Persian/Iran",
135 |     "pl":    "Polish",
136 |     "pt":    "Portuguese",
137 |     "pt-br": "Portuguese (Brazil)",
138 |     "pa":    "Punjabi",
139 |     "pa-in": "Punjabi (India)",
140 |     "pa-pk": "Punjabi (Pakistan)",
141 |     "qu":    "Quechua",
142 |     "rm":    "Rhaeto-Romanic",
143 |     "ro":    "Romanian",
144 |     "ro-mo": "Romanian (Moldavia)",
145 |     "ru":    "Russian",
146 |     "ru-mo": "Russian (Moldavia)",
147 |     "sz":    "Sami (Lappish)",
148 |     "sg":    "Sango",
149 |     "sa":    "Sanskrit",
150 |     "sc":    "Sardinian",
151 |     "gd":    "Scots Gaelic",
152 |     "sd":    "Sindhi",
153 |     "si":    "Singhalese",
154 |     "sr":    "Serbian",
155 |     "sk":    "Slovak",
156 |     "sl":    "Slovenian",
157 |     "so":    "Somani",
158 |     "sb":    "Sorbian",
159 |     "es":    "Spanish",
160 |     "es-ar": "Spanish (Argentina)",
161 |     "es-bo": "Spanish (Bolivia)",
162 |     "es-cl": "Spanish (Chile)",
163 |     "es-co": "Spanish (Colombia)",
164 |     "es-cr": "Spanish (Costa Rica)",
165 |     "es-do": "Spanish (Dominican Republic)",
166 |     "es-ec": "Spanish (Ecuador)",
167 |     "es-sv": "Spanish (El Salvador)",
168 |     "es-gt": "Spanish (Guatemala)",
169 |     "es-hn": "Spanish (Honduras)",
170 |     "es-mx": "Spanish (Mexico)",
171 |     "es-ni": "Spanish (Nicaragua)",
172 |     "es-pa": "Spanish (Panama)",
173 |     "es-py": "Spanish (Paraguay)",
174 |     "es-pe": "Spanish (Peru)",
175 |     "es-pr": "Spanish (Puerto Rico)",
176 |     "es-es": "Spanish (Spain)",
177 |     "es-uy": "Spanish (Uruguay)",
178 |     "es-ve": "Spanish (Venezuela)",
179 |     "sx":    "Sutu",
180 |     "sw":    "Swahili",
181 |     "sv":    "Swedish",
182 |     "sv-fi": "Swedish (Finland)",
183 |     "sv-sv": "Swedish (Sweden)",
184 |     "ta":    "Tamil",
185 |     "tt":    "Tatar",
186 |     "te":    "Teluga",
187 |     "th":    "Thai",
188 |     "tig":   "Tigre",
189 |     "ts":    "Tsonga",
190 |     "tn":    "Tswana",
191 |     "tr":    "Turkish",
192 |     "tk":    "Turkmen",
193 |     "uk":    "Ukrainian",
194 |     "hsb":   "Upper Sorbian",
195 |     "ur":    "Urdu",
196 |     "ve":    "Venda",
197 |     "vi":    "Vietnamese",
198 |     "vo":    "Volapuk",
199 |     "wa":    "Walloon",
200 |     "cy":    "Welsh",
201 |     "xh":    "Xhosa",
202 |     "ji":    "Yiddish",
203 |     "zu":    "Zulu",
204 | };
205 | 
206 | const enUsKeys = Object.keys(LangData["en-us"])
207 | let extraKeysLength = 0
208 | let header = {lang: "Language Code", name: "Lanuage", progress: "Progress", missingKeys: "Missing Keys"}
209 | let data = []
210 | for (let lang in LangData) {
211 |     if (lang !== "en-us") {
212 |         console.log(`\x1b[1m\x1b[33m\n### Progress of Language "${lang}":\x1b[0m`)
213 |         const langKeys = Object.keys(LangData[lang])
214 |         let missingKeys = enUsKeys.filter(key => !langKeys.includes(key)).sort()
215 |         const extraKeys = langKeys.filter(key => !enUsKeys.includes(key)).sort()
216 |         const progress = `${(100 * (1 - missingKeys.length / enUsKeys.length)).toFixed(2)}%`
217 |         missingKeys = missingKeys.join(", ") || "-"
218 |         console.log(`* Translation coverage: \x1b[32m${progress}\x1b[0m`)
219 |         console.log(`* Missing keys: \x1b[35m${missingKeys}\x1b[0m`)
220 |         extraKeys.length > 0 && console.log(`* Extra keys to remove: \x1b[31m${extraKeys}\x1b[0m`)
221 |         extraKeysLength += extraKeys.length
222 |         data.push({
223 |             lang, name: langCodes[lang], progress, missingKeys
224 |         })
225 |     }
226 | }
227 | 
228 | try {
229 |     const Table = require('table-builder');
230 |     const fs = require('fs')
231 |     const table = (new Table({'class': 'greyGridTable'}))
232 |         .setHeaders(header) 
233 |         .setData(data)
234 |         .render()
235 |     // console.log('\n', table);
236 |     let tranlateHtml = fs.readFileSync('../translate.html').toString()
237 |     tranlateHtml = tranlateHtml.replace(/\<table[\s\S]+\<\/table\>/, table)
238 |     fs.writeFileSync('../translate.html', tranlateHtml)
239 | } catch (e) {
240 |     console.log('\nTable-builder not installed.')
241 | }
242 | assert(extraKeysLength === 0)
243 | 


--------------------------------------------------------------------------------
/admin/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: '',
3 |   productionSourceMap: false
4 | };
5 | 


--------------------------------------------------------------------------------
/assets/JetBrainsMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/JetBrainsMono-Regular.woff2


--------------------------------------------------------------------------------
/assets/Tab_Space_Demo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/Tab_Space_Demo.mp4


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: "JetBrains Mono";
  3 |     src: url('../JetBrainsMono-Regular.woff2')
  4 | }
  5 | 
  6 | body {
  7 |     color: #000;
  8 |     font-family: "JetBrains Mono", -apple-system, -apple-system-font, sans-serif;
  9 |     font-size: 1em;
 10 |     line-height: 1.5
 11 | }
 12 | 
 13 | h1, h2, h3, h4, h5, h6 {
 14 |     font-family: "SF Pro Display", -apple-system, sans-serif;
 15 |     font-size: 1em;
 16 |     line-height: 1.2;
 17 |     margin: 0 0 .75em;
 18 | }
 19 | 
 20 | h1 {
 21 |     font-size: 2.375em;
 22 |     font-weight: 600
 23 | }
 24 | 
 25 | h2 {
 26 |     font-size: 2.125em;
 27 |     font-weight: 600
 28 | }
 29 | 
 30 | 
 31 | p {
 32 |     margin: 0 0 .75em;
 33 |     color: #444444;
 34 | }
 35 | 
 36 | a {
 37 |     color: #1C8BF3;
 38 |     text-decoration: none;
 39 |     transition: color 150ms ease
 40 | }
 41 | 
 42 | a:active, a:focus, a:hover {
 43 |     color: #1568b6
 44 | }
 45 | 
 46 | hr {
 47 |     border-bottom: 1px solid #ddd;
 48 |     border-left: 0;
 49 |     border-right: 0;
 50 |     border-top: 0;
 51 |     margin: 1.5em 0
 52 | }
 53 | 
 54 | img, picture {
 55 |     margin: 0;
 56 |     max-width: 100%
 57 | }
 58 | 
 59 | body, html {
 60 |     background-color: #fff;
 61 |     margin: 0;
 62 |     overflow-x: hidden
 63 | }
 64 | 
 65 | html {
 66 |     box-sizing: border-box
 67 | }
 68 | 
 69 | *, *:before, *:after {
 70 |     box-sizing: inherit
 71 | }
 72 | 
 73 | .container {
 74 |     display: flex;
 75 |     margin: 0 auto;
 76 |     max-width: 1440px
 77 | }
 78 | 
 79 | p {
 80 |     font-size: 1.275em;
 81 |     font-weight: 300;
 82 |     line-height: 1.65;
 83 | }
 84 | 
 85 | p b {
 86 |     font-weight: 500
 87 | }
 88 | 
 89 | header {
 90 |     padding: 0 64px 28px;
 91 |     display: flex;
 92 |     align-items: flex-end
 93 | }
 94 | 
 95 | @media only screen and (max-width: 425px) {
 96 |     header {
 97 |         padding-left: 32px;
 98 |         padding-right: 32px
 99 |     }
100 | }
101 | 
102 | header h1 {
103 |     font-size: 1.625em;
104 |     margin: 0;
105 |     font-weight: 300
106 | }
107 | 
108 | header h1 b {
109 |     font-weight: 600
110 | }
111 | 
112 | header .logo {
113 |     display: block;
114 |     float: left;
115 |     margin-right: 18px;
116 |     height: 56px;
117 |     width: 56px;
118 |     position: relative;
119 |     top: -1px
120 | }
121 | 
122 | header .title {
123 |     clear: right;
124 |     display: block;
125 |     float: left;
126 |     margin-top: 11px
127 | }
128 | 
129 | .button:hover, .button:active, .button:focus {
130 |     color: #fff
131 | }
132 | 
133 | .app-main {
134 |     min-height: 735px;
135 |     margin: 7vh 0 0;
136 |     display: flex;
137 |     flex-direction: column;
138 |     align-content: center
139 | }
140 | 
141 | .app-main .container {
142 |     flex: 1
143 | }
144 | 
145 | @media only screen and (max-width: 1120px) {
146 |     .app-main .container {
147 |         display: block
148 |     }
149 | }
150 | 
151 | .app-main .img {
152 |     background-position: top right;
153 |     background-repeat: no-repeat;
154 |     position: relative;
155 |     background-size: 100%;
156 |     margin-left: -3%;
157 |     width: 925px;
158 |     height: 535px;
159 |     transform: scale(1.2);
160 |     transform-origin: top right;
161 |     border-radius: 15px;
162 | }
163 | 
164 | @media only screen and (max-width: 1120px) {
165 |     .app-main .img {
166 |         transform-origin: top center;
167 |         background-position: top center;
168 |         margin: 0 auto;
169 |         width: 96vw;
170 |         height: 68vw
171 |     }
172 | }
173 | 
174 | .app-main video {
175 |     background: #000;
176 |     width: 100%;
177 |     margin-top: 4%;
178 |     transform-origin: top center;
179 |     transform: scale(0.76);
180 |     border-radius: 15px;
181 | }
182 | 
183 | 
184 | @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
185 |     .app-main .app {
186 |         background-size: 402px 259px
187 |     }
188 | }
189 | 
190 | .app-main .app-article {
191 |     flex: 1;
192 |     padding: 0 30px 0 0
193 | }
194 | 
195 | @media only screen and (max-width: 1120px) {
196 |     .app-main .app-article {
197 |         padding: 0
198 |     }
199 | }
200 | 
201 | @media only screen and (max-width: 480px) {
202 |     .app-main .app-article {
203 |         min-width: inherit;
204 |         padding: 0 40px
205 |     }
206 | }
207 | 
208 | .app-main .app-article .inner {
209 |     padding: 100px 30px 0 0;
210 |     max-width: 440px
211 | }
212 | 
213 | @media only screen and (max-width: 1120px) {
214 |     .app-main .app-article .inner {
215 |         max-width: 480px;
216 |         padding-top: 80px;
217 |         padding-right: 0;
218 |         margin: 0 auto
219 |     }
220 | }
221 | 
222 | .app-main .app-article h1 {
223 |     margin-bottom: 0.55em
224 | }
225 | 
226 | .app-main .app-article p {
227 |     margin: 0 0 80px
228 | }
229 | 
230 | @media only screen and (max-width: 1120px) {
231 |     .app-main .app-article p {
232 |         margin-bottom: 60px
233 |     }
234 | }
235 | 
236 | .app-main .app-article .app-buttons {
237 |     display: flex;
238 |     flex-wrap: wrap;
239 |     justify-content: flex-start
240 | }
241 | 
242 | .app-main .app-article .app-buttons.full-width .button {
243 |     flex: 1
244 | }
245 | 
246 | .app-main .app-article .tooltip {
247 |     background: #2D3741;
248 |     border-radius: 20px;
249 |     padding: 8px 20px;
250 |     position: absolute;
251 |     color: #fff;
252 |     font-size: 0.875rem;
253 |     box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.16);
254 |     font-family: -apple-system, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
255 |     top: -30px;
256 |     left: calc(50% - 63px);
257 |     opacity: 0;
258 |     transition: top 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94)
259 | }
260 | 
261 | .app-main .app-article .tooltip:after {
262 |     height: 0;
263 |     width: 0;
264 |     border-left: 6px solid transparent;
265 |     border-right: 6px solid transparent;
266 |     border-top: 6px solid #2D3741;
267 |     content: " ";
268 |     position: absolute;
269 |     top: 100%;
270 |     left: calc(50% - 6px)
271 | }
272 | 
273 | .app-main .app-article .tooltip.show {
274 |     opacity: 1;
275 |     top: -45px
276 | }
277 | 
278 | @media only screen and (max-width: 1120px) {
279 |     .app-main .app-article .button {
280 |         flex: 1
281 |     }
282 | }
283 | 
284 | @media only screen and (max-width: 480px) {
285 |     .app-main .app-article .button {
286 |         width: 100%
287 |     }
288 | }
289 | 
290 | .app-main .app-article .button.download {
291 |     flex: 1
292 | }
293 | 
294 | @media only screen and (max-width: 480px) {
295 |     .app-main .app-article .button.download {
296 |         margin-bottom: 20px
297 |     }
298 | }
299 | 
300 | .app-main .app-article .button.sign-up {
301 |     background: none;
302 |     box-shadow: inset 0 0 0 1px #1C8BF3;
303 |     color: #0c79df;
304 |     position: relative
305 | }
306 | 
307 | @media only screen and (max-width: 1120px) {
308 |     .app-main .app-article .button.sign-up {
309 |         flex: 0.5
310 |     }
311 | }
312 | 
313 | @media only screen and (max-width: 480px) {
314 |     .app-main .app-article .button.sign-up {
315 |         flex: 1
316 |     }
317 | }
318 | 
319 | .app-main .app-article .requirements {
320 |     margin-top: 30px;
321 |     display: flex;
322 |     margin-bottom: 20px
323 | }
324 | 
325 | .app-main .app-article .requirements img {
326 |     display: block;
327 |     margin-right: 8px;
328 |     height: 32px;
329 |     width: 32px
330 | }
331 | 
332 | .app-main .app-article .requirements .title {
333 |     color: rgba(74, 74, 74, 0.95);
334 |     font-size: 0.875em;
335 |     font-weight: 400;
336 |     line-height: 1.1;
337 |     -webkit-font-smoothing: antialiased;
338 |     -moz-osx-font-smoothing: grayscale
339 | }
340 | 
341 | .app-main .app-article .requirements .subtitle {
342 |     color: #999;
343 |     font-size: 0.75em;
344 |     font-weight: 400;
345 |     -webkit-font-smoothing: antialiased;
346 |     -moz-osx-font-smoothing: grayscale
347 | }
348 | 
349 | .app-main .app-article .catalina-setup {
350 |     background: #F5F5F5;
351 |     border-radius: 50px;
352 |     padding: 10px 22px 10px 20px;
353 |     margin: 0px 11px 0 0;
354 |     font-size: 0.875em
355 | }
356 | 
357 | .app-main .app-article .catalina-setup:hover .svg-arrow {
358 |     transform: translateY(2px) translateX(4px)
359 | }
360 | 
361 | .app-main .app-article .catalina-setup a {
362 |     display: flex;
363 |     flex-direction: row;
364 |     justify-content: space-between
365 | }
366 | 
367 | .app-main .app-article .catalina-setup .svg-arrow {
368 |     transform: translateY(2px) translateX(0px);
369 |     transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
370 | }
371 | 
372 | .product-info {
373 |     background-color: #F5F5F5
374 | }
375 | 
376 | .product-info .container {
377 |     align-items: center;
378 |     display: flex;
379 |     padding: 16vh 40px 18vh;
380 |     min-height: 660px
381 | }
382 | 
383 | @media only screen and (max-width: 1120px) {
384 |     .product-info .container {
385 |         display: block
386 |     }
387 | }
388 | 
389 | .product-info .product-copy {
390 |     flex: 1;
391 |     display: flex;
392 |     flex-direction: column;
393 |     justify-content: flex-start;
394 |     align-items: center;
395 |     margin-top: -76px
396 | }
397 | 
398 | @media only screen and (max-width: 1120px) {
399 |     .product-info .product-copy {
400 |         margin-top: 0
401 |     }
402 | }
403 | 
404 | .product-info .product-copy .inner {
405 |     max-width: 440px;
406 |     padding-right: 26px
407 | }
408 | 
409 | @media only screen and (max-width: 1120px) {
410 |     .product-info .product-copy .inner {
411 |         max-width: 480px
412 |     }
413 | }
414 | 
415 | @media only screen and (max-width: 425px) {
416 |     .product-info .product-copy .inner {
417 |         padding-right: 0
418 |     }
419 | }
420 | 
421 | .product-info .product-preview {
422 |     flex: 1;
423 |     height: 400px;
424 |     max-width: 631px;
425 |     min-width: 631px
426 | }
427 | 
428 | @media only screen and (max-width: 1120px) {
429 |     .product-info .product-preview {
430 |         margin: 60px auto 0;
431 |         position: relative;
432 |         left: -10px
433 |     }
434 | }
435 | 
436 | .product-info .product-preview .wrapper {
437 |     width: 631px;
438 |     position: relative
439 | }
440 | 
441 | .product-info .product-preview .product-image-white {
442 |     position: absolute;
443 |     top: 0;
444 |     left: 0;
445 |     z-index: 2;
446 |     will-change: transform
447 | }
448 | 
449 | @media only screen and (max-width: 1120px) {
450 |     .product-info .product-preview .product-image-white {
451 |         left: 50px
452 |     }
453 | }
454 | 
455 | @media only screen and (max-width: 500px) {
456 |     .product-info .product-preview .product-image-white {
457 |         left: 30px
458 |     }
459 | }
460 | 
461 | .product-info .product-preview .product-image-dark {
462 |     position: absolute;
463 |     top: -50px;
464 |     left: 50px;
465 |     z-index: 1;
466 |     will-change: transform
467 | }
468 | 
469 | @media only screen and (max-width: 1120px) {
470 |     .product-info .product-preview .product-image-dark {
471 |         left: 20px
472 |     }
473 | }
474 | 
475 | @media only screen and (max-width: 500px) {
476 |     .product-info .product-preview .product-image-dark {
477 |         left: 0px
478 |     }
479 | }
480 | 
481 | .download-footer {
482 |     background-color: #F5F5F5;
483 |     position: relative;
484 |     z-index: 1
485 | }
486 | 
487 | .download-footer .container {
488 |     padding: 10vh 40px 0
489 | }
490 | 
491 | .download-footer .inner {
492 |     text-align: center;
493 |     margin: 0 auto;
494 |     position: relative
495 | }
496 | 
497 | .download-footer .button {
498 |     margin-bottom: 6vh;
499 |     padding: 20px 48px 21px
500 | }
501 | 
502 | .download-footer .image {
503 |     height: 220px;
504 |     overflow: hidden;
505 |     transform: translateY(60px);
506 |     transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
507 |     opacity: 0
508 | }
509 | 
510 | .download-footer .image.animate {
511 |     transform: translateY(0px);
512 |     opacity: 1
513 | }
514 | 
515 | .download-footer img {
516 |     width: 672px;
517 |     margin: 0 auto;
518 |     display: block;
519 |     max-width: 100%;
520 |     height: auto
521 | }
522 | 
523 | footer {
524 |     position: relative;
525 |     z-index: 2;
526 |     background: #fff;
527 |     height: 80px
528 | }
529 | 
530 | footer .inner {
531 |     padding: 30px 64px 0;
532 |     width: 100%
533 | }
534 | 
535 | footer .author {
536 |     text-align: center;
537 |     display: block;
538 |     font-size: 0.75em;
539 |     color: #4A4A4A;
540 |     font-weight: 400
541 | }
542 | 
543 | footer .author b {
544 |     font-weight: 600
545 | }
546 | 
547 | @media only screen and (max-width: 548px) {
548 |     footer .author {
549 |         float: none;
550 |         text-align: center;
551 |         margin: 30px 0
552 |     }
553 | }
554 | 
555 | footer .author a {
556 |     color: #4A4A4A
557 | }
558 | 
559 | footer .author a:hover {
560 |     border-bottom: 1px solid #999
561 | }
562 | 
563 | @media only screen and (max-width: 548px) {
564 |     footer .sharing {
565 |         float: none;
566 |         text-align: center
567 |     }
568 | }
569 | 
570 | body {
571 |     color: #777;
572 | }
573 | 
574 | .loader {
575 |     position: absolute;
576 |     width: 5em;
577 |     text-align: center;
578 |     left: 28em;
579 |     top: 15em;
580 |     z-index: 10000;
581 |     background-color: rgba(0, 0, 0, 0.1);
582 |     padding: 0.5em;
583 |     border-radius: 1em;
584 | }
585 | 
586 | @media only screen and (max-width: 1120px) {
587 |     .loader {
588 |         display: none;
589 |     }
590 | }
591 | 
592 | svg path,
593 | svg rect {
594 |     fill: #FF6700;
595 | }
596 | 


--------------------------------------------------------------------------------
/assets/css/style.scss:
--------------------------------------------------------------------------------
 1 | ---
 2 | ---
 3 | 
 4 | @import "{{ site.theme }}";
 5 | 
 6 | @media (min-width: 600px) {
 7 |   header {
 8 |     width: 180px;
 9 |   }
10 | 
11 |   section {
12 |     width: 600px;
13 |   }
14 | 
15 |   footer {
16 |     width: 180px;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/assets/img/Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg:
--------------------------------------------------------------------------------
 1 | <svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="156.10054" height="40" viewBox="0 0 156.10054 40">
 2 |   <title>Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917</title>
 3 |   <g>
 4 |     <g>
 5 |       <g>
 6 |         <path d="M146.57123,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.4378,6.4378,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01514.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27446,6.27446,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H146.57123c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
 7 |         <path d="M8.44483,39.125c-.30468,0-.60205-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72184,5.72184,0,0,1-.543-1.6572,12.41339,12.41339,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37032,12.37032,0,0,1,.16553-1.87207,5.75552,5.75552,0,0,1,.54346-1.6621A5.3735,5.3735,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875h139.205l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73127,12.73127,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
 8 |       </g>
 9 |       <g id="_Group_" data-name="&lt;Group&gt;">
10 |         <g id="_Group_2" data-name="&lt;Group&gt;">
11 |           <g id="_Group_3" data-name="&lt;Group&gt;">
12 |             <g id="_Group_4" data-name="&lt;Group&gt;">
13 |               <path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
14 |               <path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
15 |             </g>
16 |           </g>
17 |           <g>
18 |             <path d="M46.14895,30.49609V21.35645H46.0884l-3.74316,9.04492H40.91652l-3.75293-9.04492H37.104v9.13965H35.34816v-12.418h2.22949l4.01855,9.80176h.06836l4.01074-9.80176h2.2373v12.418Z" style="fill: #fff"/>
19 |             <path d="M49.396,27.92285c0-1.583,1.21289-2.53906,3.36523-2.668l2.47852-.1377v-.68848c0-1.00684-.66309-1.5752-1.791-1.5752a1.73035,1.73035,0,0,0-1.90137,1.27441H49.8091c.05176-1.63574,1.5752-2.79687,3.69141-2.79687,2.16016,0,3.58887,1.17871,3.58887,2.96v6.20508H55.30813V29.00684h-.043a3.23683,3.23683,0,0,1-2.85742,1.64453A2.74447,2.74447,0,0,1,49.396,27.92285Zm5.84375-.81738V26.4082l-2.22949.1377c-1.11035.06934-1.73828.55078-1.73828,1.3252,0,.792.6543,1.30859,1.65234,1.30859A2.17046,2.17046,0,0,0,55.23977,27.10547Z" style="fill: #fff"/>
20 |             <path d="M64.89309,24.55762a1.99909,1.99909,0,0,0-2.13379-1.66895c-1.42871,0-2.375,1.19629-2.375,3.08105,0,1.92773.95508,3.08887,2.3916,3.08887a1.94829,1.94829,0,0,0,2.11719-1.626h1.79A3.61835,3.61835,0,0,1,62.7593,30.6084c-2.582,0-4.26855-1.76465-4.26855-4.63867,0-2.81445,1.68652-4.63867,4.251-4.63867a3.63931,3.63931,0,0,1,3.9248,3.22656Z" style="fill: #fff"/>
21 |             <path d="M78.7593,27.13965H74.0259l-1.13672,3.35645H70.8843l4.4834-12.418h2.083l4.4834,12.418H79.895Zm-4.24316-1.54883h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
22 |             <path d="M91.61672,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438H83.0884V21.44238h1.79883v1.50586h.03418a3.21161,3.21161,0,0,1,2.88281-1.60059C90.10207,21.34766,91.61672,23.16406,91.61672,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C88.7593,29.01563,89.70656,27.81934,89.70656,25.96973Z" style="fill: #fff"/>
23 |             <path d="M101.58156,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238h1.79883v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C100.06691,21.34766,101.58156,23.16406,101.58156,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C98.72414,29.01563,99.67141,27.81934,99.67141,25.96973Z" style="fill: #fff"/>
24 |             <path d="M108.1675,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52149.75684-2.52149,1.8584c0,.87793.65431,1.39453,2.25489,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
25 |             <path d="M119.80324,19.2998v2.14258h1.72168v1.47168h-1.72168v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406h-1.31641V21.44238h1.31641V19.2998Z" style="fill: #fff"/>
26 |             <path d="M122.521,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C124.18215,30.6084,122.521,28.82617,122.521,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40137,1.16211-2.40137,3.10742c0,1.96191.89551,3.10645,2.40137,3.10645S129.21633,27.93164,129.21633,25.96973Z" style="fill: #fff"/>
27 |             <path d="M132.64309,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.598,2.598,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93651,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
28 |             <path d="M145.84035,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,139.55813,25.13477Z" style="fill: #fff"/>
29 |           </g>
30 |         </g>
31 |       </g>
32 |     </g>
33 |     <g id="_Group_5" data-name="&lt;Group&gt;">
34 |       <g>
35 |         <path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
36 |         <path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57521,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
37 |         <path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
38 |         <path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
39 |         <path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
40 |         <path d="M61.21779,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
41 |         <path d="M66.40041,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.40041,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29494,13.03955Z" style="fill: #fff"/>
42 |         <path d="M71.34768,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.07131,14.772,71.34768,13.87061,71.34768,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72072,10.91846,72.26564,11.49707,72.26564,12.44434Z" style="fill: #fff"/>
43 |         <path d="M79.22951,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.124,13.99463,82.56252,13.42432,82.56252,12.44434Z" style="fill: #fff"/>
44 |         <path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
45 |         <path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
46 |         <path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
47 |         <path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
48 |       </g>
49 |     </g>
50 |   </g>
51 | </svg>
52 | 


--------------------------------------------------------------------------------
/assets/img/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/desktop.png


--------------------------------------------------------------------------------
/assets/img/preview1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/preview1.png


--------------------------------------------------------------------------------
/assets/img/preview2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/preview2.png


--------------------------------------------------------------------------------
/assets/img/preview3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/preview3.png


--------------------------------------------------------------------------------
/assets/img/publicity.001.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.001.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.002.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.002.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.003.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.003.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.004.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.004.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.005.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.005.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.006.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.006.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.007.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.007.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.008.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.008.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.009.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.009.jpeg


--------------------------------------------------------------------------------
/assets/img/publicity.010.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/assets/img/publicity.010.jpeg


--------------------------------------------------------------------------------
/beta/css/app.fd6330c6.css:
--------------------------------------------------------------------------------
1 | .icon{color:#666;width:18px}.icon-filled{fill:salmon}@media (prefers-color-scheme:dark){.icon{color:#888}}.export-dropdown[data-v-d4494ca2]{display:none;position:absolute;margin-left:-40px;padding:3px;font-size:12px;border:1px solid grey;border-radius:5px;text-align:left;background-color:#fbfbfb}@media (prefers-color-scheme:dark){.export-dropdown[data-v-d4494ca2]{background-color:#353535}}.import-dropdown[data-v-607dc878]{display:none;position:absolute;margin-left:-40px;padding:3px;font-size:12px;border:1px solid grey;border-radius:5px;text-align:left;background-color:#fbfbfb}#import-modal[data-v-607dc878]{display:none;position:absolute;width:50vw;top:20vh;left:25vw;right:25vw;z-index:1000;background-color:#fbfbfb;border-radius:10px;border:1px solid #eee}@media (prefers-color-scheme:dark){#import-modal[data-v-607dc878],.import-dropdown[data-v-607dc878]{background-color:#353535}}nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}nav>div{margin-right:5px}.export,.import{display:inline-block}#file-input{position:fixed;right:-500px}.session-sidebar[data-v-1e170489]{width:100px;margin-right:25px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:.2s;transition:.2s}.tag-filter[data-v-1e170489]{background-color:#fff;padding:5px;padding-left:10px;border-radius:5px;cursor:pointer}.tag-filter[data-v-1e170489]:hover{background-color:#ffa07a;border-width:0;-webkit-transition:.15s;transition:.15s;margin-right:-5px;color:#f5f5f5}.active-tag[data-v-1e170489]{background-color:salmon;color:#fff!important;-webkit-transition:.1s;transition:.1s;font-weight:700;margin-right:-10px}.tips[data-v-1e170489]{margin-top:20px;font-size:12px;color:#aaa}.upper-border[data-v-1e170489]{border-top:1px solid #eee}@media (prefers-color-scheme:dark){.tag-filter[data-v-1e170489]{background-color:#252525;color:#d0d0d0}.tag-filter[data-v-1e170489]:hover{color:#eee;background-color:rgba(255,160,122,.705)}.active-tag[data-v-1e170489]{background-color:rgba(250,128,114,.719)}}.button[data-v-920e371e]{width:30px;cursor:pointer}.button[data-v-920e371e]:hover{opacity:.7}.session[data-v-6d9cd137]{border-radius:5px;text-decoration:none;width:600px;margin:0 auto 20px;padding:15px 20px 10px 30px;background-color:#fff;-webkit-box-shadow:rgba(46,41,51,.0784314) 0 1px 2px,rgba(71,63,79,.0784314) 0 2px 4px;box-shadow:0 1px 2px rgba(46,41,51,.0784314),0 2px 4px rgba(71,63,79,.0784314);-webkit-transition-duration:.25s,.25s,.25s;transition-duration:.25s,.25s,.25s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1);-webkit-transition-property:padding,-webkit-transform,-webkit-box-shadow;transition-property:padding,-webkit-transform,-webkit-box-shadow;transition-property:transform,box-shadow,padding;transition-property:transform,box-shadow,padding,-webkit-transform,-webkit-box-shadow}.session[data-v-6d9cd137]:hover{-webkit-box-shadow:rgba(46,41,51,.0784314) 0 2px 4px,rgba(71,63,79,.156863) 0 5px 10px;box-shadow:0 2px 4px rgba(46,41,51,.0784314),0 5px 10px rgba(71,63,79,.156863)}.session-tags[data-v-6d9cd137]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3px}.tag[data-v-6d9cd137]{background-color:#f5f5f5;border:1px solid #ddd;padding:3px;color:#333;font-size:12px;border-radius:8px;margin-right:5px;margin-bottom:5px}.tag[data-v-6d9cd137]:hover{cursor:pointer;text-decoration:line-through;opacity:.8;-webkit-transition:.2s;transition:.2s}.btn-icon[data-v-6d9cd137]{color:#fff;width:14px}.tag-btn[data-v-6d9cd137]{opacity:1;margin-top:2px;width:20px;height:20px;cursor:pointer}.tag-btn[data-v-6d9cd137]:hover{opacity:.7;-webkit-transition:.1s;transition:.1s}.tag-editor input[data-v-6d9cd137]{width:40px;margin-left:5px}.session-title[data-v-6d9cd137]{font-size:20px;font-weight:700;-webkit-transition:-webkit-box-shadow .2s linear;transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear;transition:box-shadow .2s linear,-webkit-box-shadow .2s linear;-webkit-box-shadow:inset 0 -10px #fadc23;box-shadow:inset 0 -10px #fadc23;display:inline-block;min-height:26px;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:20px;margin-bottom:5px}.session-title[data-v-6d9cd137]:hover{cursor:pointer}.site-title[data-v-6d9cd137]{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.btn[data-v-6d9cd137]{display:inline-block;padding:3px 5px;margin-right:5px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:12px;height:16px;line-height:16px;background-color:#00b51d;cursor:pointer;font-weight:400;border-radius:2px;min-width:40px;text-align:center;-webkit-box-shadow:.5px .5px .5px rgba(46,41,51,.0784314);box-shadow:.5px .5px .5px rgba(46,41,51,.0784314)}.btn[data-v-6d9cd137]:hover{opacity:.8;-webkit-transition:.1s;transition:.1s}.del-btn[data-v-6d9cd137]{background-color:#eb5205}.del-res-btn[data-v-6d9cd137]{background-color:#35abe5}.tag-prompt[data-v-6d9cd137]{font-size:14px;color:#999;margin-top:2px;margin-right:5px}.fav[data-v-6d9cd137]{display:inline-block;margin-right:5px}.fav-img[data-v-6d9cd137],.fav[data-v-6d9cd137]{width:16px;height:16px}.del-item[data-v-6d9cd137]{padding:0 10px;color:#eb5205;display:none;font-weight:700;font-style:italic;cursor:pointer}.tab-edit[data-v-6d9cd137]{background-color:#dedede;outline:none;border-radius:3px;border-width:0;padding-left:5px;width:400px;font-size:14px;height:18px;line-height:18px;margin:4px}@media (prefers-color-scheme:dark){.tab-edit[data-v-6d9cd137]{background-color:#555}.session[data-v-6d9cd137]{background-color:#252525;color:#d0d0d0}.link[data-v-6d9cd137]{background-color:transparent}.session-title[data-v-6d9cd137]{color:#f5f5f5;-webkit-box-shadow:inset 0 -10px #685e02;box-shadow:inset 0 -10px #685e02}.btn[data-v-6d9cd137]{opacity:.9}.fav>img[data-v-6d9cd137]{background-color:#aaa;border-radius:2px}.tag[data-v-6d9cd137]{background-color:#555;border:#555;color:#eee}}.session-placeholder[data-v-3a9a821c]{position:absolute;left:calc(50vw - 55px);top:180px;color:#555;-webkit-transition:.3s;transition:.3s}body{background-image:linear-gradient(-45deg,#efefef,#fbfbfb);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}li{list-style:none;padding:4px 0 4px 40px;margin-right:100px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}li:hover .del-item{display:block;margin-left:-29.5px;-webkit-transition:.3s;transition:.3s}ul{margin:0 0 0 -45px}#main{min-height:calc(100vh - 35px)}footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:14px}.link{color:#36313d;font-weight:400}.link:hover{-webkit-box-shadow:inset 0 -10px rgba(0,181,29,.17451);box-shadow:inset 0 -10px rgba(0,181,29,.17451);color:#00b51d}#title{width:800px;margin:-20px auto 0}.footer-sep{width:10px}.sessions-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:.2s;transition:.2s;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;width:840px;margin:0 auto}.session-move{-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}.export:hover .export-dropdown,.import:hover .import-dropdown{display:block}.msg-prompt{color:red;font-weight:700}.msg{max-width:900px;margin:0 auto;background-color:#ddd}.lose-tabs,.msg{color:#444;padding:3px 10px}.lose-tabs{max-width:600px;text-align:center;text-decoration:underline;margin:20px auto;font-size:12px}#keyword{margin:10px 10px 10px 260px;outline:none;border-radius:4px;border-width:0;height:30px;font-size:16px;color:#444;width:200px;padding-left:10px}.highlight{background-color:#fadd23}@media (prefers-color-scheme:dark){body{background-image:linear-gradient(-45deg,#343434,#343536);color:#eee}input{background-color:#252525}.link,input{color:#d0d0d0}#keyword{color:#eee}.highlight{background-color:rgba(250,221,35,.43);color:#fff}}body[data-v-267db3d0]{background-color:#fbfbfb;font-family:PingFang SC,sans-serif}#main[data-v-267db3d0]{min-height:calc(100vh - 80px)}footer[data-v-267db3d0]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer-sep[data-v-267db3d0]{width:10px}.link[data-v-267db3d0]{color:#36313d;font-weight:400}.link[data-v-267db3d0]:hover{-webkit-box-shadow:inset 0 -10px rgba(0,181,29,.17451);box-shadow:inset 0 -10px rgba(0,181,29,.17451);color:#00b51d}#settings[data-v-267db3d0],#title[data-v-267db3d0],.tips[data-v-267db3d0]{max-width:600px;margin:0 auto}code[data-v-267db3d0]{background-color:#ff8c00;padding:4px;border-radius:3px;color:#f5f5f5}.setting[data-v-267db3d0]{margin-bottom:10px}.toggle-label[data-v-267db3d0]{margin-left:15px}@media (prefers-color-scheme:dark){.link[data-v-267db3d0]{color:#eee}}


--------------------------------------------------------------------------------
/beta/export.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>Tab Space Exported Tabs</title>
  6 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  7 |   <!-- prod -->
  8 |   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
  9 |   <!-- dev -->
 10 |   <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>-->
 11 |   <style>
 12 |     body {
 13 |       background-image: linear-gradient(-45deg, #efefef, #fbfbfb);
 14 |       font-family: "PingFang SC",sans-serif;
 15 |     }
 16 | 
 17 |     li {
 18 |       list-style: none;
 19 |       margin-left: -20px;
 20 |       display: flex;
 21 |       align-items: center;
 22 |     }
 23 | 
 24 |     ul {
 25 |       margin: 4px 0;
 26 |     }
 27 | 
 28 |     #main {
 29 |       min-height: calc(100vh - 35px);
 30 |     }
 31 | 
 32 |     footer {
 33 |       display: flex;
 34 |       justify-content: center;
 35 |       font-size: 14px;
 36 |     }
 37 | 
 38 |     .link {
 39 |       color: rgb(54, 49, 61);
 40 |       font-weight: normal;
 41 |     }
 42 | 
 43 |     .link:hover {
 44 |       box-shadow: inset 0 -10px rgba(0, 181, 29, 0.17451);
 45 |       color: rgb(0, 181, 29);
 46 |     }
 47 | 
 48 |     #title {
 49 |       max-width: 600px;
 50 |       margin: 0 auto;
 51 |       margin-top: -20px;
 52 |     }
 53 | 
 54 |     .sessions-container {
 55 |       display: flex;
 56 |       transition: 0.2s;
 57 |       flex-direction: row;
 58 |       justify-content: center;
 59 |     }
 60 | 
 61 |     .session-filter {
 62 |       width: 100px;
 63 |       margin-right: 25px;
 64 |       display: flex;
 65 |       flex-direction: column;
 66 |     }
 67 | 
 68 |     .tag-filter {
 69 |       background-color: white;
 70 |       padding: 5px;
 71 |       padding-left: 10px;
 72 |       border-radius: 5px;
 73 |       cursor: pointer;
 74 |     }
 75 | 
 76 |     .tag-filter:hover {
 77 |       background-color: lightsalmon;
 78 |       border-width: 0;
 79 |       transition: 0.15s;
 80 |       margin-right: -5px;
 81 |       color: whitesmoke;
 82 |     }
 83 | 
 84 |     .active-tag {
 85 |       background-color: salmon;
 86 |       color: white !important;
 87 |       transition: 0.1s;
 88 |       font-weight: bold;
 89 |       margin-right: -10px;
 90 |     }
 91 | 
 92 |     .session {
 93 |       border-radius: 5px;
 94 |       text-decoration: none;
 95 |       width: 600px;
 96 |       margin: 20px auto;
 97 |       margin-top: 0;
 98 |       padding: 15px 80px 10px 40px;
 99 |       background-color: white;
100 |       box-shadow: rgba(46, 41, 51, 0.0784314) 0 1px 2px, rgba(71, 63, 79, 0.0784314) 0 2px 4px;
101 |       transition-duration: 250ms, 250ms, 250ms;
102 |       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
103 |       transition-property: transform, box-shadow, padding;
104 |     }
105 | 
106 |     .session:hover {
107 |       transform: translateY(-0.5px);
108 |       box-shadow: rgba(46, 41, 51, 0.0784314) 0 3px 6px, rgba(71, 63, 79, 0.156863) 0 6px 12px;
109 |     }
110 | 
111 |     .session-tags {
112 |       display: flex;
113 |       flex-direction: row;
114 |       flex-wrap: wrap;
115 |     }
116 | 
117 |     .tag {
118 |       background-color: #f5f5f5;
119 |       border: 1px solid #dddddd;
120 |       padding: 3px;
121 |       color: #333333;
122 |       font-size: 12px;
123 |       border-radius: 8px;
124 |       margin-right: 5px;
125 |       margin-bottom: 5px;
126 |     }
127 | 
128 |     .tag:hover {
129 |       opacity: 0.8;
130 |       transition: 0.2s;
131 |     }
132 | 
133 |     .tag-editor input {
134 |       width: 40px;
135 |       margin-left: 5px;
136 |     }
137 | 
138 |     .session-title {
139 |       font-size: 20px;
140 |       font-weight: bold;
141 |       transition: box-shadow .2s linear;
142 |       box-shadow: inset 0 -10px #fadc23;
143 |       display: inline-block;
144 |       min-height: 26px;
145 |       margin-right: 20px;
146 |     }
147 | 
148 |     .btn {
149 |       display: inline-block;
150 |       padding: 3px 5px;
151 |       color: rgb(255, 255, 255);
152 |       font-family: Helvetica, Arial, sans-serif;
153 |       font-size: 12px;
154 |       height: 16px;
155 |       line-height: 16px;
156 |       background-color: rgb(0, 181, 29);
157 |       cursor: pointer;
158 |       font-weight: 400;
159 |       border-radius: 2px;
160 |       min-width: 50px;
161 |       text-align: center;
162 |     }
163 | 
164 |     .btn:hover {
165 |       font-weight: 700;
166 |     }
167 | 
168 |     .footer-sep {
169 |       width: 10px;
170 |     }
171 | 
172 |     .upper-border {
173 |       border-top: 1px solid #eeeeee;
174 |       color: #555555;
175 |     }
176 | 
177 |     .session-move {
178 |       transition: transform 0.5s;
179 |     }
180 | 
181 |     .fav {
182 |       display: inline-block;
183 |       margin-right: 5px;
184 |       width: 16px;
185 |       height: 16px;
186 |     }
187 | 
188 |     .fav-img {
189 |       width: 100%;
190 |       max-height: 100%;
191 |     }
192 | 
193 |   </style>
194 | </head>
195 | 
196 | <body>
197 | <div id="app">
198 |   <div id="main">
199 |     <nav style="height: 20px"></nav>
200 |     <div id="title">
201 |       <h1>Tab Space</h1>
202 |     </div>
203 |     <div class="sessions-container">
204 |       <div class="session-filter">
205 |         <div class="tag-filter" :class="{'active-tag': activeTag===''}" @click="()=>activeTag=''"><b>{{ lang.all }}</b></div>
206 |         <div class="tag-filter upper-border" v-for="tag in tags" :class="{'active-tag': activeTag===tag}"
207 |              @click="()=>activeTag=tag">{{tag}}</div>
208 |       </div>
209 |       <transition-group tag="div" name="session" v-bind:css="false"
210 |                         v-on:before-enter="beforeEnter"
211 |                         v-on:enter="enter"
212 |                         v-on:leave="leave">
213 |         <div class="session" v-for="session in selectedSessions" :key="session[0]">
214 |           <div class="session-title" :id="'id'+session[0]"
215 |           >{{ session[2] || (`${lang.saveAt} ${(new Date(Number(session[0]))).Format("yyyy-MM-dd hh:mm:ss")}`) }}</div>
216 |           <a class="btn" @click.stop="restore(session[0], true, false)">{{lang.restore}}</a>
217 |           <ul class="session-sites" v-for="tab in session[1]">
218 |             <li><div class="fav"><img class="fav-img" :src="getFavicon(tab[1])" alt="">
219 |             </div><span><a class="link" :href="tab[1]">{{ (tab[0] || tab[1]) | wrap }}</a></span></li>
220 |           </ul>
221 |           <div class="session-tags">
222 |             <div class="tag" v-for="tag in (session[3] || [])">{{ tag }}</div>
223 |           </div>
224 |         </div>
225 |       </transition-group>
226 |     </div>
227 |   </div>
228 |   <footer>
229 |     <a class="link" href="mailto:joyuercn@icloud.com">{{lang.contact}}</a><span class="footer-sep"></span>
230 |     <a class="link" href="https://twitter.com/joyuer/status/1164816334305157120">Twitter</a><span class="footer-sep"></span>
231 |     <a class="link" href="http://joyuer.cn/Tab-Space" target="_blank">{{lang.about}}</a>
232 |   </footer>
233 | </div>
234 | </body>
235 | <script>
236 |   function download(filename, text) {
237 |     var element = document.createElement('a');
238 |     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
239 |     element.setAttribute('download', filename);
240 | 
241 |     element.style.display = 'none';
242 |     document.body.appendChild(element);
243 | 
244 |     element.click();
245 | 
246 |     document.body.removeChild(element);
247 |   }
248 |   Date.prototype.Format = function (fmt) {
249 |     var o = {
250 |       "y+": this.getFullYear(),
251 |       "M+": this.getMonth() + 1,
252 |       "d+": this.getDate(),
253 |       "h+": this.getHours(),
254 |       "m+": this.getMinutes(),
255 |       "s+": this.getSeconds(),
256 |       "q+": Math.floor((this.getMonth() + 3) / 3),
257 |       "S+": this.getMilliseconds()
258 |     };
259 |     for (var k in o) {
260 |       if (new RegExp("(" + k + ")").test(fmt)) {
261 |         if (k == "y+") {
262 |           fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
263 |         } else if (k == "S+") {
264 |           var lens = RegExp.$1.length;
265 |           lens = lens == 1 ? 3 : lens;
266 |           fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1, lens));
267 |         } else {
268 |           fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
269 |         }
270 |       }
271 |     }
272 |     return fmt;
273 |   }
274 | </script>
275 | <script>
276 |   let data = JSON.parse(localStorage.getItem("bookmarks") || "[]")
277 |   try {
278 |     Vue
279 |   } catch (e) {
280 |     document.body.innerText = "Please go online to view contents. 请联网以查看内容。"
281 |   }
282 |   const app = new Vue({
283 |     el: '#app',
284 |     data: {
285 |       data: data,
286 |       lang: {},
287 |       activeId: "",
288 |       tmpText: "",
289 |       tagEditorId: false,
290 |       activeTag: ""
291 |     },
292 |     mounted() {
293 |       document.addEventListener('keydown', e => {
294 |         if (e.code === 'Enter') {
295 |           e.preventDefault()
296 |           try { document.querySelector('.tag-editor input').blur() } catch (e) {}
297 |           try { document.querySelector(`#id${this.activeId}`).blur() } catch (e) {}
298 |         }
299 |       })
300 |       const urlParams = new URLSearchParams(window.location.search);
301 |       let sites = urlParams.get('site');
302 |       if (sites) {
303 |         sites = sites.split("TS#SEP")
304 |         sites = sites.map((site, id, array) => [site, array[id + 1]].reverse()).filter((site, id) => id % 2 === 0)
305 |         const time = String(Date.now())
306 |         const new_session = [time, sites]
307 |         const last_session = this.data[0] || [0, 1]
308 |         if (JSON.stringify(sites) !== JSON.stringify(last_session[1])) {
309 |           this.data.unshift(new_session)
310 |         } else {
311 |           this.data[0][0] = time
312 |         }
313 |         localStorage.setItem("bookmarks", JSON.stringify(this.data))
314 |       }
315 |       this.fetchLang()
316 |     },
317 |     filters: {
318 |       wrap: function (value) {
319 |         return (value.length > 53 ? value.slice(0, 50) + "..." : value)
320 |       }
321 |     },
322 |     computed: {
323 |       tags() {
324 |         let tags = []
325 |         this.data.forEach(session => {
326 |           session[3] && session[3].forEach(tag => tags.indexOf(tag) === -1 && tags.push(tag))
327 |         })
328 |         return tags
329 |       },
330 |       selectedSessions() {
331 |         return this.activeTag === '' ? this.data :
332 |           this.data.filter(session => session[3] && session[3].indexOf(this.activeTag) > -1)
333 |       }
334 |     },
335 |     methods: {
336 |       feedLang(lang) {
337 |         if (navigator.language.toLowerCase() === "zh-cn") {
338 |           this.lang = lang["zh-cn"]
339 |         } else {
340 |           this.lang = lang["en-us"]
341 |         }
342 |       },
343 |       getSessionById(id) {
344 |         return this.data.filter(r => r[0] === id)[0]
345 |       },
346 |       getFavicon(url) {
347 |         try {
348 |           let origin = (new URL(url)).origin
349 |           return origin + "/favicon.ico"
350 |         } catch {
351 |           return ""
352 |         }
353 |       },
354 |       restore(key, open, del) {
355 |         console.log("Restore", key)
356 |         if (open) {
357 |           this.data.map(session => {
358 |             if (session[0] === key) {
359 |               session[1].forEach(site => {
360 |                 window.open(site[1])
361 |               })
362 |             }
363 |           })
364 |         }
365 |         if (del) {
366 |           this.data = this.data.filter(session => session[0] !== key)
367 |           localStorage.setItem("bookmarks", JSON.stringify(this.data))
368 |         }
369 |       },
370 |       beforeEnter: function (el) {
371 |         el.style.opacity = 0
372 |       },
373 |       enter: function (el, done) {
374 |         setTimeout(function () {
375 |           Velocity(
376 |             el,
377 |             { opacity: 1},
378 |             { complete: done }
379 |           )
380 |         }, 0)
381 |       },
382 |       leave: function (el, done) {
383 |         el.style.padding = 0
384 |         el.style.height = 0
385 |         el.style.margin = 0
386 |         el.style.opacity = 0.1
387 |         setTimeout(function () {
388 |           Velocity(
389 |             el,
390 |             { opacity: 0},
391 |             { complete: done }
392 |           )
393 |         }, 0)
394 |       }
395 |     }
396 |   })
397 | </script>
398 | </html>
399 | 


--------------------------------------------------------------------------------
/beta/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/beta/favicon.ico


--------------------------------------------------------------------------------
/beta/img/icon-webpage.397ba490.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M896 64H128a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64zM128 128h768v192H128V128z m768 768H128V384h768v512z"  /><path d="M256 576h512a32 32 0 0 0 0-64H256a32 32 0 0 0 0 64zM256 736h512a32 32 0 0 0 0-64H256a32 32 0 0 0 0 64zM768 192h-64a32 32 0 0 0 0 64h64a32 32 0 0 0 0-64z"  /></svg>


--------------------------------------------------------------------------------
/beta/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>Tab Space</title><link href=css/app.fd6330c6.css rel=preload as=style><link href=js/app.f0d04f6b.js rel=preload as=script><link href=js/chunk-vendors.f5e4d5e8.js rel=preload as=script><link href=css/app.fd6330c6.css rel=stylesheet></head><body><noscript><strong>We're sorry but tab-space-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.f5e4d5e8.js></script><script src=js/app.f0d04f6b.js></script></body></html>


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhoucq/Tab-Space/5a087bb30af18e2ebe8619d8cde247ea0ce75b45/icon.png


--------------------------------------------------------------------------------
/index-zh.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <!-- Global site tag (gtag.js) - Google Analytics -->
  5 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120186346-2"></script>
  6 |   <script>
  7 |     window.dataLayer = window.dataLayer || [];
  8 |     function gtag(){dataLayer.push(arguments);}
  9 |     gtag('js', new Date());
 10 |     gtag('config', 'UA-120186346-2');
 11 |   </script>
 12 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 13 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 14 |   <title>Tab Space - Safari 的标签页和书签管理扩展</title>
 15 |   <meta name="description"
 16 |         content="Tab Space是一个为 Safari 浏览器提供标签页保存、会话管理和快捷键的应用程序。">
 17 |   <meta name="keywords"
 18 |         content="Tab Space, app, os x, mac, macOS, high sierra, mojave, catalina, tool, extension, Safari, onetab, 浏览器, 扩展">
 19 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 20 |   <meta name="twitter:site" content="@joyuer">
 21 |   <meta property="og:title" content="Tab Space - Safari 的标签页和书签管理扩展">
 22 |   <meta property="og:description"
 23 |         content="Tab Space是一个为 Safari 浏览器提供标签页保存、会话管理和快捷键的应用程序。">
 24 |   <meta property="og:type" content="website">
 25 |   <meta property="og:url" content="https://mytab.space">
 26 |   <meta property="og:image" content="https://mytab.space/icon.png">
 27 |   <link rel="shortcut icon" type="image/png" href="https://mytab.space/icon.png">
 28 |   <link rel="apple-touch-icon" href="https://mytab.space/icon.png">
 29 |   <link rel="stylesheet" href="assets/css/main.css">
 30 | </head>
 31 | <body data-attr="body">
 32 | <header style="position: absolute; right: 0; top: 20px"><a href="index.html">English</a></header>
 33 | <!--The video styles refer to https://recentsapp.com-->
 34 | <section id="app" class="app-main">
 35 |   <div class="container" id="app-container" style="transform: translateX(0px);">
 36 |     <div class="img flex">
 37 |       <div class="loader loader--style5" title="4">
 38 |         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 39 |              width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 40 |     <rect x="0" y="0" width="4" height="10" fill="#333">
 41 |       <animateTransform attributeType="xml"
 42 |                         attributeName="transform" type="translate"
 43 |                         values="0 0; 0 20; 0 0"
 44 |                         begin="0" dur="0.6s" repeatCount="indefinite" />
 45 |     </rect>
 46 |           <rect x="10" y="0" width="4" height="10" fill="#333">
 47 |       <animateTransform attributeType="xml"
 48 |                         attributeName="transform" type="translate"
 49 |                         values="0 0; 0 20; 0 0"
 50 |                         begin="0.2s" dur="0.6s" repeatCount="indefinite" />
 51 |     </rect>
 52 |           <rect x="20" y="0" width="4" height="10" fill="#333">
 53 |       <animateTransform attributeType="xml"
 54 |                         attributeName="transform" type="translate"
 55 |                         values="0 0; 0 20; 0 0"
 56 |                         begin="0.4s" dur="0.6s" repeatCount="indefinite" />
 57 |     </rect>
 58 |   </svg>
 59 |       </div>
 60 |       <video id="app-video" width="700" preload="auto" poster="assets/img/desktop.png" autoplay=""
 61 |              loop="" muted="" playsinline="" onplay="document.querySelector('.loader').style.display = 'none';">
 62 |         <source src="./assets/Tab_Space_Demo.mp4" type="video/mp4">
 63 |       </video>
 64 |     </div>
 65 | 
 66 |     <article class="app-article flex">
 67 |       <div class="inner">
 68 |         <h1 style="margin-top: -50px; display: flex">
 69 |           <img class="logo" src="icon.png" width="120" height="120" alt="Tab Space Logo">
 70 |           <span style="margin-top: 40px; display: inline-block;"><b>Tab Space</b></span>
 71 |         </h1>
 72 |         <p><span style="color: salmon; font-weight: 700;">把浏览器标签页保存为工作空间 </span><br><br><b>Tab
 73 |           Space</b> 是一个为 Safari 浏览器提供标签页保存、会话管理和快捷键的应用程序。</p>
 74 |         <div class="app-buttons">
 75 |           <a href="https://apps.apple.com/cn/app/tab-space/id1473726602?mt=12" onclick="gtag('event', 'view_item', { method : 'Mac App Store' });" target="_blank"><img
 76 |               src="assets/img/Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg" alt="Tab Space download badge"></a>
 77 |         </div>
 78 |         <div style="margin-left: 200px; margin-top: -2em;"><a
 79 |             href="https://joyuer.notion.site/What-s-New-in-Tab-Space-66063fc8afea4f54906f32ef92915ea7"
 80 |             target="_blank">更新日志（英文）</a>
 81 |         </div>
 82 |         <div class="requirements">
 83 |           <div class="copy">
 84 |             <div class="subtitle">要求 macOS 10.13 或更新版本</div>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |     </article>
 89 |   </div>
 90 | </section>
 91 | 
 92 | <footer>
 93 |   <div class="container">
 94 |     <div class="inner">
 95 |       <p class="author">Developed by️ <a href="https://joyuer.cn/" target="_blank">Joyuer</a> 📮
 96 |         <a href="mailto:joyuercn@icloud.com" target="_blank">联系我们</a>  🤖
 97 |         View️ on <a href="https://github.com/yuanzhoucq/Tab-Space" target="_blank">GitHub</a></p>
 98 |     </div>
 99 |   </div>
100 | </footer>
101 | </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <!-- Global site tag (gtag.js) - Google Analytics -->
  5 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120186346-2"></script>
  6 |   <script>
  7 |     window.dataLayer = window.dataLayer || [];
  8 |     function gtag(){dataLayer.push(arguments);}
  9 |     gtag('js', new Date());
 10 |     gtag('config', 'UA-120186346-2');
 11 |   </script>
 12 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 13 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 14 |   <title>Tab Space - Tab saver & Bookmark manager for Safari</title>
 15 |   <meta name="description"
 16 |         content="Tab Space is an extension app which could save tabs, manage saved sessions and provide some useful shortcuts for Safari.">
 17 |   <meta name="keywords"
 18 |         content="Tab Space, app, os x, mac, macOS, high sierra, mojave, catalina, tool, extension, Safari, onetab">
 19 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 20 |   <meta name="twitter:site" content="@joyuer">
 21 |   <meta property="og:title" content="Tab Space - Tab saver & Bookmark manager for Safari">
 22 |   <meta property="og:description"
 23 |         content="Tab Space is an extension app which could save tabs, manage saved sessions and provide some useful shortcuts for Safari.">
 24 |   <meta property="og:type" content="website">
 25 |   <meta property="og:url" content="https://mytab.space">
 26 |   <meta property="og:image" content="https://mytab.space/icon.png">
 27 |   <link rel="shortcut icon" type="image/png" href="https://mytab.space/icon.png">
 28 |   <link rel="apple-touch-icon" href="https://mytab.space/icon.png">
 29 |   <link rel="stylesheet" href="assets/css/main.css">
 30 | </head>
 31 | <body data-attr="body">
 32 | <header style="position: absolute; right: 0; top: 20px"><a href="index-zh.html">中文</a></header>
 33 | <!--The video styles refer to https://recentsapp.com-->
 34 | <section id="app" class="app-main">
 35 |   <div class="container" id="app-container" style="transform: translateX(0px);">
 36 |     <div class="img flex">
 37 |       <div class="loader loader--style5" title="4">
 38 |         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 39 |              width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 40 |     <rect x="0" y="0" width="4" height="10" fill="#333">
 41 |       <animateTransform attributeType="xml"
 42 |                         attributeName="transform" type="translate"
 43 |                         values="0 0; 0 20; 0 0"
 44 |                         begin="0" dur="0.6s" repeatCount="indefinite" />
 45 |     </rect>
 46 |           <rect x="10" y="0" width="4" height="10" fill="#333">
 47 |       <animateTransform attributeType="xml"
 48 |                         attributeName="transform" type="translate"
 49 |                         values="0 0; 0 20; 0 0"
 50 |                         begin="0.2s" dur="0.6s" repeatCount="indefinite" />
 51 |     </rect>
 52 |           <rect x="20" y="0" width="4" height="10" fill="#333">
 53 |       <animateTransform attributeType="xml"
 54 |                         attributeName="transform" type="translate"
 55 |                         values="0 0; 0 20; 0 0"
 56 |                         begin="0.4s" dur="0.6s" repeatCount="indefinite" />
 57 |     </rect>
 58 |   </svg>
 59 |       </div>
 60 |       <video id="app-video" width="700" preload="auto" poster="assets/img/desktop.png" autoplay=""
 61 |              loop="" muted="" playsinline="" onplay="document.querySelector('.loader').style.display = 'none';">
 62 |         <source src="./assets/Tab_Space_Demo.mp4" type="video/mp4">
 63 |       </video>
 64 |     </div>
 65 | 
 66 |     <article class="app-article flex">
 67 |       <div class="inner">
 68 |         <h1 style="margin-top: -50px; display: flex">
 69 |           <img class="logo" src="icon.png" width="120" height="120" alt="Tab Space Logo">
 70 |           <span style="margin-top: 40px; display: inline-block;"><b>Tab Space</b></span>
 71 |         </h1>
 72 |         <p><span style="color: salmon; font-weight: 700;">Save browser tabs as a workspace. </span><br><br><b>Tab
 73 |           Space</b> is a nifty extension app that helps you save and manage your tabs as separate sessions, as well as providing some handy shortcuts for Safari.</p>
 74 |         <div class="app-buttons">
 75 |           <a href="https://apps.apple.com/app/tab-space/id1473726602?mt=12" onclick="gtag('event', 'view_item', { method : 'Mac App Store' });" target="_blank"><img
 76 |               src="assets/img/Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg" alt="Tab Space download badge"></a>
 77 |         </div>
 78 |         <div style="margin-left: 200px; margin-top: -2em;"><a
 79 |             href="https://joyuer.notion.site/What-s-New-in-Tab-Space-66063fc8afea4f54906f32ef92915ea7"
 80 |             target="_blank">Changelog</a>
 81 |         </div>
 82 |         <div class="requirements">
 83 |           <div class="copy">
 84 |             <div class="subtitle">Requires macOS 10.13 or later</div>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |     </article>
 89 |   </div>
 90 | </section>
 91 | 
 92 | <footer>
 93 |   <div class="container">
 94 |     <div class="inner">
 95 |       <p class="author">Developed by️ <a href="https://joyuer.cn/" target="_blank">Joyuer</a> 📮
 96 |        <a href="mailto:joyuercn@icloud.com" target="_blank">Contact</a> 🤖
 97 |         View️ on <a href="https://github.com/yuanzhoucq/Tab-Space" target="_blank">GitHub</a></p>
 98 |     </div>
 99 |   </div>
100 | </footer>
101 | </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/redirect.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="apple-touch-icon" href="icon.png">
 6 |   <title>Tab Space Redirection</title>
 7 |   <style>
 8 |     body {
 9 |       font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
10 |       width: 800px;
11 |       margin: 0 auto;
12 |     }
13 |     p {
14 |       text-align: center;
15 |       max-width: 600px;
16 |     }
17 |     @media (prefers-color-scheme: dark) {
18 |       body, a {
19 |       background-image: linear-gradient(-45deg, #343434, #343536);
20 |       color: #eeeeee;
21 |     }
22 |     }
23 |   </style>
24 | </head>
25 | <body style="display: flex;flex-direction:column; align-items: center">
26 | <h1>Tab Space</h1>
27 |   <p>Redirecting... <br> Due to Safari extension's restrictions, we need this page to redirect to your space page. Please make sure that you have installed <code>Tab Space</code> App, or you will not be redirected.</p>
28 |   <p>重定向中... <br> 由于 Safari 浏览器的限制，我们需要此页面以跳转到你的 Space 记录页面。请确保你已安装 <code>Tab Space</code> App，否则此页面将不会跳转。</p>
29 | 
30 |   <a href="https://apps.apple.com/cn/app/tab-space/id1473726602?mt=12">Tab Space</a>
31 | 
32 |   <script> window.location.href = "http://tabspacestatic.joyuer.cn/redirect.html"; </script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/storage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Tab Space Storage</title>
 6 | </head>
 7 | <body>
 8 |   <div id="tab-space-backup-storage"></div>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/translate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Translate Tab Space</title>
 7 |   <style>
 8 |     body {
 9 |       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
10 |       width: 800px;
11 |       margin: 0 auto;
12 |     }
13 | 
14 |     table.greyGridTable {
15 |       border: 2px solid #FFFFFF;
16 |       width: 100%;
17 |       text-align: center;
18 |       border-collapse: collapse;
19 |     }
20 | 
21 |     table.greyGridTable td,
22 |     table.greyGridTable th {
23 |       border: 1px solid #FFFFFF;
24 |       padding: 3px 4px;
25 |     }
26 | 
27 |     table.greyGridTable tbody td {
28 |       font-size: 13px;
29 |     }
30 | 
31 |     table.greyGridTable td:nth-child(even) {
32 |       background: #EBEBEB;
33 |     }
34 | 
35 |     table.greyGridTable thead {
36 |       background: #FFFFFF;
37 |       border-bottom: 4px solid #333333;
38 |     }
39 | 
40 |     table.greyGridTable thead th {
41 |       font-size: 15px;
42 |       font-weight: bold;
43 |       color: #333333;
44 |       text-align: center;
45 |       border-left: 2px solid #333333;
46 |     }
47 | 
48 |     table.greyGridTable thead th:first-child {
49 |       border-left: none;
50 |     }
51 | 
52 |     table.greyGridTable tfoot {
53 |       font-size: 14px;
54 |       font-weight: bold;
55 |       color: #333333;
56 |       border-top: 4px solid #333333;
57 |     }
58 | 
59 |     table.greyGridTable tfoot td {
60 |       font-size: 14px;
61 |     }
62 |   </style>
63 | </head>
64 | 
65 | <body>
66 |   <h1>Help Us Translate Tab Space</h1>
67 |   <p>It's great to have software that's available in our native language as it can make us feel more comfortable. We would like to offer support for more languages in Tab Space, but unfortunately, we don't speak many languages ourselves. That's why we would greatly appreciate your help in translating Tab Space into your language.</p>
68 |   <h2>Current Progress</h2>
69 |   <table class="greyGridTable"><thead><tr><th class="lang-th">Language Code</th><th class="name-th">Lanuage</th><th class="progress-th">Progress</th><th class="missingkeys-th">Missing Keys</th></tr></thead><tbody ><tr ><td class="lang-td td_text">zh-cn</td><td class="name-td td_text">Chinese (PRC)</td><td class="progress-td td_text">100.00%</td><td class="missingkeys-td td_text">-</td></tr>
70 | <tr ><td class="lang-td td_text">uk</td><td class="name-td td_text">Ukrainian</td><td class="progress-td td_text">67.80%</td><td class="missingkeys-td td_text">activeTabs, ctrlD, ctrlK, disable-context-menus, editPrompt, favorites, ignore-duplicated-tabs, location, mergePrompt, movePrompt, newSession, openIn, recentlySaved, remove-site-after-click, shift-shortcuts, tipContents, topPrompt, upgradeSafari, whatsNew</td></tr>
71 | <tr ><td class="lang-td td_text">es</td><td class="name-td td_text">Spanish</td><td class="progress-td td_text">79.66%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, topPrompt, whatsNew</td></tr>
72 | <tr ><td class="lang-td td_text">da</td><td class="name-td td_text">Danish</td><td class="progress-td td_text">67.80%</td><td class="missingkeys-td td_text">activeTabs, ctrlD, ctrlK, disable-context-menus, editPrompt, favorites, ignore-duplicated-tabs, location, mergePrompt, movePrompt, newSession, openIn, recentlySaved, remove-site-after-click, shift-shortcuts, tipContents, topPrompt, upgradeSafari, whatsNew</td></tr>
73 | <tr ><td class="lang-td td_text">pl</td><td class="name-td td_text">Polish</td><td class="progress-td td_text">81.36%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, topPrompt</td></tr>
74 | <tr ><td class="lang-td td_text">ru</td><td class="name-td td_text">Russian</td><td class="progress-td td_text">94.92%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, openIn</td></tr>
75 | <tr ><td class="lang-td td_text">tr</td><td class="name-td td_text">Turkish</td><td class="progress-td td_text">77.97%</td><td class="missingkeys-td td_text">activeTabs, ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, shift-shortcuts, topPrompt</td></tr>
76 | <tr ><td class="lang-td td_text">de</td><td class="name-td td_text">German (Standard)</td><td class="progress-td td_text">79.66%</td><td class="missingkeys-td td_text">activeTabs, ctrlD, ctrlK, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, shift-shortcuts, topPrompt</td></tr>
77 | <tr ><td class="lang-td td_text">sv</td><td class="name-td td_text">Swedish</td><td class="progress-td td_text">81.36%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, topPrompt</td></tr>
78 | <tr ><td class="lang-td td_text">it</td><td class="name-td td_text">Italian (Standard)</td><td class="progress-td td_text">77.97%</td><td class="missingkeys-td td_text">activeTabs, ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, shift-shortcuts, topPrompt</td></tr>
79 | <tr ><td class="lang-td td_text">ko</td><td class="name-td td_text">Korean</td><td class="progress-td td_text">77.97%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, disable-context-menus, editPrompt, location, mergePrompt, movePrompt, newSession, openIn, remove-site-after-click, shift-shortcuts, topPrompt, untagged</td></tr>
80 | <tr ><td class="lang-td td_text">ar-ae</td><td class="name-td td_text">Arabic (U.A.E.)</td><td class="progress-td td_text">93.22%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, openIn, untagged</td></tr>
81 | <tr ><td class="lang-td td_text">nl</td><td class="name-td td_text">Dutch (Standard)</td><td class="progress-td td_text">93.22%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, openIn, untagged</td></tr>
82 | <tr ><td class="lang-td td_text">fr</td><td class="name-td td_text">French (Standard)</td><td class="progress-td td_text">91.53%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, disable-context-menus, openIn, remove-site-after-click</td></tr>
83 | <tr ><td class="lang-td td_text">ja</td><td class="name-td td_text">Japanese</td><td class="progress-td td_text">93.22%</td><td class="missingkeys-td td_text">ctrlD, ctrlK, openIn, untagged</td></tr></tbody></table>
84 | 
85 |   <p>To add a translation, you simply need to append a block to the [<a
86 |     href="https://github.com/yuanzhoucq/Tab-Space/blob/master/admin/src/lang.json">file</a>] and translate the red text under the "en-us" label. If you have any translations or improvements to offer, please send them to joyuercn@icloud.com, and we will quickly add them to Tab Space. Thank you!</p>
87 |   <h2>Translation Source</h2>
88 |   <script
89 |     src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fyuanzhoucq%2FTab-Space%2Fblob%2Fmaster%2Fadmin%2Fsrc%2Flang.json&style=xcode&showBorder=on&showLineNumbers=on&showFileMeta=on"></script>
90 | </body>
91 | 
92 | </html>


--------------------------------------------------------------------------------