Skip to content

Commit 7a48101

Browse files
mProjectsCodemProjectsCode
committed
some more small improvements
1 parent 622fe3e commit 7a48101

File tree

4 files changed

+146
-8
lines changed

4 files changed

+146
-8
lines changed

‎src/components/Pride.astro

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
3+
export const COLORS = {
4+
rainbow: [
5+
'hsl(0deg 0% 18%)',
6+
'hsl(30deg 60% 30%)',
7+
'hsl(0deg 90% 55%)',
8+
'hsl(30deg 95% 65%)',
9+
'hsl(55deg 90% 65%)',
10+
'hsl(100deg 65% 45%)',
11+
'hsl(220deg 80% 55%)',
12+
'hsl(265deg 80% 50%)',
13+
],
14+
'rainbow-original': [
15+
'hsl(0deg 90% 55%)',
16+
'hsl(30deg 95% 65%)',
17+
'hsl(55deg 90% 65%)',
18+
'hsl(100deg 65% 45%)',
19+
'hsl(220deg 80% 55%)',
20+
'hsl(265deg 80% 50%)',
21+
],
22+
trans: [
23+
'hsl(200deg 85% 70%)',
24+
'hsl(350deg 85% 85%)',
25+
'hsl(0deg 0% 100%)',
26+
'hsl(350deg 85% 85%)',
27+
'hsl(200deg 85% 70%)',
28+
],
29+
pan: [
30+
'hsl(331deg 100% 55%)',
31+
'hsl(50deg 100% 50%)',
32+
'hsl(200deg 100% 55%)',
33+
]
34+
};
35+
36+
const variant = 'rainbow-original'; // rainbow | rainbow-original | trans | pan
37+
const width = 200;
38+
const numOfColumns = 20;
39+
const staggeredDelay = 50;
40+
const billow = 10;
41+
42+
const colors = COLORS[variant];
43+
const friendlyWidth =
44+
Math.round(width / numOfColumns) * numOfColumns;
45+
46+
const firstColumnDelay = numOfColumns * staggeredDelay * -1;
47+
48+
function generateGradientString(colors) {
49+
const numOfColors = colors.length;
50+
const segmentHeight = 100 / numOfColors;
51+
52+
const gradientStops = colors.map((color, index) => {
53+
const from = index * segmentHeight;
54+
const to = (index + 1) * segmentHeight;
55+
56+
return `${color} ${from}% ${to}%`;
57+
});
58+
59+
return `linear-gradient(to bottom, ${gradientStops.join(', ')})`;
60+
}
61+
62+
function range(n) {
63+
return Array.from({ length: n }, (_, i) => i);
64+
}
65+
66+
---
67+
68+
<div style="position: relative" onclick="window.open('https://en.wikipedia.org/wiki/Pride_Month', '_blank')">
69+
<div class="flag" style={{ width: friendlyWidth }}>
70+
{range(numOfColumns).map((columnIndex) => (
71+
<div
72+
class="column"
73+
style={{
74+
'--billow': columnIndex / numOfColumns * billow + 'px',
75+
background: generateGradientString(colors),
76+
animationDelay:
77+
firstColumnDelay + columnIndex * staggeredDelay + 'ms',
78+
}}
79+
/>
80+
))}
81+
</div>
82+
<span class="flag-text">
83+
Pride Month
84+
</span>
85+
</div>
86+
87+
88+
<style>
89+
@keyframes oscillate {
90+
from {
91+
transform: translateY(var(--billow));
92+
}
93+
to {
94+
transform: translateY(calc(var(--billow) * -1));
95+
}
96+
}
97+
98+
.flag {
99+
display: flex;
100+
aspect-ratio: 12 / 2;
101+
animation-duration: 600ms;
102+
cursor: pointer;
103+
}
104+
105+
.flag-text {
106+
position: absolute;
107+
top: 50%;
108+
left: 50%;
109+
transform: translate(-50%, -50%);
110+
font-size: 2rem;
111+
font-weight: bold;
112+
text-shadow: 0 0 10px black, 0 0 20px black;
113+
color: white !important;
114+
user-select: none;
115+
cursor: pointer;
116+
text-wrap: nowrap;
117+
}
118+
119+
.column {
120+
flex: 1;
121+
display: flex;
122+
flex-direction: column;
123+
animation: oscillate 500ms alternate infinite ease-in-out both;
124+
margin: 0 !important;
125+
}
126+
127+
.column:first-child {
128+
border-top-left-radius: 8px;
129+
border-bottom-left-radius: 8px;
130+
}
131+
132+
.column:last-child {
133+
border-top-right-radius: 8px;
134+
border-bottom-right-radius: 8px;
135+
}
136+
</style>

‎src/content/docs/guides/inputFields.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: A tutorial for Meta Bind Input Fields.
44
---
55

66
Input fields allow you to create input fields for your notes metadata and interact with them in live preview and reading mode.
7-
A bit like properties, but not just at the top of your note.
7+
A bit like Obsidians properties UI, but not just at the top of your note.
88

99
### Creating Input Fields
1010

‎src/content/docs/guides/viewFields.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import ViewFieldLink from '../../../components/viewField/ViewFieldLink.astro';
88
import ViewFieldArgumentLink from '../../../components/viewField/ViewFieldArgumentLink.astro';
99

1010
View Fields are a powerful way to reactively display your metadata in your notes.
11-
They can bind to multiple frontmatter fields and update as soon as you change them, much like dataview inline queries, but with Obsidian Publish support.
12-
View fields can even save their computed value back to the frontmatter.
11+
They can bind to multiple frontmatter fields and the view field update as soon as the value of the frontmatter fields change, much like dataview inline queries, but with instant updates.
12+
View fields can even do computations and save their computed value back to the frontmatter.
1313

1414
## Creating View Fields
1515

@@ -183,7 +183,7 @@ return `${context.bound.var1 * context.bound.var2} km`;
183183
```
184184
````
185185

186-
The following JS View Field will aditionally be hidden.
186+
The following JS View Field will additionally be hidden.
187187

188188
````custom_markdown {5}
189189
```meta-bind-js-view

‎src/content/docs/index.mdx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@ description: Getting started with Meta Bind.
44
---
55

66
import AutofillSearch from '../../components/AutofillSearch.astro';
7+
import Pride from '../../components/Pride.astro';
78

89
<AutofillSearch></AutofillSearch>
910

11+
<Pride></Pride>
12+
1013
:::tip
1114
**New**: Meta Bind [Buttons](/obsidian-meta-bind-plugin-docs/guides/buttons/), a spiritual successor to the discontinued [Buttons Plugin](https://github.com/shabegom/buttons).
1215
:::
1316

1417
Meta Bind is a plugin for [Obsidian](https://obsidian.md/) to make your notes interactive!
1518

1619
Meta Bind allows you to create **input fields**, **metadata displays (view fields)**, and **buttons**.
17-
Input and view fields can then be bound to frontmatter properties, which keeps them in sync those frontmatter properties.
18-
Allowing you to edit and view your frontmatter properties inside your notes.
20+
Input and view fields can be bound to frontmatter properties, which keeps them in sync those frontmatter properties, allowing you to edit and view your frontmatter properties inside your notes.
1921

2022
For example, you can create a toggle inside your note, that is bound to a frontmatter property named `done`, with this simple inline code block `INPUT[toggle:done]`.
2123
When you click the toggle, the `done` property will switch between `true` and `false`.
@@ -29,10 +31,10 @@ When you click the toggle, the `done` property will switch between `true` and `f
2931

3032
## Getting Started
3133

32-
First you will need to install the plugin from the Community Plugins tab in Obsidian's settings.
34+
First you will need to install the plugin from the [Community Plugins](obsidian://show-plugin?id=obsidian-meta-bind-plugin) tab in Obsidian's settings.
3335
You can find various guides on how to use the plugin under the Guides section in the sidebar.
3436

35-
If you want to see all possible input fields in actions, you can run the `Open Meta Bind FAQ` command inside Obsidian.
37+
If you want to see all possible input fields in actions, you can run the `Open Meta Bind Playground` command inside Obsidian.
3638
If you are looking for examples, you can explore the [example vault](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/tree/master/exampleVault) which I use for testing.
3739

3840
## Bugs, Errors or Unexpected Behavior?

0 commit comments

Comments
 (0)