mlaga97/QRnZine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Version 0.2

Browse source
This commit is contained in:
Lauren Lagarde 2025-02-24 23:27:17 -06:00
parent 5e35cecf7b
commit 5ed70c7c7c
18 changed files with 186 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

49
back.svg
View file

@ -1,49 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="1100" viewBox="0 0 850 1100">
<g transform='rotate(90) translate(10 -415)'>
<image href="i1.png" width="255"/>
<image href="t1.png" width="255" x="275"/>
<image href="t2.png" width="255" x="550"/>
<image href="c1.png" width="255" x="825"/>
<foreignObject y="253" x="10" width="235" height="255">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Instructions</b><br/>
Scan the QR code above and paste the contents into the address bar of a web browser like Firefox, Chrome, or Edge to get started<br/>
</div>
</foreignObject>
<text x="285" y="275">./back.svg</text>
<text x="285" y="295">./build.sh</text>
<text x="560" y="275">./front.svg</text>
<text x="560" y="295">./readme.html</text>
<text x="835" y="275">./fc.svg</text>
<text x="835" y="295">./bc.svg</text>
</g>
<g transform='translate(440 30)'>
<text>Using QRnZine v0.1 For Self-replication</text>
<text y="20">https://github.com/mlaga97/QRnZine</text>
</g>
<g transform='rotate(-90) translate(-1090 435)'>
<image href="c2.png" width="255"/>
<image href="c3.png" width="255" x="275"/>
<image href="c4.png" width="255" x="550"/>
<text x="10" y="275">./p1.svg</text>
<text x="10" y="295">./p2.svg</text>
<text x="285" y="275">./p3.svg</text>
<text x="285" y="295">./p4.svg</text>
<text x="560" y="275">./p5.svg</text>
<text x="560" y="295">./p6.svg</text>
</g>
<g stroke='#DDDDDD' fill='none'>
<rect width="850" height="550"/>
<rect width="850" height="550" y="275"/>
<rect width="850" height="1100"/>
<rect width="425" height="1100"/>
</g>
<line x1="425" y1="275" x2="425" y2="825" stroke='black'/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

10
bc.svg
View file

@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<foreignObject x="20" y="0" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>This zine was made with <b>QRnZine</b>, a collection of SVG templates and scripts for building zines which contain the means of their own reproduction.</p>
<p>By <b>unfolding this zine and turning the page over</b>, you should find a set of QR codes containing instructions and source code that can be used both to <b>replicate this zine</b>, as well as to <b>create your own zines</b> with their own self-replicating abilities.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 745 B

22
build.sh
View file

@ -1,22 +1,18 @@
rm *.png *.zip
function h() { echo "data:$1;base64,`cat $2 | base64 -w0`" | qrencode -t png -o $3.png; }
zip t1.zip back.svg build.sh
zip t2.zip front.svg readme.html
for i in `seq 1 4`; do
zip c$i.zip c$i.svg
h application/zip c$i.zip c$i
done
zip c1.zip fc.svg bc.svg
zip c2.zip p1.svg p2.svg
zip c3.zip p3.svg p4.svg
zip c4.zip p5.svg p6.svg
zip t1.zip readme.html build.sh
zip t2.zip main.svg clean.sh
h text/html readme.html i1
h application/zip t1.zip t1
h application/zip t2.zip t2
h application/zip c1.zip c1
h application/zip c2.zip c2
h application/zip c3.zip c3
h application/zip c4.zip c4
rm *.zip
chromium --headless --disable-gpu --no-pdf-header-footer --print-to-pdf=output.pdf main.svg
./clean.sh

26
c1.svg Normal file
View file

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
<rect width="550" height="425" fill="#FFFFFF" stroke="#CCCCCC" />
<rect width="275" height="425" fill="#FFFFFF" stroke="#CCCCCC" />
<foreignObject x="20" y="0" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>This zine was made with <b>QRnZine</b>, a collection of SVG templates and scripts for building zines which contain the means of their own reproduction.</p>
<p>By <b>unfolding this zine and turning the page over</b>, you should find a set of QR codes containing instructions and source code that can be used both to <b>replicate this zine</b>, as well as to <b>create your own zines</b> with their own self-replicating abilities.</p>
</div>
</foreignObject>
<g transform='translate(20 380) scale(0.95)'>
<text>https://github.com/mlaga97/QRnZine</text>
<text y="20">QRnZine v0.2</text>
</g>
<g transform='translate(275 0)'>
<foreignObject x="10" y="50" width="255" height="390">
<div xmlns="http://www.w3.org/1999/xhtml" style='text-align: center'>
<h1>QRnZine</h1>
<h3>A Toolkit for Creating Zines That Contain the Means of their Own Reproduction</h3>
<em>An "artistic" exercise in abusing QR codes as a method for memetic self-replication</em>
</div>
</foreignObject>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

27
c2.svg Normal file
View file

@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 1</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Preface/Disclaimer</b>
<p>This zine and QRnZine itself are pretty technical in nature and assume that the user is fairly technically advanced going in, with at least basic familiarity with command-line tools and editing of programming, scripting, and markup languages.</p>
<p>The intent of this zine is mostly to explore how a few interesting tools work together to make this document possible, but skips over a lot in the process to fit the medium.</p>
</div>
</foreignObject>
<g transform='translate(275 0)'>
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 2</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Introduction</b>
<p><i>Link rot is very real and photocopiers don't come with an easy edit button.</i></p>
<p>That's basically the problem QRnZine is intended to fix.</p>
<p>If you could put the source code of a zine within the zine itself, other people could hopefully more easily replicate, modify, and create zines built using that one as a template.</p>
<p>But how do you fit the source code for a zine inside itself?</p>
</div>
</foreignObject>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

26
c3.svg Normal file
View file

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 3</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>SVGs</b>
<p>First we'll need to have a template to start with...</p>
<p>SVG (Scalable Vector Graphics) is an XML-based vector image format.</p>
<p>If you already know HTML, SVG is super easy to wrap your head around and start modifying, but comes with some handy extra tools for making things like print documents like this one.</p>
<p>SVG seems like a good choice to use for building a document template.</p>
</div>
</foreignObject>
<g transform='translate(275 0)'>
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 4</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>QR Codes</b>
<p>Getting code onto and off of paper easily is a pain if you're relying on manually copying between the two.</p>
<p>Fortunately, this problem is largely avoided using barcodes and 2d barcodes like QR Codes, the ubiquitous 2d barcode solution that pretty much everyone has a scanner for in their pocket.</p>
<p>The biggest QR codes can store about 3kB of text, which is decent, but not quite enough for us.</p>
</div>
</foreignObject>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

26
c4.svg Normal file
View file

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 5</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Data URIs</b>
<p>Data URIs are a special URL format that allows for data to be stored directly in the URL itself, without any backing server.</p>
<p>They usually look like:</p>
<code>data:text/html;base64,...</code>
<code>data:image/png;base64,...</code>
<p>and are often embedded within webpages, but can be used by themselves and can contain more-or-less any file format, including (quite handily) zip files.</p>
</div>
</foreignObject>
<g transform='translate(275 0)'>
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 6</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Putting It All Together</b>
<p>By putting SVG source into zip files, placing zip files into data URIs, putting data URIs into QR codes, and referencing the QR codes in the SVG source, we can magically store the source code of our zine in the zine itself more-or-less losslessly.</p>
<p>Some caveats apply, like needing software to process SVGs, QR codes, and the automation scripts, but those are hopefully less fragile than a difficult-to-edit PDF with a broken link.</p>
</div>
</foreignObject>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
fc.svg
View file

@ -1,16 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<foreignObject x="10" y="25" width="255" height="390">
<div xmlns="http://www.w3.org/1999/xhtml" style='text-align: center'>
<h1>QRnZine</h1>
<h3>A Toolkit for Creating Zines That Contain the Means of their Own Reproduction</h3>
<em>An "artistic" exercise in abusing QR codes as a method for memetic self-replication</em>
</div>
</foreignObject>
<g transform='translate(20 400) scale(0.8)'>
<text>https://github.com/mlaga97/QRnZine</text>
<text y="20">Version 0.1</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 683 B

31
front.svg
View file

@ -1,31 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="1100" viewBox="0 0 850 1100">
<g transform='rotate(90) translate(0 -425)'>
<g transform='translate(75 217)'>
<text>p1.svg missing!</text>
<text x="275">p2.svg missing!</text>
<text x="550">p3.svg missing!</text>
<text x="825">p4.svg missing!</text>
</g>
<image href="p1.svg"/>
<image href="p2.svg" x="275"/>
<image href="p3.svg" x="550"/>
<image href="p4.svg" x="825"/>
</g>
<g transform='rotate(-90) translate(-1100 425)'>
<g transform='translate(75 217)'>
<text>p5.svg missing!</text>
<text x="275">p6.svg missing!</text>
<text x="535">bc.svg missing!</text>
<text x="810">fc.svg missing!</text>
</g>
<image href="p5.svg"/>
<image href="p6.svg" x="275"/>
<image href="bc.svg" x="550"/>
<image href="fc.svg" x="825"/>
</g>
<line x1="425" y1="275" x2="425" y2="825" stroke='black'/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 960 B

65
main.svg Normal file
View file

@ -0,0 +1,65 @@
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="2200" viewBox="0 0 850 2200">
<style>
@media print {
@page { margin: 0; }
}
</style>
<g transform='rotate(90) translate(0 -425)'>
<g transform='translate(75 217)'>
<text>c2.svg missing!</text>
<text x="550">c3.svg missing!</text>
</g>
<image href="c2.svg"/>
<image href="c3.svg" x="550"/>
</g>
<g transform='rotate(-90) translate(-1100 425)'>
<g transform='translate(75 217)'>
<text>c4.svg missing!</text>
<text x="535">c1.svg missing!</text>
</g>
<image href="c4.svg"/>
<image href="c1.svg" x="550"/>
</g>
<g transform='rotate(90) translate(1110 -415)'>
<image href="i1.png" width="255"/>
<image href="t1.png" width="255" x="275"/>
<image href="t2.png" width="255" x="550"/>
<image href="c1.png" width="255" x="825"/>
<foreignObject y="275" x="10" width="235" height="255">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Instructions</b><br/>
Scan the QR code above and paste the contents into the address bar of a web browser like Firefox, Chrome, or Edge to get started<br/>
</div>
</foreignObject>
<text x="285" y="275">./readme.html</text>
<text x="285" y="295">./build.sh</text>
<text x="560" y="275">./main.svg</text>
<text x="560" y="295">./clean.sh</text>
<text x="835" y="275">./c1.svg</text>
</g>
<g transform='rotate(-90) translate(-2190 435)'>
<image href="c2.png" width="255"/>
<image href="c3.png" width="255" x="275"/>
<image href="c4.png" width="255" x="550"/>
<text x="10" y="275">./c2.svg</text>
<text x="285" y="275">./c3.svg</text>
<text x="560" y="275">./c4.svg</text>
</g>
<g transform='translate(440 1130)'>
<text>Using QRnZine v0.2 For Self-replication</text>
<text y="20">https://github.com/mlaga97/QRnZine</text>
</g>
<line x1="425" y1="275" x2="425" y2="825" stroke='black'/>
<line x1="425" y1="1375" x2="425" y2="1925" stroke='black'/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
output.pdf Normal file
View file

Binary file not shown.

12
p1.svg
View file

@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 1</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Preface/Disclaimer</b>
<p>This zine and QRnZine itself are pretty technical in nature and assume that the user is fairly technically advanced going in, with at least basic familiarity with command-line tools and editing of programming, scripting, and markup languages.</p>
<p>The intent of this zine is mostly to explore how a few interesting tools work together to make this document possible, but skips over a lot in the process to fit the medium.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 811 B

14
p2.svg
View file

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 2</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Introduction</b>
<p><i>Link rot is very real and photocopiers don't come with an easy edit button.</i></p>
<p>That's basically the problem QRnZine is intended to fix.</p>
<p>If you could put the source code of a zine within the zine itself, other people could hopefully more easily replicate, modify, and create zines built using that one as a template.</p>
<p>But how do you fit the source code for a zine inside itself?</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 795 B

14
p3.svg
View file

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 3</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>SVGs</b>
<p>First we'll need to have a template to start with...</p>
<p>SVG (Scalable Vector Graphics) is an XML-based vector image format.</p>
<p>If you already know HTML, SVG is super easy to wrap your head around and start modifying, but comes with some handy extra tools for making things like print documents like this one.</p>
<p>SVG seems like a good choice to use for building a document template.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 779 B

13
p4.svg
View file

@ -1,13 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 4</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>QR Codes</b>
<p>Getting code onto and off of paper easily is a pain if you're relying on manually copying between the two.</p>
<p>Fortunately, this problem is largely avoided using barcodes and 2d barcodes like QR Codes, the ubiquitous 2d barcode solution that pretty much everyone has a scanner for in their pocket.</p>
<p>The biggest QR codes can store about 3kB of text, which is decent, but not quite enough for us.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 787 B

15
p5.svg
View file

@ -1,15 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 5</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Data URIs</b>
<p>Data URIs are a special URL format that allows for data to be stored directly in the URL itself, without any backing server.</p>
<p>They usually look like:</p>
<code>data:text/html;base64,...</code>
<code>data:image/png;base64,...</code>
<p>and are often embedded within webpages, but can be used by themselves and can contain more-or-less any file format, including (quite handily) zip files.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 790 B

12
p6.svg
View file

@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="425" viewBox="0 0 275 425">
<rect width="285" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
<text x="105" y="415">Page 6</text>
<foreignObject x="20" y="15" width="230" height="375">
<div xmlns="http://www.w3.org/1999/xhtml">
<b>Putting It All Together</b>
<p>By putting SVG source into zip files, placing zip files into data URIs, putting data URIs into QR codes, and referencing the QR codes in the SVG source, we can magically store the source code of our zine in the zine itself more-or-less losslessly.</p>
<p>Some caveats apply, like needing software to process SVGs, QR codes, and the automation scripts, but those are hopefully less fragile than a difficult-to-edit PDF with a broken link.</p>
</div>
</foreignObject>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 830 B

15
readme.html
View file

@ -1,15 +1,14 @@
<h1>Nice to see you!</h1>
<h1>It worked!</h1>
<p>The weird looking URL you just used is a "Data URI" and it allows you to put data right into the URL with no server.</p>
<p>There are more QR codes in the zine that have more data URIs, with zip files instead of web pages. When the stuff inside all of the zip files is combined, there should be enough there to build and modify the original zine on most linux systems, or to use as a template for creating a totally new self-replicating zine.</p>
<p>There are more QR codes in the zine that have more data URIs, with zip files instead of web pages. When the content of all of the zip files is combined, there should be enough there to build and modify the original zine using a linux computer, or to use as a template for creating a totally new self-replicating zine.</p>
<b>Replication/Modification Instructions</b><br/>
- Get all of the zip files from the other QR codes in the zine onto a Linux PC or similar and extract all of them into one directory<br/>
- Get the other zip files from the other QR codes in the zine onto a Linux PC and extract all of them into one directory<br/>
- Run ./build.sh in that directory (you may need some extra packages)<br/>
- Open front.svg and back.svg in a web browser and it should render a print-ready version of the original zine<br/>
- Use a text editor to edit p1-p6.svg, fc.svg, and bc.svg
- Use build.sh again to update front.svg and back.svg<br/>
- Remember to refresh your browser!<br/>
- Open output.pdf to view a print-ready version of the original zine<br/>
- Use a text editor to edit c[1-4].svg to modify the zine content
- Use build.sh again to update output.pdf<br/>
<br/>
<b>Updates/Help</b><br/>
https://github.com/mlaga97/qrnzine
https://github.com/mlaga97/QRnZine