what is the best way to make one file appear in two directories

Question

I'm trying to develop a CSS library where I style each element on an example HTML page.

However, I came across those two elements (<cite> <blockquote>) whose examples must be shared with since they are always used together. Here is the example code:

<blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    <footer>
        First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html"><i>Nineteen Eighty-Four</i></a></cite> by George Orwell (Part 1, Chapter 1).
    </footer>
</blockquote>

(Code by MDN contributors, page link above.)

Thus, to demonstrate those two elements, I have to place examples into two directories which look like this:

+-- cite
    +-- index.css
    +-- index.html
+-- blockquote
    +-- index.css
    +-- index.html

Thus, I am generating duplicate code which I want to avoid since I will need to update those examples in the future when, let's say, MDN docs change. Of course, there's more to it.

I have researched the StackExchange network and surprised to not find a question asking about this, so I must have not used the correct keywords. Please suggest.

Since this question is not specific about HTML, I'm not appending any tags.

Please help me on what is the best way to make one file appear in two directories. If that is not possible, maybe limiting it to only files of some types would help.

If that is still not possible, I'd like to know the best way to handle this.

Answer 1

Symlinks are usually the only way to have the same file appear within two directories; well, except hardlinks, of course, but hardlinks are not portable and not useful across multiple storage volumes. I don't know of any other way how this should be possible and if there is no other way at all, then the question of the "best way" does not even arise.

The only question that may arise is whether it is really required to have the same file appear within two directories or if there is an alternative way that doesn't even have this requirement. From server side includes on a webserver up to a simple solution as having an index page just link both tags to the same sample page, there are dozen of possibilities thinkable. I would go for the last option:

<a href="blockquote-cite-sample.hmtl>Blockquote</a><br>
<a href="blockquote-cite-sample.hmtl>Cite</a>

Answer 2

I would use a templating engine or a preprocessor which can include text (or html) blocks. There are about a dozen examples here: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

Answer 3

Two separate documentation pages on two different tags should generally not be exactly the same. One page should explain the purpose of the blockquote, the other should explain the tag. The example itself may be the same, but the surrounding description should not be.

This is already the case on the two MDN pages you linked. While the example HTML is structurally the same, most of the information on the page is not.

If you are convinced that these two element are completely inseparable and it's impossible to explain one without explaining the other, then the pages shouldn't be separated to begin with.

It makes little sense to at the same time argue that the elements are completely inseparable (even from a documentative point of view) yet also that they should appear as separate entries in the table of contents.