/
index.html
153 lines (153 loc) · 7.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>References</title>
<meta content="Matheus Avellar" name="author">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1> References Web Component </h1>
<p>
Check out the repository at <a href="https://github.com/MatheusAvellar/references-webcomponent">github.com/MatheusAvellar/references-webcomponent</a>.
</p>
</header>
<main>
<h2> What is this? </h2>
<p>
This is an experimental pair of Web Components for citing and referencing
sources in a wiki-like manner.
</p>
<hr>
<h3>cite-web</h3>
<p>
To cite documents, the <code>cite-web</code> element is used:
</p>
<pre>
<span class="tag"><cite-web</span>
<span class="attr">url</span>=<span class="str">"https://en.wikipedia.org/wiki/Wikipedia:Citing_sources"</span>
<span class="attr">author</span>=<span class="str">"Wikipedia Collaborators"</span>
<span class="attr">title</span>=<span class="str">"Wikipedia:Citing sources"</span>
<span class="attr">publisher</span>=<span class="str">"Wikipedia"</span>
<span class="attr">location</span>=<span class="str">"United States"</span>
<span class="attr">date</span>=<span class="str">"2021-08-18"</span>
<span class="attr">access-date</span>=<span class="str">"2021-08-31"</span><span class="tag">></cite-web></span></pre>
<p>
That generates the following inline citation: <cite-web url="https://en.wikipedia.org/wiki/Wikipedia:Citing_sources"
author="Wikipedia Collaborators" title="Wikipedia:Citing sources"
publisher="Wikipedia" location="United States" date="2021-08-18"
access-date="2021-08-31"></cite-web> Citation IDs are automatically
incremented. Multiple inline citations for the same reference can be made,
by using the <code>name</code> attribute. First, declare it with the
attribute:
</p>
<pre>
<span class="tag"><cite-web</span>
<span class="attr">url</span>=<span class="str">"https://google.com"</span>
<span class="attr">title</span>=<span class="str">"Google Search"</span>
<span class="attr">...</span>
<span class="attr">name</span>=<span class="str">"google"</span><span class="tag">></cite-web></span></pre>
<p>
Then, to reuse that same citation, you only need the <code>name</code>
attribute, and not any other:
</p>
<pre>
<span class="tag"><cite-web</span> <span class="attr">name</span>=<span class="str">"google"</span><span class="tag">></cite-web></span></pre>
<p>
That way, the IDs won't be incremented, and all citations will point to
the same reference: declaration,<cite-web url="https://google.com"
title="Google Search" publisher="Google" name="google"></cite-web> reuse,<cite-web
name="google"></cite-web> reuse.<cite-web name="google"></cite-web>
</p>
<hr>
<h3>references-list</h3>
<p>
At the bottom of the document, the <code>references-list</code> element
must be placed to generate the list; nothing is guaranteed to work
properly if you use multiple <code>references-list</code> elements in the
same page.
</p>
<p>
The shadow DOM, used by custom elements, doesn't inherit the page's style.
To add custom styling to the <code>cite-web</code> and <code>references-list</code>
elements, simply add a <code>style</code> or <code>link</code> tag inside
the <code>references-list</code> element, with the attribute
<code>slot="style"</code>, like this:
</p>
<pre>
<span class="tag"><references-list></span>
<span class="tag"><link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="attr">href</span>=<span class="str">"./style.css"</span> <span class="attr">slot</span>=<span class="str">"style"</span><span class="tag">></span>
<span class="tag"></references-list></span></pre>
<p>
Have multiple styles? Not to worry. You can use a dummy <code>span</code>
element with <code>slot="style"</code>, and add your multiple styles there:
</p>
<pre>
<span class="tag"><references-list>
<span</span> <span class="attr">slot</span>=<span class="str">"style"</span><span class="tag">>
<link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="attr">href</span>=<span class="str">"./style.css"</span><span class="tag">>
<style></span>a[href] { color: #0645ad; }<span class="tag"></style>
</span>
</references-list></span></pre>
<p>
Styles placed inside <code>references-list</code> will be automatically
cloned to all <code>cite-web</code> elements.
</p>
<hr>
<h2> Demo </h2>
<p>
The Sun is hot.<cite-web url="https://www.nasa.gov/sun" author="Brian Dunbar"
title="The Sun | NASA" publisher="National Aeronautics and Space Administration"
date="2017-08-03" access-date="2021-08-30"></cite-web>
</p>
<p>
Lorem ipsum dolor sit amet,<cite-web name="banana" url="http://bana.na/"
title="Banana website" publisher="Banana Inc." date="2016" access-date="2021-08-30"></cite-web>
consectetur adipisicing elit,<cite-web url="http://kiwi.wiki/"
title="Kiwi Wiki" publisher="Kiwi Co." date="2011-11-11" access-date="2021-08-30"></cite-web>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.<cite-web name="banana"></cite-web>
</p>
<p>
Duis aute irure dolor in reprehenderit<cite-web name="google"></cite-web>
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,<cite-web title="The Good Book" author="Author McAuthorface"
publisher="O'Reilly" date="2010"></cite-web> sunt in culpa qui officia deserunt
mollit anim id est laborum.<cite-web name="john's book" title="Some book" author="John Junior"
publisher="Books Limited"></cite-web>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.<cite-web author="Max Maximilian"
publisher="Penguin Books" date="2001" location="São Paulo, SP, Brazil"></cite-web>
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<cite-web name="john's book"></cite-web> Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<cite-web
name="google"></cite-web><cite-web name="banana"></cite-web>
</p>
</main>
<footer>
<h2> References </h2>
<references-list>
<span slot="style">
<link rel="stylesheet" href="./style.css">
<style>a[href] { color: #0645ad; }</style>
</span>
</references-list>
</footer>
<hr>
<div style="height:90vh;display:flex;justify-content:center;align-items:center;font-style:italic">
<!-- Element used merely for spacing, so linking can be better appreciated -->
<a href="https://en.wikipedia.org/wiki/Intentionally_blank_page">This page intentionally left blank.</a>
</div>
<script src="references-wc.js"></script>
<link rel="stylesheet" href="references-noscript.css">
</body>
</html>