|
2 | 2 | title: Datacore |
3 | 3 | description: Whether to enable support for the Datacore plugin. Requires Datacore to be installed and enabled. |
4 | 4 | created: 2025-06-09T20:48:56Z+0200 |
5 | | -modified: 2025-08-07T09:14:15Z+0200 |
| 5 | +modified: 2025-08-07T09:21:00Z+0200 |
6 | 6 | publish: true |
7 | 7 | tags: [datacore, integration, settings/integrations] |
8 | 8 | default_value: "false" |
@@ -102,153 +102,6 @@ return function View() { |
102 | 102 | } |
103 | 103 | ``` |
104 | 104 |
|
105 | | -## Advanced |
106 | | - |
107 | | -<!-- |
108 | | -```datacorejsx |
109 | | -return function View() { |
110 | | - const pages = dc.useQuery("@page and #integration").sort(); |
111 | | -
|
112 | | - const cards = dc.useArray(pages, array => array.map((page) => ( |
113 | | - <article> |
114 | | - <img src=""></img> |
115 | | - <h2>{page.value("title")}</h2> |
116 | | - <div> |
117 | | - <p>{page.value("description")}</p> |
118 | | - <a href={`/${page.$path}`}>Link</a> |
119 | | - </div> |
120 | | - </article> |
121 | | - ))); |
122 | | -
|
123 | | - let cardMap = ""; |
124 | | -
|
125 | | - for (let index = 0; index < pages.length + 2; index++) { |
126 | | - cardMap += ` |
127 | | - &:nth-child(${index + 1}) { |
128 | | - --i: ${index}; |
129 | | - } |
130 | | - `; |
131 | | - } |
132 | | -
|
133 | | - const styles = ` |
134 | | - .carousel-container { |
135 | | - place-items: center; |
136 | | - display: flex; |
137 | | - } |
138 | | - .carousel { |
139 | | - --items: ${pages.length}; |
140 | | - --carousel-duration: 40s; |
141 | | - @media (width > 600px) { |
142 | | - --carousel-duration: 30s; |
143 | | - } |
144 | | - --carousel-width: min(80vw, |
145 | | - 1200px); |
146 | | - /* note - it will "break" if it gets too wide and there aren't enough items */ |
147 | | - --carousel-item-width: 280px; |
148 | | - --carousel-item-height: 450px; |
149 | | - --carousel-item-gap: 2rem; |
150 | | - --clr-cta: rgb(0, 132, 209); |
151 | | - position: relative; |
152 | | - width: var(--carousel-width); |
153 | | - height: var(--carousel-item-height); |
154 | | - overflow: clip; |
155 | | - &[mask] { |
156 | | - /* fade out on sides */ |
157 | | - mask-image: linear-gradient(to right, |
158 | | - transparent, |
159 | | - black 10% 90%, |
160 | | - transparent); |
161 | | - } |
162 | | - &[reverse]>article { |
163 | | - animation-direction: reverse; |
164 | | - } |
165 | | - /* hover pauses animation */ |
166 | | - &:hover>article { |
167 | | - animation-play-state: paused; |
168 | | - } |
169 | | - } |
170 | | - .carousel>article { |
171 | | - position: absolute; |
172 | | - top: 0; |
173 | | - left: calc(100% + var(--carousel-item-gap)); |
174 | | - width: var(--carousel-item-width); |
175 | | - height: var(--carousel-item-height); |
176 | | - display: grid; |
177 | | - grid-template-rows: 200px auto 1fr auto; |
178 | | - gap: 0.25rem; |
179 | | - border: 1px solid light-dark(rgba(0 0 0 / 0.25), rgba(255 255 255 / 0.15)); |
180 | | - padding-block-end: 1rem; |
181 | | - border-radius: 10px; |
182 | | - background: light-dark(white, rgba(255 255 255 / 0.05)); |
183 | | - color: light-dark(rgb(49, 65, 88), white); |
184 | | - /* animation */ |
185 | | - will-change: transform; |
186 | | - animation-name: marquee; |
187 | | - animation-duration: var(--carousel-duration); |
188 | | - animation-timing-function: linear; |
189 | | - animation-iteration-count: infinite; |
190 | | - animation-delay: calc(var(--carousel-duration) / var(--items) * 1 * var(--i) * -1); |
191 | | - ${cardMap} |
192 | | - } |
193 | | - .carousel img { |
194 | | - width: 100%; |
195 | | - height: 100%; |
196 | | - object-fit: cover; |
197 | | - border-radius: 10px 10px 0 0; |
198 | | - } |
199 | | - .carousel>article>*:not(img) { |
200 | | - padding: 0 1rem; |
201 | | - } |
202 | | - .carousel>article>div { |
203 | | - grid-row: span 2; |
204 | | - display: grid; |
205 | | - grid-template-rows: subgrid; |
206 | | - font-size: 0.8rem; |
207 | | - } |
208 | | - .carousel>article h2 { |
209 | | - font-size: 1.2rem; |
210 | | - font-weight: 300; |
211 | | - padding-block: 0.75rem 0.25rem; |
212 | | - margin: 0; |
213 | | - } |
214 | | - .carousel>article p { |
215 | | - margin: 0; |
216 | | - } |
217 | | - .carousel>article a { |
218 | | - text-decoration: none; |
219 | | - text-transform: lowercase; |
220 | | - border: 1px solid var(--clr-cta); |
221 | | - color: light-dark(var(--clr-cta), white); |
222 | | - border-radius: 3px; |
223 | | - padding: 0.25rem 0.5rem; |
224 | | - place-self: start; |
225 | | - transition: 150ms ease-in-out; |
226 | | - &:hover, |
227 | | - &:focus-visible { |
228 | | - background-color: var(--clr-cta); |
229 | | - color: white; |
230 | | - outline: none; |
231 | | - } |
232 | | - } |
233 | | - @keyframes marquee { |
234 | | - 100% { |
235 | | - transform: translateX(calc((var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1)); |
236 | | - } |
237 | | - } |
238 | | - `; |
239 | | -
|
240 | | - return ( |
241 | | - <div class="carousel-container"> |
242 | | - <style>{styles}</style> |
243 | | - <div class="carousel" mask> |
244 | | - {cards} |
245 | | - </div> |
246 | | - </div> |
247 | | - ); |
248 | | -}; |
249 | | -``` |
250 | | ---> |
251 | | - |
252 | 105 | ## See also |
253 | 106 |
|
254 | 107 | - [Obsidian Rocks article on Datacore](https://obsidian.rocks/getting-started-with-datacore/), whose query examples are rendered above. |
|
0 commit comments