Gathering detailed insights and metrics for @astropub/doc
Gathering detailed insights and metrics for @astropub/doc
Installations
npm install @astropub/docDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.12.1
NPM Version
8.19.2
Releases
Unable to fetch releases
Languages
2
Astro
JavaScript
Astro (67.61%)
JavaScript (32.39%)
Developer
astro-community
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
5 Stars
5 Commits
2 Watchers
1 Branches
5 Contributors
Updated on Sep 17, 2024
Maintainers
1
Package Meta Information
Latest Version
0.1.4
Package Id
@astropub/doc@0.1.4
Unpacked Size
21.25 kB
Size
7.09 kB
File Count
9
NPM Version
8.19.2
Node Version
18.12.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
Astro Doc
Astro Doc lets you create document layouts with minimal markup in Astro.
You write this:
1--- 2import Document from '@astropub/doc' 3--- 4<Document title="Astro Doc" body-class="p-body"> 5 <h1> 6 Astro Doc 7 </h1> 8 <p> 9 The HTML, HEAD, and BODY tags are all set. 10 </p> 11</Document>
You get this:
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Astro Doc</title> 6 <meta name="viewport" content="width=device-width" /> 7 <meta name="disabled-adaptations" content="watch" /> 8 <meta property="og:title" content="Astro Doc" /> 9 </head> 10 <body class="p-body"> 11 <h1> 12 Astro Doc 13 </h1> 14 <p> 15 The HTML, HEAD, and BODY tags are all set. 16 </p> 17 </body> 18</html>
Usage
Install Astro Doc to your project.
1npm install @astropub/doc
Use Astro Doc components in your project.
1--- 2import Document from '@astropub/doc' 3--- 4<Document> 5 <p> 6 The HTML, HEAD, and BODY tags are all set. 7 </p> 8</Document>
You get this:
1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width" /> 6 <meta name="disabled-adaptations" content="watch" /> 7 </head> 8 <body> 9 <p> 10 The HTML, HEAD, and BODY tags are all set. 11 </p> 12 </body> 13</html>
Features
Embedded Attributes
title
Defines the title of the document, without any additional taglines.
1<meta property="og:title" content={title} />
description
Defines the summary of the content of the current document.
1<meta name="description" content={description} />
sitetitle
Defines the title of the site, without any additional taglines.
1<meta property="og:site_name" content={sitetitle} />
tabtitle
Defines the title of the document used by the tab, which may include additional taglines.
1<title>{title}</title>
type
Defines the category or type of the current document. By default, this is webpage.
1<meta property="og:type" content={type} />
url
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.
1<meta property="og:url" content={resolvedURL(url)} />
imageurl
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.
1<meta property="og:image" content={resolvedURL(imageurl)} />
imagealt
Defines the description for the image representing the current document.
1<meta property="og:image:alt" content={imagealt} />
twittercard
Defines the summary card used by Twitter. By default, this is summary_large_image if imageurl is defined.
1<meta name="twitter:card" content={twittercard} />
Note: This is the only embedded attribute not shared across social networks.
robots
How search engines should follow the current document.
1<meta name="robots" content={robots} />
Application Attributes
viewport
Defines the area through which the document is viewed.
1<meta name="viewport" content={viewport} />
disabledadaptations
Defines whether the website is compatible without adaptations smaller viewports.
1<meta name="disabled-adaptations" content={disabledadaptations} />
icon
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.
1<link rel="icon" href={icon} type={resolvedIconType(icon)} />
touchicon
Defines the image used by common handheld devices, such as Apple or Android phones. Presently, the size is hard-coded to 180x180.
1<link rel="apple-touch-icon" sizes="180x180" href={touchicon} />
charset
Defines the character encoding for the document. By default, this is utf-8.
1<meta charset={charset} />
Head Slot
Additional elements may be placed in the <head> tag thru use of the head slot.
1--- 2import Document from '@astropub/doc' 3--- 4<Document title="Astro Doc" body-class="p-body"> 5 <meta slot="head" name="twitter:creator" content="@jon_neal" /> 6 <link slot="head" rel="alternate" type="application/rss+xml" title="Blog" href="/blog.xml" /> 7 8 <h1> 9 Astro Doc 10 </h1> 11 <p> 12 The HTML, HEAD, and BODY tags are all set. 13 </p> 14</Document>
No vulnerabilities found.
No security vulnerabilities found.