Merge pull request #187 from bjc-edc/generate-new-summaries

Generate Summaries

Author: cycomachead

.tool-versions

@@ -1 +1,2 @@
-ruby 3.3.7
+python 3.11.11
+ruby   3.3.9

Gemfile

@@ -28,3 +28,5 @@ group :development, :test do
   gem 'rackup'
   gem 'webrick'
 end
+
+gem "htmlbeautifier", "~> 1.4"

Gemfile.lock

@@ -36,7 +36,6 @@ GEM
     base64 (0.3.0)
     benchmark (0.4.1)
     bigdecimal (3.2.2)
-    byebug (12.0.0)
     camertron-eprun (1.1.1)
     capybara (3.40.0)
       addressable
@@ -52,7 +51,6 @@ GEM
       launchy
     childprocess (5.0.0)
     cldr-plurals-runtime-rb (1.1.0)
-    coderay (1.1.3)
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.3.5)
@@ -68,6 +66,7 @@ GEM
     dumb_delegator (1.1.0)
     erb (5.0.1)
     fileutils (1.7.3)
+    htmlbeautifier (1.4.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
@@ -83,7 +82,6 @@ GEM
       childprocess (~> 5.0)
     logger (1.7.0)
     matrix (0.4.2)
-    method_source (1.1.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.9)
     minitest (5.25.5)
@@ -115,12 +113,6 @@ GEM
       prettyprint
     prettyprint (0.2.0)
     prism (1.4.0)
-    pry (0.15.2)
-      coderay (~> 1.1)
-      method_source (~> 1.0)
-    pry-byebug (3.11.0)
-      byebug (~> 12.0)
-      pry (>= 0.13, < 0.16)
     psych (5.2.6)
       date
       stringio
@@ -224,10 +216,10 @@ DEPENDENCIES
   capybara
   capybara-screenshot
   debug
-  fileutils
+  fileutils (~> 1.7)
+  htmlbeautifier (~> 1.4)
   i18n
   nokogiri
-  pry-byebug
   rack (~> 3)
   rackup
   rspec
@@ -238,7 +230,7 @@ DEPENDENCIES
   webrick
 
 RUBY VERSION
-   ruby 3.3.7p123
+   ruby 3.3.9p170
 
 BUNDLED WITH
    2.6.9

README.md

@@ -67,9 +67,17 @@ To contribute:
 
 Of course, submitting issues is always welcome and encouraged! These issues can be bugs, questions, improvements or anything you'd like to share.
 
+## Index and Summary Pages
+
+See `utilties/build-tools/README.md` for information on how to build the index and summary pages.
+
+```sh
+ruby utilities/build-tools/rebuild-all.rb
+```
+
 ## UC Berkeley Deployment Process
 
-The UC Berkeley version is the `live` branch of the repo beautyjoy/bjc-r on GitHub.
+@beautyjoy/bjc-r serves bjc.berkeley.edu/bjc-r from the `main` branch.
 
 ## License
 [CC-BY-NC-SA 3.0][cc]

course/bjc4nyc.es.html

@@ -46,7 +46,7 @@ <h2>La belleza y alegría de la informática&mdash;<em>BJC</em></h2>
                         <a href="/bjc-r/cur/snap-cheat-sheet.es.html" title="Guía de referencia rápida de Snap!">Guía de referencia rápida de Snap<em>!</em></a>
                     </div>&mdash;Snap<em>!</em> comparado con el lenguaje del examen de AP
                     <div class="topic_link">
-                        <a href="/bjc-r/cur/programming/index.es.html" title="Índice del vocabulario de BJC">Índice de BJC</a>
+                        <a href="/bjc-r/cur/programming/vocab-index.es.html" title="Índice del vocabulario de BJC">Índice de BJC</a>
                     </div>&mdash;Lista de todo el vocabulario de BJC
             </div></div>
             <div class="topic_link">

course/bjc4nyc.html

@@ -96,7 +96,7 @@ <h2>Welcome to the Beauty and Joy of Computing—<em>BJC</em></h2>
               title="Snap! Cheat Sheet">Snap<em>!</em> Cheat Sheet</a></span>&mdash;Snap<em>!</em> vs. AP exam language
         </p>
 		<p>
-			<span class="topic_link" style="text-align: center"><a href="/bjc-r/cur/programming/summaries/vocab-index.html" title="BJC Vocabulary Index">BJC Index</a></span>&mdash;list of all BJC Vocabulary
+			<span class="topic_link" style="text-align: center"><a href="/bjc-r/cur/programming/vocab-index.html" title="BJC Vocabulary Index">BJC Index</a></span>&mdash;list of all BJC Vocabulary
 		</p>
       </div>
       <div class="topic_link">

course/sparks.html

@@ -10,17 +10,24 @@
         <h2>Beauty and Joy of Computing Sparks</h2>
         <p>Welcome to BJC! This class teaches computer programming using the <a href="https://snap.berkeley.edu/" title="Snap! programming language" target="_blank">Snap<em>!</em> programming language</a>, which lets you do powerful programming without worrying about punctuation as you would in a text-based language. You'll build projects about story-writing, music, secret messages, artificial intelligence (AI), and more! And you'll learn to use electronics to connect your code to the real world.</p>
 
+		<div class="sidenote">
+			<p>
+				<span class="topic_link" style="text-align: center"><a href="/bjc-r/sparks/student-pages/vocab-index.html" title="BJC Vocabulary Index">BJC Sparks Index</a></span>&mdash;list of all BJC Vocabulary
+			</p>
+		</div>
 		<div style="float:right; padding-top:0px;">
-            <div style="text-align:center;">
-                <img src="/bjc-r/img/web/bjc-logo.png" alt="Beauty and Joy of Computing" title="Beauty and Joy of Computing" />
-            </div>
+				<div style="text-align:center;">
+						<img src="/bjc-r/img/web/bjc-logo.png" alt="Beauty and Joy of Computing" title="Beauty and Joy of Computing" />
+				</div>
 		</div>
 
 
 		<div class="topic_container">
 			<div class="topic_link"><a href="/bjc-r/topic/topic.html?topic=sparks/1-functions-data.topic" title="Unit 1: Functions and Data">Unit 1: Functions and Data</a></div>
-            <div class="topic_link"><a href="/bjc-r/topic/topic.html?topic=sparks/2-sequencing-iteration.topic" title="Unit 2: Sequencing and Iteration">Unit 2: Sequencing and Iteration</a></div>
-            <div class="topic_link"><a href="/bjc-r/topic/topic.html?topic=sparks/3-hardware.topic" title="Unit 3: Hardware">Unit 3: Hardware</a></div>
-        </div>
+			<div class="topic_link"><a href="/bjc-r/topic/topic.html?topic=sparks/2-sequencing-iteration.topic" title="Unit 2: Sequencing and Iteration">Unit 2: Sequencing and Iteration</a></div>
+			<div class="topic_link"><a href="/bjc-r/topic/topic.html?topic=sparks/3-hardware.topic" title="Unit 3: Hardware">Unit 3: Hardware</a></div>
+		</div>
+
+
 	</body>
 </html>

css/bjc.css

@@ -31,6 +31,13 @@ h4, .h4 {
   padding: 5px 0px 0px 0px;
 }
 
+/* Override some bootstrap defaults we don't want */
+label {
+  margin-bottom: unset;
+  font-weight: normal;
+}
+
+
 /* Roughly visually aligns with the default h4 style
  * To be used in curriculum boxes which contain subheadings.
  */
@@ -41,16 +48,20 @@ h4, .h4 {
   padding: 5px 0px 0px 0px;
 }
 
-.anchor {
-  padding-top: 80px;
-  margin-top: -80px;
-}
-
 /* should have >= 3:1 contrast with black, 4.5:1 with white */
 a:visited:not(.btn-primary):not(.btn-nav) {
   color: #297694;
 }
 
+.panel-heading a {
+  color: #FFF;
+}
+
+/* Need to keep the :not() selectors so this is more specific than the above one... */
+.panel-heading a:visited:not(.btn-primary):not(.btn-nav) {
+  color: #FFF;
+}
+
 a,
 .dialogue a {
   color: #3056AA; /* color: #28499F; */
@@ -256,10 +267,8 @@ code.break {
 /* a11y: TODO: this color matches Snap!, but does not have enough contrast with white. */
 var {
   padding: 0px;
-  /* color: #f3761d; */
   color: #f1661d;
   font-weight: bold;
-  font-size: 14pt;
 }
 
 .classIndent {
@@ -714,6 +723,19 @@ table.truth tr td {
   width: 40%;
 }
 
+/* These boxes are used on idex/summary pages for all vocab, AP exam, atwork, etc. *
+  We should use `.vacab.summaryBox` instead of `.vocabSummary` and so on. */
+.summaryBox {
+  width: 95%;
+  margin-left: auto;
+  margin-top: 0.5em;
+  padding: 20px;
+  text-indent: 0em;
+  overflow: hidden;
+}
+
+/* TODO-MB: We need to separate these into multiple composable classes. */
+/* TODO: After merging in new sumamries remove vocabSummary, examSummary, etc. */
 .vocabFullWidth,
 .examFullWidth,
 .vocabSummary,
@@ -726,11 +748,15 @@ table.truth tr td {
   text-indent: 0em;
   overflow: hidden;
 }
+
 .vocabSummary,
 .examSummary {
   margin-right: auto;
 }
 
+.summary .todo,
+.summary .comment,
+.summary .commentBig,
 .vocabSummary .todo,
 .vocabSummary .comment,
 .vocabSummary .commentBig,
@@ -754,7 +780,7 @@ table.truth tr td {
 .examBig:before,
 .examFullWidth:before,
 .examSummary:before {
-  content: "On the AP Exam...";
+  content: "On the AP Exam... ";
   font-size: 16px;
   font-weight: bold;
   line-height: 1.5em;
@@ -768,11 +794,24 @@ table.truth tr td {
   line-height: 1.5em;
 }
 
+/* Override some basic vocab only settings */
+.vocab.summaryBox,
+.exam.summaryBox,
+.atwork.summaryBox {
+  float: none;
+  clear: both;
+}
+
+/* TODO: Consider atwork and on the exam boxes. */
+.vocab.summaryBox:before,
+html[lang="es"] .vocab.summaryBox:before {
+  content: none;
+}
+
 html[lang="es"] .exam:before,
 html[lang="es"] .examBig:before,
-html[lang="es"] .examFullWidth:before,
-html[lang="es"] .examSummary:before {
-  content: "En el examen AP...";
+html[lang="es"] .examFullWidth:before {
+  content: "En el examen AP... ";
 }
 
 html[lang="es"] .atwork:before,
@@ -782,8 +821,7 @@ html[lang="es"] .atworkFullWidth:before {
 
 html[lang="es"] .vocab:before,
 html[lang="es"] .vocabBig:before,
-html[lang="es"] .vocabFullWidth:before,
-html[lang="es"] .vocabSummary:before {
+html[lang="es"] .vocabFullWidth:before {
   content: "Vocabulario";
 }
 
@@ -1137,9 +1175,11 @@ div.map-links {
   margin-bottom: 25px;
 }
 
-div.index-letter-link a {
+div.index-letter-link a,
+div.index-letter-link span {
   font-size: 3em;
 }
+
 div.map-links a {
   font-size: 1.2em;
 }

cur/programming/1-introduction/3-drawing/7-programming-journal.es.html

@@ -43,7 +43,7 @@ <h2>Mantener un diario de programación</h2>
 	</div>
 
 	<p>
-		<!--<div class="sidenoteBig">No necesitas copiar cosas del plan de estudios en tu diario; siempre puedes buscarlas en el <a href="/bjc-r/cur/programming/summaries/vocab-index.es.html?course=bjc4nyc.es.html&novideo&noassignment" title="curriculum index">índice</a>.</div>-->
+		<div class="sidenoteBig">No necesitas copiar cosas del plan de estudios en tu diario; siempre puedes buscarlas en el <a href="//bjc-r/cur/programming/vocab-index.es.html?course=bjc4nyc.es.html" title="curriculum index">índice</a>.</div>
 		<strong>El diario es para ti, no para tu maestro/a.</strong> No serás calificado por lo que escribas o no escribas en él. El diario no se califica porque es un registro de las cosas que solo tú experimentas en la clase, no un registro de las ideas del plan de estudios. El diario será diferente para cada compañero.
 	</p>
 

cur/programming/1-introduction/3-drawing/7-programming-journal.html

@@ -42,7 +42,7 @@ <h2>Keeping a Programming Journal</h2>
 		</ul>
 	</div>
 
-	<p><div class="sidenoteBig">You don't need to copy things out of the curriculum into your journal; you can always look those up in the <a href="/bjc-r/cur/programming/summaries/vocab-index.html?course=bjc4nyc.html&novideo&noassignment" title="curriculum index">index</a>.</div><strong>The journal is for you, not for your teacher.</strong> You won't be graded on what you do or don't put in it.  The journal isn't graded because it's a record of the things only you experience in the class, not a record of the ideas in the curriculum.   Everyone's journal will be different.</p>
+	<p><div class="sidenoteBig">You don't need to copy things out of the curriculum into your journal; you can always look those up in the <a href="/bjc-r/cur/programming/vocab-index.html?course=bjc4nyc.html" title="curriculum index">index</a>.</div><strong>The journal is for you, not for your teacher.</strong> You won't be graded on what you do or don't put in it. The journal isn't graded because it's a record of the things only you experience in the class, not a record of the ideas in the curriculum. Everyone's journal will be different.</p>
 
     </body>
 </html>