Docs/WIP: Offline-mode for Docs site

apps/docs/app/app.vue

@@ -6,3 +6,13 @@
     </NuxtErrorBoundary>
   </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+const { public: { isOffline } } = useRuntimeConfig();
+
+useHead({
+  htmlAttrs: {
+    'data-mode': isOffline ? 'offline' : 'online',
+  },
+});
+</script>

apps/docs/app/components/ClientFooter.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import NetLogoUserManualLogo from '@repo/vue-ui/assets/brands/NetLogoUserManual.svg';
+import NetLogoUserManualLogo from '@repo/vue-ui/assets/brands/NetLogoUserManual.svg?url';
 import type { FooterLink } from '@repo/vue-ui/components/footer/types';
 import { onMounted, ref } from 'vue';
 

apps/docs/app/components/ClientNavbar.vue

@@ -23,9 +23,10 @@
     </NavbarLinksContainer>
 
     <NavbarActionsContainer>
-      <SSRUContentSearchButton />
+      <SSRUContentSearchButton v-if="!isOffline" />
 
       <VersionSelectDropdown
+        v-if="!isOffline"
         :versions="versions"
         :selected-version="selectedVersion"
         @version-change="(version) => onVersionChange(version, { productVersion, productWebsite })"
@@ -49,8 +50,8 @@
 </template>
 
 <script setup lang="ts">
-import NetLogoUserManualLogo from '@repo/vue-ui/assets/brands/NetLogoUserManual.svg';
-import TurtlesLogo from '@repo/vue-ui/assets/brands/Turtles.svg';
+import NetLogoUserManualLogo from '@repo/vue-ui/assets/brands/NetLogoUserManual.svg?url';
+import TurtlesLogo from '@repo/vue-ui/assets/brands/Turtles.svg?url';
 import type { Navbar as _Navbar } from '@repo/vue-ui/components/navbar/index';
 import type { VersionProps } from '@repo/vue-ui/widgets/VersionSelectDropdown.vue';
 import { useMediaQuery } from '@vueuse/core';
@@ -60,6 +61,7 @@ import { onVersionChange, pullVersionsFromSource } from '~~/shared/versions';
 const {
   public: {
     website: { productWebsite, productVersion, versionsSrc  },
+    isOffline
   },
 } = useRuntimeConfig();
 
@@ -80,7 +82,10 @@ const extensionList = useRuntimeConfig().public.extensions as Array<{
 const isMobileScreen = ref(false);
 const navbarRef = useTemplateRef<InstanceType<typeof _Navbar>>('navbar');
 
-const brand = computed(() => (isMobileScreen.value ? TurtlesLogo : NetLogoUserManualLogo));
+const brand = computed(() => ( h( 'img', {
+  src: isMobileScreen.value ? TurtlesLogo : NetLogoUserManualLogo,
+  alt: 'NetLogo User Manual',
+})));  
 const brandAttrs = computed(() => (isMobileScreen.value ? { style: { width: '2rem' } } : { width: 'auto' }));
 
 
@@ -229,6 +234,7 @@ const versions = ref<Record<string, VersionProps>>({
 
 const selectedVersion = ref<string>(productVersion);
 
+updateActiveStates();
 onMounted(() => {
   if (import.meta.client) {
     updateActiveStates();

apps/docs/app/components/PrimitiveCatalog/PrimitiveCatalog.vue

@@ -1,5 +1,6 @@
 <template>
-  <SideCatalog
+  <component
+    :is="CatalogComponent"
     :label="dictionaryDisplayName"
     :items="(catalogItems || []) as SideCatalogItem[]"
     item-prefix="primitive:"
@@ -9,6 +10,9 @@
     :scroll-margin-top="150"
     :is-loading="loading"
     with-route-transition
+    :class="{
+      'lg:mt-5 mb-10 px-2 mx-auto nl-container-width': isOffline
+    }"
   >
     <div class="w-full [&>.min-h-screen]:min-h-0 lg:pr-5 pb-10 min-h-rest">
       <slot />
@@ -20,7 +24,7 @@
 
       <Surround :surround="surround" class="mt-auto" />
     </div>
-  </SideCatalog>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -31,9 +35,13 @@ import type { CatalogItemData, PrimitiveCatalogProps, SideCatalogItem } from './
 const {
   public: {
     website: { productVersion },
+    isOffline
   },
 } = useRuntimeConfig();
 
+const SideCatalog = resolveComponent('SideCatalog') as typeof import('@repo/vue-ui')['SideCatalog'];
+const CatalogComponent = isOffline ? 'div' : SideCatalog;
+
 const { dictionaryDisplayName, dictionaryHomeDirectory, indexFileURI, currentItemId, currentItemLabel, primRoot } =
   defineProps<PrimitiveCatalogProps>();
 

apps/docs/autogen/3d.md

@@ -164,15 +164,15 @@ end-shape
   One of the first things you will notice when you open NetLogo 3D is that the
   world is a cube instead of a square.
 
-![[3d/cube.png]]
+![[3d/cube.webp]]
 
 You can open up the Model Settings, by clicking on the
 "Settings..." button at the top of the 3D View. You'll notice in
 addition to `max-pxcor`, `min-pxcor`,
 `max-pycor`, and `min-pycor`, there is also
 [[max-pzcor|min-max-pzcor]] and [[min-pzcor|min-max-pzcor]].
 
-![[3d/properties.png]]
+![[3d/properties.webp]]
 
 The z-axis is perpendicular to both the x-axis and the y-axis, when you
 `reset-perspective` it is the axis that comes straight out of the
@@ -220,17 +220,17 @@ Heading, pitch, and roll are turtle variables that represent the orientation
 of the turtle. Heading is absolute in relation to the x/y plane; it is the
 rotation of the turtle around the z-axis.
 
-![[3d/heading.png]]
+![[3d/heading.webp]]
 
 Pitch is the angle between the nose of the turtle and the xy-plane. It is
 relative to heading.
 
-![[3d/pitch.png]]
+![[3d/pitch.webp]]
 
 Roll is the rotation around the turtle's forward vector. It is relative to
 heading and pitch.
 
-![[3d/roll.png]]
+![[3d/roll.webp]]
 
 When turtles are created with `create-turtles` or
 `create-ordered-turtles`, their initial headings vary but their

apps/docs/autogen/behaviorspace.es.md

@@ -492,7 +492,7 @@ En la siguiente imagen de muestra de **Resultados tabulados**, la sección de en
 columnas de número de ejecución (`[run number]`]) y paso (`[step]`) se resaltan en azul, los valores iniciales de las
 variables para la ejecución se muestran en verde y los datos de indicadores de medición se muestran en morado.
 
-![[behaviorspace//behaviorspace/bs-table.png]]
+![[behaviorspace//behaviorspace/bs-table.webp]]
 
 #### Resultados en hoja de cálculo
 
@@ -527,7 +527,7 @@ muestran en verde,
 los indicadores adicionales calculados se muestran en anaranjado, y los datos de medición de indicadores se encuentran
 en morado.
 
-![[behaviorspace//behaviorspace/bs-spreadsheet.png]]
+![[behaviorspace//behaviorspace/bs-spreadsheet.webp]]
 
 #### Resultados estadísticos
 
@@ -550,7 +550,7 @@ En la siguiente imagen de muestra de **Resultados estadísticos**, la sección d
 las combinaciones de parámetros en verde, las columnas de número de paso (`[step]`) en azul, y los datos estadísticos
 morado.
 
-![[behaviorspace//behaviorspace/bs-stats.png]]
+![[behaviorspace//behaviorspace/bs-stats.webp]]
 
 #### Resultados en lista
 
@@ -577,7 +577,7 @@ el nombre del reportero en anaranjado, las columnas de número de ejecución (`[
 (`[step]`)
 en azul, los valores iniciales de las variables en verde, y la lista expandida de datos en morado.
 
-![[behaviorspace//behaviorspace/bs-lists.png]]
+![[behaviorspace//behaviorspace/bs-lists.webp]]
 
 #### Cambios en archivos de resultados
 

apps/docs/autogen/behaviorspace.md

@@ -489,7 +489,7 @@ In the **Table output** sample image below, the header section is in red, the ru
 columns are in blue, the initial values of the variables for the run are in green, and the
 measurement metric data is in purple.
 
-![[behaviorspace/bs-table.png]]
+![[behaviorspace/bs-table.webp]]
 
 #### Spreadsheet output
 This format lists the step numbers as well as each metric for each run in a
@@ -520,7 +520,7 @@ In the **Spreadsheet output** sample image below, the header section is in red,
 is in blue, the initial values of the variables for the run are in green, the extra calculated
 metrics are in orange, and the measurement metric data is in purple.
 
-![[behaviorspace/bs-spreadsheet.png]]
+![[behaviorspace/bs-spreadsheet.webp]]
 
 #### Statistics output
 *(Since 6.4)*
@@ -552,7 +552,7 @@ standard deviation of "count frogs", followed by the same statistics for
 and columns A-D show the parameter combination that was used. The statistics
 are calculated across all the repetitions.
 
-![[behaviorspace/bs-stats.png]]
+![[behaviorspace/bs-stats.webp]]
 
 #### Lists output
 *(Since 6.4)*
@@ -575,7 +575,7 @@ are in green, and the expanded list data is in purple. The list data starts in
 row 7, with the headers (the index into the list, starting from 0) starting in
 column E.
 
-![[behaviorspace/bs-lists.png]]
+![[behaviorspace/bs-lists.webp]]
 
 #### Output File Changes
 *(Since 6.4)*

apps/docs/autogen/codetab.md

@@ -2,7 +2,7 @@
 
 The Code tab is where the code for the model is stored. Commands you only want
 to use once can be typed in the Command Center, but collections of commands that
-you want to save for later use can be stored in the Code tab. ![[codetab/codetab.png]]
+you want to save for later use can be stored in the Code tab. ![[codetab/codetab.webp]]
 
 #### Table of Contents
 
@@ -15,7 +15,7 @@ Tools menu “Preferences” item on Windows and Linux, and with the NetLogo men
 
 ## Code Tab Toolbar
 
-<p><img src="./images/codetab/codetabtoolbar.png" style="width:6in" /></p>
+<p><img src="./images/codetab/codetabtoolbar.webp" style="width:6in" /></p>
 Details for these items can be found in the corresponding sections.
 
 - [Check](#checking-for-errors)
@@ -42,10 +42,10 @@ preference.
 <tbody>
 <tr>
  <td>
-<img src="./images/codetab/codetabproceduresmenu.png" style="width:2in" />
+<img src="./images/codetab/codetabproceduresmenu.webp" style="width:2in" />
 </td>
 <td>
-<img src="./images/codetab/codetabproceduresmenusearch.png" style="width:2in" />
+<img src="./images/codetab/codetabproceduresmenusearch.webp" style="width:2in" />
 </td>
 </tr>
 </tbody>
@@ -64,7 +64,7 @@ error will not be highlighted. If the error occurs in the Interface tab, for
 example if any button or plot commands result in a compilation error, the
 Interface tab will turn orange instead.
 
-![[codetab/codetaberror.png]]
+![[codetab/codetaberror.webp]]
 
 Switching tabs also causes the code to be checked, so if you just switch tabs,
 pressing the Check button first isn't necessary.
@@ -88,7 +88,7 @@ can then be moved and resized.
 ## Find & Replace
 
 To find a fragment of code in the Code tab, click on the "Find" button in the
-Code toolbar and the Find dialog will appear. ![[codetab/find-replace.png]]
+Code toolbar and the Find dialog will appear. ![[codetab/find-replace.webp]]
 
 You may enter a word or phrase to find, and optionally also a new word or phrase
 to replace it with. The "Ignore case" checkbox controls whether the
@@ -113,7 +113,7 @@ you open a set of square brackets "[" (perhaps after an `if` statement), NetLogo
 will automatically add spaces so that the following lines of code are two spaces
 further indented than the bracket. When you close the square brackets the
 closing bracket will be lined up with the matching open bracket.
-![[codetab/tabified-code.png]]
+![[codetab/tabified-code.webp]]
 
 NetLogo will try to indent the code as you type, but you can also press the tab
 key anywhere on any line to ask NetLogo to indent the line immediately. Or, you
@@ -170,10 +170,10 @@ File" items .You can make this menu always visible using the "Always show
 <tbody>
 <tr>
  <td>
-<img src="./images/codetab/includesmenu.png" />
+<img src="./images/codetab/includesmenu.webp" />
 </td>
 <td>
-<img src="./images/codetab/includesmenuopen.png" />
+<img src="./images/codetab/includesmenuopen.webp" />
 </td>
 </tr>
 </tbody>
@@ -196,10 +196,10 @@ apply to all Code tabs, not just the one that is currently visible.
 <tbody>
 <tr>
  <td>
-<img src="./images/codetab/tabsmenu.png" />
+<img src="./images/codetab/tabsmenu.webp" />
 </td>
 <td>
-<img src="./images/codetab/codetabtoolbarwithnls.png"  style="width:7in" />
+<img src="./images/codetab/codetabtoolbarwithnls.webp"  style="width:7in" />
 </td>
 </tr>
 </tbody>

apps/docs/autogen/colorpicker.md

@@ -32,7 +32,7 @@ The Simple tab of the Color Picker in the Tools menu has buttons to allow the
 user to copy the color (icon to the right of the grey rectangle), or exit the
 dialog (cancel).
 
-<p><img src="./images/colorpicker/colorpickersimple.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickersimple.webp"style="width:7in" /></p>
 
 As shown below Simple tab for the Color Input adds a blue 'OK' button to the
 right of 'Cancel.' Choosing 'OK' changes the Input to the selected color,
@@ -41,12 +41,12 @@ selected color in the clipboard. It can then be copied to the Code Tab, or any
 other text area. The dialog remains open. Cancel closes the dialog without
 changing the color input widget.
 
-<p><img src="./images/colorpicker/colorpickersimpleoklight.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickersimpleoklight.webp"style="width:7in" /></p>
 
 When editing a Note, there are four buttons that can be clicked to open a Color
 Picker.
 
-<p><img src="./images/colorpicker/editnotelight.png"/></p>
+<p><img src="./images/colorpicker/editnotelight.webp"/></p>
 
 The 'Simple' tab of the color picker is the same, regardless of context. The
 'Advanced' tab allows different output formats, depending on the context.
@@ -57,7 +57,7 @@ The 'Simple' tab of the color picker is the same, regardless of context. The
 
 The Advanced Tab allows a much more nuanced way to choose a color.
 
-<p><img src="./images/colorpicker/colorpickeradvanced.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickeradvanced.webp"style="width:7in" /></p>
 
 The rainbow slider on the left allows users to select a hue. The slider to its
 right allows the user to select the transparency of the color. By default, the
@@ -79,15 +79,15 @@ text field. For HSB (Hue, Saturation, Brightness) there are three numeric
 fields. The color selected using the Input format can then be modified by using
 the hue slider, transparency slider or the palette rectangle.
 
-<p><img src="./images/colorpicker/colorpickerinputformatchoices.png"/></p>
+<p><img src="./images/colorpicker/colorpickerinputformatchoices.webp"/></p>
 
 In this example the input is a NetLogo word.
 
-<p><img src="./images/colorpicker/colorpickerinputformatNLword.png"/></p>
+<p><img src="./images/colorpicker/colorpickerinputformatNLword.webp"/></p>
 
 In this example the input is HSB.
 
-<p><img src="./images/colorpicker/colorpickerHSBinputRGBAoutput.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickerHSBinputRGBAoutput.webp"style="width:7in" /></p>
 
 ### Output Format
 
@@ -98,7 +98,7 @@ Number can be output. As the user changes a color the value of the Input value
 is updated. In the image below it was initially lime - 0.3, but changed to
 lime - 0.6
 
-<p><img src="./images/colorpicker/colorpickerNLwordinputRGBAoutput.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickerNLwordinputRGBAoutput.webp"style="width:7in" /></p>
 
 ### Output Formats for Different Contexts
 
@@ -119,7 +119,7 @@ alpha). Otherwise "RGBA" output produces a 4-item list (with alpha). In the
 example below you can see that the output is a 3-item list, because there is no
 transparency and RGBA output is selected.
 
-<p><img src="./images/colorpicker/colorpickerHexinputRGBAoutput.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickerHexinputRGBAoutput.webp"style="width:7in" /></p>
 
 ### Details about the Alpha Bar
 
@@ -133,6 +133,6 @@ that the output color will be opaque. The first example shows the case where
 there is no alpha bar. The second example show the highlighted output because
 there is transparency, but an opaque output format.
 
-<p><img src="./images/colorpicker/colorpickernoalpha.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickernoalpha.webp"style="width:7in" /></p>
 
-<p><img src="./images/colorpicker/colorpickerHSBinputNLnumberoutput.png"style="width:7in" /></p>
+<p><img src="./images/colorpicker/colorpickerHSBinputNLnumberoutput.webp"style="width:7in" /></p>

apps/docs/autogen/copyright.md

@@ -31,7 +31,7 @@ Commercial licenses are also available. To inquire about commercial licenses, pl
 
 Copyright 1999-2025 by Uri Wilensky.
 
-[![Creative Commons License](images/cc-by-sa-3.0.png)](https://creativecommons.org/licenses/by-sa/3.0/)
+[![Creative Commons License](images/cc-by-sa-3.0.webp)](https://creativecommons.org/licenses/by-sa/3.0/)
 
 The NetLogo User Manual by [Uri Wilensky](http://ccl.northwestern.edu/netlogo/) is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported License](https://creativecommons.org/licenses/by-sa/3.0/).