Skip to content

Commit 618e05d

Browse files
mProjectsCodemProjectsCode
committed
some updates; add sponsors link
1 parent 7a48101 commit 618e05d

File tree

7 files changed

+212
-138
lines changed

7 files changed

+212
-138
lines changed

‎astro.config.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export default defineConfig({
1616
social: {
1717
github: 'https://github.com/mProjectsCode/obsidian-meta-bind-plugin',
1818
},
19+
components: {
20+
TableOfContents: './src/components/TableOfContents.astro',
21+
SocialIcons: './src/components/SocialIcons.astro',
22+
},
1923
sidebar: [
2024
{
2125
label: 'Guides',

‎src/components/Pride.astro

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

‎src/components/SocialIcons.astro

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
import type { Props } from '@astrojs/starlight/props';
3+
import Default from '@astrojs/starlight/components/SocialIcons.astro';
4+
---
5+
6+
<!-- Add custom social link with its SVG icon and a label. -->
7+
<a href="https://github.com/sponsors/mProjectsCode" rel="me" class="sl-flex">
8+
<span class="sr-only">Support me</span>
9+
<!--<svg-->
10+
<!-- aria-hidden="true"-->
11+
<!-- fill="currentColor"-->
12+
<!-- height="16"-->
13+
<!-- width="16"-->
14+
<!-- viewBox="0 0 24 24"-->
15+
<!--&gt;-->
16+
<!-- <path-->
17+
<!-- d="m10 17.55-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43 2.75 2.75 0 0 0-.18-.21 4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55ZM20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43 2.75 2.75 0 0 0 .23.21 4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33Z"-->
18+
<!-- >-->
19+
<!-- </path>-->
20+
<!--</svg>-->
21+
<svg aria-hidden="true" fill="currentColor" height="16" width="16" viewBox="0 0 512 512">
22+
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
23+
<path
24+
d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
25+
></path>
26+
</svg>
27+
</a>
28+
<!-- Render the default social links. -->
29+
<Default {...Astro.props}><slot /></Default>
30+
31+
<!-- Add styles to mimic the default links appearance. -->
32+
<style>
33+
a {
34+
color: var(--sl-color-text-accent);
35+
margin: -0.5em;
36+
padding: 0.5em;
37+
}
38+
39+
a:hover {
40+
opacity: 0.66;
41+
}
42+
</style>

‎src/components/Sponsors.astro

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
3+
---
4+
5+
<section style="margin-top: 0.5rem">
6+
<h2>Support me</h2>
7+
<iframe src="https://github.com/sponsors/mProjectsCode/button" title="Sponsor mProjectsCode" height="32" width="114" style="border: 0; border-radius: 6px;"
8+
></iframe>
9+
</section>

‎src/components/TableOfContents.astro

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
import Default from '@astrojs/starlight/components/TableOfContents.astro';
3+
import Sponsors from './Sponsors.astro';
4+
---
5+
6+
<Default {...Astro.props}><slot /></Default>
7+
<Sponsors />

‎src/content/docs/index.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ If you have an idea, feel free to open a feature request under the [issues tab o
5050

5151
Check out [my website](https://www.moritzjung.dev).
5252

53-
[Support my work on GitHub](https://github.com/sponsors/mProjectsCode).
54-
5553
Here is a list of my Obsidian related projects.
5654

5755
- [Meta Bind Plugin](https://github.com/mProjectsCode/obsidian-meta-bind-plugin) (You are here)

‎src/content/docs/reference/inputFieldArguments/allowOther.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Allow Other Argument
3+
description: Allow Other argument reference.
4+
---
5+
6+
import InputFieldArgumentInfo from '../../../../components/inputField/InputFieldArgumentInfo.astro';
7+
import InputFieldArgumentAllowedInputFields from '../../../../components/inputField/InputFieldArgumentAllowedInputFields.astro';
8+
import InputFieldArgumentValuesInfo from '../../../../components/inputField/InputFieldArgumentValuesInfo.astro';
9+
import InputFieldArgumentLink from '../../../../components/inputField/InputFieldArgumentLink.astro';
10+
import InputFieldLink from '../../../../components/inputField/InputFieldLink.astro';
11+
import { InputFieldArgumentType, InputFieldType } from '../../../../config/static.js';
12+
13+
<InputFieldArgumentInfo type={InputFieldArgumentType.ALLOW_OTHER}></InputFieldArgumentInfo>
14+
15+
The `allowOther` argument lets you set a custom value, which is not specified with the <InputFieldArgumentLink type={InputFieldArgumentType.OPTION}></InputFieldArgumentLink> argument, for suggester like input fields.
16+
17+
### Values
18+
19+
<InputFieldArgumentValuesInfo type={InputFieldArgumentType.ALLOW_OTHER}></InputFieldArgumentValuesInfo>
20+
21+
### Allowed Input Fields
22+
23+
<InputFieldArgumentAllowedInputFields type={InputFieldArgumentType.ALLOW_OTHER}></InputFieldArgumentAllowedInputFields>
24+
25+
### Examples
26+
27+
```meta-bind
28+
INPUT[suggester(
29+
option(option 1),
30+
option(option 2),
31+
option(option 3),
32+
allowOther
33+
):bind_target]
34+
```

0 commit comments

Comments
 (0)