add notranslate to proper nouns (#1)

requires lang attribute in all cases and dir attribute to better support translation to right-to-left scripts;
trailing whitespace within notranslate spans ensures that proper nouns render without run-on in all languages (we allow the html renderer to deal with the extra whitespace);
added "technologists" to end of line 104 to ensure that a p-terminal span with dir=ltr and lang=en does not trick the html renderer into displaying "xerox parc" at the beginning of the line in a right-to-left script

Reviewed-on: maren/startacomputerclub#1
Co-authored-by: sorrel <git@sorrel.dev>
Co-committed-by: sorrel <git@sorrel.dev>

index.html

@@ -70,7 +70,7 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
 <!-- translation section is done -->
 
 <h1>YOU SHOULD START A COMPUTER CLUB IN THE PLACE THAT YOU LIVE</h1>
-<pre class="notranslate">
+<pre dir="ltr" lang="en" class="notranslate">
               ,---------------------------,
               |  /---------------------\  |
               | | BREAKING NEWS:        | |
@@ -101,7 +101,7 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
 <p>doing computer is whatever you want...on computers, together. our bias is towards programming and diy shared computing infrastructure. but there's also art and music and open data science and circuit-bending and a million other things we don't know about</p>
 
 <h2>WHY SHOULD I START A COMPUTER CLUB?</h2>
-<p>the political economy of computing is awful. have you read <a href="https://bookwyrm.social/book/525851/s/palo-alto">palo alto</a>? me neither. we should read it. we deserve better than the darpa-funded visions of xerox parc</p>
+<p>the political economy of computing is awful. have you read <a dir="ltr" lang="en" class="notranslate" href="https://bookwyrm.social/book/525851/s/palo-alto"> palo alto </a>? me neither. we should read it. we deserve better than the <span dir="ltr" lang="en" class="notranslate"> darpa-funded </span> visions of <span dir="ltr" lang="en" class="notranslate"> xerox parc </span> technologists</p>
 <p>make the political economy of computing less awful and bring it home to you and yours by starting a computer club in the place that you live</p>
 
 <h2>RULES</h2>
@@ -116,7 +116,7 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
 <p>we still can't make you do anything, so continue doing whatever you want. but these are things we think are important to think about</p>
 <ul>
     <li>computing is political, so let computer club be political too</li>
-    <li>the <a href="https://www.recurse.com/social-rules">RC social rules</a> foster collaboration and psychological safety, consider using them</li>
+    <li>the <a href="https://www.recurse.com/social-rules"><span dir="ltr" lang="en" class="notranslate"> Recurse Center </span> social rules</a> foster collaboration and psychological safety, consider using them</li>
     <li>be inspired by permaculture</li>
     <li>be inspired by small web</li>
     <li>be inspired by diy culture</li>
@@ -143,10 +143,10 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
 
 <h2>COMPUTER CLUBS AND SIMILAR THINGS THAT WE KNOW OF</h2>
 <ul>
-    <li><a href="https://cyberia.club/">cyberia computer club</a></li>
+    <li dir="ltr" lang="en" class="notranslate"><a href="https://cyberia.club/">cyberia computer club</a></li>
-    <li><a href="https://www.ccc.de/">chaos computer club</a></li>
+    <li dir="ltr" lang="en" class="notranslate"><a href="https://www.ccc.de/">chaos computer club</a></li>
-    <li><a href="https://bunk.computer/">bunk computer club</a></li>
+    <li dir="ltr" lang="en" class="notranslate"><a href="https://bunk.computer/">bunk computer club</a></li>
-    <li><a href="https://lurk.org/">LURK</a></li>
+    <li dir="ltr" lang="en" class="notranslate"><a href="https://lurk.org/">LURK</a></li>
     <li>computer clubs are inspired by <a href="https://en.m.wikipedia.org/wiki/Category:Hackerspaces">hackerspaces</a></li>
     <li>[coming soon] your computer club!</li>
 </ul>
@@ -156,10 +156,10 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
     <li>computers (personal computers)</li>
     <li>computers (servers)</li>
     <li>computers (people doing computer)</li>
-    <li><strong>chat:</strong> matrix, zulip, mattermost, signal, discord</li>
+    <li><strong>chat: </strong> <span dir="ltr" lang="en" class="notranslate"> matrix, zulip, mattermost, signal, discord</span></li>
     <li>love and trust!</li>
-    <li>a git forge (we like forgejo)</li>
+    <li>a git forge (we like<span class="notranslate" dir="ltr" lang="eo"> forgejo </span>)</li>
-    <li>a physical tilde server (it can motivate everyone to create something together)</li>
+    <li>a physical <span class="notranslate"> tilde </span> server (it can motivate everyone to create something together)</li>
     <li><strong>locations:</strong> living rooms, libraries, a cool local bookstore</li>
     <li><a href="https://awesome-selfhosted.net/">a very thorough resource for collective computing infrastructure</a></li>
     <li>connections to other local projects</li>
@@ -172,7 +172,7 @@ src="https://translate.google.com/translate_a/element.js?cb=googleTranslateEleme
 
 <hr>
 <section class="center">
-<p><a href="https://creativecommons.org/licenses/by-sa/4.0/">cc by-sa</a></p>
+<p dir="ltr" lang="en" class="notranslate"><a href="https://creativecommons.org/licenses/by-sa/4.0/">cc by-sa</a></p>
 </section>
 <hr>
 </body>