fix(content): distinguish prose links from CTA buttons

- add reusable Link and Button MDX components
- convert source-verified page CTAs to explicit buttons
- match live-site prose link styling and CTA destinations
- document link, button, and extraction authoring rules
This commit is contained in:
2026-06-08 19:50:07 -07:00
parent 4b23bff789
commit e51f2133ef
12 changed files with 186 additions and 21 deletions
+39 -2
View File
@@ -173,6 +173,42 @@ Article content goes here.
Set `draft: true` while preparing unpublished content.
### Links And Buttons
Use normal Markdown links for links within prose:
```md
Read the [ABA therapy guide](/aba-therapy) for more information.
```
Prose links render as the live site's orange inline links. Do not place an
ordinary Markdown link on its own line merely to make it look like a button.
Use `.mdx` and the `Button` component only for a source-verified call to action:
```mdx
import Button from '../../../components/Button.astro';
<Button href="/client-consultation">Request an Appointment</Button>
<Button href="/services" variant="outlined">Explore Services</Button>
<Button href="https://example.com" target="_blank">External Action</Button>
```
Available `Button` variants are `filled` (default), `outlined`, and `light`.
Available sizes are `default` and `small`. A `_blank` target automatically adds
`rel="noopener noreferrer"`.
Use the optional `Link` component only when an inline link needs an explicit
variant or target:
```mdx
import Link from '../../../components/Link.astro';
<Link href="/library" variant="strong">Browse the library</Link>
```
Normal Markdown links remain preferred for ordinary page and article content.
### Front Matter CMS
The project includes `frontmatter.json` for the Front Matter CMS VS Code
@@ -302,8 +338,9 @@ npm run audit:blog
Extraction regenerates content files, copied assets, and inventories. Review
the complete Git diff before accepting it. Extraction may recreate FAQ-bearing
posts as Markdown; restore their `FAQAccordion` MDX blocks before accepting the
result. `npm run audit:blog` reports plain Markdown FAQ sections.
posts and CTA-bearing pages as Markdown; restore their `FAQAccordion` and
`Button` MDX blocks before accepting the result. `npm run audit:blog` reports
plain Markdown FAQ sections.
## Reports And Utilities
+70
View File
@@ -0,0 +1,70 @@
---
interface Props {
href: string;
variant?: 'filled' | 'outlined' | 'light';
size?: 'default' | 'small';
target?: '_blank' | '_self';
rel?: string;
class?: string;
}
const {
href,
variant = 'filled',
size = 'default',
target,
rel = target === '_blank' ? 'noopener noreferrer' : undefined,
class: className
} = Astro.props;
---
<a
class:list={['content-button', `content-button--${variant}`, { 'content-button--small': size === 'small' }, className]}
href={href}
target={target}
rel={rel}
>
<slot />
</a>
<style>
.content-button {
background: var(--color-accent);
border: 2px solid var(--color-accent);
border-radius: 4px;
color: var(--color-primary);
display: inline-block;
font-weight: 400;
line-height: 1.5;
padding: .8rem 1.2rem;
text-decoration: none;
}
.content-button:hover,
.content-button:focus-visible {
background: transparent;
border-color: var(--color-accent-strong);
color: var(--color-primary);
}
.content-button--outlined {
background: transparent;
}
.content-button--outlined:hover,
.content-button--outlined:focus-visible {
background: rgb(37 64 128 / 4%);
border-color: var(--color-primary);
}
.content-button--light {
background: white;
border-color: white;
color: var(--color-primary-dark);
}
.content-button--small {
font-size: .9rem;
padding: .5rem 1rem;
}
</style>
+42
View File
@@ -0,0 +1,42 @@
---
interface Props {
href: string;
variant?: 'default' | 'strong';
target?: '_blank' | '_self';
rel?: string;
class?: string;
}
const {
href,
variant = 'default',
target,
rel = target === '_blank' ? 'noopener noreferrer' : undefined,
class: className
} = Astro.props;
---
<a
class:list={['content-link', { 'content-link--strong': variant === 'strong' }, className]}
href={href}
target={target}
rel={rel}
>
<slot />
</a>
<style>
.content-link {
color: var(--color-accent-strong);
text-decoration: none;
}
.content-link:hover,
.content-link:focus-visible {
color: var(--color-accent);
}
.content-link--strong {
font-weight: 700;
}
</style>
@@ -7,6 +7,9 @@ lang: "en"
translationKey: "aba-therapy"
draft: false
---
import Button from '../../../components/Button.astro';
## ABA Therapy
The Arizona Institute for Autism offers a variety of evidence-based, clinical services for children who have been diagnosed with Autism Spectrum Disorder or other related developmental disorders. Depending on your individual preference as well as your child's specific needs, some of our comprehensive clinical services are conducted in our institute with a focus on helping your child attain a better quality of life & and a greater sense of independence.
@@ -47,7 +50,7 @@ Our goal is to empower families with the knowledge, tools, and support they need
These consultations provide parents with personalized guidance, training, and strategies tailored to their childs unique needs.
[Make an Appointment](/client-consultation)
<Button href="https://form.jotform.com/231638510219149" target="_blank">Make an Appointment</Button>
## About Rula Diab, Chief Clinical Director, BCBA, LBA
@@ -7,6 +7,9 @@ lang: "en"
translationKey: "autism-evaluations"
draft: false
---
import Button from '../../../components/Button.astro';
## Autism Evaluations
At the Arizona Institute for Autism, there is no single lab test to diagnose autism. Instead, our team conducts comprehensive evaluations through a series of observations and assessments to understand the underlying causes of your child's symptoms.
@@ -47,4 +50,4 @@ ADOS is a structured evaluation tool used by our specialists to assess behaviors
This evaluation involves observing how your child interacts with various play-based social scenarios. For younger children, this may include activities like playing with blocks or having a snack, while older children who communicate verbally may participate in conversations about daily activities, such as attending school.
[Make an Appointment](/client-consultation)
<Button href="https://form.jotform.com/231638510219149" target="_blank">Make an Appointment</Button>
@@ -7,13 +7,16 @@ lang: "en"
translationKey: "careers"
draft: false
---
import Button from '../../../components/Button.astro';
## Join the AIA Team
Apply to join the Arizona Institute for Autism (AIA) team today. We are on a mission to improve special education and strengthen communities throughout Arizona.
Our talented and passionate employees are a critical piece to the high-quality Autism services we provide along with our commitment to behavioral health, school solutions, and community outreach.
[View Open Positions](https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs)
<Button href="https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs" target="_blank">View Open Positions</Button>
### Our Benefits
@@ -105,7 +108,7 @@ Work someone you love. Begin your journey with Arizona's leading ABA Integrated
![logo-BACB](/assets/images/logo-BACB.png)
[View Open Positions](https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs)
<Button href="https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs" target="_blank">View Open Positions</Button>
## Benefits of Working at Arizona Institute for Autism
@@ -167,4 +170,4 @@ Take a fresh and innovative approach as a member of the Corporate team. Take on
Our specialty interns help shape the future of our center carefully curated clinical, operations, advocacy, people, and other departments.
[View Open Positions](https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs)
<Button href="https://www.indeed.com/cmp/Arizona-Institute-For-Autism/jobs" target="_blank">View Open Positions</Button>
@@ -7,6 +7,9 @@ lang: "en"
translationKey: "faqs"
draft: false
---
import Button from '../../../components/Button.astro';
## FAQs
## From Questions to Confidence!
@@ -765,4 +768,4 @@ We hope this FAQ gives you a clear picture of how Applied Behavior Analysis (ABA
To meet diagnostic criteria for ASD, a child must have persistent deficits in each of three areas of social communication and interaction plus at least two of four types of restricted repetitive behaviors. Consult with a Client Advocate today to receive individual and family support!
[Request an Appointment](/client-consultation)
<Button href="/client-consultation">Request an Appointment</Button>
@@ -7,6 +7,9 @@ lang: "en"
translationKey: "learner-social-club"
draft: false
---
import Button from '../../../components/Button.astro';
## Learner Social Club
Every child needs opportunities to have fun, make friends, and build social connections while developing valuable skills. The Learner Social Club is designed specifically to support your learners emotional and social well-being through engaging, evidence-based enrichment activities.
@@ -57,4 +60,4 @@ Interested in Trying Out Our Program?
Get a 1-Day Trial Pass by emailing us at info [at] azinstitute4autism [dot] com .
[Enroll Now](/client-consultation)
<Button href="https://form.jotform.com/231638510219149" target="_blank">Enroll Now</Button>
@@ -7,9 +7,8 @@ lang: "en"
translationKey: "services"
draft: false
---
Discover More
[Get Started](/client-consultation)
import Button from '../../../components/Button.astro';
- [Home](/)
@@ -41,7 +40,7 @@ The Arizona Institute for Autism helps with Autism Evaluations and Diagnostic Sc
Approximately 1 in 36 children in the United States will receive an autism diagnosis each year. If your child exhibits any of the behaviors listed above, it is possible that he or she may be diagnosed on the autism spectrum. Diagnosing children with Autism Spectrum Disorder can be challenging and complex. The most important thing you can do is consult a professional if you think your child is displaying atypical behavior.
[Consult with a Client Advocate](/client-consultation)
<Button href="/client-consultation">Consult with a Client Advocate</Button>
## Our Services
@@ -57,4 +56,4 @@ Arizona Institute for Autism (AIA) offers a comprehensive range of services tail
To meet diagnostic criteria for ASD, a child must have persistent deficits in each of three areas of social communication and interaction plus at least two of four types of restricted repetitive behaviors. Consult with a Client Advocate today to receive individual and family support!
[Get a Free Consultation](/client-consultation)
<Button href="/client-consultation">Get a Free Consultation</Button>
@@ -7,6 +7,9 @@ lang: "es"
translationKey: "learner-social-club"
draft: false
---
import Button from '../../../components/Button.astro';
## Learner Social Club
Todo niño necesita oportunidades para divertirse, hacer amigos y crear conexiones sociales mientras desarrolla habilidades valiosas. Learner Social Club está diseñado específicamente para apoyar el bienestar emocional y social de su hijo/a mediante actividades de enriquecimiento atractivas y basadas en evidencia.
@@ -57,4 +60,4 @@ Learner Social Club actualmente atiende a jóvenes de 8 a 17 años . Nuestras op
Obtenga un pase de prueba de 1 día enviándonos un correo electrónico a info [at] azinstitute4autism [dot] com .
[Enroll Now](/es/client-consultation)
<Button href="https://form.jotform.com/231638510219149" target="_blank">Enroll Now</Button>
@@ -7,9 +7,8 @@ lang: "es"
translationKey: "services"
draft: false
---
Discover More
[Get Started](/es/client-consultation)
import Button from '../../../components/Button.astro';
- [Inicio](/)
@@ -41,7 +40,7 @@ El Instituto de Autismo de Arizona ayuda con evaluaciones de autismo y cribados
Aproximadamente 1 de cada 36 niños en los Estados Unidos recibirá un diagnóstico de autismo cada año. Si su hijo presenta alguno de los comportamientos enumerados anteriormente, es posible que le diagnostiquen un trastorno del espectro autista. Diagnosticar a niños con Trastorno del Espectro Autista puede ser desafiante y complejo. Lo más importante que puedes hacer es consultar a un profesional si crees que tu hijo muestra un comportamiento atípico.
[Consulte con un Defensor del Cliente](/es/client-consultation)
<Button href="/es/client-consultation">Consulte con un Defensor del Cliente</Button>
## Nuestros Servicios
@@ -57,4 +56,4 @@ El Instituto de Autismo de Arizona (AIA) ofrece una amplia gama de servicios ada
Para cumplir los criterios diagnósticos de TEA, un niño debe tener déficits persistentes en cada una de las tres áreas de comunicación e interacción social, además de al menos dos de los cuatro tipos de comportamientos repetitivos restringidos. ¡Consulte hoy mismo a un Defensor del Cliente para recibir apoyo individual y familiar!
[Programe una consulta gratuita](/es/client-consultation)
<Button href="/es/client-consultation">Programe una consulta gratuita</Button>
+3 -3
View File
@@ -1,14 +1,14 @@
.prose { padding-block: var(--space-xl); }
.prose h2, .prose h3 { margin-top: 2em; }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-lg); }
.prose a { overflow-wrap: anywhere; }
.prose a { overflow-wrap: anywhere; text-decoration: none; }
.prose p a, .prose td a { color: var(--color-accent-strong); text-decoration: none; }
.prose p a:hover, .prose p a:focus-visible, .prose td a:hover, .prose td a:focus-visible { color: var(--color-accent); }
.blog-post-body blockquote { background: var(--color-tint); border: 0; border-radius: 16px; color: var(--color-primary); margin: 0 auto 2.5rem; max-width: 767px; padding: 45px; position: relative; z-index: 0; }
.blog-post-body blockquote::before { background-image: url('/assets/images/blockquote.svg'); content: ""; display: block; height: 41px; inset-inline-start: 6px; position: absolute; top: 22px; width: 50px; z-index: -1; }
.blog-post-body blockquote p { color: var(--color-primary); margin: 0 0 1.55rem; }
.source-page { max-width: 980px; }
.source-page > h2:first-of-type { margin-top: 0; }
.source-page > p > a:only-child { background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 4px; color: var(--color-primary); display: inline-block; font-weight: 700; padding: .65rem 1.2rem; text-decoration: none; }
.source-page > p > a:only-child:hover { background: transparent; border-color: var(--color-accent-strong); }
.service-page > p > img, .service-page > img { float: right; margin: .5rem 0 1.5rem 2rem; max-height: 230px; max-width: 300px; object-fit: cover; }
.service-page h3 { font-size: 2rem; }
.service-page h3 + p { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin-bottom: -.8rem; }