Adding documentation.
This commit is contained in:
rickbsgu
@ -2,6 +2,8 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.dd *:first-child { margin-top: 0;}
|
||||
|
||||
@layer components {
|
||||
.text-page {
|
||||
color: var(--aw-color-text-page);
|
||||
|
||||
23
src/components/widgets/DListItem.astro
Normal file
23
src/components/widgets/DListItem.astro
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
// component: DListItem
|
||||
//
|
||||
// Mimics the nroff/troff 'dl' (description list)
|
||||
//
|
||||
// The 'dt' item is the item 'term' and is inserted into an 'h6' tag.
|
||||
// Caller needs to style the 'h6' tag appropriately.
|
||||
//
|
||||
// You can put pretty much any content you want between the open and
|
||||
// closing tags - it's simply contained in an enclosing div with a
|
||||
// margin left. No need for 'dd' items.
|
||||
//
|
||||
const {
|
||||
dt
|
||||
} = Astro.props;
|
||||
interface Props {
|
||||
dt:string
|
||||
}
|
||||
|
||||
const content:string = await Astro.slots.render('default');
|
||||
---
|
||||
<h6 set:html={dt}></h6>
|
||||
<div class="dd ml-8" set:html={content}/>
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
publishDate: 2023-01-08T00:00:00Z
|
||||
title: AstroWind template in depth
|
||||
description: Lorem ipsum dolor sit amet
|
||||
excerpt: Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas
|
||||
image: ~/assets/images/stickers.jpg
|
||||
category: Tutorials
|
||||
tags:
|
||||
- astro
|
||||
- tailwind css
|
||||
- front-end
|
||||
canonical: https://astrowind.vercel.app/astrowind-template-in-depth
|
||||
---
|
||||
|
||||
## Dictum integer fusce ac ridiculus et odio sollicitudin diam at
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipiscing elit euismod rutrum, consequat fringilla ultricies nullam curae mollis semper conubia viverra, orci aenean dapibus pharetra nec tortor tellus cubilia. Ullamcorper mi lectus eu malesuada tempor massa praesent magna mattis posuere, lobortis vulputate ut duis magnis parturient habitant nibh id tristique, quis suspendisse donec nisl penatibus sem non feugiat taciti. Mollis per ridiculus integer cursus semper vestibulum fermentum penatibus cubilia blandit scelerisque, tempus platea leo posuere ac pharetra volutpat aliquet euismod id ullamcorper lobortis, urna est magna mus rhoncus massa curae libero praesent eget. Mattis malesuada vestibulum quis ac nam phasellus suscipit facilisis libero diam posuere, cursus massa vehicula neque imperdiet tincidunt dui egestas lacinia mollis aliquet orci, nisl curabitur dapibus litora dis cum nostra montes ligula praesent. Facilisi aliquam convallis molestie tempor blandit ultricies bibendum parturient cubilia quam, porttitor morbi torquent tempus taciti nec faucibus elementum phasellus, quis inceptos vestibulum gravida augue potenti eget nunc maecenas. Tempor facilisis ligula volutpat habitant consequat inceptos orci per potenti blandit platea, mus sapien eget vel libero vestibulum augue cubilia ut ultrices fringilla lectus, imperdiet pellentesque cum ridiculus convallis sollicitudin nisl interdum semper felis.
|
||||
|
||||
Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti augue nulla vivamus senectus odio, quisque curabitur enim consequat class sociis feugiat ullamcorper, felis dis imperdiet cubilia commodo sed massa phasellus. Viverra purus mus nisi condimentum dui vehicula facilisis turpis, habitant nascetur lectus tempor quisque habitasse urna scelerisque, nibh nullam vestibulum luctus aenean mollis metus. Suscipit gravida duis nec aliquet natoque molestie a ridiculus scelerisque cum, justo cursus sapien sodales purus dignissim vel facilisi magnis, inceptos rutrum ut integer auctor commodo sollicitudin fames et. Faucibus ligula nibh sagittis mauris auctor posuere habitant, scelerisque phasellus accumsan egestas gravida viverra nam, sed etiam eleifend proin massa dictumst. Porttitor risus luctus per aenean tellus primis fringilla vitae fames lacinia mauris metus, nec pulvinar quisque commodo sodales ac nibh natoque phasellus semper placerat. Lectus aenean potenti leo sollicitudin tristique eros quam ligula, vestibulum diam consequat enim torquent nec tempus, blandit viverra dapibus eleifend dis nunc nascetur.
|
||||
|
||||
## Sodales hendrerit malesuada et vestibulum
|
||||
|
||||
- Luctus euismod pretium nisi et, est dui enim.
|
||||
|
||||
- Curae eget inceptos malesuada, fermentum class.
|
||||
|
||||
- Porttitor vestibulum aliquam porta feugiat velit, potenti eu placerat.
|
||||
|
||||
- Ligula lacus tempus ac porta, vel litora.
|
||||
|
||||
Torquent non nisi lacinia faucibus nibh tortor taciti commodo porttitor, mus hendrerit id leo scelerisque mollis habitasse orci tristique aptent, lacus at molestie cubilia facilisis porta accumsan condimentum. Metus lacus suscipit porttitor integer facilisi torquent, nostra nulla platea at natoque varius venenatis, id quam pharetra aliquam leo. Dictum orci himenaeos quam mi fusce lacinia maecenas ac magna eleifend laoreet, vivamus enim curabitur ullamcorper est ultrices convallis suscipit nascetur. Ornare fames pretium ante ac eget nisi tellus vivamus, convallis mauris sapien imperdiet sollicitudin aliquet taciti quam, lacinia tempor primis magna iaculis at eu. Est facilisi proin risus eleifend orci torquent ultricies platea, quisque nullam vel porttitor euismod sociis non, maecenas sociosqu interdum arcu sed pharetra potenti. Aliquet risus tempus hendrerit sapien tellus eget cursus enim etiam dui, lobortis nostra pellentesque odio posuere morbi ad neque senectus arcu eu, turpis proin ac felis purus fames magnis dis dignissim.
|
||||
|
||||
Orci volutpat augue viverra scelerisque dictumst ut condimentum vivamus, accumsan cum sem sollicitudin aliquet vehicula porta pretium placerat, malesuada euismod primis cubilia rutrum tempus parturient. Urna mauris in nibh morbi hendrerit vulputate condimentum, iaculis consequat porttitor dui dis euismod eros, arcu elementum venenatis varius lectus nisi. Nibh arcu ultrices semper morbi quam aptent quisque porta posuere iaculis, vestibulum cum vitae primis varius natoque conubia eu. Placerat sociis sagittis sociosqu morbi purus lobortis convallis, bibendum tortor ridiculus orci habitasse viverra dictum, quis rutrum fusce potenti volutpat vehicula. Curae porta inceptos lectus mus urna litora semper aliquam libero rutrum sem dui maecenas ligula quis, eget risus non imperdiet cum morbi magnis suspendisse etiam augue porttitor placerat facilisi hendrerit. Et eleifend eget augue duis fringilla sagittis erat est habitasse commodo tristique quisque pretium, suspendisse imperdiet inceptos mollis blandit magna mus elementum molestie sed vestibulum. Euismod morbi hendrerit suscipit felis ornare libero ligula, mus tortor urna interdum blandit nisi netus posuere, purus fermentum magnis nam primis nulla.
|
||||
|
||||
## Elementum nisi urna cursus nisl quam ante tristique blandit ultricies eget
|
||||
|
||||
Netus at rutrum taciti vestibulum molestie conubia semper class potenti lobortis, hendrerit donec vitae ad libero natoque parturient litora congue. Torquent rhoncus odio cursus iaculis molestie arcu leo condimentum accumsan, laoreet congue duis libero justo tortor commodo fusce, massa eros hac euismod netus sodales mi magnis. Aenean nullam sollicitudin ad velit nulla venenatis suspendisse iaculis, aliquet senectus mollis aptent fringilla volutpat nascetur, nec urna vehicula lacinia neque augue orci. Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur, platea tincidunt ut sollicitudin purus libero lobortis ad nisi diam quam.
|
||||
|
||||
Venenatis suscipit class iaculis non velit ultrices ligula nulla mattis turpis erat, enim montes sapien rhoncus tincidunt scelerisque fermentum dapibus imperdiet risus, tempor est massa pretium at molestie morbi nec libero aptent. Morbi rhoncus massa accumsan a pharetra nec conubia at, sem justo sociis suspendisse aenean dis magna, parturient inceptos ad vestibulum lectus ullamcorper ante. In condimentum suscipit iaculis suspendisse nisl gravida risus sociis, cursus nec lectus per tristique phasellus imperdiet ultrices taciti, natoque sociosqu curae tellus hendrerit feugiat dignissim. Risus est fringilla elementum ullamcorper nibh urna sociosqu quis, netus eu mollis torquent ridiculus nisi et, sodales cum vulputate augue facilisis egestas vel. Ridiculus volutpat nisi netus venenatis vitae posuere purus, nec aliquam fusce nascetur mus iaculis, sociosqu sodales erat id tempor malesuada. Lacinia platea sagittis tincidunt semper nam magna praesent, ante ornare senectus in ligula justo, id rhoncus nullam nec maecenas aliquam. Enim aenean rutrum magnis magna duis pulvinar curae posuere massa, dui orci class dis phasellus parturient aliquet luctus eget bibendum, ultricies fringilla erat purus habitasse natoque urna aliquam.
|
||||
|
||||
Cursus varius volutpat aliquam tellus blandit netus orci, augue eleifend molestie cubilia proin. Sagittis enim nam hendrerit risus sem laoreet commodo interdum, odio fames et nunc bibendum urna conubia cursus neque, arcu accumsan nascetur ridiculus cubilia vestibulum sapien. Luctus maecenas accumsan turpis donec dictum justo ridiculus consequat ad, habitant elementum litora magna sed rutrum tempus. Et dapibus eget feugiat dictum quam proin sem tincidunt lectus risus natoque, massa ut purus sollicitudin dignissim hac sed nibh facilisis arcu dis lacinia, cras fringilla erat sociis eleifend varius vestibulum nunc aenean neque. Penatibus curabitur aptent magna faucibus aliquam sed massa curae maecenas nibh, sodales montes nulla cursus litora justo suscipit ut neque, varius rutrum enim dignissim auctor velit luctus blandit nostra. Torquent lobortis nec volutpat aliquet vestibulum penatibus bibendum, eget platea a dictum mollis congue. Netus consequat eget cursus cubilia nostra quam etiam sollicitudin purus, imperdiet per bibendum proin duis felis montes ut tincidunt semper, ad vestibulum accumsan tortor fames potenti tristique praesent. Arcu mollis tempus tincidunt ad platea mauris, nec inceptos dis penatibus donec, primis taciti fermentum erat mi.
|
||||
|
||||
Lacinia pellentesque dui porttitor arcu mauris turpis quam vitae rutrum in vel, sociosqu ultricies ultrices rhoncus fames taciti ut aliquet placerat ligula. Nec libero aptent nisl euismod pellentesque curae posuere magnis, fusce condimentum augue fames penatibus mollis consequat, justo ullamcorper semper nibh netus turpis est. Condimentum nisi bibendum fames placerat habitasse curabitur facilisis accumsan sagittis ante, etiam id turpis aliquam elementum habitant eget aptent nisl, duis nullam velit hac cubilia risus ultricies interdum ultrices. A praesent taciti duis tempor sollicitudin primis auctor, consequat potenti porta iaculis ad imperdiet, habitasse sagittis quam eu mus nisl. Lacus morbi aptent fusce augue curae elementum diam litora leo condimentum pharetra facilisi eros, dis bibendum primis habitasse tempus porttitor dictumst potenti justo congue hendrerit curabitur. Pretium natoque penatibus pellentesque auctor, luctus libero pharetra proin vitae, habitant nam posuere. Tortor facilisis sed venenatis nostra massa congue lobortis rutrum ornare, ullamcorper libero nibh elementum dictumst torquent felis at, nam porttitor curabitur neque natoque accumsan hac id. Dictum aenean sed facilisis interdum libero eu, praesent curae purus ac platea, natoque penatibus malesuada erat faucibus.
|
||||
|
||||
Porta lobortis ad dapibus id vitae convallis litora vehicula molestie mattis aliquam, sociosqu nisi ridiculus netus faucibus platea aptent diam vivamus. Taciti tristique in erat ridiculus ad ultricies mollis risus, laoreet aliquam semper felis nam cubilia praesent, tempus nostra augue penatibus convallis proin quis. Lacus commodo senectus tempus suspendisse suscipit, class porttitor mi potenti at, vitae mattis a pharetra. At cras felis fermentum turpis sapien fames volutpat sollicitudin integer egestas ornare nunc, praesent mollis nibh quisque tristique vitae curae lobortis lacinia donec sagittis. Tincidunt enim morbi etiam malesuada odio laoreet lacinia, phasellus fringilla integer inceptos lobortis ridiculus suscipit massa, turpis leo molestie a mus conubia. Ridiculus magna fermentum sodales interdum posuere mi risus per rhoncus donec orci, pulvinar curabitur facilisis curae accumsan ligula scelerisque porta a porttitor, dignissim parturient facilisi felis quis malesuada litora convallis cum integer. Fringilla pulvinar consequat suspendisse aenean mollis interdum odio viverra aptent, nascetur eget magna facilisi erat fermentum turpis taciti ornare molestie, nam sollicitudin natoque gravida porta nulla rutrum condimentum.
|
||||
|
||||
Bibendum leo etiam porta fermentum donec mauris netus nibh per non varius diam, massa aliquam elementum lacinia himenaeos sem eros platea justo neque placerat. Etiam morbi ac magna quis gravida mi molestie praesent potenti pharetra id ornare euismod congue, est sapien iaculis rhoncus platea posuere litora integer mattis lacinia cubilia rutrum sem. Facilisis est tempus ridiculus ultricies faucibus nec aenean praesent ad vel penatibus, mus hac bibendum pretium rhoncus nascetur non neque mollis curabitur lacinia, consequat ut tortor aptent et sapien ornare quisque suspendisse vitae. Et suscipit nulla mauris integer nam elementum massa, purus pellentesque placerat magnis scelerisque leo metus, sociis interdum tincidunt ac ullamcorper feugiat. Magnis inceptos justo tincidunt ad etiam conubia ultricies tortor, metus congue ullamcorper turpis bibendum sociosqu cubilia curae urna, in phasellus pellentesque quam platea imperdiet accumsan. Urna vivamus ut bibendum diam sociis euismod rutrum, consequat magnis primis curae donec quis placerat conubia, semper mattis mollis auctor fringilla erat. Suspendisse phasellus gravida mollis eleifend nascetur dictum lectus dui fringilla pulvinar feugiat, venenatis lobortis posuere dictumst porttitor bibendum ullamcorper montes ultrices congue, scelerisque lacinia viverra suscipit vel natoque inceptos dignissim habitant laoreet.
|
||||
|
||||
Nascetur gravida mus imperdiet dapibus suspendisse cras nisl conubia, vulputate placerat senectus viverra nibh dictum et morbi pulvinar, cubilia ad non eleifend sagittis scelerisque penatibus. Auctor rutrum arcu phasellus tellus et magnis in, aliquet sociis fermentum class praesent aliquam lectus curabitur, natoque id pulvinar hac ultricies augue. Himenaeos commodo cum donec metus curae convallis sociis, facilisi lectus torquent fermentum rutrum vivamus non platea, nisl venenatis id ullamcorper mauris at. Facilisis etiam pharetra porta hendrerit eu conubia aliquam malesuada senectus, dui sociis penatibus integer mus quis turpis. Venenatis placerat ultricies tincidunt morbi himenaeos metus, diam curae aliquet neque pellentesque justo lobortis, cras sodales nam imperdiet parturient. Ligula potenti fringilla platea feugiat pulvinar dis habitant, nec nisl diam orci consequat condimentum gravida accumsan, massa vehicula euismod faucibus dignissim et. Scelerisque natoque vel eu proin etiam nostra pulvinar ullamcorper convallis facilisi, viverra vitae nunc penatibus ligula magnis cum senectus habitasse at, sagittis rhoncus faucibus netus nisl facilisis tristique parturient nulla. Condimentum massa lectus volutpat mollis curae eu, curabitur feugiat conubia mauris commodo mattis, magnis ad nullam ac sapien.
|
||||
226
src/content/post/astrowind-template-in-depth.mdx
Normal file
226
src/content/post/astrowind-template-in-depth.mdx
Normal file
@ -0,0 +1,226 @@
|
||||
---
|
||||
publishDate: 2023-01-08T00:00:00Z
|
||||
title: AstroWind template in depth
|
||||
description: Internals documentation
|
||||
excerpt: While easy to get started, Astrowind is quite complex internally. This page provides documentation on some of the more intricate parts.
|
||||
image: ~/assets/images/stickers.jpg
|
||||
category: Documentation
|
||||
tags:
|
||||
- astro
|
||||
- tailwind css
|
||||
- front-end
|
||||
canonical: https://astrowind.vercel.app/astrowind-template-in-depth
|
||||
---
|
||||
import DListItem from "../../components/widgets/DListItem.astro";
|
||||
import ToggleTheme from "../../components/common/ToggleTheme.astro";
|
||||
|
||||
## Overview
|
||||
|
||||
It can be a somewhat daunting task trying to get a handle on _AstroWind_ internals, and particularly various points of usage.
|
||||
|
||||
This page outlines and clarifies some of the techniques found in _AstroWind_. Use it as a guide for further modification, or an instructional for techniques to use in your own endeavors.
|
||||
|
||||
## Styling
|
||||
|
||||
As the name suggests, _AstroWind_ relies on _TailWind_ for styling. Furthermore, _AstroWind_ defines custom low level styling which are incorporated into _TailWind_ seamlessly, and which provides consistency for higher level styling constructs, as well as enabling dark mode.
|
||||
|
||||
The styling mechanism consists of the following files (all paths are prefixed with `/src/` ):
|
||||
|
||||
<DListItem dt="assets/styles/base.css">
|
||||
This file is essentially an extension of _TailWind's_ base.css. High-level component styles are defined here.
|
||||
|
||||
Note also styling on elements selected by 'attribute' selectors at the bottom of the files, particularly those selected by 'data' attributes.
|
||||
</DListItem>
|
||||
<DListItem dt="components/CustomStyles.astro">
|
||||
Defines custom colors and fonts. For these to take effect in the 'base.css' file, they have to be loaded in the html header section. See next.
|
||||
</DListItem>
|
||||
<DListItem dt="components/common/MetaTags.astro">
|
||||
Instantiates the _CustomStyles.astro_ component, along with other meta information (as the name implies). All of this is injected in to the header - see next.
|
||||
</DListItem>
|
||||
<DListItem dt="layouts/BaseLayout.astro">
|
||||
This layout is used for all of the pages rendered by _AstroWind_. The contents of _MetaTags.astro_ component, described above, is injected into the html header.
|
||||
</DListItem>
|
||||
|
||||
### Dark Mode
|
||||
|
||||
_Dark Mode_ is triggered by the little 'sunlight' icon:<ToggleTheme/>in the page header. It is defined in the _components/common/ToggleTheme.astro_, but the event is attached and the action defined in _components/common/BasicScripts.astro_ in the following snippet:
|
||||
```javascript
|
||||
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
|
||||
if (defaultTheme.endsWith(':only')) {
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.toggle('dark');
|
||||
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
});
|
||||
```
|
||||
Note that this is a client event. _BasicScripts.astro_ defines several other client-side functionality as well as this one.
|
||||
|
||||
## Unorthodox Slot Usage
|
||||
|
||||
_slots_ are part of the component implementation, which is a common concept among many frameworks, including _Astrojs_. The typical slot definition in a component looks like this:
|
||||
```astro
|
||||
// (file: MyComponent.astro)
|
||||
---
|
||||
const {title} = Astro.props;
|
||||
interface Props = {
|
||||
title:string
|
||||
}
|
||||
---
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
<slot/> <!-- slot contents injected here -->
|
||||
<div>
|
||||
```
|
||||
And in usage elsewhere:
|
||||
```astro
|
||||
import MyComponent from "~/components/MyComponent";
|
||||
...
|
||||
<MyComponent someArg="A Slot example">
|
||||
<p>This content will be displayed in the slot</p>
|
||||
</MyComponent>
|
||||
```
|
||||
### Alternate usage
|
||||
There's another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully...):
|
||||
|
||||
```astro
|
||||
// (file: MyComponent.astro)
|
||||
---
|
||||
const {title} = Astro.props;
|
||||
interface Props = {
|
||||
title:string
|
||||
}
|
||||
|
||||
const content:string = await Astro.props.render('default');
|
||||
---
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
<div set:html={content}/> <!-- slot contents injected here -->
|
||||
<div>
|
||||
```
|
||||
Whoa!! What's going on here?
|
||||
|
||||
Notice there is no slot definition in the html portion of the component. Instead, what we do is have _Astro_ render the slot content (here, the 'default' content, but you can also render named slots) into a variable, and then use that content in a _div_ (for instance).
|
||||
|
||||
So, if the usage is in a markdown file, like so:
|
||||
|
||||
```mdx
|
||||
import MyComponent from '../../components/MyComponent';
|
||||
|
||||
# Using the above component in a .mdx file (that can take components)
|
||||
|
||||
<MyComponent title="This is a slot implementor">
|
||||
### Here is some markdown content
|
||||
- With a bullet item.
|
||||
</MyComponent>
|
||||
```
|
||||
_MyComponent_ renders the markdown to html and then injects it into the div.
|
||||
|
||||
This actually has a big advantage -- consider that with the normal usage you don't have access to the slot contents: _Astro_ just plops the content into the _<slot/>_ tag. Using this method, however, allows you to access the content and further manipulate it before it gets inserted into the html.
|
||||
|
||||
This allows a great deal of flexibility in component design.
|
||||
|
||||
### Yet Another Step
|
||||
|
||||
Now, we get to the techniques used in _AstroWind_, particularly in the main _pages/index.astro_ file.
|
||||
|
||||
You'll note that the index file imports a lot of components, each one roughly analagous to a panel in the index page. Each of these components, in turn, is instantiated sequentially throughout the page. But, you'll notice that some of them use this kind of construct (we'll use the last section, _CallToAction_, as it is most illustrative of the technique):
|
||||
|
||||
```astro
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
text: 'Get template',
|
||||
href: 'https://github.com/onwidget/astrowind',
|
||||
icon: 'tabler:download',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
|
||||
waste more time! :P
|
||||
</Fragment>
|
||||
</CallToAction>
|
||||
```
|
||||
Some things to note, here:
|
||||
<DListItem dt="The <em>callToAction</em> argument">
|
||||
This argument is actually being passed a javascript object -- not a string. (However, in the TS definition, it could be a string...)
|
||||
</DListItem>
|
||||
<DListItem dt="There are several <em>Fragment</em> children">
|
||||
Furthermore, these <Fragment/> elements each have a _slot="(value)"_ specifier.
|
||||
</DListItem>
|
||||
|
||||
The latter seems odd, because <Fragment/> is a built-in component over which you have no control, and doesn't have a provision for rendering slots, <em>per se</em>.
|
||||
|
||||
The answer lies in a paragraph in the _Astro_ docs, slots section, which states:
|
||||
|
||||
> Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching slot `name="my-slot" />` placeholder in your component.
|
||||
|
||||
That's a bit of a head-scratcher to read, but basically what it says is that you can reference a slot from a child of a component that defines a slot, and provide the contents to the parent component's slot as something of a surrogate.
|
||||
|
||||
So, in the example above, the _CallToAction_ component defines the _subtitle_ slot, and the following _<Fragment slot="subtitle">_ with the following content:
|
||||
|
||||
```astro
|
||||
<Fragment slot="subtitle">
|
||||
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
|
||||
waste more time! :P
|
||||
</Fragment>
|
||||
```
|
||||
|
||||
And, the _CallToAction_ component defines and renders it thusly:
|
||||
|
||||
```astro
|
||||
---
|
||||
...
|
||||
const {
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
} = Astro.props;
|
||||
---
|
||||
...
|
||||
{subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
|
||||
...
|
||||
|
||||
```
|
||||
There's a lot to wrap your head around, here.
|
||||
|
||||
Notice first that _subtitle_ is defined as a prop/argument, but it's being processed as a slot. Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment. The main difference is that if you render them independently, you have to call the render with an _await_ modifier.
|
||||
|
||||
## CallToAction Property
|
||||
|
||||
Finally, note that the _CallToAction_ property can be of type `string | CallToAction` where the `CallToAction` is a typed object. In the component, this is handled thusly:
|
||||
```astro
|
||||
---
|
||||
const {
|
||||
callToAction = await Astro.slots.render('callToAction'),
|
||||
} = Astro.props;
|
||||
// also rendered as a slot
|
||||
---
|
||||
<div>
|
||||
...
|
||||
{
|
||||
typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction &&
|
||||
callToAction.text &&
|
||||
callToAction.href && (
|
||||
<div class="mt-6 max-w-xs mx-auto">
|
||||
<a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
|
||||
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
|
||||
{callToAction.text}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
```
|
||||
First, the property type is checked to see if it's a string: if so, it's just set into a child _<Fragment>'s_ html.
|
||||
|
||||
If not, it is validated and then...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user