diff --git a/internal/database/database.go b/internal/database/database.go index 58e333e..d2360f6 100644 --- a/internal/database/database.go +++ b/internal/database/database.go @@ -40,6 +40,9 @@ type DB interface { // GetAccount fetch account with matching username. GetAccount(username string) (model.Account, bool) + // GetTags fetch list of tags and its frequency from database. + GetTags() ([]model.Tag, error) + // CreateNewID creates new id for specified table. CreateNewID(table string) (int, error) } diff --git a/internal/database/sqlite.go b/internal/database/sqlite.go index be358f6..8962003 100644 --- a/internal/database/sqlite.go +++ b/internal/database/sqlite.go @@ -444,6 +444,22 @@ func (db *SQLiteDatabase) GetAccount(username string) (model.Account, bool) { return account, account.ID != 0 } +// GetTags fetch list of tags and their frequency. +func (db *SQLiteDatabase) GetTags() ([]model.Tag, error) { + tags := []model.Tag{} + query := `SELECT bt.tag_id id, t.name, COUNT(bt.tag_id) n_bookmarks + FROM bookmark_tag bt + LEFT JOIN tag t ON bt.tag_id = t.id + GROUP BY bt.tag_id ORDER BY t.name` + + err := db.Select(&tags, query) + if err != nil && err != sql.ErrNoRows { + return nil, fmt.Errorf("failed to fetch tags: %v", err) + } + + return tags, nil +} + // CreateNewID creates new ID for specified table func (db *SQLiteDatabase) CreateNewID(table string) (int, error) { var tableID int diff --git a/internal/view/css/custom-dialog.css b/internal/view/css/custom-dialog.css index 42e9f8a..af5f905 100644 --- a/internal/view/css/custom-dialog.css +++ b/internal/view/css/custom-dialog.css @@ -1 +1 @@ -:root{--dialogHeaderBg:#292929;--colorDialogHeader:#FFF}.custom-dialog-overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.custom-dialog-overlay .custom-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;width:100%;max-width:400px;min-height:0;max-height:100%;overflow:auto;background-color:var(--contentBg);font-size:16px}.custom-dialog-overlay .custom-dialog .custom-dialog-header{padding:16px;color:var(--colorDialogHeader);background-color:var(--dialogHeaderBg);font-weight:600;font-size:1em;text-transform:uppercase}.custom-dialog-overlay .custom-dialog .custom-dialog-body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;font-size:1em;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.custom-dialog-overlay .custom-dialog .custom-dialog-body .custom-dialog-content{grid-column:1 / span 2;color:var(--color);align-self:baseline}.custom-dialog-overlay .custom-dialog .custom-dialog-body>input{color:var(--color);padding:8px;font-size:1em;border:1px solid var(--border);min-width:0}.custom-dialog-overlay .custom-dialog .custom-dialog-footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid var(--border)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a{padding:0 8px;font-size:.9em;font-weight:600;color:var(--color);text-transform:uppercase}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a:hover{color:var(--main)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a:focus{outline:none;color:var(--main);border-bottom:1px dashed var(--main)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>i.fa-spinner.fa-spin{width:19px;line-height:19px;text-align:center} \ No newline at end of file +:root{--dialogHeaderBg:#292929;--colorDialogHeader:#FFF}.custom-dialog-overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.custom-dialog-overlay .custom-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;width:100%;max-width:400px;min-height:0;max-height:100%;overflow:auto;background-color:var(--contentBg);font-size:16px}.custom-dialog-overlay .custom-dialog .custom-dialog-header{padding:16px;color:var(--colorDialogHeader);background-color:var(--dialogHeaderBg);font-weight:600;font-size:1em;text-transform:uppercase;border-bottom:1px solid var(--border)}.custom-dialog-overlay .custom-dialog .custom-dialog-body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;font-size:1em;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.custom-dialog-overlay .custom-dialog .custom-dialog-body .custom-dialog-content{grid-column:1 / span 2;color:var(--color);align-self:baseline}.custom-dialog-overlay .custom-dialog .custom-dialog-body>input,.custom-dialog-overlay .custom-dialog .custom-dialog-body>textarea{color:var(--color);padding:8px;font-size:1em;border:1px solid var(--border);background-color:var(--contentBg);min-width:0}.custom-dialog-overlay .custom-dialog .custom-dialog-body>textarea{min-height:37px;resize:vertical}.custom-dialog-overlay .custom-dialog .custom-dialog-body>.suggestion{position:absolute;display:block;padding:8px;background-color:var(--contentBg);border:1px solid var(--border);color:var(--color);font-size:.9em}.custom-dialog-overlay .custom-dialog .custom-dialog-footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid var(--border)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a{padding:0 8px;font-size:.9em;font-weight:600;color:var(--color);text-transform:uppercase}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a:hover{color:var(--main)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>a:focus{outline:none;color:var(--main);border-bottom:1px dashed var(--main)}.custom-dialog-overlay .custom-dialog .custom-dialog-footer>i.fa-spinner.fa-spin{width:19px;line-height:19px;text-align:center} \ No newline at end of file diff --git a/internal/view/css/stylesheet.css b/internal/view/css/stylesheet.css index b9182ef..5298b2c 100644 --- a/internal/view/css/stylesheet.css +++ b/internal/view/css/stylesheet.css @@ -1 +1 @@ -:root{--bg:#EEE;--sidebarBg:#292929;--sidebarHoverBg:#232323;--headerBg:#FFF;--contentBg:#FFF;--border:#E5E5E5;--color:#232323;--colorLink:#999;--colorSidebar:#FFF;--main:#F44336;--errorColor:#F44336}.night{--bg:#1F1F1F;--headerBg:#292929;--contentBg:#292929;--border:#191919;--color:#FFF}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none}a{cursor:pointer}.spacer{-webkit-box-flex:1;flex:1}body{overflow:hidden}.login{height:100vh;padding:16px;overflow:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;background-color:var(--bg)}.login>.error-message{width:100%;max-width:400px;font-size:.9em;background-color:var(--contentBg);border:1px solid var(--border);padding:16px;margin-top:auto;margin-bottom:16px;text-align:center;color:var(--errorColor)}.login #login-box{width:100%;max-width:400px;margin-bottom:auto;background-color:var(--contentBg);display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;border:1px solid var(--border);flex-shrink:0}.login #login-box:first-child{margin-top:auto}.login #login-box #logo-area{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;padding:16px;background-color:var(--main);border-bottom:1px solid var(--border);flex-shrink:0}.login #login-box #logo-area #logo{font-size:3em;font-weight:100;color:var(--contentBg)}.login #login-box #logo-area #logo span{margin-right:8px}.login #login-box #logo-area #tagline{font-weight:500;margin-top:4px;color:var(--contentBg);text-align:center}.login #login-box #input-area{padding:16px;display:grid;grid-gap:16px;grid-template-columns:auto 1fr;-webkit-box-pack:baseline;justify-content:baseline;-webkit-box-align:center;align-items:center;border-bottom:1px solid var(--border)}.login #login-box #input-area>label{color:var(--color);font-size:.9em}.login #login-box #input-area>input{color:var(--color);padding:8px;background-color:var(--contentBg);border:1px solid var(--border);font-size:.9em;min-width:0}.login #login-box #input-area .checkbox-field{grid-column:1 / span 2;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:.9em;cursor:pointer}.login #login-box #input-area .checkbox-field>input[type="checkbox"]{margin-right:8px}.login #login-box #button-area{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;-webkit-box-pack:center;justify-content:center}.login #login-box #button-area a{color:var(--color);text-transform:uppercase;text-align:center;font-size:.9em;font-weight:600;cursor:default}.login #login-box #button-area a.button{cursor:pointer}.login #login-box #button-area a.button:hover,.login #login-box #button-area a.button:focus{color:var(--main)}.home{display:grid;grid-template-rows:minmax(0, 1fr);grid-template-columns:60px minmax(0, 1fr);background-color:var(--bg);width:100vw;height:100vh}.home .home-sidebar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;background-color:var(--sidebarBg)}.home .home-sidebar a{flex-shrink:0;display:block;width:60px;line-height:60px;text-align:center;font-size:1em;color:var(--colorSidebar)}.home .home-sidebar a.active{cursor:default}.home .home-sidebar a:hover,.home .home-sidebar a:focus{color:var(--main);background-color:var(--sidebarHoverBg)}.home .home-sidebar a.active{color:var(--contentBg);background-color:var(--main)}.home h1.page-header{display:block;color:var(--color);background-color:var(--headerBg);border-bottom:1px solid var(--border);line-height:60px;font-size:1.3em;font-weight:600;padding:0 16px}.home div.page-header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-align:center;align-items:center;background-color:var(--headerBg);border-bottom:1px solid var(--border);padding:0 16px}.home div.page-header p{-webkit-box-flex:1;flex:1 0;font-size:1.3em;font-weight:600;line-height:60px;color:var(--color)}.home div.page-header input[type="text"]{-webkit-box-flex:1;flex:1 0;min-width:0;margin-right:8px;font-size:1.1em;font-weight:500;line-height:60px;color:var(--color);background-color:var(--contentBg)}.home div.page-header input[type="text"]::-webkit-input-placeholder{color:var(--colorLink)}.home div.page-header input[type="text"]::placeholder{color:var(--colorLink)}.home div.page-header a{display:block;width:24px;line-height:24px;color:var(--colorLink);text-align:center}.home div.page-header a:not(:last-child){margin-right:8px}.home div.page-header a:hover{color:var(--main)}.home .loading-overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6)}.home .loading-overlay i{color:var(--colorSidebar);font-size:4em;text-align:center;width:80px;line-height:80px;position:absolute}@media (max-width:600px){.home{grid-template-rows:minmax(0, 1fr);grid-template-columns:minmax(0, 1fr)}.home .home-sidebar{display:none;overflow-x:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-pack:center;justify-content:center}.home .home-sidebar .spacer{display:none}.home h1.page-header{text-align:center;font-size:1em;line-height:1.2em;padding:8px}.home div.page-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap}.home div.page-header p{-webkit-box-flex:1;flex:auto;text-align:center;font-size:1em;line-height:3em;width:100%;padding:0}.home div.page-header input[type="text"]{-webkit-box-flex:1;flex:1 0;font-size:1em;font-weight:500;line-height:3em;color:var(--color)}.home div.page-header input[type="text"]::-webkit-input-placeholder{color:var(--colorLink)}.home div.page-header input[type="text"]::placeholder{color:var(--colorLink)}.home div.page-header a{display:block;width:24px;line-height:100%}}#page-home{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0, 1fr)}#page-home #bookmarks-grid{display:grid;grid-template-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));grid-gap:16px;padding:16px;overflow:auto}#page-home #bookmarks-grid::after{content:"";display:block;min-height:1px;grid-column-end:-1;grid-column-start:1}#page-home #bookmarks-grid .bookmark{align-self:start}#page-home #bookmarks-grid .pagination-box{grid-column-end:-1;grid-column-start:1;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;align-self:start}#page-home #bookmarks-grid .pagination-box a{padding:8px;color:var(--colorLink)}#page-home #bookmarks-grid .pagination-box a:hover,#page-home #bookmarks-grid .pagination-box a:focus{color:var(--main)}#page-home #bookmarks-grid .pagination-box input{width:40px;padding:8px;text-align:center;font-size:.9em;color:var(--color);border:1px solid var(--border);background-color:var(--contentBg);margin:0 8px}#page-home #bookmarks-grid .pagination-box p{font-size:.9em;color:var(--colorLink);line-height:37px;font-weight:600}#page-home #bookmarks-grid .pagination-box p:last-of-type::before{content:"/";margin-right:8px}#page-home #bookmarks-grid.list{grid-gap:0;grid-template-columns:minmax(0, 1000px)}#page-home #bookmarks-grid.list .pagination-box{padding:16px 0}@media (max-width:600px){#page-home #bookmarks-grid.list{padding:0}#page-home #bookmarks-grid.list .pagination-box{padding:16px}} \ No newline at end of file +:root{--bg:#EEE;--sidebarBg:#292929;--sidebarHoverBg:#232323;--headerBg:#FFF;--contentBg:#FFF;--border:#E5E5E5;--color:#232323;--colorLink:#999;--colorSidebar:#FFF;--main:#F44336;--errorColor:#F44336}.night{--bg:#1F1F1F;--headerBg:#292929;--contentBg:#292929;--border:#191919;--color:#FFF}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none}a{cursor:pointer}.spacer{-webkit-box-flex:1;flex:1}body{overflow:hidden}.login{height:100vh;padding:16px;overflow:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;background-color:var(--bg)}.login>.error-message{width:100%;max-width:400px;font-size:.9em;background-color:var(--contentBg);border:1px solid var(--border);padding:16px;margin-top:auto;margin-bottom:16px;text-align:center;color:var(--errorColor)}.login #login-box{width:100%;max-width:400px;margin-bottom:auto;background-color:var(--contentBg);display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;border:1px solid var(--border);flex-shrink:0}.login #login-box:first-child{margin-top:auto}.login #login-box #logo-area{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;padding:16px;background-color:var(--main);border-bottom:1px solid var(--border);flex-shrink:0}.login #login-box #logo-area #logo{font-size:3em;font-weight:100;color:var(--contentBg)}.login #login-box #logo-area #logo span{margin-right:8px}.login #login-box #logo-area #tagline{font-weight:500;margin-top:4px;color:var(--contentBg);text-align:center}.login #login-box #input-area{padding:16px;display:grid;grid-gap:16px;grid-template-columns:auto 1fr;-webkit-box-pack:baseline;justify-content:baseline;-webkit-box-align:center;align-items:center;border-bottom:1px solid var(--border)}.login #login-box #input-area>label{color:var(--color);font-size:.9em}.login #login-box #input-area>input{color:var(--color);padding:8px;background-color:var(--contentBg);border:1px solid var(--border);font-size:.9em;min-width:0}.login #login-box #input-area .checkbox-field{grid-column:1 / span 2;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:.9em;cursor:pointer}.login #login-box #input-area .checkbox-field>input[type="checkbox"]{margin-right:8px}.login #login-box #button-area{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;-webkit-box-pack:center;justify-content:center}.login #login-box #button-area a{color:var(--color);text-transform:uppercase;text-align:center;font-size:.9em;font-weight:600;cursor:default}.login #login-box #button-area a.button{cursor:pointer}.login #login-box #button-area a.button:hover,.login #login-box #button-area a.button:focus{color:var(--main)}.home{display:grid;grid-template-rows:minmax(0, 1fr);grid-template-columns:60px minmax(0, 1fr);background-color:var(--bg);width:100vw;height:100vh}.home .home-sidebar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;background-color:var(--sidebarBg)}.home .home-sidebar a{flex-shrink:0;display:block;width:60px;line-height:60px;text-align:center;font-size:1em;color:var(--colorSidebar)}.home .home-sidebar a.active{cursor:default}.home .home-sidebar a:hover,.home .home-sidebar a:focus{color:var(--main);background-color:var(--sidebarHoverBg)}.home .home-sidebar a.active{color:var(--colorSidebar);background-color:var(--main)}.home h1.page-header{display:block;color:var(--color);background-color:var(--headerBg);border-bottom:1px solid var(--border);line-height:60px;font-size:1.3em;font-weight:600;padding:0 16px}.home div.page-header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-align:center;align-items:center;background-color:var(--headerBg);border-bottom:1px solid var(--border);padding:0 16px}.home div.page-header p{-webkit-box-flex:1;flex:1 0;font-size:1.3em;font-weight:600;line-height:60px;color:var(--color)}.home div.page-header input[type="text"]{-webkit-box-flex:1;flex:1 0;min-width:0;margin-right:8px;font-size:1.1em;font-weight:500;line-height:60px;color:var(--color);background-color:var(--contentBg)}.home div.page-header input[type="text"]::-webkit-input-placeholder{color:var(--colorLink)}.home div.page-header input[type="text"]::placeholder{color:var(--colorLink)}.home div.page-header a{display:block;width:24px;line-height:24px;color:var(--colorLink);text-align:center}.home div.page-header a:not(:last-child){margin-right:8px}.home div.page-header a:hover{color:var(--main)}.home .loading-overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6)}.home .loading-overlay i{color:var(--colorSidebar);font-size:4em;text-align:center;width:80px;line-height:80px;position:absolute}@media (max-width:600px){.home{grid-template-rows:minmax(0, 1fr);grid-template-columns:minmax(0, 1fr)}.home .home-sidebar{display:none;overflow-x:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-pack:center;justify-content:center}.home .home-sidebar .spacer{display:none}.home h1.page-header{text-align:center;font-size:1em;line-height:1.2em;padding:8px}.home div.page-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap}.home div.page-header p{-webkit-box-flex:1;flex:auto;text-align:center;font-size:1em;line-height:3em;width:100%;padding:0}.home div.page-header input[type="text"]{-webkit-box-flex:1;flex:1 0;font-size:1em;font-weight:500;line-height:3em;color:var(--color)}.home div.page-header input[type="text"]::-webkit-input-placeholder{color:var(--colorLink)}.home div.page-header input[type="text"]::placeholder{color:var(--colorLink)}.home div.page-header a{display:block;width:24px;line-height:100%}}#page-home{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0, 1fr)}#page-home #bookmarks-grid{display:grid;grid-template-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));grid-gap:16px;padding:16px;overflow:auto}#page-home #bookmarks-grid::after{content:"";display:block;min-height:1px;grid-column-end:-1;grid-column-start:1}#page-home #bookmarks-grid .bookmark{align-self:start}#page-home #bookmarks-grid .pagination-box{grid-column-end:-1;grid-column-start:1;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;align-self:start}#page-home #bookmarks-grid .pagination-box a{padding:8px;color:var(--colorLink)}#page-home #bookmarks-grid .pagination-box a:hover,#page-home #bookmarks-grid .pagination-box a:focus{color:var(--main)}#page-home #bookmarks-grid .pagination-box input{width:40px;padding:8px;text-align:center;font-size:.9em;color:var(--color);border:1px solid var(--border);background-color:var(--contentBg);margin:0 8px}#page-home #bookmarks-grid .pagination-box p{font-size:.9em;color:var(--colorLink);line-height:37px;font-weight:600}#page-home #bookmarks-grid .pagination-box p:last-of-type::before{content:"/";margin-right:8px}#page-home #bookmarks-grid.list{grid-gap:0;grid-template-columns:minmax(0, 1000px)}#page-home #bookmarks-grid.list .pagination-box{padding:16px 0}@media (max-width:600px){#page-home #bookmarks-grid.list{padding:0}#page-home #bookmarks-grid.list .pagination-box{padding:16px}} \ No newline at end of file diff --git a/internal/view/js/component/dialog.js b/internal/view/js/component/dialog.js index b3664c6..e4623d4 100644 --- a/internal/view/js/component/dialog.js +++ b/internal/view/js/component/dialog.js @@ -3,18 +3,34 @@ var template = `

{{title}}

-

{{content}}

- + +

{{content}}

+ +
@@ -90,6 +106,9 @@ export default { label: field, value: '', type: 'text', + dictionary: [], + separator: ' ', + suggestion: undefined } if (typeof field === 'object') return { @@ -97,6 +116,9 @@ export default { label: field.label || '', value: field.value || '', type: field.type || 'text', + dictionary: field.dictionary instanceof Array ? field.dictionary : [], + separator: field.separator || ' ', + suggestion: undefined } }); } @@ -129,6 +151,57 @@ export default { handleSecondClick() { this.secondClick(); }, + handleInput(index) { + // Create initial variable + var field = this.formFields[index], + dictionary = field.dictionary; + + // Make sure dictionary is not empty + if (dictionary.length === 0) return; + + // Fetch suggestion from dictionary + var words = field.value.split(field.separator), + lastWord = words[words.length - 1].toLowerCase(), + suggestion; + + if (lastWord !== '') { + suggestion = dictionary.find(word => { + return word.toLowerCase().startsWith(lastWord) + }); + } + + this.formFields[index].suggestion = suggestion; + + // Make sure suggestion exist + if (suggestion == null) return; + + // Display suggestion + this.$nextTick(() => { + var input = this.$refs.input[index], + span = this.$refs['suggestion-' + index][0], + inputRect = input.getBoundingClientRect(); + + span.style.top = (inputRect.bottom - 1) + 'px'; + span.style.left = inputRect.left + 'px'; + }); + }, + handleInputEnter(index) { + var suggestion = this.formFields[index].suggestion; + + if (suggestion == null) { + this.handleMainClick(); + return; + } + + var separator = this.formFields[index].separator, + words = this.formFields[index].value.split(separator); + + words.pop(); + words.push(suggestion); + + this.formFields[index].value = words.join(separator) + separator; + this.formFields[index].suggestion = undefined; + }, focus() { this.$nextTick(() => { if (!this.visible) return; diff --git a/internal/view/js/page/home.js b/internal/view/js/page/home.js index d6c1ee1..d6e7eaf 100644 --- a/internal/view/js/page/home.js +++ b/internal/view/js/page/home.js @@ -5,7 +5,7 @@ var template = ` - + @@ -72,7 +72,8 @@ export default { search: "", page: 0, maxPage: 0, - bookmarks: [] + bookmarks: [], + tags: [], } }, computed: { @@ -85,13 +86,14 @@ export default { if (this.loading) return; this.page = 1; this.search = ""; - this.loadBookmarks(); + this.loadData(true, true); }, - loadBookmarks(saveState) { + loadData(saveState, fetchTags) { if (this.loading) return; - // By default, we eill save the state + // Set default args saveState = (typeof saveState === "boolean") ? saveState : true; + fetchTags = (typeof fetchTags === "boolean") ? fetchTags : false; // Parse search query var rxTagA = /['"]#([^'"]+)['"]/g, // "#tag with space" @@ -125,8 +127,9 @@ export default { }); // Fetch data from API - this.loading = true; + var skipFetchTags = Error("skip fetching tags"); + this.loading = true; fetch(url) .then(response => { if (!response.ok) throw response; @@ -137,7 +140,6 @@ export default { this.page = json.page; this.maxPage = json.maxPage; this.bookmarks = json.bookmarks; - this.loading = false; // Save state and change URL if needed if (saveState) { @@ -158,17 +160,36 @@ export default { window.history.pushState(history, "page-home", url); } + + // Fetch tags if requested + if (fetchTags) { + return fetch("/api/tags"); + } else { + this.loading = false; + throw skipFetchTags; + } + }) + .then(response => { + if (!response.ok) throw response; + return response.json(); + }) + .then(json => { + this.tags = json; + this.loading = false; }) .catch(err => { this.loading = false; - err.text().then(msg => { - this.showErrorDialog(`${msg} (${err.status})`); - }) + + if (err !== skipFetchTags) { + err.text().then(msg => { + this.showErrorDialog(`${msg} (${err.status})`); + }) + } }); }, searchBookmarks() { this.page = 1; - this.loadBookmarks(); + this.loadData(); }, changePage(page) { page = parseInt(page, 10) || 0; @@ -177,7 +198,7 @@ export default { else this.page = page; this.$refs.bookmarksGrid.scrollTop = 0; - this.loadBookmarks(); + this.loadData(); }, filterTag(tagName) { var rxSpace = /\s+/g, @@ -185,9 +206,84 @@ export default { if (!this.search.includes(newTag)) { this.search += ` ${newTag}`; - this.loadBookmarks(); + this.loadData(); } - } + }, + showDialogAdd() { + this.showDialog({ + title: 'New Bookmark', + content: 'Create a new bookmark', + fields: [{ + name: 'url', + label: 'Url, start with http://...', + }, { + name: 'title', + label: 'Custom title (optional)' + }, { + name: 'excerpt', + label: 'Custom excerpt (optional)', + type: 'area' + }, { + name: 'tags', + label: 'Comma separated tags (optional)', + separator: ',', + dictionary: this.tags.map(tag => tag.name) + }], + mainText: 'OK', + secondText: 'Cancel', + mainClick: (data) => { + // Make sure URL is not empty + if (data.url.trim() === "") { + this.showErrorDialog("URL must not empty"); + return; + } + + // Prepare tags + var tags = data.tags + .toLowerCase() + .replace(/\s+/g, ' ') + .split(/\s*,\s*/g) + .filter(tag => tag !== '') + .map(tag => { + return { + name: tag + }; + }); + + // Send data + var data = { + url: data.url.trim(), + title: data.title.trim(), + excerpt: data.excerpt.trim(), + tags: tags + }; + + this.dialog.loading = true; + fetch("/api/bookmarks", { + method: "post", + body: JSON.stringify(data), + headers: { + "Content-Type": "application/json", + }, + }) + .then(response => { + if (!response.ok) throw response; + return response.json(); + }) + .then(json => { + this.dialog.loading = false; + this.dialog.visible = false; + this.bookmarks.splice(0, 0, json); + }) + .catch(err => { + this.dialog.loading = false; + err.text().then(msg => { + this.showErrorDialog(`${msg} (${err.status})`); + }) + }); + } + }); + }, }, mounted() { var stateWatcher = (e) => { @@ -200,7 +296,7 @@ export default { this.page = page; this.search = search; - this.loadBookmarks(false); + this.loadData(false); } window.addEventListener('popstate', stateWatcher); @@ -208,6 +304,6 @@ export default { window.removeEventListener('popstate', stateWatcher); }) - this.loadBookmarks(false); + this.loadData(false, true); } } \ No newline at end of file diff --git a/internal/view/less/custom-dialog.less b/internal/view/less/custom-dialog.less index e962474..62876ac 100644 --- a/internal/view/less/custom-dialog.less +++ b/internal/view/less/custom-dialog.less @@ -38,6 +38,7 @@ font-weight: 600; font-size: 1em; text-transform: uppercase; + border-bottom: 1px solid var(--border); } .custom-dialog-body { @@ -58,13 +59,30 @@ align-self: baseline; } - >input { + >input, + >textarea { color: var(--color); padding: 8px; font-size: 1em; border: 1px solid var(--border); + background-color: var(--contentBg); min-width: 0; } + + >textarea { + min-height: 37px; + resize: vertical; + } + + >.suggestion { + position: absolute; + display: block; + padding: 8px; + background-color: var(--contentBg); + border: 1px solid var(--border); + color: var(--color); + font-size: 0.9em; + } } .custom-dialog-footer { diff --git a/internal/view/less/stylesheet.less b/internal/view/less/stylesheet.less index b79c049..a372d5f 100644 --- a/internal/view/less/stylesheet.less +++ b/internal/view/less/stylesheet.less @@ -202,7 +202,7 @@ body { } &.active { - color: var(--contentBg); + color: var(--colorSidebar); background-color: var(--main); } } diff --git a/internal/webserver/handler-api.go b/internal/webserver/handler-api.go index fa3c579..787009e 100644 --- a/internal/webserver/handler-api.go +++ b/internal/webserver/handler-api.go @@ -5,12 +5,14 @@ import ( "fmt" "math" "net/http" + nurl "net/url" "path" fp "path/filepath" "strconv" "strings" "time" + "github.com/go-shiori/go-readability" "github.com/go-shiori/shiori/internal/database" "github.com/go-shiori/shiori/internal/model" "github.com/gofrs/uuid" @@ -167,3 +169,111 @@ func (h *handler) apiGetBookmarks(w http.ResponseWriter, r *http.Request, ps htt err = json.NewEncoder(w).Encode(&resp) checkError(err) } + +// apiGetTags is handler for GET /api/tags +func (h *handler) apiGetTags(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { + // Make sure session still valid + err := h.validateSession(r) + checkError(err) + + // Fetch all tags + tags, err := h.DB.GetTags() + checkError(err) + + w.Header().Set("Content-Type", "application/json") + err = json.NewEncoder(w).Encode(&tags) + checkError(err) +} + +// apiInsertBookmark is handler for POST /api/bookmark +func (h *handler) apiInsertBookmark(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { + // Make sure session still valid + err := h.validateSession(r) + checkError(err) + + // Decode request + book := model.Bookmark{} + err = json.NewDecoder(r.Body).Decode(&book) + checkError(err) + + // Clean up URL by removing its fragment and UTM parameters + tmp, err := nurl.Parse(book.URL) + if err != nil || tmp.Scheme == "" || tmp.Hostname() == "" { + panic(fmt.Errorf("URL is not valid")) + } + + tmp.Fragment = "" + clearUTMParams(tmp) + book.URL = tmp.String() + + // Create bookmark ID + book.ID, err = h.DB.CreateNewID("bookmark") + if err != nil { + panic(fmt.Errorf("failed to create ID: %v", err)) + } + + // Fetch data from internet + var imageURLs []string + func() { + resp, err := httpClient.Get(book.URL) + if err != nil { + return + } + defer resp.Body.Close() + + article, err := readability.FromReader(resp.Body, book.URL) + if err != nil { + return + } + + book.Author = article.Byline + book.Content = article.TextContent + book.HTML = article.Content + + // If title and excerpt doesnt have submitted value, use from article + if book.Title == "" { + book.Title = article.Title + } + + if book.Excerpt == "" { + book.Excerpt = article.Excerpt + } + + // Get image URL + if article.Image != "" { + imageURLs = append(imageURLs, article.Image) + } + + if article.Favicon != "" { + imageURLs = append(imageURLs, article.Favicon) + } + }() + + // Make sure title is not empty + if book.Title == "" { + book.Title = book.URL + } + + // Save bookmark to database + results, err := h.DB.SaveBookmarks(book) + if err != nil || len(results) == 0 { + panic(fmt.Errorf("failed to save bookmark: %v", err)) + } + book = results[0] + + // Save article image to local disk + imgPath := fp.Join(h.DataDir, "thumb", fmt.Sprintf("%d", book.ID)) + for _, imageURL := range imageURLs { + err = downloadBookImage(imageURL, imgPath, time.Minute) + if err == nil { + strID := strconv.Itoa(book.ID) + book.ImageURL = path.Join("/", "thumb", strID) + break + } + } + + // Return the new bookmark + w.Header().Set("Content-Type", "application/json") + err = json.NewEncoder(w).Encode(&book) + checkError(err) +} diff --git a/internal/webserver/server.go b/internal/webserver/server.go index 156ac99..ee4376f 100644 --- a/internal/webserver/server.go +++ b/internal/webserver/server.go @@ -11,6 +11,8 @@ import ( "github.com/sirupsen/logrus" ) +var httpClient = &http.Client{Timeout: time.Minute} + // ServeApp serves wb interface in specified port func ServeApp(DB database.DB, dataDir string, port int) error { // Create handler @@ -36,8 +38,8 @@ func ServeApp(DB database.DB, dataDir string, port int) error { router.POST("/api/login", hdl.apiLogin) router.POST("/api/logout", hdl.apiLogout) router.GET("/api/bookmarks", hdl.apiGetBookmarks) - // router.GET("/api/tags", hdl.apiGetTags) - // router.POST("/api/bookmarks", hdl.apiInsertBookmark) + router.GET("/api/tags", hdl.apiGetTags) + router.POST("/api/bookmarks", hdl.apiInsertBookmark) // router.PUT("/api/cache", hdl.apiUpdateCache) // router.PUT("/api/bookmarks", hdl.apiUpdateBookmark) // router.PUT("/api/bookmarks/tags", hdl.apiUpdateBookmarkTags) diff --git a/internal/webserver/utils.go b/internal/webserver/utils.go index 76d46a3..1e5a826 100644 --- a/internal/webserver/utils.go +++ b/internal/webserver/utils.go @@ -2,11 +2,21 @@ package webserver import ( "fmt" + "image" + "image/color" + "image/draw" + "image/jpeg" "io" + "math" "mime" "net/http" + nurl "net/url" "os" fp "path/filepath" + "strings" + "time" + + "github.com/disintegration/imaging" ) func serveFile(w http.ResponseWriter, filePath string, cache bool) error { @@ -63,6 +73,95 @@ func fileExists(filePath string) bool { return !os.IsNotExist(err) && !info.IsDir() } +func clearUTMParams(url *nurl.URL) { + queries := url.Query() + + for key := range queries { + if strings.HasPrefix(key, "utm_") { + queries.Del(key) + } + } + + url.RawQuery = queries.Encode() +} + +func downloadBookImage(url, dstPath string, timeout time.Duration) error { + // Fetch data from URL + client := &http.Client{Timeout: timeout} + resp, err := client.Get(url) + if err != nil { + return err + } + defer resp.Body.Close() + + // Make sure it's JPG or PNG image + cp := resp.Header.Get("Content-Type") + if !strings.Contains(cp, "image/jpeg") && !strings.Contains(cp, "image/png") { + return fmt.Errorf("%s is not a supported image", url) + } + + // At this point, the download has finished successfully. + // Prepare destination file. + err = os.MkdirAll(fp.Dir(dstPath), os.ModePerm) + if err != nil { + return fmt.Errorf("failed to create image dir: %v", err) + } + + dstFile, err := os.Create(dstPath) + if err != nil { + return fmt.Errorf("failed to create image file: %v", err) + } + defer dstFile.Close() + + // Parse image and process it. + // If image is smaller than 600x400 or its ratio is less than 4:3, resize. + // Else, save it as it is. + img, _, err := image.Decode(resp.Body) + if err != nil { + return fmt.Errorf("failed to parse image %s: %v", url, err) + } + + imgRect := img.Bounds() + imgWidth := imgRect.Dx() + imgHeight := imgRect.Dy() + imgRatio := float64(imgWidth) / float64(imgHeight) + + if imgWidth >= 600 && imgHeight >= 400 && imgRatio > 1.3 { + err = jpeg.Encode(dstFile, img, nil) + } else { + // Create background + bg := image.NewNRGBA(imgRect) + draw.Draw(bg, imgRect, image.NewUniform(color.White), image.Point{}, draw.Src) + draw.Draw(bg, imgRect, img, image.Point{}, draw.Over) + + bg = imaging.Fill(bg, 600, 400, imaging.Center, imaging.Lanczos) + bg = imaging.Blur(bg, 150) + bg = imaging.AdjustBrightness(bg, 30) + + // Create foreground + fg := imaging.Fit(img, 600, 400, imaging.Lanczos) + + // Merge foreground and background + bgRect := bg.Bounds() + fgRect := fg.Bounds() + fgPosition := image.Point{ + X: bgRect.Min.X - int(math.Round(float64(bgRect.Dx()-fgRect.Dx())/2)), + Y: bgRect.Min.Y - int(math.Round(float64(bgRect.Dy()-fgRect.Dy())/2)), + } + + draw.Draw(bg, bgRect, fg, fgPosition, draw.Over) + + // Save to file + err = jpeg.Encode(dstFile, bg, nil) + } + + if err != nil { + return fmt.Errorf("failed to save image %s: %v", url, err) + } + + return nil +} + func checkError(err error) { if err != nil { panic(err)