From e6dce66fdfc65e239b7d8c4ed0030566a0ea12db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Sanz?= Date: Thu, 9 Jun 2022 15:39:20 +0200 Subject: [PATCH 1/2] Converted bullet points from Importing Markdown section into subsections. Fixes #669 --- src/pages/en/guides/markdown-content.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/en/guides/markdown-content.md b/src/pages/en/guides/markdown-content.md index 60f6ab4c7e48a..c2b5a8ed417c1 100644 --- a/src/pages/en/guides/markdown-content.md +++ b/src/pages/en/guides/markdown-content.md @@ -210,7 +210,7 @@ author: Leon ## Importing Markdown -You can import Markdown files directly into your Astro files! You can import one specific page with `import` or multiple pages with `Astro.glob()`. +You can import Markdown files directly into your Astro files! You can import one specific page with `import` or multiple with `Astro.glob()`. ```astro --- @@ -307,7 +307,7 @@ const posts = await Astro.glob('./posts/**/*.md'); #### `Content` -A component that returns the full rendered contents of the Markdown file. Here is an example: +A component that renders the contents of the Markdown file. Here is an example: ```astro --- From 2ef21f44c4b3c2cbce8e181313dc8bae588daec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Sanz?= Date: Fri, 17 Jun 2022 18:04:39 +0200 Subject: [PATCH 2/2] Renamed getHeaders() to getHeadings(), according to RFC #208. Depends on astro/#3627 --- public/index.css | 39 ++++++++++++------- src/components/PageContent/PageContent.astro | 21 +++++++++- .../RightSidebar/RightSidebar.astro | 17 +++++++- .../RightSidebar/TableOfContents.tsx | 13 ++++++- src/pages/en/guides/markdown-content.md | 12 ++++-- src/pages/en/reference/api-reference.md | 2 +- 6 files changed, 82 insertions(+), 22 deletions(-) diff --git a/public/index.css b/public/index.css index 017a715e32960..3158067939aad 100644 --- a/public/index.css +++ b/public/index.css @@ -507,13 +507,13 @@ h2.heading { margin-top: 1.5rem; } -.header-link { +.heading-link { font-size: 1rem; padding: 0.1rem 0 0.1rem 0; transition: border-inline-start-color 100ms ease-out, background-color 200ms ease-out; } -.header-link a { +.heading-link a { display: inline-flex; gap: 0.5em; width: 100%; @@ -522,40 +522,40 @@ h2.heading { text-decoration: none; } -.header-link:hover, -.header-link:focus, -.header-link:focus-within { +.heading-link:hover, +.heading-link:focus, +.heading-link:focus-within { border-inline-start-color: var(--theme-accent-secondary); } -.header-link:hover a, -.header-link a:focus { +.heading-link:hover a, +.heading-link a:focus { color: var(--theme-text); text-decoration: underline; } -.header-link svg { +.heading-link svg { opacity: 0.6; } -.header-link:hover svg { +.heading-link:hover svg { opacity: 0.8; } -.header-link.depth-3 { +.heading-link.depth-3 { padding-inline-start: 1rem; } -.header-link.depth-4 { +.heading-link.depth-4 { padding-inline-start: 2rem; } /* Add line and padding on the left side */ -.header-link { +.heading-link { padding-inline-start: 1rem; border-inline-start: 3px solid var(--theme-divider); } -.header-link.depth-3 { +.heading-link.depth-3 { padding-inline-start: 2rem; } -.header-link.depth-4 { +.heading-link.depth-4 { padding-inline-start: 3rem; } @@ -565,7 +565,7 @@ h2.heading { padding-left: calc(1rem + 4px); } - .header-link { + .heading-link { border-inline-start-width: 4px; } } @@ -577,9 +577,18 @@ h2.heading { outline: 1px solid transparent; } +<<<<<<< HEAD @media (forced-colors: active) { .current-header-link { border: 1px solid CanvasText; +======= + /* Highlight TOC heading link matching the current scroll position */ + .current-heading-link { + background-color: var(--theme-bg-accent); + } + .current-heading-link a { + color: var(--theme-text); +>>>>>>> 5645c1c (Renamed getHeaders() to getHeadings(), according to RFC #208. Depends on astro/#3627) } } diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index bc72ef1ab00f1..4d1262b366d0f 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -4,12 +4,18 @@ import TableOfContents from '../RightSidebar/TableOfContents'; import { getNav, useTranslations } from "../../i18n/util"; import { getLanguageFromURL } from '../../util'; +<<<<<<< HEAD const { content, currentPage } = Astro.props; // We wrap `@astrojs/` in a span to style it separately on integration pages. const title = content.title.replace('@astrojs/', '@astrojs/'); const headers = content.astro?.headers; +======= +const { content, currentPage, isFallback } = Astro.props; +const title = content.title; +const headings = content.astro?.headings; +>>>>>>> 5645c1c (Renamed getHeaders() to getHeadings(), according to RFC #208. Depends on astro/#3627) const lang = getLanguageFromURL(Astro.canonicalURL.pathname); -const links = (await getNav(Astro)).filter((x) => !('header' in x) && x.slug) as { text: string; slug: string; }[]; +const links = (await getNav(Astro)).filter((x) => !('heading' in x) && x.slug) as { text: string; slug: string; }[]; const index = links.findIndex((x) => currentPage.includes(x.slug)); const makeLinkItem = ({ text, slug }) => ({ text, link: `/${lang}/${slug}/` }); let next, previous; @@ -37,6 +43,19 @@ const t = useTranslations(Astro);

+<<<<<<< HEAD +======= + {isFallback && } + {headings && ( + + )} +>>>>>>> 5645c1c (Renamed getHeaders() to getHeadings(), according to RFC #208. Depends on astro/#3627)

{(previous || next) && ( diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro index a12047f59b231..853e6c968659f 100644 --- a/src/components/RightSidebar/RightSidebar.astro +++ b/src/components/RightSidebar/RightSidebar.astro @@ -7,9 +7,10 @@ import { useTranslations } from "../../i18n/util"; const t = useTranslations(Astro); const { content, githubEditUrl } = Astro.props; -const headers = content.astro?.headers; +const headings = content.astro?.headings; --- +<<<<<<< HEAD