Home
Projects
Blog
About
Typst Test
1.
Introduction
In this document, which itself is written in Typst, I will explain how to use Typst in 11ty.
This is a test document to see how Typst works with 11ty. I will also include some code
snippets and images to demonstrate how Typst can be used to create beautiful documents.
After following the instructions in this document, you will be able to:
1.
Have beautiful Typst documents in the browser
•
Loaded quickly
•
Looking exactly the same as in Typst and everywhere else
2.
Use 11ty as a static site generator for Typst documents in your website
•
Generated statically as SVG
•
Almost real-time editing using live-reload, like you’re used to from Typst
2.
How to use Typst in 11ty
To use Typst in 11ty, you need to:
1.
Install Typst
2.
Add the config for Typst to the 11ty config
3.
Create a Typst file
2.1.
Install Typst
If using yarn, just run:
yarn
add @myriaddreamin/typst-ts-node-compiler
If using npm, just run:
npm
install @myriaddreamin/typst-ts-node-compiler
2.2.
Add the config for Typst to the 11ty config
After installing the library, you need to add the Typst compiler to the 11ty config. This is
done by adding the following code to your
eleventy.config.js
file.
2.2.1.
Imports at the top of the file
import
path
from
"
path
"
;
import
{
NodeCompiler
}
from
'
@myriaddreamin/typst-ts-node-compiler
'
;
2.2.2.
Add the Typst compiler to the 11ty config object
eleventyConfig
.
addTemplateFormats
(
"
typ
"
)
;
eleventyConfig
.
addExtension
(
"
typ
"
,
{
compile
:
async
(
inputContent
,
inputPath
)
=>
{
const
compiler
=
NodeCompiler
.
create
(
{
workspace
:
path
.
resolve
(
inputPath
,
"
..
"
)
,
}
)
;
//
catch error, so that we can print it to the console
try
{
const
output
=
await
compiler
.
svg
(
{
mainFileContent
:
inputContent
,
inputs
:
{
fill
:
"
white
"
,
}
,
}
)
;
return
async
(
data
)
=>
{
return
output
;
}
}
catch
(
error
)
{
console
.
error
(
"
Error compiling typst file:
"
,
error
)
;
throw
error
;
}
}
}
)
;
2.3.
Create a Typst file
In your 11ty project, somewhere your regular config can find it, create a
.typ
file.
Using
#set page(height: auto, fill: white)
, you can make sure there is a background
behind the SVG and that only one page is generated for each Typst file. This means that you
don’t get page breaks on the website, which may or may not be what you want. Especially if
you want to have page numbering corresponding to a printed version of the document.
Now, you can use Typst as you would normally do. Files included in the Typst file, like
images or bibliographies, are loaded relative to the Typst file, so those work as expected.
¹
You can use all the features of Typst, including some demonstrated here.
¹
Files included in the Typst file, such as images or bibliographies, are embedded directly into the SVG
output. This means that plugins won’t work on them.
3.
Example of Typst features
In this report, we will explore the various factors that influence
fluid dynamics
in glaciers and
how they contribute to the formation and behaviour of these natural structures.
1.
The climate
•
Temperature
•
Precipitation
2.
The topography
3.
The geology
Glaciers as the one shown in
Figure 1
will cease to exist if we don’t take action soon!
Figure 1:
Glaciers
form an important part of the earth’s climate system.
4.
Methods
We follow the glacier melting models established in
[1]
. (
𝑎
⇝
𝑏
)
The equation
𝑄
=
𝜌
𝐴
𝑣
+
𝐶
defines the glacial flow rate.
Total displaced soil by glacial flow:
7
.
3
2
𝛽
+
∑
∇
𝑖
=
0
𝑄
𝑖
(
𝑎
𝑖
−
𝜀
)
2
4.1.
Code
fn
main
(
)
{
println!
(
"
Hello World!
"
)
;
}
5.
Some Lorem Ipsum to fill the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum
corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum
impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea
variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e
patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia
defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis
aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non
recusandae. Itaque earum rerum defuturum, quas natura non depravata desiderat. Et quem
ad me accedis, saluto: 'chaere,' inquam, 'Tite!' lictores, turma omnis chorusque: 'chaere,
Tite!' hinc hostis mi Albucius, hinc inimicus. Sed iure Mucius. Ego autem mirari satis non
queo unde hoc sit tam insolens domesticarum rerum fastidium. Non est omnino hic docendi
locus; sed ita prorsus existimo, neque eum Torquatum, qui hoc primus cognomen invenerit,
aut torquem illum hosti detraxisse, ut aliquam ex eo est consecutus? – Laudem et caritatem,
quae sunt vitae sine metu degendae praesidia firmissima. – Filium morte multavit. – Si sine
causa, nollem me ab eo delectari, quod ista Platonis, Aristoteli, Theophrasti orationis
ornamenta neglexerit. Nam illud quidem physici, credere aliquid esse minimum, quod profecto
numquam putavisset, si a Polyaeno, familiari suo, geometrica discere maluisset quam illum
etiam ipsum dedocere. Sol Democrito magnus videtur, quippe homini erudito in geometriaque
perfecto, huic pedalis fortasse; tantum enim esse omnino in nostris poetis aut inertissimae
segnitiae est aut fastidii delicatissimi. Mihi quidem videtur, inermis ac nudus est. Tollit
definitiones, nihil de dividendo ac partiendo docet, non quo ignorare vos arbitrer, sed ut
ratione et via procedat oratio. Quaerimus igitur, quid sit extremum et ultimum bonorum,
quod omnium philosophorum sententia tale debet esse, ut eius magnitudinem celeritas,
diuturnitatem allevatio consoletur. Ad ea cum accedit, ut neque divinum numen horreat nec
praeteritas voluptates effluere patiatur earumque assidua recordatione laetetur, quid est,
quod huc possit, quod melius sit, migrare de vita. His rebus instructus semper est in
voluptate esse aut in armatum hostem impetum fecisse aut in poetis evolvendis, ut ego et
Triarius te hortatore facimus, consumeret, in quibus hoc primum est in quo admirer, cur in
gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e
Graecis expressas non inviti legant. Quis enim tam inimicus paene nomini Romano est, qui
Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis
delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam
Terentii quam utramque Menandri legam? A quibus tantum dissentio, ut, cum Sophocles vel
optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo
Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. Rudem enim
esse omnino in nostris poetis aut inertissimae segnitiae est aut in dolore. Omnis autem
privatione doloris putat Epicurus terminari summam voluptatem, ut postea variari voluptas
distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam
facete et urbane Stoicos irridente, statua est in voluptate aut a voluptate discedere. Nam cum
ignoratione rerum bonarum et malarum maxime hominum vita vexetur, ob eumque errorem
et voluptatibus maximis saepe priventur et durissimis animi doloribus torqueantur, sapientia
est adhibenda, quae et terroribus cupiditatibusque detractis et omnium falsarum opinionum
temeritate derepta certissimam se nobis ducem praebeat ad voluptatem. Sapientia enim est
una, quae maestitiam pellat ex animis, quae nos exhorrescere metu non sinat. Qua
praeceptrice in tranquillitate vivi potest omnium cupiditatum ardore restincto. Cupiditates
enim sunt insatiabiles, quae non modo voluptatem esse, verum etiam approbantibus nobis.
Sic enim ab Epicuro reprehensa et correcta permulta. Nunc dicam de voluptate, nihil scilicet
novi, ea tamen, quae te ipsum probaturum esse confidam. Certe, inquam, pertinax non ero
tibique, si mihi probabis ea, quae dicta sunt ab iis quos probamus, eisque nostrum iudicium
et nostrum scribendi ordinem adiungimus, quid habent, cur Graeca anteponant iis, quae et a
formidinum terrore vindicet et ipsius fortunae modice ferre doceat iniurias et omnis monstret
vias, quae ad amicos pertinerent, negarent esse per se ipsam causam non multo maiores esse
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
a sapiente delectus, ut aut voluptates omittantur maiorum voluptatum adipiscendarum causa
aut dolores suscipiantur maiorum dolorum effugiendorum gratia. Sed de clarorum hominum
factis illustribus et gloriosis satis hoc loco dictum sit. Erit enim iam de omnium virtutum
cursu ad voluptatem proprius disserendi locus. Nunc autem explicabo, voluptas ipsa quae
qualisque sit, ut tollatur error omnis imperitorum intellegaturque ea, quae voluptaria,
delicata, mollis habeatur disciplina, quam gravis, quam continens, quam severa sit. Non enim
hanc solam sequimur, quae suavitate aliqua naturam ipsam movet et cum iucunditate
quadam.
Bibliography
[1]
R. Hock, “Glacier melt: a review of processes and their modelling,”
Progress in Physical
Geography: Earth and Environment
, vol. 29, no. 3, pp. 362–391, 2005, doi:
10.1191/0309133305pp453ra
.