@astropub/doc
Advanced tools
Astro Doc lets you create document layouts with minimal markup in Astro.
You write this:
---
import Document from '@astropub/doc'
---
<Document title="Astro Doc" body-class="p-body">
<h1>
Astro Doc
</h1>
<p>
The HTML, HEAD, and BODY tags are all set.
</p>
</Document>
You get this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Astro Doc</title>
<meta name="viewport" content="width=device-width" />
<meta name="disabled-adaptations" content="watch" />
<meta property="og:title" content="Astro Doc" />
</head>
<body class="p-body">
<h1>
Astro Doc
</h1>
<p>
The HTML, HEAD, and BODY tags are all set.
</p>
</body>
</html>
Install Astro Doc to your project.
npm install @astropub/doc
Use Astro Doc components in your project.
---
import Document from '@astropub/doc'
---
<Document>
<p>
The HTML, HEAD, and BODY tags are all set.
</p>
</Document>
You get this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="disabled-adaptations" content="watch" />
</head>
<body>
<p>
The HTML, HEAD, and BODY tags are all set.
</p>
</body>
</html>
Defines the title of the document, without any additional taglines.
<meta property="og:title" content={title} />
Defines the summary of the content of the current document.
<meta name="description" content={description} />
Defines the title of the site, without any additional taglines.
<meta property="og:site_name" content={sitetitle} />
Defines the title of the document used by the tab, which may include additional taglines.
<title>{title}</title>
Defines the category or type of the current document. By default, this is webpage.
<meta property="og:type" content={type} />
Defines the canonical URL of the current document. By default, this is the value of Astro.url. If the URL does not include a protocol or domain, it will be resolved against Astro.site.
<meta property="og:url" content={resolvedURL(url)} />
Defines the URL of the image representing the current document. If the URL does not include a protocol or domain, it will be resolved against Astro.site.
<meta property="og:image" content={resolvedURL(imageurl)} />
Defines the description for the image representing the current document.
<meta property="og:image:alt" content={imagealt} />
Defines the summary card used by Twitter. By default, this is summary_large_image if imageurl is defined.
<meta name="twitter:card" content={twittercard} />
Note: This is the only embedded attribute not shared across social networks.
How search engines should follow the current document.
<meta name="robots" content={robots} />
Defines the area through which the document is viewed.
<meta name="viewport" content={viewport} />
Defines whether the website is compatible without adaptations smaller viewports.
<meta name="disabled-adaptations" content={disabledadaptations} />
Defines the image used by the website to represent the current document in some browser tabs, browser history views, toolbar apps, bookmarks dropdowns, search bars, and search bar recommendations. The type will be automatically detected.
<link rel="icon" href={icon} type={resolvedIconType(icon)} />
Defines the image used by common handheld devices, such as Apple or Android phones. Presently, the size is hard-coded to 180x180.
<link rel="apple-touch-icon" sizes="180x180" href={touchicon} />
Defines the character encoding for the document. By default, this is utf-8.
<meta charset={charset} />
Additional elements may be placed in the <head> tag thru use of the head slot.
---
import Document from '@astropub/doc'
---
<Document title="Astro Doc" body-class="p-body">
<meta slot="head" name="twitter:creator" content="@jon_neal" />
<link slot="head" rel="alternate" type="application/rss+xml" title="Blog" href="/blog.xml" />
<h1>
Astro Doc
</h1>
<p>
The HTML, HEAD, and BODY tags are all set.
</p>
</Document>
FAQs
Create document layouts with minimal markup in Astro
The npm package @astropub/doc receives a total of 9 weekly downloads. As such, @astropub/doc popularity was classified as not popular.
We found that @astropub/doc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.