Skip to content

Commit

Permalink
update notionpage to v0.0.12 [#8]
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gk0Wk
Gk0Wk committed Oct 13, 2023
1 parent 9b1be19 commit edc5382
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 129 deletions.
115 changes: 87 additions & 28 deletions src/notionpage-covericon/body.tid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,67 @@ title: $:/plugins/Gk0Wk/notionpage-covericon/body
tags: $:/tags/ViewTemplate
list-before: $:/core/ui/ViewTemplate/title

<$list filter="[all[current]!is[system]]">
\define contentbase64() [<currentTiddler>is[binary]] :then[<currentTiddler>get[text]] :else[<currentTiddler>get[text]encodeuricomponent[]]
\define imagetobase64() [[data:]] [{!!type}] [<currentTiddler>is[binary]then[;base64,]else[,]] [subfilter<contentbase64>] :and[join[]]
\define coverbox-db(cover,tiddler:"",default:"",class-outer:"",class-blur-bg:"",class-front-bg:"",style-outer:"",style-blur-bg:"",style-front-bg:"")
\whitespace trim
<$let currentTiddler={{{ [<__cover__>!is[blank]then<__cover__>else<__default__>] }}}>
<$let imguri={{{ [<currentTiddler>is[image]!has[_canonical_uri]] :then[subfilter<imagetobase64>] :else[<currentTiddler>get[_canonical_uri]else<currentTiddler>] }}}>
<div class="$class-outer$" style="display:flex;position:relative;overflow:hidden;align-items:center;justify-content:center;$style-outer$" >
<$let
img-bg={{{ [[background-image:url(]] [<imguri>] [[);]] +[join[]] }}}
cover-bg-blur={{{ [[filter:blur(]] [<__tiddler__>get[page-cover#bg-blur]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur}] [[);]] +[join[]] }}}
cover-size={{{ [[background-size:]] [<__tiddler__>get[page-cover#size]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size}else[cover]] [[;]] +[join[]] }}}
cover-position={{{ [[background-position:]] [<__tiddler__>get[page-cover#position]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position}else[cover]] [[;]] +[join[]] }}}
cover-repeat={{{ [[background-repeat:]] [<__tiddler__>get[page-cover#repeat]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat}else[no-repeat]] [[;]] +[join[]] }}}
>
<div class="$class-blur-bg$" style={{{ [<img-bg>] [[background-size:cover;background-position:center;position:absolute;top:-10px;left:-10px;height:calc(100% + 20px);width:calc(100% + 20px);]] [<cover-bg-blur>] [<__style-blur-bg__>] +[join[]] }}} />
<div class="$class-front-bg$" style={{{ [<img-bg>] [<cover-size>] [<cover-position>] [<cover-repeat>] [[position:relative;height:100%;width:100%;]] [<__style-front-bg__>] +[join[]] }}} />
</$let>
</div>
</$let>
</$let>
\end
\define cover-setting()
<$reveal type="popup" state=<<stateTiddler2>> position="belowleft" tag="div" class="tc-popup-keep">
<$let
state=<<qualify "$:/temp/Gk0Wk/notionpage-covericon/cover-setting">>
cover-bg-blur={{{ [<tiddler>get[page-cover#bg-blur]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur}] }}}
cover-size={{{ [<tiddler>get[page-cover#size]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size}else[cover]] }}}
cover-position={{{ [<tiddler>get[page-cover#position]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position}else[cover]] }}}
cover-repeat={{{ [<tiddler>get[page-cover#repeat]else{$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat}else[no-repeat]] }}}
>
<div class="gk0wk-notionpageb-changecover-box">
<div>
<span style="user-select:none;opacity:0.8;font-weight:800;">URI:&nbsp;</span>
<$edit-text tiddler=<<state>> field="page-cover" default={{{ [<tiddler>get[page-cover]] }}} placeholder="" focus="true"/>
<$button setTitle=<<tiddler>> setField="page-cover" setTo={{{ [<state>get[page-cover]!is[blank]else<cover-bg-blur>] }}}>Set</$button>
</div>
<div>
<span style="user-select:none;opacity:0.8;font-weight:800;">Blur:&nbsp;</span>
<$edit-text tiddler=<<state>> field="page-cover#bg-blur" default=<<cover-bg-blur>> placeholder="" focus="true"/>
<$button setTitle=<<tiddler>> setField="page-cover#bg-blur" setTo={{{ [<state>get[page-cover#bg-blur]!is[blank]else<cover-bg-blur>] }}}>Set</$button>
</div>
<div>
<span style="user-select:none;opacity:0.8;font-weight:800;">Size:&nbsp;</span>
<$edit-text tiddler=<<state>> field="page-cover#size" default=<<cover-size>> placeholder="" focus="true"/>
<$button setTitle=<<tiddler>> setField="page-cover#size" setTo={{{ [<state>get[page-cover#size]!is[blank]else<cover-size>] }}}>Set</$button>
</div>
<div>
<span style="user-select:none;opacity:0.8;font-weight:800;">Position:&nbsp;</span>
<$edit-text tiddler=<<state>> field="page-cover#position" default=<<cover-position>> placeholder="" focus="true"/>
<$button setTitle=<<tiddler>> setField="page-cover#position" setTo={{{ [<state>get[page-cover#position]!is[blank]else<cover-position>] }}}>Set</$button>
</div>
<div>
<span style="user-select:none;opacity:0.8;font-weight:800;">Repeat:&nbsp;</span>
<$edit-text tiddler=<<state>> field="page-cover#repeat" default=<<cover-repeat>> placeholder="" focus="true"/>
<$button setTitle=<<tiddler>> setField="page-cover#repeat" setTo={{{ [<state>get[page-cover#position]!is[blank]else<cover-repeat>] }}}>Set</$button>
</div>
</div>
</$let>
</$reveal>
\end

<$set name="tiddler" value=<<currentTiddler>>>
<$list filter="[<currentTiddler>addprefix[$:/temp/Gk0Wk/notionpage-covericon/Selector/]]" variable="stateTiddler1">
<$list filter="[<currentTiddler>addprefix[$:/temp/Gk0Wk/notionpage-covericon/ChangeCover/]]" variable="stateTiddler2">
Expand All @@ -21,15 +81,16 @@ list-before: $:/core/ui/ViewTemplate/title
<$list filter="[<cover>!match[]]">
<!-- !icon && cover -->
<div class="gk0wk-notionpagebg gk0wk-notionpagebg-c">
<div class="gk0wk-notionpagebg-image"><$image source=<<cover>> width="100%" height="auto"/></div>
<$macrocall
$name="coverbox-db"
cover=<<cover>>
tiddler=<<tiddler>>
class-outer="gk0wk-notionpagebg-imagebox"
class-blur-bg="gk0wk-notionpagebg-image-blur"
class-front-bg="gk0wk-notionpagebg-image-front"
/>
<$button popup=<<stateTiddler2>> class="gk0wk-notionpageb-changecover" tooltip="Change Cover">Change Cover</$button>
<$reveal type="popup" state=<<stateTiddler2>> position="belowleft" tag="div" class="tc-popup-keep">
<div class="gk0wk-notionpageb-changecover-box">
<div>
<$edit-text tiddler=<<tiddler>> field="page-cover" default="" placeholder="Tiddler or URL" focus="true"/>
</div>
</div>
</$reveal>
<<cover-setting>>
<div class="gk0wk-notionbg-addbuttons">
<$button setTitle=<<tiddler>> setField="icon" setTo={{$:/plugins/Gk0Wk/notionpage-covericon/default-icon}} tooltip="Add Icon">😁 Add Icon</$button>
</div>
Expand All @@ -40,11 +101,10 @@ list-before: $:/core/ui/ViewTemplate/title
<$list filter="[<cover>match[]]">
<!-- icon && !cover -->
<div class="gk0wk-notionpagebg gk0wk-notionpagebg-i">
<$button popup=<<stateTiddler1>> class="gk0wk-notionpagebg-icon1">
<$list filter="[title<icon>is[shadow]!is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[tiddler]!is[shadow]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>!is[shadow]!is[tiddler]]"><$wikify name="rendered" text=<<icon>> output=html><<rendered>></$wikify></$list>
</$button>
<$button popup=<<stateTiddler1>> class="gk0wk-notionpagebg-icon1"><$list filter="[title<icon>is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[shadow]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>!is[shadow]!is[tiddler]]"><$wikify name="rendered" text=<<icon>> output=html><<rendered>></$wikify></$list></$button>
<$reveal type="popup" state=<<stateTiddler1>> position="below" tag="div" class="tc-popup-keep">
{{$:/plugins/Gk0Wk/notionpage-covericon/icon-selector}}
</$reveal>
Expand All @@ -56,23 +116,23 @@ list-before: $:/core/ui/ViewTemplate/title
<$list filter="[<cover>!match[]]">
<!-- icon && cover -->
<div class="gk0wk-notionpagebg gk0wk-notionpagebg-ci">
<div class="gk0wk-notionpagebg-image"><$image source=<<cover>> width="100%" height="auto"/></div>
<$button popup=<<stateTiddler1>> class="gk0wk-notionpagebg-icon2">
<$list filter="[title<icon>is[shadow]!is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[tiddler]!is[shadow]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>!is[shadow]!is[tiddler]]"><$wikify name="rendered" text=<<icon>> output=html><<rendered>></$wikify></$list>
</$button>
<$macrocall
$name="coverbox-db"
cover=<<cover>>
tiddler=<<tiddler>>
class-outer="gk0wk-notionpagebg-imagebox"
class-blur-bg="gk0wk-notionpagebg-image-blur"
class-front-bg="gk0wk-notionpagebg-image-front"
/>
<$button popup=<<stateTiddler1>> class="gk0wk-notionpagebg-icon2"><$list filter="[title<icon>is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[shadow]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>is[tiddler]]"><$transclude tiddler=<<icon>>/></$list>
<$list filter="[title<icon>!is[shadow]!is[tiddler]]"><$wikify name="rendered" text=<<icon>> output=html><<rendered>></$wikify></$list></$button>
<$reveal type="popup" state=<<stateTiddler1>> position="below" tag="div" class="tc-popup-keep">
{{$:/plugins/Gk0Wk/notionpage-covericon/icon-selector}}
</$reveal>
<$button popup=<<stateTiddler2>> class="gk0wk-notionpageb-changecover" tooltip="Change Cover">Change Cover</$button>
<$reveal type="popup" state=<<stateTiddler2>> position="belowleft" tag="div" class="tc-popup-keep">
<div class="gk0wk-notionpageb-changecover-box">
<div>
<$edit-text tiddler=<<tiddler>> field="page-cover" default="" placeholder="Tiddler or URL" focus="true"/>
</div>
</div>
</$reveal>
<<cover-setting>>
</div>
</$list>
</$list>
Expand All @@ -81,4 +141,3 @@ list-before: $:/core/ui/ViewTemplate/title
</$list>
</$list>
</$set>
</$list>
17 changes: 17 additions & 0 deletions src/notionpage-covericon/config.multids
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
title: $:/plugins/Gk0Wk/notionpage-covericon/

default-icon: 📒
default-pagecover-url: https://source.unsplash.com/random
style/cover-height/narrow: 300px
style/cover-height/wide: 300px
style/top-offset/narrow: -14px
style/top-offset/wide: -28px
style/cover-left/narrow: -14px
style/cover-left/wide: -42px
style/cover-right/narrow: -14px
style/cover-right/wide: -42px
style/icon-size: 65px
config/default-cover-bg-blur: 8px
config/default-cover-size: cover
config/default-cover-position: center
config/default-cover-repeat: no-repeat
50 changes: 2 additions & 48 deletions src/notionpage-covericon/plugin.info
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,11 @@
{
"version": "0.0.11",
"version": "0.0.12",
"type": "application/json",
"title": "$:/plugins/Gk0Wk/notionpage-covericon",
"plugin-type": "plugin",
"name": "Notion Page(Cover + Icon)",
"list": "readme LICENSE",
"description": "Add notion-like page cover and icon display and control panel",
"author": "Gk0Wk",
"source": "https://github.com/Gk0Wk/TiddlySeq/tree/master/plugins/Gk0Wk/notionpage-covericon",
"tiddlers": {
"$:/plugins/Gk0Wk/notionpage-covericon/default-icon": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/default-icon",
"text": "📒"
},
"$:/plugins/Gk0Wk/notionpage-covericon/default-pagecover-url": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/default-pagecover-url",
"text": "https://source.unsplash.com/random"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/narrow": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/narrow",
"text": "300px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/wide": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/wide",
"text": "300px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/narrow": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/narrow",
"text": "-14px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/wide": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/wide",
"text": "-28px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/narrow": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/narrow",
"text": "-14px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide",
"text": "-42px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow",
"text": "-14px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide",
"text": "-42px"
},
"$:/plugins/Gk0Wk/notionpage-covericon/style/icon-size": {
"title": "$:/plugins/Gk0Wk/notionpage-covericon/style/icon-size",
"text": "65px"
}
}
"source": "https://github.com/Gk0Wk/TiddlySeq/tree/master/plugins/Gk0Wk/notionpage-covericon"
}
12 changes: 12 additions & 0 deletions src/notionpage-covericon/readme.tid
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
title: $:/plugins/Gk0Wk/notionpage-covericon/readme
tags: $:/tags/ControlPanel/Appearance
type: text/vnd.tiddlywiki
caption: Notion Page
list-after: $:/core/ui/ControlPanel/Toolbars

\define lingo-base() $:/language/ThemeTweaks/

Expand Down Expand Up @@ -27,6 +31,10 @@ title: $:/plugins/Gk0Wk/notionpage-covericon/readme
|[[封面左侧位置(宽屏模式)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide" placeholder="如：-42px" tag="input"/> |
|[[封面右侧位置(紧凑模式)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow" placeholder="如：-14px" tag="input"/> |
|[[封面右侧位置(宽屏模式)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide" placeholder="如：-42px" tag="input"/> |
|[[默认封面背景模糊程度|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur" default="8px" placeholder="0~100px" tag="input"/> |
|[[默认封面大小(CSS background-size)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size" default="cover" placeholder="cover, contain, auto, 100% 100%, 100% auto, auto 100%"/> |
|[[默认封面位置(CSS background-position)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position" default="center" placeholder="center, top, bottom, left, right, top left, top right, bottom left, bottom right"/> |
|[[默认封面重复(CSS background-repeat)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat" default="no-repeat" placeholder="no-repeat, repeat, repeat-x, repeat-y"/> |

</div>

Expand Down Expand Up @@ -60,6 +68,10 @@ Use the following fields to store the page's icon and cover information.
|[[Left position of page cover(Widescreen mode)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide" placeholder="e.g. -42px" tag="input"/> |
|[[Right position of page cover(Compact mode)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow" placeholder="e.g. -14px" tag="input"/> |
|[[Right position of page cover(Widescreen mode)|$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide]] |<$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide" placeholder="e.g. -42px" tag="input"/> |
|[[Default cover background blur|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-bg-blur" default="8px" placeholder="0~100px" tag="input"/> |
|[[Default cover size(CSS background-size)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-size" default="cover" placeholder="cover, contain, auto, 100% 100%, 100% auto, auto 100%"/> |
|[[Default cover position(CSS background-position)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-position" default="center" placeholder="center, top, bottom, left, right, top left, top right, bottom left, bottom right"/> |
|[[Default cover repeat(CSS background-repeat)|$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat]] | <$edit-text tiddler="$:/plugins/Gk0Wk/notionpage-covericon/config/default-cover-repeat" default="no-repeat" placeholder="no-repeat, repeat, repeat-x, repeat-y"/> |

</div>

Expand Down
12 changes: 2 additions & 10 deletions src/notionpage-covericon/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
top: {{$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/wide}};
}

.gk0wk-notionpagebg .gk0wk-notionpagebg-image {
.gk0wk-notionpagebg .gk0wk-notionpagebg-imagebox {
width: calc(100% - {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide}} - {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/wide}});
left: {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/wide}};
height: {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/wide}};
Expand All @@ -29,7 +29,7 @@
.gk0wk-notionpagebg-c, .gk0wk-notionpagebg-ci {
top: {{$:/plugins/Gk0Wk/notionpage-covericon/style/top-offset/narrow}};
}
.gk0wk-notionpagebg .gk0wk-notionpagebg-image {
.gk0wk-notionpagebg .gk0wk-notionpagebg-imagebox {
width: calc(100% - {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/narrow}} - {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-right/narrow}});
left: {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-left/narrow}};
height: {{$:/plugins/Gk0Wk/notionpage-covericon/style/cover-height/narrow}};
Expand Down Expand Up @@ -117,14 +117,6 @@
background: <<colour background>>;
}

/* Page Cover */

.gk0wk-notionpagebg .gk0wk-notionpagebg-image img {
position: relative;
top: 50%;
transform: translateY(-50%);
}

/* Change Page Cover */

.gk0wk-notionpageb-changecover-box {
Expand Down
Loading

0 comments on commit edc5382

Please sign in to comment.