Add netlogo-theme.scss with non-docs comptabile styling and scoped docs styling

.gitignore

@@ -36,3 +36,8 @@ packages/mustache/test-dist/
 # should not be tracked
 GITIGNORE_*
 GITIGNORE_*/**/*
+
+.env
+.env.local
+.env.development
+.env.production

apps/docs/.env

@@ -1,16 +1,21 @@
+NUXT_TELEMETRY_DISABLED=true
+
 PROJECT_ROOT="."
+REPO_ROOT=../..
+VERSIONS_SRC="/versions.json"
+EXTENSIONS_DIR="$REPO_ROOT/external/extensions"
 
 PRODUCT_NAME="NetLogo Documentation"
+PRODUCT_DESCRIPTION="The official documentation for the NetLogo modeling environment, including user manuals, tutorials, and reference materials."
+PRODUCT_KEYWORDS="NetLogo, Documentation, User Manual, Tutorials, Reference, Agent-Based Modeling, Simulation, Programming, Modeling Environment"
 PRODUCT_VERSION="7.0.3"
 PRODUCT_DISPLAY_NAME="7.0.3"
 PRODUCT_BUILD_DATE=$(date +%Y-%m-%dT%H:%M:%SZ)
 PRODUCT_WEBSITE="https://docs.netlogo.org"
 
-VERSIONS_SRC="/versions.json"
-
-REPO_ROOT=../..
-EXTENSIONS_DIR="$REPO_ROOT/external/extensions"
-
 BUILD_LATEST=${BUILD_LATEST:-true}
 BUILD_REPO="git@github.com:NetLogo/docs.git"
 BUILD_BRANCH="main"
+
+# Enable for Development
+NUXT_DEV_TOOLS=true

apps/docs/.env.example

@@ -0,0 +1,21 @@
+NUXT_TELEMETRY_DISABLED=true
+
+PROJECT_ROOT="."
+REPO_ROOT=../..
+VERSIONS_SRC="/versions.json"
+EXTENSIONS_DIR="$REPO_ROOT/external/extensions"
+
+PRODUCT_NAME="NetLogo Documentation"
+PRODUCT_DESCRIPTION="The official documentation for the NetLogo modeling environment, including user manuals, tutorials, and reference materials."
+PRODUCT_KEYWORDS="NetLogo, Documentation, User Manual, Tutorials, Reference, Agent-Based Modeling, Simulation, Programming, Modeling Environment"
+PRODUCT_VERSION="7.0.3"
+PRODUCT_DISPLAY_NAME="7.0.3"
+PRODUCT_BUILD_DATE=$(date +%Y-%m-%dT%H:%M:%SZ)
+PRODUCT_WEBSITE="https://docs.netlogo.org"
+
+BUILD_LATEST=${BUILD_LATEST:-true}
+BUILD_REPO="git@github.com:NetLogo/docs.git"
+BUILD_BRANCH="main"
+
+# Enable for Development
+# NUXT_DEV_TOOLS=true

apps/docs/app/app.config.ts

@@ -0,0 +1 @@
+export default defineAppConfig({});

apps/docs/app/assets/styles/tailwind.css

@@ -6,4 +6,5 @@
 
 @import 'tw-animate-css';
 @source "../../../../../packages/vue-ui/src";
+@source "../../../../../packages/nuxt-core/";
 @source "../../../content/**/*.md";

apps/docs/app/assets/website-logo.ts

@@ -0,0 +1,2 @@
+import WebsiteLogo from '@repo/vue-ui/assets/brands/NetLogoUserManual.svg';
+export { WebsiteLogo };

apps/docs/app/components/Announcer.vue

@@ -31,14 +31,18 @@ const fetcher = async () => {
 const { data: announcements } = await useLazyAsyncData<Announcements>('announcements', fetcher, { server: false });
 
 const route = useRoute();
-const productInfo = useProductInfo();
+const {
+  public: {
+    website: { productVersion },
+  },
+} = useRuntimeConfig();
 const toast = useToast();
 
 const visibleAnnouncements = computed(() => {
   if (!announcements.value) return [];
 
   return announcements.value.filter((item) => {
-    return item.appliesTo(route.path, productInfo.productVersion);
+    return item.appliesTo(route.path, productVersion);
   });
 });
 

apps/docs/app/components/ClientNavbar.vue

@@ -28,7 +28,7 @@
       <VersionSelectDropdown
         :versions="versions"
         :selected-version="selectedVersion"
-        @version-change="(version) => onVersionChange(version, productInfo)"
+        @version-change="(version) => onVersionChange(version, { productVersion, productWebsite })"
       />
 
       <NavbarAction href="https://github.com/NetLogo" aria-label="NetLogo GitHub Repository">
@@ -57,8 +57,11 @@ import { useMediaQuery } from '@vueuse/core';
 import { onMounted, ref, watch } from 'vue';
 import { onVersionChange, pullVersionsFromSource } from '~~/shared/versions';
 
-const productInfo = useProductInfo();
-const runtimeInfo = useRuntimeInfo();
+const {
+  public: {
+    website: { productWebsite, productVersion, versionsSrc },
+  },
+} = useRuntimeConfig();
 
 interface NavbarLink {
   title: string;
@@ -174,7 +177,7 @@ const arePathnamesCongruent = (windowPathname: string, candidatePathname: string
     pathname
       .split('/')
       .filter((p) => p.length > 0)
-      .filter((p) => p !== productInfo.productVersion)
+      .filter((p) => p !== productVersion)
       .map((p) => p.replace(/\$/, ''))
       .map((p) => p.trim().split('#')[0] ?? '')
       .join('/');
@@ -196,7 +199,7 @@ const isLinkParentActive = (link: NavbarLink, currentPath: string): boolean => {
 
 // Version selection
 const versions = ref<Record<string, VersionProps>>({
-  [productInfo.productVersion]: { displayName: productInfo.productVersion },
+  [productVersion]: { displayName: productVersion },
   '7.0.2': { displayName: '7.0.2' },
   '7.0.1': { displayName: '7.0.1' },
   '7.0.0': { displayName: '7.0.0' },
@@ -223,14 +226,14 @@ const versions = ref<Record<string, VersionProps>>({
   '1.0': { disabled: true },
 });
 
-const selectedVersion = ref<string>(productInfo.productVersion);
+const selectedVersion = ref<string>(productVersion);
 
 onMounted(() => {
   if (import.meta.client) {
     updateActiveStates();
     handleMediaQueryChange();
     setTimeout(async () => {
-      versions.value = await pullVersionsFromSource(versions.value, runtimeInfo.versionsSrc);
+      versions.value = await pullVersionsFromSource(versions.value, versionsSrc);
     }, 0);
   }
 });

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

@@ -28,7 +28,11 @@ import { wrapCacheLocalStorage } from '@repo/utils/lib/storage/cached-local-stor
 import { removeHtmlExtension } from '~/utils/url';
 import type { CatalogItemData, PrimitiveCatalogProps, SideCatalogItem } from './types';
 
-const productInfo = useProductInfo();
+const {
+  public: {
+    website: { productVersion },
+  },
+} = useRuntimeConfig();
 
 const { dictionaryDisplayName, dictionaryHomeDirectory, indexFileURI, currentItemId, currentItemLabel, primRoot } =
   defineProps<PrimitiveCatalogProps>();
@@ -69,7 +73,7 @@ const {
   error,
 } = await useLazyAsyncData(
   indexFileURI,
-  wrapCacheLocalStorage([productInfo.productVersion, 'primitive-catalog', indexFileURI].join('-'), null, () =>
+  wrapCacheLocalStorage([productVersion, 'primitive-catalog', indexFileURI].join('-'), null, () =>
     fetcher(indexFileURI),
   ),
   { server: false },

apps/docs/app/layouts/default.vue

@@ -11,14 +11,18 @@
 </template>
 
 <script setup lang="ts">
-const productInfo = useProductInfo();
-const pageProductName = `NetLogo ${productInfo.productVersion} User Manual`;
+const {
+  public: {
+    website: { productVersion, productWebsite },
+  },
+} = useRuntimeConfig();
+const pageProductName = `NetLogo ${productVersion} User Manual`;
 
 const route = useRoute();
 const canonical = computed(() => {
-  const routeWithoutVersion = route.fullPath.replace(`/${productInfo.productVersion}`, '');
-  const routeWithVersion = ['/', productInfo.productVersion, routeWithoutVersion].join('');
-  return new URL(routeWithVersion, productInfo.productWebsite).toString();
+  const routeWithoutVersion = route.fullPath.replace(`/${productVersion}`, '');
+  const routeWithVersion = ['/', productVersion, routeWithoutVersion].join('');
+  return new URL(routeWithVersion, productWebsite).toString();
 });
 
 useHead({

apps/docs/app/pages/[...slug].vue

@@ -4,14 +4,26 @@ import PrimitiveCatalog from '~/components/PrimitiveCatalog/PrimitiveCatalog.vue
 import { PrimitiveCatalogSchema } from '~/components/PrimitiveCatalog/types';
 import type { DocumentMetadata } from '~~/lib/docs/schema';
 
-const productInfo = useProductInfo();
+const {
+  public: {
+    website: { productName },
+  },
+} = useRuntimeConfig();
 
 const route = useRoute();
 const path = decodeURIComponent(route.path).replace(/\?/, '');
 const { data: page } = await useAsyncData(path, () => {
   return queryCollection('content').path(path).first();
 });
 
+// Special case due to the large number of
+// primitives on the dictionary page, which causes too many
+// tooltips to be rendered and results in degraded performance.
+// --Omar I. (05-10-2026)
+if (['/dictionary', '/3d'].includes(path)) {
+  provide('prim-tooltip-disabled', true);
+}
+
 const { data: surround } = await useAsyncData(`${path}-surround`, () => {
   return queryCollectionItemSurroundings('content', path, {
     fields: ['description'],
@@ -44,7 +56,7 @@ defineOgImageComponent('DocsSeo', {
   description,
   theme: '#f31500',
   siteLogo: '/turtles.png',
-  siteName: productInfo.productName,
+  siteName: productName,
 });
 
 useSeoMeta({

apps/docs/app/pages/index.vue

@@ -22,7 +22,7 @@
           <Anchor href="/copyright"> Copyright and License Information </Anchor>
           page.
         </p>
-        <div v-if="productInfo.isBeta" class="highlight highlight-warning">
+        <div v-if="productIsBeta" class="highlight highlight-warning">
           <p>
             NetLogo <span v-if="productVersion">{{ productVersion }}</span> is a beta release. It is not recommended for
             production use, but we welcome your feedback on the new features and changes.
@@ -71,25 +71,24 @@ import { ref } from 'vue';
 import beginnersLinksData from '~/assets/beginners-links.json';
 import importantLinksData from '~/assets/important-links.json';
 
-const productInfo = useProductInfo();
-const productVersion = ref(productInfo.productVersion);
+const {
+  public: {
+    website: { productVersion, productDescription, productKeywords, productName, productIsBeta },
+  },
+} = useRuntimeConfig();
 const importantLinks = ref(importantLinksData);
 const beginnersLinks = ref(beginnersLinksData);
 
-const description =
-  'The official documentation for the NetLogo modeling environment, including user manuals, tutorials, and reference materials.';
-// Set page title and meta
 useSeoMeta({
-  description,
-  keywords:
-    'NetLogo,Documentation,User Manual,Tutorials,Reference,Agent-Based Modeling,Simulation,Programming,Modeling Environment',
+  title: productName,
+  description: productDescription,
+  keywords: productKeywords.join(', '),
 });
 
 defineOgImageComponent('DocsSeo', {
-  title: productInfo.productName,
-  description,
+  title: productName,
   theme: '#f31500',
   siteLogo: '/turtles.png',
-  siteName: productInfo.productName,
+  siteName: productName,
 });
 </script>