Switch from href to src

README.md

@@ -10,7 +10,7 @@ xm is a tiny compiler for HTML that adds
  <img src="https://user-images.githubusercontent.com/711311/90286174-9de82c80-de75-11ea-89b2-b8e0fd6c7078.png" width="50%" alt="screenshot of an html template with slots">
 </p>
 <p id="screenshot-2" align="center">
- <img src="https://user-images.githubusercontent.com/711311/90276504-4ee5cb80-de64-11ea-8ebd-99394ff66297.png" width="100%" alt="screenshot of an html page that imports the previous example and fills the slots">
+ <img src="https://user-images.githubusercontent.com/711311/93567765-7530e680-f98f-11ea-85ce-b25dba7e47f9.png" width="100%" alt="screenshot of an html page that imports the previous example and fills the slots">
 </p>
 
 xm CLI comes with a **dev mode** that compiles and serves built HTML.
@@ -48,23 +48,23 @@ Options:
 Allows to inline (import) HTML files into the current one.
 
 ```html
-<import href="file.html" />
+<import src="file.html" />
 ```
 
 Paths are relative.
 
 ```html
 <!-- src/folder/index.html -->
 
-<import href="file.html" />
+<import src="file.html" />
 <!-- file.html -> src/folder/file.html -->
 ```
 
 You can prefix paths with `/` to make them absolute i.e. relative to the `--root` value.
 
 ```
 $ xm build --root ./src
-# <import href="file.html" />
+# <import src="file.html" />
 # -> ./src/file.html
 ```
 
@@ -76,7 +76,7 @@ xm supports importing `.md` (markdown) files too. When importing such files the
 <style>
  /* theme */
 </style>
-<import href="README.md" />
+<import src="README.md" />
 ```
 
 💡 This feature can be used to generate styled docs sites for your open source project!
@@ -104,7 +104,7 @@ HTML files can define `slot` elements with an attribute `name`. slots can be fil
 
 <!-- about.html -->
 
-<import href="base.html">
+<import src="base.html">
  <fill name="title">About</fill>
  <fill name="main">
  <h1>About</h1>
@@ -133,7 +133,7 @@ You can also define a special unnamed `slot` that will be filled with the `impor
 
 <!-- about.html -->
 
-<import href="base.html">
+<import src="base.html">
  <fill name="footer">good bye</fill>
  hello
  <p>friend</p>

docs.html

@@ -94,7 +94,7 @@
 </style>
 <main>
  <div>
- <import href="README.md" />
+ <import src="README.md" />
  </div>
  <footer>Powered by <a href="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/giuseppeg/xm">₪ xm</a></footer>
  <a class="fork" href="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/giuseppeg/xm"

docs/index.html

@@ -105,7 +105,7 @@ <h1 id="₪-xm---extensible-html">₪ xm - extensible HTML</h1>
  <img src="https://user-images.githubusercontent.com/711311/90286174-9de82c80-de75-11ea-89b2-b8e0fd6c7078.png" width="50%" alt="screenshot of an html template with slots">
 </p>
 <p id="screenshot-2" align="center">
- <img src="https://user-images.githubusercontent.com/711311/90276504-4ee5cb80-de64-11ea-8ebd-99394ff66297.png" width="100%" alt="screenshot of an html page that imports the previous example and fills the slots">
+ <img src="https://user-images.githubusercontent.com/711311/93567765-7530e680-f98f-11ea-85ce-b25dba7e47f9.png" width="100%" alt="screenshot of an html page that imports the previous example and fills the slots">
 </p>
 
 <p>xm CLI comes with a <strong>dev mode</strong> that compiles and serves built HTML.</p>
@@ -127,21 +127,21 @@ <h2 id="install">Install</h2>
  --output Output (destination) folder. This is necessary only when using xm build
  --htmlOnly Compile and copy only the built HTML files</code></pre><h4 id="import-element"><code>&lt;import&gt;</code> element</h4>
 <p>Allows to inline (import) HTML files into the current one.</p>
-<pre><code class="language-html">&lt;import href=&quot;file.html&quot; /&gt;</code></pre>
+<pre><code class="language-html">&lt;import src=&quot;file.html&quot; /&gt;</code></pre>
 <p>Paths are relative.</p>
 <pre><code class="language-html">&lt;!-- src/folder/index.html --&gt;
 
-&lt;import href=&quot;file.html&quot; /&gt;
+&lt;import src=&quot;file.html&quot; /&gt;
 &lt;!-- file.html -&gt; src/folder/file.html --&gt;</code></pre>
 <p>You can prefix paths with <code>/</code> to make them absolute i.e. relative to the <code>--root</code> value.</p>
 <pre><code>$ xm build --root ./src
-# &lt;import href=&quot;file.html&quot; /&gt;
+# &lt;import src=&quot;file.html&quot; /&gt;
 # -&gt; ./src/file.html</code></pre><h4 id="importing-markdown-files">Importing markdown files</h4>
 <p>xm supports importing <code>.md</code> (markdown) files too. When importing such files the front matter declarations are converted to <code>fill</code> elements.</p>
 <pre><code class="language-html">&lt;style&gt;
  /* theme */
 &lt;/style&gt;
-&lt;import href=&quot;README.md&quot; /&gt;</code></pre>
+&lt;import src=&quot;README.md&quot; /&gt;</code></pre>
 <p>💡 This feature can be used to generate styled docs sites for your open source project!</p>
 <p>If you create a reusable theme for README-like files we encourage you to use the following naming convention:</p>
 <pre><code>xm-theme-&lt;theme-name&gt;</code></pre><p>Share your site or theme URL <a href="https://github.com/giuseppeg/xm/issues/2">here</a>.</p>
@@ -157,7 +157,7 @@ <h4 id="slot-and-fill-elements"><code>&lt;slot&gt;</code> and <code>&lt;fill&gt;
 
 &lt;!-- about.html --&gt;
 
-&lt;import href=&quot;base.html&quot;&gt;
+&lt;import src=&quot;base.html&quot;&gt;
  &lt;fill name=&quot;title&quot;&gt;About&lt;/fill&gt;
  &lt;fill name=&quot;main&quot;&gt;
  &lt;h1&gt;About&lt;/h1&gt;
@@ -182,7 +182,7 @@ <h4 id="slot-and-fill-elements"><code>&lt;slot&gt;</code> and <code>&lt;fill&gt;
 
 &lt;!-- about.html --&gt;
 
-&lt;import href=&quot;base.html&quot;&gt;
+&lt;import src=&quot;base.html&quot;&gt;
  &lt;fill name=&quot;footer&quot;&gt;good bye&lt;/fill&gt;
  hello
  &lt;p&gt;friend&lt;/p&gt;

lib/posthtml-xm-import/index.js

@@ -7,7 +7,7 @@ const { match } = require("posthtml/lib/api");
 const fm = require("front-matter");
 
 const errors = {
- IMPORT_NO_HREF: '<import> has no "href"',
+ IMPORT_NO_SRC: '<import> has no "src"',
  FILL_NO_NAME: '<fill> has no "name"',
  UNEXPECTED_BLOCK: 'Unexpected block "%s"',
 };
@@ -55,13 +55,16 @@ function handleImportNodes(tree, options, messages) {
  applyPluginsToTree(tree, options.plugins),
  { tag: "import" },
  (importNode) => {
- if (!importNode.attrs || !importNode.attrs.href) {
- throw getError(errors.IMPORT_NO_HREF);
+ if (
+ !importNode.attrs ||
+ (!importNode.attrs.src && !importNode.attrs.href)
+ ) {
+ throw getError(errors.IMPORT_NO_SRC);
  }
-
- const importPath = importNode.attrs.href.startsWith("/")
- ? path.resolve(options.root, importNode.attrs.href.slice(1))
- : path.resolve(path.dirname(tree.options.from), importNode.attrs.href);
+ const url = importNode.attrs.src || importNode.attrs.href;
+ const importPath = url.startsWith("/")
+ ? path.resolve(options.root, url.slice(1))
+ : path.resolve(path.dirname(tree.options.from), url);
  const isMarkdown = importPath.endsWith(".md");
  let importedHtml = fs.readFileSync(importPath, options.encoding);
 

lib/posthtml-xm-import/package.json

@@ -1,6 +1,6 @@
 {
  "name": "posthtml-xm-import",
- "version": "0.1.0",
+ "version": "0.1.1",
  "description": "Adds support for import, slot and fill tags",
  "main": "index.js",
  "scripts": {

package.json

@@ -28,7 +28,7 @@
  "front-matter": "^4.0.2",
  "posthtml-cli": "^0.7.5",
  "posthtml-md2html": "^0.0.2",
- "posthtml-xm-import": "^0.1.0",
+ "posthtml-xm-import": "^0.1.1",
  "sirv": "^1.0.6"
  },
  "devDependencies": {

test/cases/markdown/index.html

@@ -1,5 +1,5 @@
-<import href="_base.html">
- <import href="markdown.md" />
+<import src="_base.html">
+ <import src="markdown.md" />
  <fill name="content">
  <markdown>
  # 2

test/cases/nested/nested/nested/page.html

@@ -1,8 +1,8 @@
-<import href="/nested/_base.html">
+<import src="/nested/_base.html">
  6
  <fill name="content">
  2
- <import href="_nested.html">
+ <import src="_nested.html">
  <fill name="nested">5</fill>
  4
  </import>

test/cases/simple/index.html

@@ -1,4 +1,4 @@
-<import href="_base.html">
+<import src="_base.html">
  <fill name="title">1</fill>
  3
  <fill name="content">

test/snapshot.json

@@ -7,5 +7,7 @@
  "nested/nested/nested/_nested.html": "16fa3661c54cf0d822406e6d79683fe0",
  "nested/nested/nested/page.html": "cbdf34c25e3969fec4653249d1fcc919",
  "simple/_base.html": "305317b853a0c126acf2e88eb5d15e20",
- "simple/index.html": "ee61e485389c4f5e4de7c67a52f8dbd1"
+ "simple/index.html": "ee61e485389c4f5e4de7c67a52f8dbd1",
+ "template/_base.html": "6545b9cca12a58354ad3e4b1d8589e58",
+ "template/index.html": "1892438182eaaf8541d303c7e826054a"
 }

yarn.lock

@@ -711,10 +711,10 @@ posthtml-render@^1.2.2, posthtml-render@^1.2.3:
  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.2.3.tgz#da1cf7ba4efb42cfe9c077f4f41669745de99b6d"
  integrity sha512-rGGayND//VwTlsYKNqdILsA7U/XP0WJa6SMcdAEoqc2WRM5QExplGg/h9qbTuHz7mc2PvaXU+6iNxItvr5aHMg==
 
-posthtml-xm-import@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/posthtml-xm-import/-/posthtml-xm-import-0.1.0.tgz#18fed6253dc91a961d8ce44d709aa7c7363d180e"
- integrity sha512-VILYENaMxgzdrZW7c2PzjJq/Jd1/+gUCLKoatkNJkrW4NPQsGjmlEBhvMsCYUH0v1ur4/PYrC8uktC9Cg18FkQ==
+posthtml-xm-import@^0.1.1:
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/posthtml-xm-import/-/posthtml-xm-import-0.1.1.tgz#2de5354eed7ee748191087beb166fc54f5582a7c"
+ integrity sha512-nWe4+S5351JnYVvo9lXp8yerm6OWfML15+lQ0e/r0WL6PQl2M9y3ZR3QvF+n+ur+bY7beTyCeOfitevnr3BRkQ==
 
 posthtml@^0.12.0:
  version "0.12.3"