feat(theme): support title-less custom containers

Adds a special handling for the no-title attribute on the container,
which skips rendering the title, alowing for titleless containers.
The styles are updated as well to remove the excessive padding for such
containers.

Author: brawaru

docs/en/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 VitePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in [Markdown](https://en.wikipedia.org/wiki/Markdown), applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 Just want to try it out? Skip to the [Quickstart](./getting-started).
-
-</div>
+:::
 
 ## Use Cases
 

docs/es/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) diseñado para construir sitios web rápidos y enfocados en el contenido. En pocas palabras, VitePress toma tu contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), le aplica un tema y genera páginas HTML estáticas que se pueden desplegar fácilmente en cualquier lugar.
 
-<div class="tip custom-block" style="padding-top: 8px">
-  
+::: tip {no-title}
 ¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started).
-
-</div>
+:::
 
 ## Casos de Uso {#use-cases}
 

docs/fa/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند.
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید.
-
-</div>
+:::
 
 ## موارد استفاده {#use-cases}
 

docs/ko/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다.
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요.
-
-</div>
+:::
 
 ## 사용 사례 {#use-cases}
 

docs/pt/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 O VitePress é um [Gerador de Site Estático](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) projetado para criar sites rápidos e centrados em conteúdo. Em suma, VitePress utiliza seu conteúdo-fonte escrito em [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica um tema a ele e gera páginas HTML estáticas que podem ser facilmente implantadas em qualquer lugar.
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 Quer apenas experimentar? Pule para o [Início Rápido](./getting-started).
-
-</div>
+:::
 
 ## Casos de Uso {#use-cases}
 

docs/ru/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 VitePress — это [Генератор статических сайтов](https://en.wikipedia.org/wiki/Static_site_generator) (ГСС), предназначенный для быстрого создания сайтов, ориентированных на контент. В двух словах, VitePress берёт ваш исходный контент, написанный в [Markdown](https://ru.wikipedia.org/wiki/Markdown), применяет к нему тему и генерирует статические HTML-страницы, которые можно легко развернуть в любом месте.
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started).
-
-</div>
+:::
 
 ## Примеры использования {#use-cases}
 

docs/zh/guide/what-is-vitepress.md

@@ -2,11 +2,9 @@
 
 VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
 
-<div class="tip custom-block" style="padding-top: 8px">
-
+::: tip {no-title}
 只是想尝试一下？跳到[快速开始](./getting-started)。
-
-</div>
+:::
 
 ## 使用场景 {#use-cases}
 

src/client/theme-default/styles/components/custom-block.css

@@ -1,12 +1,16 @@
 .custom-block {
   border: 1px solid transparent;
   border-radius: 8px;
-  padding: 16px 16px 8px;
+  padding: 8px 16px;
   line-height: 24px;
   font-size: var(--vp-custom-block-font-size);
   color: var(--vp-c-text-2);
 }
 
+.custom-block:has(.custom-block-title) {
+  padding-top: 16px;
+}
+
 .custom-block.info {
   border-color: var(--vp-custom-block-info-border);
   color: var(--vp-custom-block-info-text);

src/node/markdown/plugins/containers.ts

@@ -28,6 +28,12 @@ export const containerPlugin = (
 
 type ContainerArgs = [typeof container, string, { render: RenderRule }]
 
+function attrPop(token: Token, name: string) {
+  const idx = token.attrIndex(name)
+  if (idx < 0) return null
+  return token.attrs!.splice(idx, 1)[0][1]
+}
+
 function createContainer(
   klass: string,
   defaultTitle: string,
@@ -38,10 +44,16 @@ function createContainer(
     klass,
     {
       render(tokens, idx, _options, env: MarkdownEnv & { references?: any }) {
+        const containerTipToken = tokens.find(
+          ({ type }) => type === 'container_tip_open'
+        )
+        const skipTitle =
+          containerTipToken && attrPop(containerTipToken, 'no-title') === ''
         const token = tokens[idx]
         if (token.nesting === 1) {
           token.attrJoin('class', `${klass} custom-block`)
           const attrs = md.renderer.renderAttrs(token)
+          if (skipTitle && klass !== 'details') return `<div ${attrs}>\n`
           const info = token.info.trim().slice(klass.length).trim()
           const title = md.renderInline(info || defaultTitle, {
             references: env.references