From dace8cd5edd016e82668611756efeb83583c36e2 Mon Sep 17 00:00:00 2001 From: widgeter <106940567+widgeter@users.noreply.github.com> Date: Mon, 14 Aug 2023 08:55:49 -0400 Subject: [PATCH] Update astrowind-template-in-depth.mdx --- .../post/astrowind-template-in-depth.mdx | 63 +------------------ 1 file changed, 3 insertions(+), 60 deletions(-) diff --git a/src/content/post/astrowind-template-in-depth.mdx b/src/content/post/astrowind-template-in-depth.mdx index 5483700..18fffaa 100644 --- a/src/content/post/astrowind-template-in-depth.mdx +++ b/src/content/post/astrowind-template-in-depth.mdx @@ -27,7 +27,7 @@ As the name suggests, _AstroWind_ relies on _TailWind_ for styling. Furthermore, The styling mechanism consists of the following files (all paths are prefixed with `/src/` ): - + 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. @@ -36,12 +36,8 @@ The styling mechanism consists of the following files (all paths are prefixed wi Defines custom colors and fonts. For these to take effect in the 'base.css' file, they need to be loaded in the html header section. See next. - - 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. - - - This layout is used for all of the pages rendered by _AstroWind_. The contents of _MetaTags.astro_ component, + + This layout is used for all of the pages rendered by _AstroWind_. The contents of _tailwind.css_ and _CustomStyles.astro_ component, described above, is injected into the html header. @@ -209,56 +205,3 @@ const { subtitle = await Astro.slots.render('subtitle') } = Astro.props; 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 - - - - - - -
Note: -There's a _lot_ of duplicate (or at least very similar code) in the following components, especially as regards the _CallToAction_ mechanism -- adding to a lot of confusion and something of a maintenance headache: - -
- src/components/widgets/Hero.astro src/components/widgets/Steps2.astro src/components/widgets/CallToAction.astro - src/components/widgets/Hero2.astro src/pages/landing/startup.astro -
- -Seems like this could be cleaned up. - -
- -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 ---- - -
- ... - { - typeof callToAction === 'string' ? ( - - ) : ( - callToAction && - callToAction.text && - callToAction.href && ( -
- - {callToAction.icon && } - {callToAction.text} - -
- ) - ) - } -
-``` - -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 as an object and then members of the object are assigned to various -html elements.