17 |
27 |
40 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/cache.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import axios from 'axios'
3 |
4 | import { Base } from './page/base';
5 | import { YlaDialog } from './component/yla-dialog';
6 | import { YlaTooltip } from './component/yla-tooltip';
7 |
8 | import './less/stylesheet.less'
9 | import 'typeface-source-sans-pro'
10 | import 'typeface-source-serif-pro'
11 | import '@fortawesome/fontawesome-free/css/all.css'
12 |
13 | // Register Vue component
14 | Vue.component('yla-dialog', new YlaDialog());
15 | Vue.component('yla-tooltip', new YlaTooltip());
16 |
17 | new Vue({
18 | el: '#cache-page',
19 | mixins: [new Base()],
20 | data: {
21 | id: init.id,
22 | url: init.url,
23 | title: init.title,
24 | author: init.author,
25 | minReadTime: init.minReadTime,
26 | maxReadTime: init.maxReadTime,
27 | modified: init.modified,
28 | html: init.html,
29 | tags: init.tags,
30 | nightMode: false,
31 | serifMode: false,
32 | },
33 | methods: {
34 | toggleNightMode() {
35 | this.nightMode = !this.nightMode;
36 | localStorage.setItem('shiori-night-mode', this.nightMode ? '1' : '0');
37 | },
38 | toggleSerifMode() {
39 | this.serifMode = !this.serifMode;
40 | localStorage.setItem('shiori-serif-mode', this.serifMode ? '1' : '0');
41 | },
42 | getHostname(url) {
43 | var parser = document.createElement('a');
44 | parser.href = url;
45 | return parser.hostname.replace(/^www\./g, '');
46 | }
47 | },
48 | mounted() {
49 | // Set title
50 | document.title = this.title + ' - Shiori - Bookmarks Manager';
51 |
52 | // Set night and serif mode
53 | var nightMode = localStorage.getItem('shiori-night-mode'),
54 | serifMode = localStorage.getItem('shiori-serif-mode');
55 |
56 | this.nightMode = nightMode === '1';
57 | this.serifMode = serifMode === '1';
58 | }
59 | });
--------------------------------------------------------------------------------
/src/component/variable.less:
--------------------------------------------------------------------------------
1 | // // out: false
2 | // //
3 | // // Background
4 | @bg: #EEE;
5 | // //
6 | // // Border
7 | @border: #E5E5E5;
8 | // //
9 | // // Font color
10 | @color: #232323;
11 | // //
12 | // // Color theme
13 | @main: #F44336;
14 | // //
15 | // // Tooltip
16 | @tooltipBg: #232323;
17 | @tooltipColor: #FFF;
18 | @arrowWidth: 8px;
19 | // //
20 | // // Dialog
21 | @dialogHeaderBg: #292929;
22 | @dialogHeaderColor: #FFF;
--------------------------------------------------------------------------------
/src/component/yla-dialog.js:
--------------------------------------------------------------------------------
1 | import './yla-dialog.less'
2 |
3 | export function YlaDialog() {
4 | // Private variable
5 | var _template = `
6 | `;
58 |
59 | return {
60 | template: _template,
61 | props: {
62 | visible: Boolean,
63 | loading: Boolean,
64 | title: {
65 | type: String,
66 | default: ''
67 | },
68 | content: {
69 | type: String,
70 | default: ''
71 | },
72 | fields: {
73 | type: Array,
74 | default () {
75 | return []
76 | }
77 | },
78 | showLabel: {
79 | type: Boolean,
80 | default: false
81 | },
82 | mainText: {
83 | type: String,
84 | default: 'OK'
85 | },
86 | secondText: String,
87 | mainClick: {
88 | type: Function,
89 | default () {}
90 | },
91 | secondClick: {
92 | type: Function,
93 | default () {}
94 | }
95 | },
96 | data() {
97 | return {
98 | formFields: []
99 | };
100 | },
101 | computed: {
102 | btnTabIndex() {
103 | return this.fields.length + 1;
104 | }
105 | },
106 | watch: {
107 | fields: {
108 | immediate: true,
109 | handler() {
110 | this.formFields = this.fields.map(field => {
111 | if (typeof field === 'string') return {
112 | name: field,
113 | label: field,
114 | value: '',
115 | type: 'text',
116 | dictionary: [],
117 | separator: ' ',
118 | suggestion: undefined
119 | }
120 |
121 | if (typeof field === 'object') return {
122 | name: field.name || '',
123 | label: field.label || '',
124 | value: field.value || '',
125 | type: field.type || 'text',
126 | dictionary: field.dictionary instanceof Array ? field.dictionary : [],
127 | separator: field.separator || ' ',
128 | suggestion: undefined
129 | }
130 | });
131 | }
132 | },
133 | 'fields.length' () {
134 | this.focus();
135 | },
136 | visible() {
137 | this.focus();
138 | }
139 | },
140 | methods: {
141 | fieldType(f) {
142 | var type = f.type || 'text';
143 | if (type !== 'text' && type !== 'password') return 'text';
144 | else return type;
145 | },
146 | handleMainClick() {
147 | var data = {};
148 | this.formFields.forEach(field => {
149 | var value = field.value;
150 | if (field.type === 'number') value = parseInt(value, 10) || 0;
151 | else if (field.type === 'float') value = parseFloat(value) || 0.0;
152 | data[field.name] = value;
153 | })
154 | this.mainClick(data);
155 | },
156 | handleSecondClick() {
157 | this.secondClick();
158 | },
159 | handleInput(index) {
160 | // Create initial variable
161 | var field = this.formFields[index],
162 | dictionary = field.dictionary;
163 |
164 | // Make sure dictionary is not empty
165 | if (dictionary.length === 0) return;
166 |
167 | // Fetch suggestion from dictionary
168 | var words = field.value.split(field.separator),
169 | lastWord = words[words.length - 1].toLowerCase(),
170 | suggestion;
171 |
172 | if (lastWord !== '') {
173 | suggestion = dictionary.find(word => {
174 | return word.toLowerCase().startsWith(lastWord)
175 | });
176 | }
177 |
178 | this.formFields[index].suggestion = suggestion;
179 |
180 | // Make sure suggestion exist
181 | if (suggestion == null) return;
182 |
183 | // Display suggestion
184 | this.$nextTick(() => {
185 | var input = this.$refs.input[index],
186 | span = this.$refs['suggestion-' + index][0],
187 | inputRect = input.getBoundingClientRect();
188 |
189 | span.style.top = (inputRect.bottom - 1) + 'px';
190 | span.style.left = inputRect.left + 'px';
191 | });
192 | },
193 | handleInputEnter(index) {
194 | var suggestion = this.formFields[index].suggestion;
195 |
196 | if (suggestion == null) {
197 | this.handleMainClick();
198 | return;
199 | }
200 |
201 | var separator = this.formFields[index].separator,
202 | words = this.formFields[index].value.split(separator);
203 |
204 | words.pop();
205 | words.push(suggestion);
206 |
207 | this.formFields[index].value = words.join(separator) + separator;
208 | this.formFields[index].suggestion = undefined;
209 | },
210 | focus() {
211 | this.$nextTick(() => {
212 | if (!this.visible) return;
213 |
214 | var fields = this.$refs.input,
215 | otherInput = this.$el.querySelectorAll('input'),
216 | button = this.$refs.mainButton;
217 |
218 | if (fields && fields.length > 0) {
219 | this.$refs.input[0].focus();
220 | this.$refs.input[0].select();
221 | } else if (otherInput && otherInput.length > 0) {
222 | otherInput[0].focus();
223 | otherInput[0].select();
224 | } else if (button) {
225 | button.focus();
226 | }
227 | });
228 | }
229 | }
230 | };
231 | };
--------------------------------------------------------------------------------
/src/component/yla-dialog.less:
--------------------------------------------------------------------------------
1 | @import "variable";
2 | .yla-dialog__overlay {
3 | display: flex;
4 | flex-flow: column nowrap;
5 | align-items: center;
6 | justify-content: center;
7 | min-width: 0;
8 | min-height: 0;
9 | overflow: hidden;
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | width: 100vw;
14 | height: 100vh;
15 | z-index: 10001;
16 | background-color: rgba(0, 0, 0, 0.6);
17 | padding: 16px;
18 | .yla-dialog {
19 | display: flex;
20 | flex-flow: column nowrap;
21 | min-width: 0;
22 | min-height: 0;
23 | max-width: 400px;
24 | max-height: 100%;
25 | width: 100%;
26 | overflow: hidden;
27 | background-color: #FFF;
28 | font-size: 16px;
29 | >.yla-dialog__header {
30 | display: flex;
31 | flex-flow: row nowrap;
32 | padding: 16px;
33 | min-height: 0;
34 | background-color: @dialogHeaderBg;
35 | color: @dialogHeaderColor;
36 | flex-shrink: 0;
37 | >p {
38 | flex: 1 0;
39 | font-weight: 600;
40 | font-size: 1em;
41 | text-transform: uppercase;
42 | }
43 | >a:hover {
44 | color: @main;
45 | }
46 | }
47 | >.yla-dialog__body {
48 | padding: 16px;
49 | display: grid;
50 | max-height: 100%;
51 | min-height: 80px;
52 | min-width: 0;
53 | overflow: auto;
54 | grid-template-columns: max-content 1fr;
55 | align-items: baseline;
56 | grid-gap: 16px;
57 | >p.yla-dialog__content {
58 | grid-column-start: 1;
59 | grid-column-end: 3;
60 | align-self: baseline;
61 | font-size: 0.9em;
62 | }
63 | >p.label {
64 | padding: 8px 0;
65 | align-self: stretch;
66 | font-size: 0.9em;
67 | }
68 | >input,
69 | >textarea {
70 | color: @color;
71 | padding: 8px;
72 | border: 1px solid @border;
73 | font-size: 0.9em;
74 | min-height: 37px;
75 | resize: vertical;
76 | flex-shrink: 0;
77 | }
78 | >.suggestion {
79 | position: absolute;
80 | display: block;
81 | padding: 8px;
82 | background-color: @bg;
83 | border: 1px solid @border;
84 | font-size: 0.9em;
85 | }
86 | }
87 | >.yla-dialog__footer {
88 | padding: 16px;
89 | display: flex;
90 | flex-flow: row wrap;
91 | justify-content: flex-end;
92 | border-top: 1px solid @border;
93 | >a {
94 | text-transform: uppercase;
95 | padding: 0 8px;
96 | font-size: 0.9em;
97 | font-weight: 600;
98 | border-bottom: 1px dashed transparent;
99 | &:hover {
100 | color: @main;
101 | }
102 | &:focus {
103 | outline: none;
104 | color: @main;
105 | border-bottom: 1px dashed @main;
106 | }
107 | }
108 | >i {
109 | width: 19px;
110 | line-height: 19px;
111 | text-align: center;
112 | }
113 | }
114 | }
115 | }
--------------------------------------------------------------------------------
/src/component/yla-tooltip.js:
--------------------------------------------------------------------------------
1 | import './yla-tooltip.less'
2 |
3 | export function YlaTooltip() {
4 | // Private method
5 | function _createTooltip() {
6 | var tooltip = document.createElement('span');
7 | tooltip.className = 'yla-tooltip';
8 | return tooltip;
9 | }
10 |
11 | function _showTooltip(target, tooltip, placement) {
12 | // Put tooltip in document
13 | document.body.appendChild(tooltip);
14 |
15 | // Calculate position for tooltip
16 | var placement = placement ? placement + '' : '',
17 | targetRect = target.getBoundingClientRect(),
18 | tooltipRect = tooltip.getBoundingClientRect(),
19 | targetCenterX = targetRect.left + (targetRect.width / 2),
20 | targetCenterY = targetRect.top + (targetRect.height / 2),
21 | className, tooltipX, tooltipY;
22 |
23 | switch (placement.toLowerCase()) {
24 | case 'top':
25 | className = 'top';
26 | tooltipX = targetCenterX - (tooltipRect.width / 2);
27 | tooltipY = targetRect.top - tooltipRect.height;
28 | break;
29 | case 'bottom':
30 | className = 'bottom';
31 | tooltipX = targetCenterX - (tooltipRect.width / 2);
32 | tooltipY = targetRect.bottom;
33 | break;
34 | case 'left':
35 | className = 'left';
36 | tooltipX = targetRect.left - tooltipRect.width;
37 | tooltipY = targetCenterY - (tooltipRect.height / 2);
38 | break;
39 | case 'right':
40 | default:
41 | className = 'right';
42 | tooltipX = targetRect.right;
43 | tooltipY = targetCenterY - (tooltipRect.height / 2);
44 | break;
45 | }
46 |
47 | // Position tooltip
48 | tooltip.style.position = 'fixed';
49 | tooltip.style.top = tooltipY + 'px';
50 | tooltip.style.left = tooltipX + 'px';
51 | tooltip.className = 'yla-tooltip ' + className;
52 | }
53 |
54 | function _removeTooltip(tooltip) {
55 | document.body.removeChild(tooltip);
56 | }
57 |
58 | return {
59 | props: {
60 | placement: {
61 | type: String,
62 | default: ''
63 | },
64 | content: {
65 | type: String,
66 | default: ''
67 | }
68 | },
69 | data: function () {
70 | return {
71 | tooltip: _createTooltip()
72 | };
73 | },
74 | watch: {
75 | content: {
76 | immediate: true,
77 | handler: function () {
78 | this.tooltip.textContent = this.content;
79 | }
80 | }
81 | },
82 | render: function (createElement) {
83 | // Make sure this component contain at least one element
84 | var nodes = this.$slots.default || [],
85 | mainElement = nodes.find(node => {
86 | return node.tag && node.tag !== '';
87 | });
88 |
89 | if (!mainElement) return;
90 |
91 | // Set event handler for main element
92 | var newData = mainElement.data || {};
93 |
94 | newData.on = newData.on || {};
95 | newData.on.mouseenter = (evt) => {
96 | _showTooltip(evt.target, this.tooltip, this.placement);
97 | };
98 |
99 | newData.on.mouseleave = () => {
100 | _removeTooltip(this.tooltip);
101 | };
102 |
103 | // Return main element
104 | mainElement.data = newData;
105 | return mainElement;
106 | }
107 | }
108 | };
--------------------------------------------------------------------------------
/src/component/yla-tooltip.less:
--------------------------------------------------------------------------------
1 | @import "variable";
2 | .yla-tooltip {
3 | font-size: 14px;
4 | color: @tooltipColor;
5 | background-color: @tooltipBg;
6 | padding: 8px;
7 | border-radius: 4px;
8 | position: relative;
9 | z-index: 1000;
10 | &::after {
11 | content: '';
12 | display: block;
13 | position: absolute;
14 | border: @arrowWidth solid transparent;
15 | }
16 | &.left {
17 | margin-left: -(@arrowWidth*2-2);
18 | &::after {
19 | top: 50%;
20 | right: -2*@arrowWidth;
21 | margin-top: -@arrowWidth;
22 | border-left-color: @tooltipBg
23 | }
24 | }
25 | &.top {
26 | margin-top: -(@arrowWidth*2-2);
27 | &::after {
28 | left: 50%;
29 | bottom: -2*@arrowWidth;
30 | margin-left: -@arrowWidth;
31 | border-top-color: @tooltipBg
32 | }
33 | }
34 | &.right {
35 | margin-left: @arrowWidth*2-2;
36 | &::after {
37 | top: 50%;
38 | left: -2*@arrowWidth;
39 | margin-top: -@arrowWidth;
40 | border-right-color: @tooltipBg
41 | }
42 | }
43 | &.bottom {
44 | margin-top: @arrowWidth*2-2;
45 | &::after {
46 | left: 50%;
47 | top: -2*@arrowWidth;
48 | margin-left: -@arrowWidth;
49 | border-bottom-color: @tooltipBg
50 | }
51 | }
52 | }
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
28 |
35 |
36 |
37 |
38 |
17 |
57 |
154 |
164 |
165 |
166 | {{tag.name}}
167 | {{tag.nBookmarks}}
168 |
169 |
170 |
171 |
172 | Use list view
173 |
174 |
175 | Use night mode
176 |
177 |
178 | Show bookmark's ID
179 |
180 |
181 | Bookmark's title open original webpage instead of the cache
182 |
183 |
184 |
186 |
187 |
188 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import axios from 'axios'
3 | import * as Cookies from 'js-cookie';
4 |
5 | import { Base } from './page/base';
6 | import { YlaDialog } from './component/yla-dialog';
7 | import { YlaTooltip } from './component/yla-tooltip';
8 |
9 | import './less/stylesheet.less'
10 | import 'typeface-source-sans-pro'
11 | import '@fortawesome/fontawesome-free/css/all.css'
12 |
13 | // Define global variable
14 | var pageSize = 30;
15 |
16 | // Prepare axios instance
17 | var token = Cookies.get('token'),
18 | rest = axios.create();
19 |
20 | rest.defaults.timeout = 60000;
21 | rest.defaults.headers.common['Authorization'] = 'Bearer ' + token;
22 |
23 | // Register Vue component
24 | Vue.component('yla-dialog', new YlaDialog());
25 | Vue.component('yla-tooltip', new YlaTooltip());
26 |
27 | new Vue({
28 | el: '#index-page',
29 | mixins: [new Base()],
30 | data() {
31 | return {
32 | loading: false,
33 | tags: [],
34 | bookmarks: [],
35 | search: '',
36 | page: 0,
37 | maxPage: 0,
38 | editMode: false,
39 | selected: [],
40 | bookmarklet: '',
41 | options: {
42 | listView: false,
43 | nightMode: false,
44 | showBookmarkID: false,
45 | mainOpenOriginal: false,
46 | },
47 | dialogAbout: {
48 | visible: false,
49 | title: 'About',
50 | mainClick: () => {
51 | this.dialogAbout.visible = false;
52 | },
53 | },
54 | dialogTags: {
55 | visible: false,
56 | loading: false,
57 | title: 'Existing Tags',
58 | mainText: 'Cancel',
59 | mainClick: () => {
60 | this.dialogTags.visible = false;
61 | },
62 | },
63 | dialogOptions: {
64 | visible: false,
65 | title: 'Options',
66 | mainText: 'OK',
67 | mainClick: () => {
68 | this.dialogOptions.visible = false;
69 | },
70 | }
71 | }
72 | },
73 | computed: {
74 | visibleBookmarks() {
75 | var start = this.page * pageSize,
76 | finish = start + pageSize;
77 | if (this.bookmarks) {
78 | return this.bookmarks.slice(start, finish);
79 | }
80 | return []
81 | }
82 | },
83 | methods: {
84 | loadData() {
85 | if (this.loading) return;
86 |
87 | // Parse search query
88 | var rxTagA = /['"]#([^'"]+)['"]/g,
89 | rxTagB = /(^|\s+)#(\S+)/g,
90 | keyword = this.search,
91 | tags = [],
92 | result = [];
93 |
94 | // Fetch tag A first
95 | while ((result = rxTagA.exec(keyword)) !== null) {
96 | tags.push(result[1]);
97 | }
98 |
99 | // Clear tag A from keyword
100 | keyword = keyword.replace(rxTagA, '');
101 |
102 | // Fetch tag B
103 | while ((result = rxTagB.exec(keyword)) !== null) {
104 | tags.push(result[2]);
105 | }
106 |
107 | // Clear tag B from keyword and clean it
108 | keyword = keyword.replace(rxTagB, '').trim().replace(/\s+/g, ' ');
109 |
110 | // Fetch data
111 | this.loading = true;
112 | rest.get('/api/bookmarks', {
113 | params: {
114 | keyword: keyword,
115 | tags: tags.join(',')
116 | }
117 | })
118 | .then((response) => {
119 | this.page = 0;
120 | this.bookmarks = response.data;
121 | this.maxPage = Math.ceil(this.bookmarks.length / pageSize) - 1;
122 | window.scrollTo(0, 0);
123 |
124 | return rest.get('/api/tags');
125 | })
126 | .then((response) => {
127 | this.tags = response.data;
128 | this.loading = false;
129 | })
130 | .catch((error) => {
131 | this.loading = false;
132 |
133 | var errorMsg = (error.response ? error.response.data : error.message).trim();
134 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
135 | else this.showErrorDialog(errorMsg);
136 | });
137 | },
138 | reloadData() {
139 | if (this.loading) return;
140 | this.search = '';
141 | this.loadData();
142 | },
143 | changePage(target) {
144 | target = parseInt(target, 10) || 0;
145 |
146 | if (target >= this.maxPage) this.page = this.maxPage;
147 | else if (target <= 0) this.page = 0;
148 | else this.page = target;
149 |
150 | window.scrollTo(0, 0);
151 | },
152 | toggleListView() {
153 | this.options.listView = !this.options.listView;
154 | window.scrollTo(0, 0);
155 | localStorage.setItem('shiori-list-view', this.options.listView ? '1' : '0');
156 | },
157 | toggleNightMode() {
158 | this.options.nightMode = !this.options.nightMode;
159 | localStorage.setItem('shiori-night-mode', this.options.nightMode ? '1' : '0');
160 | },
161 | toggleBookmarkID() {
162 | this.options.showBookmarkID = !this.options.showBookmarkID;
163 | localStorage.setItem('shiori-show-id', this.options.showBookmarkID ? '1' : '0');
164 | },
165 | toggleBookmarkMainLink() {
166 | this.options.mainOpenOriginal = !this.options.mainOpenOriginal;
167 | localStorage.setItem('shiori-main-original', this.options.mainOpenOriginal ? '1' : '0');
168 | },
169 | toggleEditMode() {
170 | this.editMode = !this.editMode;
171 | this.selected = [];
172 | },
173 | toggleSelection(idx) {
174 | var pos = this.selected.indexOf(idx);
175 | if (pos === -1) this.selected.push(idx);
176 | else this.selected.splice(pos, 1);
177 | },
178 | isSelected(idx) {
179 | return this.selected.indexOf(idx) > -1;
180 | },
181 | filterTag(tag) {
182 | // Prepare variable
183 | var rxSpace = /\s+/g,
184 | searchTag = rxSpace.test(tag) ? '"#' + tag + '"' : '#' + tag;
185 |
186 | // Check if tag already exist in search
187 | var rxTag = new RegExp(searchTag, 'g');
188 | if (rxTag.test(this.search)) return;
189 |
190 | // Create new search query
191 | var newSearch = this.search
192 | .replace(rxTag, '')
193 | .replace(rxSpace, ' ')
194 | .trim();
195 |
196 | // Load data
197 | this.search = (newSearch + ' ' + searchTag).trim();
198 | this.dialogTags.visible = false;
199 | this.loadData();
200 | },
201 | showDialogAdd() {
202 | this.showDialog({
203 | title: 'New Bookmark',
204 | content: 'Create a new bookmark',
205 | fields: [{
206 | name: 'url',
207 | label: 'Url, start with http://...',
208 | }, {
209 | name: 'title',
210 | label: 'Custom title (optional)'
211 | }, {
212 | name: 'excerpt',
213 | label: 'Custom excerpt (optional)',
214 | type: 'area'
215 | }, {
216 | name: 'tags',
217 | label: 'Comma separated tags (optional)',
218 | separator: ',',
219 | dictionary: this.tags.map(tag => tag.name)
220 | }, ],
221 | mainText: 'OK',
222 | secondText: 'Cancel',
223 | mainClick: (data) => {
224 | // Prepare tags
225 | var tags = data.tags
226 | .toLowerCase()
227 | .replace(/\s+/g, ' ')
228 | .split(/\s*,\s*/g)
229 | .filter(tag => tag !== '')
230 | .map(tag => {
231 | return {
232 | name: tag
233 | };
234 | });
235 |
236 | // Send data
237 | this.dialog.loading = true;
238 | rest.post('/api/bookmarks', {
239 | url: data.url.trim(),
240 | title: data.title.trim(),
241 | excerpt: data.excerpt.trim(),
242 | tags: tags
243 | })
244 | .then((response) => {
245 | this.dialog.loading = false;
246 | this.dialog.visible = false;
247 | this.bookmarks.splice(0, 0, response.data);
248 | })
249 | .catch((error) => {
250 | var errorMsg = (error.response ? error.response.data : error.message).trim();
251 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
252 | else this.showErrorDialog(errorMsg);
253 | });
254 | }
255 | });
256 | },
257 | showDialogEdit(idx) {
258 | idx += this.page * pageSize;
259 |
260 | var book = this.bookmarks ? JSON.parse(JSON.stringify(this.bookmarks[idx])) : [],
261 | strTags = book.tags ? book.tags.map(tag => tag.name).join(', '): '';
262 |
263 | this.showDialog({
264 | title: 'Edit Bookmark',
265 | content: 'Edit the bookmark\'s data',
266 | showLabel: true,
267 | fields: [{
268 | name: 'title',
269 | label: 'Title',
270 | value: book.title,
271 | }, {
272 | name: 'excerpt',
273 | label: 'Excerpt',
274 | type: 'area',
275 | value: book.excerpt,
276 | }, {
277 | name: 'tags',
278 | label: 'Tags',
279 | value: strTags,
280 | }],
281 | mainText: 'OK',
282 | secondText: 'Cancel',
283 | mainClick: (data) => {
284 | // Validate input
285 | if (data.title.trim() === '') return;
286 |
287 | // Prepare tags
288 | var tags = data.tags
289 | .toLowerCase()
290 | .replace(/\s+/g, ' ')
291 | .split(/\s*,\s*/g)
292 | .filter(tag => tag !== '')
293 | .map(tag => {
294 | return {
295 | name: tag
296 | };
297 | });
298 |
299 | // Set new data
300 | book.title = data.title.trim();
301 | book.excerpt = data.excerpt.trim();
302 | book.tags = tags;
303 |
304 | // Send data
305 | this.dialog.loading = true;
306 | rest.put('/api/bookmarks', book)
307 | .then((response) => {
308 | this.dialog.loading = false;
309 | this.dialog.visible = false;
310 | this.bookmarks.splice(idx, 1, response.data);
311 | })
312 | .catch((error) => {
313 | var errorMsg = (error.response ? error.response.data : error.message).trim();
314 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
315 | else this.showErrorDialog(errorMsg);
316 | });
317 | }
318 | });
319 | },
320 | showDialogDelete(indices) {
321 | // Check and prepare indices
322 | if (!(indices instanceof Array)) return;
323 | if (indices.length === 0) return;
324 | indices.sort();
325 |
326 | // Set real indices value
327 | indices = indices.map(item => item + this.page * pageSize)
328 |
329 | // Create title and content
330 | var title = "Delete Bookmarks",
331 | content = "Delete the selected bookmarks ? This action is irreversible.";
332 |
333 | if (indices.length === 1) {
334 | title = "Delete Bookmark";
335 | content = "Are you sure ? This action is irreversible.";
336 | }
337 |
338 | // Get list of bookmark ID
339 | var listID = [];
340 | for (var i = 0; i < indices.length; i++) {
341 | listID.push(this.bookmarks[indices[i]].id);
342 | }
343 |
344 | // Show dialog
345 | this.showDialog({
346 | title: title,
347 | content: content,
348 | mainText: 'Yes',
349 | secondText: 'No',
350 | mainClick: () => {
351 | this.dialog.loading = true;
352 | rest.delete('/api/bookmarks/', {
353 | data: listID
354 | })
355 | .then((response) => {
356 | this.selected = [];
357 | this.editMode = false;
358 | this.dialog.loading = false;
359 | this.dialog.visible = false;
360 | for (var i = indices.length - 1; i >= 0; i--) {
361 | this.bookmarks.splice(indices[i], 1);
362 | }
363 | })
364 | .catch((error) => {
365 | var errorMsg = (error.response ? error.response.data : error.message).trim();
366 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
367 | else this.showErrorDialog(errorMsg);
368 | });
369 | }
370 | });
371 | },
372 | showDialogUpdateCache(indices) {
373 | // Check and prepare indices
374 | if (!(indices instanceof Array)) return;
375 | if (indices.length === 0) return;
376 | indices.sort();
377 |
378 | // Set real indices value
379 | indices = indices.map(item => item + this.page * pageSize)
380 |
381 | // Get list of bookmark ID
382 | var listID = [];
383 | for (var i = 0; i < indices.length; i++) {
384 | listID.push(this.bookmarks[indices[i]].id);
385 | }
386 |
387 | // Show dialog
388 | this.showDialog({
389 | title: 'Update Cache',
390 | content: 'Update cache for selected bookmarks ? This action is irreversible.',
391 | mainText: 'Yes',
392 | secondText: 'No',
393 | mainClick: () => {
394 | this.dialog.loading = true;
395 | rest.put('/api/cache/', listID)
396 | .then((response) => {
397 | this.selected = [];
398 | this.editMode = false;
399 | this.dialog.loading = false;
400 | this.dialog.visible = false;
401 |
402 | response.data.forEach(book => {
403 | for (var i = 0; i < indices.length; i++) {
404 | var idx = indices[i];
405 | if (book.id === this.bookmarks[idx].id) {
406 | this.bookmarks.splice(idx, 1, book);
407 | break;
408 | }
409 | }
410 | });
411 | })
412 | .catch((error) => {
413 | var errorMsg = (error.response ? error.response.data : error.message).trim();
414 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
415 | else this.showErrorDialog(errorMsg);
416 | });
417 | }
418 | });
419 | },
420 | showDialogAddTags(indices) {
421 | // Check and prepare indices
422 | if (!(indices instanceof Array)) return;
423 | if (indices.length === 0) return;
424 | indices.sort();
425 |
426 | // Set real indices value
427 | indices = indices.map(item => item + this.page * pageSize)
428 |
429 | // Get list of bookmark ID
430 | var listID = [];
431 | for (var i = 0; i < indices.length; i++) {
432 | listID.push(this.bookmarks[indices[i]].id);
433 | }
434 |
435 | this.showDialog({
436 | title: 'Add New Tags',
437 | content: 'Add new tags to selected bookmarks',
438 | fields: [{
439 | name: 'tags',
440 | label: 'Comma separated tags',
441 | value: '',
442 | }],
443 | mainText: 'OK',
444 | secondText: 'Cancel',
445 | mainClick: (data) => {
446 | // Validate input
447 | var tags = data.tags
448 | .toLowerCase()
449 | .replace(/\s+/g, ' ')
450 | .split(/\s*,\s*/g)
451 | .filter(tag => tag !== '')
452 | .map(tag => {
453 | return {
454 | name: tag
455 | };
456 | });
457 |
458 | if (tags.length === 0) return;
459 |
460 | // Send data
461 | this.dialog.loading = true;
462 | rest.put('/api/bookmarks/tags', {
463 | ids: listID,
464 | tags: tags,
465 | })
466 | .then((response) => {
467 | this.selected = [];
468 | this.editMode = false;
469 | this.dialog.loading = false;
470 | this.dialog.visible = false;
471 |
472 | response.data.forEach(book => {
473 | for (var i = 0; i < indices.length; i++) {
474 | var idx = indices[i];
475 | if (book.id === this.bookmarks[idx].id) {
476 | this.bookmarks.splice(idx, 1, book);
477 | break;
478 | }
479 | }
480 | });
481 | })
482 | .catch((error) => {
483 | var errorMsg = (error.response ? error.response.data : error.message).trim();
484 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
485 | else this.showErrorDialog(errorMsg);
486 | });
487 | }
488 | });
489 | },
490 | showDialogTags() {
491 | this.dialogTags.visible = true;
492 | this.dialogTags.loading = true;
493 | rest.get('/api/tags', {
494 | timeout: 5000
495 | })
496 | .then((response) => {
497 | this.tags = response.data;
498 | this.dialogTags.loading = false;
499 | })
500 | .catch((error) => {
501 | this.dialogTags.loading = false;
502 | this.dialogTags.visible = false;
503 |
504 | var errorMsg = (error.response ? error.response.data : error.message).trim();
505 | if (errorMsg.startsWith('Token error')) this.showDialogSessionExpired(errorMsg);
506 | else this.showErrorDialog(errorMsg);
507 | });
508 | },
509 | showDialogLogout() {
510 | this.showDialog({
511 | title: 'Log Out',
512 | content: 'Do you want to log out from shiori ?',
513 | mainText: 'Yes',
514 | secondText: 'No',
515 | mainClick: () => {
516 | Cookies.remove('token');
517 | location.href = '/login';
518 | }
519 | });
520 | },
521 | showDialogSessionExpired(msg) {
522 | this.showDialog({
523 | title: 'Error',
524 | content: msg + '. Please login again.',
525 | mainText: 'OK',
526 | mainClick: () => {
527 | Cookies.remove('token');
528 | location.href = '/login';
529 | }
530 | });
531 | },
532 | showDialogAbout() {
533 | this.dialogAbout.visible = true;
534 | },
535 | showDialogOptions() {
536 | this.dialogOptions.visible = true;
537 | },
538 | getHostname(url) {
539 | var parser = document.createElement('a');
540 | parser.href = url;
541 | return parser.hostname.replace(/^www\./g, '');
542 | },
543 | getBookLink(book, isMainLink) {
544 | if ((this.options.mainOpenOriginal && isMainLink) ||
545 | (!this.options.mainOpenOriginal && !isMainLink)) return book.url;
546 | if (book.content.length > 0) return '/bookmark/' + book.id;
547 | return null;
548 | },
549 | getBookLinkTitle(book, isMainLink) {
550 | if ((this.options.mainOpenOriginal && isMainLink) ||
551 | (!this.options.mainOpenOriginal && !isMainLink)) return 'View original';
552 | if (book.content.length > 0) return 'View cache';
553 | return null;
554 | }
555 | },
556 | mounted() {
557 | // Read config from local storage
558 | var listView = localStorage.getItem('shiori-list-view'),
559 | nightMode = localStorage.getItem('shiori-night-mode'),
560 | showBookmarkID = localStorage.getItem('shiori-show-id'),
561 | mainOpenOriginal = localStorage.getItem('shiori-main-original');
562 |
563 | this.options.listView = listView === '1';
564 | this.options.nightMode = nightMode === '1';
565 | this.options.showBookmarkID = showBookmarkID === '1';
566 | this.options.mainOpenOriginal = mainOpenOriginal === '1';
567 |
568 | // Create bookmarklet
569 | var shioriURL = location.href.replace(/\/+$/g, ''),
570 | baseBookmarklet = `(function () {
571 | var shioriURL = '$SHIORI_URL',
572 | bookmarkURL = location.href,
573 | submitURL = shioriURL + '/submit?url=' + encodeURIComponent(bookmarkURL);
574 |
575 | if (bookmarkURL.startsWith('https://') && !shioriURL.startsWith('https://')) {
576 | window.open(submitURL, '_blank');
577 | return;
578 | }
579 |
580 | var i = document.createElement('iframe');
581 | i.src = submitURL;
582 | i.frameBorder = '0';
583 | i.allowTransparency = true;
584 | i.style.position = 'fixed';
585 | i.style.top = 0;
586 | i.style.left = 0;
587 | i.style.width = '100%';
588 | i.style.height = '100%';
589 | i.style.zIndex = 99999;
590 | document.body.appendChild(i);
591 |
592 | window.addEventListener('message', function onMessage(e) {
593 | if (e.origin !== shioriURL) return;
594 | if (e.data !== 'finished') return;
595 | window.removeEventListener('message', onMessage);
596 | document.body.removeChild(i);
597 | });
598 | }())`;
599 |
600 | this.bookmarklet = 'javascript:' + baseBookmarklet
601 | .replace('$SHIORI_URL', shioriURL)
602 | .replace(/\s+/gm, ' ');
603 |
604 | // Load data
605 | this.loadData();
606 | }
607 | });
--------------------------------------------------------------------------------
/src/less/stylesheet.less:
--------------------------------------------------------------------------------
1 | :root {
2 | --bg: #EEE;
3 | --sidebarBg: #292929;
4 | --contentBg: #FFF;
5 | --selectedBg: #fcd2cf;
6 | --border: #E5E5E5;
7 | --color: #232323;
8 | --colorLink: #999;
9 | --colorSidebar: #FFF;
10 | --main: #F44336;
11 | }
12 |
13 | &.night {
14 | --bg: #1F1F1F;
15 | --contentBg: #292929;
16 | --selectedBg: #300603;
17 | --border: #191919;
18 | --color: #FFF;
19 | .yla-dialog {
20 | color: var(--color);
21 | background-color: var(--bg);
22 | >.yla-dialog__header {
23 | background-color: var(--contentBg);
24 | border-bottom: 1px solid var(--border);
25 | }
26 | >.yla-dialog__body {
27 | >input,
28 | >textarea {
29 | color: var(--color);
30 | border-color: var(--border);
31 | background-color: var(--contentBg);
32 | }
33 | >.suggestion {
34 | border-color: var(--border);
35 | background-color: var(--bg);
36 | }
37 | }
38 | >.yla-dialog__footer {
39 | border-color: var(--border);
40 | }
41 | }
42 | }
43 |
44 | * {
45 | border-width: 0;
46 | box-sizing: border-box;
47 | font-family: "Source Sans Pro", sans-serif;
48 | margin: 0;
49 | padding: 0;
50 | text-decoration: none;
51 | hyphens: auto;
52 | }
53 |
54 | a {
55 | cursor: pointer;
56 | }
57 |
58 | .spacer {
59 | flex: 1 0;
60 | }
61 |
62 | .noscroll {
63 | overflow: hidden;
64 | }
65 |
66 | body {
67 | overflow-x: hidden;
68 | }
69 |
70 | .page {
71 | display: flex;
72 | flex-flow: column nowrap;
73 | background-color: var(--bg);
74 | min-width: 0;
75 | min-height: 100vh;
76 | #sidebar {
77 | position: fixed;
78 | top: 0;
79 | left: 0;
80 | bottom: 0;
81 | display: flex;
82 | flex-flow: column nowrap;
83 | flex-shrink: 0;
84 | background-color: var(--sidebarBg);
85 | min-width: 0;
86 | min-height: 0;
87 | z-index: 10;
88 | overflow: auto;
89 | #logo {
90 | width: 60px;
91 | line-height: 60px;
92 | text-align: center;
93 | font-size: 2em;
94 | color: var(--contentBg);
95 | background-color: var(--main);
96 | flex-shrink: 0;
97 | }
98 | >a {
99 | width: 60px;
100 | line-height: 60px;
101 | text-align: center;
102 | display: block;
103 | color: var(--colorSidebar);
104 | flex-shrink: 0;
105 | >span {
106 | display: block;
107 | height: 0;
108 | line-height: 0;
109 | overflow: hidden;
110 | }
111 | &:hover,
112 | &:focus {
113 | background-color: #232323;
114 | }
115 | }
116 | }
117 | #body {
118 | flex: 1 0;
119 | display: flex;
120 | flex-flow: column nowrap;
121 | min-width: 0;
122 | min-height: 0;
123 | margin-left: 60px;
124 | }
125 | @media (max-width: 600px) {
126 | &.night #sidebar {
127 | border-right-width: 0;
128 | border-bottom: 1px solid var(--border);
129 | }
130 | #sidebar {
131 | position: static;
132 | flex-flow: row nowrap;
133 | #logo,
134 | .spacer {
135 | display: none;
136 | }
137 | a {
138 | margin: auto;
139 | }
140 | }
141 | #body {
142 | margin-left: 0;
143 | }
144 | }
145 | }
146 |
147 | #login-page {
148 | display: flex;
149 | flex-flow: column nowrap;
150 | align-items: center;
151 | height: 100vh;
152 | background-color: var(--bg);
153 | justify-content: center;
154 | padding: 16px;
155 | >.error-message {
156 | width: 100%;
157 | max-width: 400px;
158 | font-size: 0.9em;
159 | background-color: var(--contentBg);
160 | border: 1px solid var(--border);
161 | padding: 16px;
162 | margin-bottom: 16px;
163 | text-align: center;
164 | color: var(--main);
165 | }
166 | #login-box {
167 | width: 100%;
168 | max-width: 400px;
169 | background-color: var(--contentBg);
170 | display: flex;
171 | flex-flow: column nowrap;
172 | border: 1px solid var(--border);
173 | #logo-area {
174 | display: flex;
175 | align-items: center;
176 | flex-flow: column nowrap;
177 | padding: 16px;
178 | border-bottom: 1px solid var(--border);
179 | flex-shrink: 0;
180 | #logo {
181 | font-size: 3em;
182 | font-weight: 100;
183 | color: var(--main);
184 | span {
185 | margin-right: 8px;
186 | }
187 | }
188 | #tagline {
189 | font-size: 0.9em;
190 | font-weight: 500;
191 | color: var(--main);
192 | }
193 | }
194 | #input-area {
195 | padding: 8px;
196 | border-bottom: 1px solid var(--border);
197 | .input-field {
198 | display: flex;
199 | align-items: baseline;
200 | padding: 8px;
201 | p {
202 | color: var(--color);
203 | font-size: 0.9em;
204 | margin-right: 16px;
205 | min-width: 65px;
206 | }
207 | input {
208 | color: var(--color);
209 | padding: 8px;
210 | background-color: var(--contentBg);
211 | border: 1px solid var(--border);
212 | flex: 1 0;
213 | font-size: 0.9em;
214 | }
215 | a {
216 | display: block;
217 | cursor: pointer;
218 | color: var(--color);
219 | text-align: center;
220 | font-size: 0.9em;
221 | flex: 1 0;
222 | i {
223 | margin-right: 8px;
224 | color: var(--color);
225 | }
226 | &:hover,
227 | &:focus {
228 | color: var(--main);
229 | }
230 | }
231 | }
232 | }
233 | #button-area {
234 | display: flex;
235 | flex-flow: row nowrap;
236 | padding: 16px;
237 | justify-content: center;
238 | a {
239 | color: var(--colorLink);
240 | text-transform: uppercase;
241 | text-align: center;
242 | font-size: 0.9em;
243 | font-weight: 600;
244 | &:hover,
245 | &:focus {
246 | color: var(--main);
247 | }
248 | }
249 | }
250 | }
251 | }
252 |
253 | #index-page {
254 | .header {
255 | background-color: var(--contentBg);
256 | border-bottom: 1px solid var(--border);
257 | display: flex;
258 | flex-flow: row nowrap;
259 | color: var(--color);
260 | align-items: center;
261 | min-width: 0;
262 | min-height: 0;
263 | overflow: hidden;
264 | flex-shrink: 0;
265 | position: fixed;
266 | left: 60px;
267 | top: 0;
268 | right: 0;
269 | z-index: 11;
270 | }
271 | #header {
272 | input {
273 | flex: 1 0;
274 | line-height: 60px;
275 | padding: 0 16px;
276 | min-width: 0;
277 | font-size: 1em;
278 | color: var(--color);
279 | background-color: var(--contentBg);
280 | border-right: 1px solid var(--border);
281 | }
282 | a {
283 | width: 60px;
284 | line-height: 60px;
285 | text-align: center;
286 | color: var(--colorLink);
287 | flex-shrink: 0;
288 | &:hover,
289 | &:focus {
290 | color: var(--main);
291 | }
292 | }
293 | }
294 | #batch-edit {
295 | height: 61px;
296 | flex-shrink: 0;
297 | padding: 16px;
298 | font-size: 0.9em;
299 | >*:not(:last-child) {
300 | margin-right: 32px;
301 | }
302 | p {
303 | font-weight: 600;
304 | flex: 1 0;
305 | }
306 | a {
307 | color: var(--colorLink);
308 | &.disabled {
309 | opacity: 0.5;
310 | cursor: default;
311 | }
312 | &:hover:not(.disabled),
313 | &:focus:not(.disabled) {
314 | color: var(--main);
315 | }
316 | i {
317 | margin-right: 6px;
318 | }
319 | }
320 | #cancel-edit {
321 | color: var(--color);
322 | padding: 4px;
323 | border: 1px solid var(--border);
324 | border-radius: 4px;
325 | &:hover,
326 | &:focus {
327 | color: var(--main);
328 | }
329 | i {
330 | margin: 0;
331 | }
332 | }
333 | }
334 | #grid {
335 | display: grid;
336 | grid-template-rows: auto;
337 | grid-template-columns: repeat(4, 1fr);
338 | grid-gap: 16px;
339 | padding: 16px 16px 0;
340 | margin-top: 60px;
341 | position: relative;
342 | .bookmark {
343 | display: flex;
344 | flex-flow: column nowrap;
345 | min-width: 0;
346 | border: 1px solid var(--border);
347 | background-color: var(--contentBg);
348 | height: 100%;
349 | position: relative;
350 | &:hover,
351 | &:focus {
352 | .bookmark-menu>a {
353 | display: block;
354 | }
355 | }
356 | &.selected {
357 | background-color: var(--selectedBg);
358 | }
359 | .bookmark-selector {
360 | position: absolute;
361 | top: 0;
362 | left: 0;
363 | width: 100%;
364 | height: 100%;
365 | z-index: 9;
366 | }
367 | .bookmark-link {
368 | display: block;
369 | cursor: default;
370 | &[href] {
371 | cursor: pointer;
372 | &:hover,
373 | &:focus {
374 | .title {
375 | color: var(--main);
376 | }
377 | }
378 | }
379 | img {
380 | width: 100%;
381 | max-height: 13em;
382 | object-fit: cover;
383 | margin-bottom: 8px;
384 | }
385 | .id {
386 | color: var(--color);
387 | border: 1px solid var(--border);
388 | background-color: var(--contentBg);
389 | font-size: 0.7em;
390 | font-weight: bold;
391 | left: -1px;
392 | top: -1px;
393 | position: absolute;
394 | padding: 0px 0.3em;
395 | opacity: 0.7;
396 | }
397 | .title {
398 | text-overflow: ellipsis;
399 | word-wrap: break-word;
400 | overflow: hidden;
401 | font-size: 1.2em;
402 | line-height: 1.3em;
403 | max-height: 5.2em;
404 | font-weight: 600;
405 | padding: 0 16px;
406 | color: var(--color);
407 | &:first-child {
408 | margin-top: 16px;
409 | }
410 | }
411 | .excerpt {
412 | color: var(--color);
413 | margin-top: 8px;
414 | padding: 0 16px;
415 | text-overflow: ellipsis;
416 | word-wrap: break-word;
417 | overflow: hidden;
418 | font-size: 0.9em;
419 | line-height: 1.5em;
420 | max-height: 10.5em;
421 | }
422 | }
423 | .bookmark-tags {
424 | display: flex;
425 | flex-flow: row wrap;
426 | margin: 4px 0 -4px;
427 | padding: 0 8px;
428 | a {
429 | margin: 4px;
430 | padding: 4px 8px;
431 | font-size: 0.8em;
432 | font-weight: 600;
433 | border: 1px solid var(--border);
434 | border-radius: 4px;
435 | color: var(--colorLink);
436 | &:hover,
437 | &:focus {
438 | color: var(--main);
439 | }
440 | }
441 | }
442 | .bookmark-menu {
443 | padding: 8px 16px 16px;
444 | display: flex;
445 | flex-flow: row nowrap;
446 | min-width: 0;
447 | min-height: 0;
448 | align-items: center;
449 | a {
450 | color: var(--colorLink);
451 | flex-shrink: 0;
452 | opacity: 0.8;
453 | display: none;
454 | font-size: 0.9em;
455 | &:not(:last-child) {
456 | margin-right: 12px;
457 | }
458 | &:hover,
459 | &:focus {
460 | color: var(--main);
461 | opacity: 1;
462 | }
463 | @media (max-width: 800px) {
464 | display: block;
465 | &:not(:last-child) {
466 | margin-right: 24px;
467 | }
468 | }
469 | }
470 | .url {
471 | flex: 1 0;
472 | opacity: 1;
473 | display: block;
474 | white-space: nowrap;
475 | overflow: hidden;
476 | text-overflow: ellipsis;
477 | line-height: 21px;
478 | &:not([href]) {
479 | cursor: default;
480 | color: var(--colorLink);
481 | }
482 | }
483 | }
484 | }
485 | .pagination-box {
486 | grid-column-start: 1;
487 | grid-column-end: -1;
488 | display: flex;
489 | flex-flow: row nowrap;
490 | a {
491 | padding: 8px;
492 | color: var(--colorLink);
493 | &:hover,
494 | &:focus {
495 | color: var(--main);
496 | }
497 | }
498 | input {
499 | width: 40px;
500 | padding: 8px;
501 | text-align: center;
502 | font-size: 0.9em;
503 | color: var(--color);
504 | border: 1px solid var(--border);
505 | background-color: var(--contentBg);
506 | margin: 0 8px;
507 | }
508 | p {
509 | font-size: 0.9em;
510 | color: var(--colorLink);
511 | line-height: 37px;
512 | font-weight: 600;
513 | &:last-of-type::before {
514 | content: "/";
515 | margin-right: 8px;
516 | }
517 | }
518 | }
519 | #grid-padding {
520 | grid-column-start: 1;
521 | grid-column-end: -1;
522 | min-height: 1px;
523 | }
524 | &.list {
525 | grid-gap: 0;
526 | grid-template-columns: 1fr;
527 | max-width: 1280px;
528 | .pagination-box {
529 | margin-top: 16px;
530 | &:first-of-type {
531 | margin-top: 0;
532 | margin-bottom: 16px;
533 | }
534 | }
535 | .bookmark {
536 | border-top-width: 0;
537 | border-bottom-width: 1px;
538 | padding: 16px 24px 16px 100px;
539 | &:nth-child(2) {
540 | border-top-width: 1px;
541 | }
542 | .bookmark-link {
543 | img {
544 | position: absolute;
545 | top: 0;
546 | left: 0;
547 | width: 100px;
548 | height: 100%;
549 | margin-bottom: 0;
550 | }
551 | .title {
552 | margin: 0;
553 | padding-left: 24px;
554 | white-space: nowrap;
555 | }
556 | }
557 | .excerpt,
558 | >.spacer {
559 | display: none;
560 | }
561 | .bookmark-tags {
562 | order: 5;
563 | padding-left: 16px;
564 | padding-right: 0;
565 | margin-right: -4px;
566 | }
567 | .bookmark-menu {
568 | padding: 4px 0 0 24px;
569 | align-items: flex-end;
570 | }
571 | }
572 | #grid-padding {
573 | min-height: 16px
574 | }
575 | }
576 | @media (min-width: 2001px) {
577 | grid-template-columns: repeat(6, 1fr);
578 | }
579 | @media (max-width: 2000px) and (min-width: 1601px) {
580 | grid-template-columns: repeat(5, 1fr);
581 | }
582 | @media (max-width: 1600px) and (min-width: 1301px) {
583 | grid-template-columns: repeat(4, 1fr);
584 | }
585 | @media (max-width: 1300px) and (min-width: 1001px) {
586 | grid-template-columns: repeat(3, 1fr);
587 | }
588 | @media (max-width: 1000px) and (min-width: 601px) {
589 | grid-template-columns: repeat(2, 1fr);
590 | }
591 | @media (max-width: 600px) {
592 | grid-template-columns: 1fr;
593 | }
594 | }
595 | @media (max-width: 600px) {
596 | .header {
597 | position: static;
598 | }
599 | #batch-edit {
600 | >*:not(:last-child) {
601 | margin-right: 32px;
602 | }
603 | span {
604 | display: none;
605 | }
606 | }
607 | #grid {
608 | margin-top: 0;
609 | }
610 | }
611 | }
612 |
613 | #cache-page {
614 | #sidebar {
615 | #toggle-font {
616 | font-weight: 600;
617 | font-size: 1.2em;
618 | &.serif {
619 | font-family: "Source Serif Pro", serif;
620 | }
621 | }
622 | }
623 | #body {
624 | color: var(--color);
625 | overflow-y: auto;
626 | align-items: center;
627 | padding: 16px 16px 0;
628 | &.serif * {
629 | font-family: "Source Serif Pro", serif;
630 | }
631 | #header {
632 | display: grid;
633 | grid-template-rows: auto;
634 | grid-template-columns: 1fr 1fr;
635 | width: 100%;
636 | max-width: 840px;
637 | grid-gap: 12px;
638 | margin-bottom: 16px;
639 | background-color: var(--contentBg);
640 | padding: 20px;
641 | border: 1px solid var(--border);
642 | #title {
643 | grid-column-start: 1;
644 | grid-column-end: -1;
645 | font-size: 40px;
646 | font-weight: 700;
647 | word-break: break-word;
648 | hyphens: none;
649 | }
650 | #time {
651 | font-size: 16px;
652 | color: var(--colorLink);
653 | }
654 | #url {
655 | font-size: 16px;
656 | color: var(--colorLink);
657 | text-align: right;
658 | justify-self: end;
659 | &:hover,
660 | &:focus {
661 | color: var(--main);
662 | }
663 | }
664 | @media (max-width: 800px) {
665 | grid-template-columns: 1fr;
666 | #url {
667 | justify-self: start;
668 | }
669 | }
670 | }
671 | #content {
672 | width: 100%;
673 | max-width: 840px;
674 | grid-gap: 12px;
675 | background-color: var(--contentBg);
676 | padding: 20px;
677 | border: 1px solid var(--border);
678 | * {
679 | font-size: 18px;
680 | line-height: 180%;
681 | &:not(:last-child) {
682 | margin-bottom: 20px;
683 | }
684 | }
685 | a {
686 | color: var(--color);
687 | text-decoration: underline;
688 | &:hover,
689 | &:focus {
690 | color: var(--main);
691 | }
692 | }
693 | pre,
694 | code {
695 | overflow: auto;
696 | border: 1px solid var(--border);
697 | font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;
698 | font-size: 16px;
699 | }
700 | pre {
701 | padding: 8px;
702 | >code {
703 | border: 0;
704 | }
705 | }
706 | ol,
707 | ul {
708 | padding-left: 16px;
709 | }
710 | }
711 | #body-padding {
712 | width: 100%;
713 | min-height: 16px;
714 | }
715 | }
716 | }
717 |
718 | #submit-page {
719 | background-color: transparent;
720 | .yla-dialog__header {
721 | text-align: center;
722 | }
723 | &:not(.iframe) {
724 | background-color: var(--bg);
725 | .yla-dialog__overlay {
726 | background-color: transparent;
727 | .yla-dialog {
728 | border: 1px solid var(--border);
729 | }
730 | }
731 | }
732 | }
733 |
734 | .yla-tooltip {
735 | @media (max-width: 800px) {
736 | display: none;
737 | }
738 | }
739 |
740 | #dialog-tags {
741 | .yla-dialog__body {
742 | grid-template-columns: 1fr 1fr;
743 | a {
744 | display: flex;
745 | flex-flow: row nowrap;
746 | align-items: baseline;
747 | font-size: 0.9em;
748 | span {
749 | &:last-child {
750 | font-size: 0.9em;
751 | color: var(--colorLink);
752 | margin-left: 8px;
753 | &::before {
754 | content: "(";
755 | margin-right: 2px;
756 | }
757 | &::after {
758 | content: ")";
759 | margin-left: 2px;
760 | }
761 | }
762 | }
763 | &:hover,
764 | &:focus {
765 | color: var(--main);
766 | }
767 | }
768 | }
769 | }
770 |
771 | #dialog-options {
772 | .yla-dialog__body {
773 | grid-template-columns: 1fr;
774 | a {
775 | display: block;
776 | cursor: pointer;
777 | color: var(--color);
778 | font-size: 0.9em;
779 | padding-left: 24px;
780 | position: relative;
781 | i {
782 | left: 0;
783 | top: 2px;
784 | position: absolute;
785 | color: var(--color);
786 | }
787 | &:hover,
788 | &:focus {
789 | color: var(--main);
790 | }
791 | }
792 | }
793 | }
794 |
795 | #dialog-about {
796 | .yla-dialog__body {
797 | grid-template-columns: 1fr;
798 | p {
799 | font-size: 0.9em;
800 | line-height: 1.8em;
801 | a {
802 | color: var(--color);
803 | text-decoration: underline;
804 | &:hover,
805 | &:focus {
806 | color: var(--main);
807 | }
808 | }
809 | }
810 | }
811 | }
--------------------------------------------------------------------------------
/src/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
58 |
153 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
82 | {{selected.length}} Items selected
66 | 67 | 68 | Delete 69 | 70 | 71 | 72 | Add tags 73 | 74 | 75 | 76 | Update cache 77 | 78 | 79 | 80 | 81 |
83 |
152 |
84 |
103 | Page
85 | 86 |{{maxPage+1}}
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
104 |
105 |
106 | ![]()
107 |
130 | {{book.title}}
108 |{{book.excerpt}}
109 |{{book.id}}
110 | 111 | 114 | 115 | 129 |
131 |
150 |
151 | Page
132 | 133 |{{maxPage+1}}
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 |155 | Shiori is a simple bookmarks manager written in Go language, developed by 156 | Radhi Fadlillah and other 157 | contributors. The source code is available on 158 | GitHub and released under MIT license. 159 |
160 |For ease of use, you can install the Shiori Bookmarklet by dragging this link ( 161 | +Shiori) to your bookmark bar. 162 |
163 |
17 |
18 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/login.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import axios from 'axios'
3 | import * as Cookies from 'js-cookie';
4 |
5 | import './less/stylesheet.less'
6 | import 'typeface-source-sans-pro'
7 | import '@fortawesome/fontawesome-free/css/all.css'
8 |
9 | new Vue({
10 | el: '#login-page',
11 | data: {
12 | nightMode: true,
13 | error: '',
14 | loading: false,
15 | username: '',
16 | password: '',
17 | rememberMe: false,
18 | },
19 | methods: {
20 | toggleRemember: function () {
21 | this.rememberMe = !this.rememberMe;
22 | },
23 | login: function () {
24 | // Validate input
25 | if (this.username === '') {
26 | this.error = 'Username must not empty';
27 | return;
28 | }
29 |
30 | // Send request
31 | this.loading = true;
32 | axios.post('/api/login', {
33 | username: this.username,
34 | password: this.password,
35 | remember: this.rememberMe
36 | }, {
37 | timeout: 10000
38 | })
39 | .then(function (response) {
40 | // Save token
41 | var token = response.data;
42 | Cookies.set('token', token);
43 |
44 | // Set destination URL
45 | var rx = /[&?]dst=([^&]+)(&|$)/g,
46 | match = rx.exec(location.href);
47 |
48 | if (match == null) {
49 | location.href = '/';
50 | } else {
51 | var dst = match[1];
52 | location.href = decodeURIComponent(dst);
53 | }
54 | })
55 | .catch(function (error) {
56 | var errorMsg = (error.response ? error.response.data : error.message).trim();
57 | app.password = '';
58 | app.loading = false;
59 | app.error = errorMsg;
60 | });
61 | }
62 | },
63 | mounted() {
64 | // Read config from local storage
65 | var nightMode = localStorage.getItem('shiori-night-mode');
66 | this.nightMode = nightMode === '1';
67 | }
68 | })
69 |
--------------------------------------------------------------------------------
/src/page/base.js:
--------------------------------------------------------------------------------
1 | export function Base() {
2 | return {
3 | data() {
4 | return {
5 | dialog: {}
6 | }
7 | },
8 | methods: {
9 | _defaultDialog() {
10 | return {
11 | visible: false,
12 | loading: false,
13 | title: '',
14 | content: '',
15 | fields: [],
16 | showLabel: false,
17 | mainText: 'Yes',
18 | secondText: '',
19 | mainClick: () => {
20 | this.dialog.visible = false;
21 | },
22 | secondClick: () => {
23 | this.dialog.visible = false;
24 | }
25 | }
26 | },
27 | showDialog(cfg) {
28 | var base = this._defaultDialog();
29 | base.visible = true;
30 | if (cfg.loading) base.loading = cfg.loading;
31 | if (cfg.title) base.title = cfg.title;
32 | if (cfg.content) base.content = cfg.content;
33 | if (cfg.fields) base.fields = cfg.fields;
34 | if (cfg.showLabel) base.showLabel = cfg.showLabel;
35 | if (cfg.mainText) base.mainText = cfg.mainText;
36 | if (cfg.secondText) base.secondText = cfg.secondText;
37 | if (cfg.mainClick) base.mainClick = cfg.mainClick;
38 | if (cfg.secondClick) base.secondClick = cfg.secondClick;
39 | this.dialog = base;
40 | },
41 | showErrorDialog(msg) {
42 | this.showDialog({
43 | visible: true,
44 | title: 'Error',
45 | content: msg,
46 | mainText: 'OK',
47 | mainClick: () => {
48 | this.dialog.visible = false;
49 | }
50 | });
51 | }
52 | }
53 | }
54 | };
--------------------------------------------------------------------------------
/src/res/apple-touch-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techknowlogick/shiori/400599f20d3a7b052e1716792dcb5bbef50663f1/src/res/apple-touch-icon-144x144.png
--------------------------------------------------------------------------------
/src/res/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techknowlogick/shiori/400599f20d3a7b052e1716792dcb5bbef50663f1/src/res/apple-touch-icon-152x152.png
--------------------------------------------------------------------------------
/src/res/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techknowlogick/shiori/400599f20d3a7b052e1716792dcb5bbef50663f1/src/res/favicon-16x16.png
--------------------------------------------------------------------------------
/src/res/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techknowlogick/shiori/400599f20d3a7b052e1716792dcb5bbef50663f1/src/res/favicon-32x32.png
--------------------------------------------------------------------------------
/src/res/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techknowlogick/shiori/400599f20d3a7b052e1716792dcb5bbef50663f1/src/res/favicon.ico
--------------------------------------------------------------------------------
/src/submit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
19 |
47 |
20 |
25 | 21 | 栞shiori 22 |
23 |simple bookmark manager
24 |
26 |
40 |
46 |
27 |
30 | Username:
28 | 29 |
31 |
34 | Password:
32 | 33 |
35 |
36 | Remember me
37 |
38 |
39 |
17 |
19 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/submit.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import axios from 'axios'
3 | import * as Cookies from 'js-cookie';
4 |
5 | import { Base } from './page/base';
6 | import { YlaDialog } from './component/yla-dialog';
7 |
8 | import './less/stylesheet.less'
9 | import 'typeface-source-sans-pro'
10 | import '@fortawesome/fontawesome-free/css/all.css'
11 |
12 | // Create private function
13 | function _inIframe() {
14 | try {
15 | return window.self !== window.top;
16 | } catch (e) {
17 | return true;
18 | }
19 | }
20 |
21 | // Register Vue component
22 | Vue.component('yla-dialog', new YlaDialog());
23 |
24 | // Prepare axios instance
25 | var token = Cookies.get('token'),
26 | rest = axios.create();
27 |
28 | rest.defaults.timeout = 60000;
29 | rest.defaults.headers.common['Authorization'] = 'Bearer ' + token;
30 |
31 | new Vue({
32 | el: '#submit-page',
33 | mixins: [new Base()],
34 | data: {
35 | targetURL: '',
36 | nightMode: false,
37 | inIframe: false,
38 | },
39 | methods: {
40 | showDialogLogin() {
41 | this.showDialog({
42 | title: 'Login',
43 | content: 'Please input username and password',
44 | fields: [{
45 | name: 'username',
46 | label: 'Username',
47 | }, {
48 | name: 'password',
49 | label: 'Password',
50 | type: 'password'
51 | }],
52 | mainText: 'OK',
53 | secondText: this.inIframe ? 'Cancel' : '',
54 | mainClick: (data) => {
55 | // Validate input
56 | if (data.username.trim() === '') return;
57 |
58 | // Send data
59 | this.dialog.loading = true;
60 | rest.post('/api/login', {
61 | username: data.username.trim(),
62 | password: data.password,
63 | })
64 | .then((response) => {
65 | // Save token
66 | var token = response.data;
67 | Cookies.set('token', token);
68 |
69 | this.showDialogAdd();
70 | })
71 | .catch((error) => {
72 | var errorMsg = (error.response ? error.response.data : error.message).trim();
73 | this.showErrorDialog(errorMsg);
74 | this.dialog.mainClick = () => {
75 | this.showDialogLogin();
76 | }
77 | });
78 | },
79 | secondClick: () => {
80 | window.top.postMessage('finished', '*');
81 | this.dialog.visible = false;
82 | }
83 | });
84 | },
85 | showDialogAdd() {
86 | this.showDialog({
87 | title: 'New Bookmark',
88 | content: 'Create a new bookmark',
89 | fields: [{
90 | name: 'url',
91 | label: 'Url, start with http://...',
92 | value: this.targetURL,
93 | }, {
94 | name: 'title',
95 | label: 'Custom title (optional)'
96 | }, {
97 | name: 'excerpt',
98 | label: 'Custom excerpt (optional)',
99 | type: 'area'
100 | }, {
101 | name: 'tags',
102 | label: 'Comma separated tags (optional)'
103 | }, ],
104 | mainText: 'Save',
105 | secondText: this.inIframe ? 'Cancel' : '',
106 | mainClick: (data) => {
107 | // Prepare tags
108 | var tags = data.tags
109 | .toLowerCase()
110 | .replace(/\s+/g, ' ')
111 | .split(/\s*,\s*/g)
112 | .filter(tag => tag !== '')
113 | .map(tag => {
114 | return {
115 | name: tag
116 | };
117 | });
118 |
119 | // Validate input
120 | if (data.url.trim() === '') return;
121 |
122 | // Send data
123 | this.dialog.loading = true;
124 | rest.post('/api/bookmarks', {
125 | url: data.url.trim(),
126 | title: data.title.trim(),
127 | excerpt: data.excerpt.trim(),
128 | tags: tags
129 | })
130 | .then((response) => {
131 | if (!this.inIframe) {
132 | location.href = '/';
133 | return;
134 | }
135 |
136 | this.showDialog({
137 | title: 'New Bookmark',
138 | content: 'The new bookmark has been saved successfully.',
139 | mainText: 'OK',
140 | mainClick: () => {
141 | window.top.postMessage('finished', '*');
142 | this.dialog.visible = false;
143 | }
144 | });
145 | })
146 | .catch((error) => {
147 | var errorMsg = (error.response ? error.response.data : error.message).trim();
148 | if (errorMsg.startsWith('Token error:')) {
149 | this.showDialogLogin();
150 | return;
151 | }
152 |
153 | this.showErrorDialog(errorMsg);
154 | this.dialog.mainClick = () => {
155 | this.showDialogAdd();
156 | }
157 | });
158 | },
159 | secondClick: () => {
160 | window.top.postMessage('finished', '*');
161 | this.dialog.visible = false;
162 | }
163 | });
164 | }
165 | },
166 | mounted() {
167 | // Check if in iframe
168 | this.inIframe = _inIframe();
169 |
170 | // Read config from local storage
171 | var nightMode = localStorage.getItem('shiori-night-mode');
172 | this.nightMode = nightMode === '1';
173 |
174 | // Get target URL
175 | var rxURL = /[&?]url=([^&]+)(&|$)/g,
176 | match = rxURL.exec(location.href);
177 |
178 | if (match != null) {
179 | var dst = match[1];
180 | this.targetURL = decodeURIComponent(dst);
181 | } else {
182 | this.targetURL = '';
183 | }
184 |
185 | // Show dialog
186 | this.showDialogAdd();
187 | }
188 | });
--------------------------------------------------------------------------------
/utils/colours.go:
--------------------------------------------------------------------------------
1 | package utils
2 |
3 | import (
4 | "github.com/fatih/color"
5 | )
6 |
7 | var (
8 | CIndex = color.New(color.FgHiCyan)
9 | CSymbol = color.New(color.FgHiMagenta)
10 | CTitle = color.New(color.FgHiGreen).Add(color.Bold)
11 | CReadTime = color.New(color.FgHiMagenta)
12 | CURL = color.New(color.FgHiYellow)
13 | CError = color.New(color.FgHiRed)
14 | CExcerpt = color.New(color.FgHiWhite)
15 | CTag = color.New(color.FgHiBlue)
16 |
17 | CIndexSprint = CIndex.SprintFunc()
18 | CSymbolSprint = CSymbol.SprintFunc()
19 | CTitleSprint = CTitle.SprintFunc()
20 | CReadTimeSprint = CReadTime.SprintFunc()
21 | CURLSprint = CURL.SprintFunc()
22 | CErrorSprint = CError.SprintFunc()
23 | CExcerptSprint = CExcerpt.SprintFunc()
24 | CTagSprint = CTag.SprintFunc()
25 | )
26 |
--------------------------------------------------------------------------------
/utils/errors.go:
--------------------------------------------------------------------------------
1 | package utils
2 |
3 | func CheckError(err error) {
4 | if err != nil {
5 | panic(err)
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/utils/parse.go:
--------------------------------------------------------------------------------
1 | package utils
2 |
3 | import (
4 | "errors"
5 | "strconv"
6 | "strings"
7 | )
8 |
9 | var (
10 | errInvalidIndex = errors.New("Index is not valid")
11 | )
12 |
13 | // parseIndexList converts a list of indices to their integer values
14 | func ParseIndexList(indices []string) ([]int, error) {
15 | var listIndex []int
16 | for _, strIndex := range indices {
17 | if !strings.Contains(strIndex, "-") {
18 | index, err := strconv.Atoi(strIndex)
19 | if err != nil || index < 1 {
20 | return nil, errInvalidIndex
21 | }
22 |
23 | listIndex = append(listIndex, index)
24 | continue
25 | }
26 |
27 | parts := strings.Split(strIndex, "-")
28 | if len(parts) != 2 {
29 | return nil, errInvalidIndex
30 | }
31 |
32 | minIndex, errMin := strconv.Atoi(parts[0])
33 | maxIndex, errMax := strconv.Atoi(parts[1])
34 | if errMin != nil || errMax != nil || minIndex < 1 || minIndex > maxIndex {
35 | return nil, errInvalidIndex
36 | }
37 |
38 | for i := minIndex; i <= maxIndex; i++ {
39 | listIndex = append(listIndex, i)
40 | }
41 | }
42 | return listIndex, nil
43 | }
44 |
--------------------------------------------------------------------------------
/utils/strings.go:
--------------------------------------------------------------------------------
1 | package utils
2 |
3 | import (
4 | "unicode/utf8"
5 | )
6 |
7 | func FixUtf(r rune) rune {
8 | if r == utf8.RuneError {
9 | return -1
10 | }
11 | return r
12 | }
13 |
--------------------------------------------------------------------------------
/utils/urls.go:
--------------------------------------------------------------------------------
1 | package utils
2 |
3 | import (
4 | "net/url"
5 | "strings"
6 | )
7 |
8 | func ClearUTMParams(intputUrl *url.URL) {
9 | newQuery := url.Values{}
10 | for key, value := range intputUrl.Query() {
11 | if !strings.HasPrefix(key, "utm_") {
12 | newQuery[key] = value
13 | }
14 | }
15 |
16 | intputUrl.RawQuery = newQuery.Encode()
17 | }
18 |
--------------------------------------------------------------------------------