Completed NetLogo site with reference exploring files

apps/netlogo/.env

@@ -3,6 +3,8 @@ PROJECT_ROOT="."
 PRODUCT_NAME="NetLogo"
 PRODUCT_WEBSITE="https://www.netlogo.org"
 
+PUBLIC_BACKEND_URL="https://backend.netlogo.org"
+
 REPO_ROOT=../..
 EXTENSIONS_DIR="$REPO_ROOT/external/extensions"
 

apps/netlogo/.env.development

@@ -7,5 +7,7 @@ PROJECT_ROOT="."
 PRODUCT_NAME="NetLogo"
 PRODUCT_WEBSITE="https://learn.netlogo.org"
 
+PUBLIC_BACKEND_URL="https://backend.netlogo.org"
+
 REPO_ROOT=../..
 EXTENSIONS_DIR="$REPO_ROOT/external/extensions"

apps/netlogo/app/app.config.ts

@@ -6,37 +6,26 @@ export default defineAppConfig({
     },
 
     container: {
-      base: "max-w-[110ch] mx-auto px-0 mx-auto px-[var(--space-xl)] lg:px-0",
+      base: "max-w-[150ch] px-4 lg:px-24 mx-auto",
     },
 
-    breadcrumb: {
+    input: {
       slots: {
-        list: "[&_li]:m-0! p-0",
+        root: "w-full",
+        base: "py-2!",
       },
     },
 
-    contentNavigation: {
+    formField: {
       slots: {
-        list: "mx-0 px-2 lg:mt-[var(--block-top)]",
-        listWithChildren: "px-0",
+        label: "font-bold text-lg",
       },
-    },
-    contentToc: {
-      slots: {
-        root: "px-0! w-full -mx-0",
-        trailing: "hidden",
-        title:
-          "w-full px-[var(--space-lg)] py-2 bg-[var(--secondary-heading-background-color)] text-[var(--secondary-heading-text-color)] w-full",
-      },
-    },
-    pageAside: {
-      slots: {
-        root: "pt-0",
-      },
-    },
-    blogPost: {
-      slots: {
-        footer: "p-4 sm:p-6",
+      variants: {
+        orientation: {
+          horizontal: {
+            root: "grid grid-cols-12 gap-4 items-center [&>:first-child]:col-span-12 sm:[&>:first-child]:col-span-3 [&>:nth-child(2)]:col-span-12 sm:[&>:nth-child(2)]:col-span-9 [&>:nth-child(2)]:w-full",
+          },
+        },
       },
     },
   },

apps/netlogo/app/app.vue

@@ -3,7 +3,9 @@
   <NuxtLoadingIndicator color="var(--ui-primary)" />
   <NuxtLayout>
     <NuxtErrorBoundary>
-      <NuxtPage />
+      <UPage>
+        <NuxtPage />
+      </UPage>
     </NuxtErrorBoundary>
   </NuxtLayout>
 </template>

apps/netlogo/app/assets/styles/main.scss

@@ -1,14 +1,69 @@
-@use 'sass:meta';
+@use "sass:meta";
 
 @layer theme, base, components, website, utilities;
 
 @layer utilities {
-  @include meta.load-css('@repo/tailwind-config/scss/utilities.scss');
+  @include meta.load-css("@repo/tailwind-config/scss/utilities.scss");
 }
 
 @layer website {
-  @include meta.load-css('@repo/tailwind-config/scss/normalize.scss');
-  @include meta.load-css('@repo/tailwind-config/scss/docs-theme.scss');
+  @include meta.load-css("@repo/tailwind-config/scss/normalize.scss");
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-bottom: 0;
+  }
+  // @include meta.load-css('@repo/tailwind-config/scss/docs-theme.scss');
 }
 
-@include meta.load-css('@repo/vue-ui/styles.scss');
+@include meta.load-css("@repo/vue-ui/styles.scss");
+
+.typography {
+  img {
+    display: block;
+    margin: 1rem auto;
+    border-radius: 0.375rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+    font-weight: 500;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    /* text-align: center; */
+  }
+
+  h2 {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  iframe {
+    margin-top: 1rem;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+
+  a {
+    color: var(--color-link);
+    &:hover {
+      color: var(--color-link-hover);
+    }
+  }
+}

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

@@ -1,3 +1,3 @@
-import WebsiteLogo from "@repo/vue-ui/assets/brands/NetLogoLearnGuide.svg";
+import WebsiteLogo from "@repo/vue-ui/assets/brands/NetLogoOrgLogo.svg";
 
 export { WebsiteLogo };

apps/netlogo/app/assets/website-meta.json

@@ -1,5 +1,5 @@
 {
-  "name": "NetLogo",
+  "name": "NetLogo Home",
   "fullName": "NetLogo: Agent-Based Modeling Environment",
   "description": "Agent-Based Modeling Environment for Simulating Natural and Social Phenomena.",
   "longDescription": "NetLogo is a multi-agent programmable modeling environment used for simulating natural and social phenomena. It is widely used in education, research, and industry to create complex models with ease. Explore NetLogo's features, download the software, and access extensive documentation and resources to get started with agent-based modeling.",
@@ -18,4 +18,4 @@
     "Programming",
     "Agent-based Modeling"
   ]
-}
+}

apps/netlogo/app/components/ClientFooter.vue

@@ -5,10 +5,23 @@
         :brand="WebsiteLogo"
         brand-href="/"
         :href-aria-label="hrefAriaLabel"
-        class="w-fit mx-auto"
+        :span="2"
+        class="w-fit"
       >
+        <p class="text-md text-gray-600 mt-2">
+          © {{ currentYear }} NetLogo Center at Northwestern University
+        </p>
       </FooterBrandSection>
-      <FooterSection :span="8">
+
+      <FooterLinksSection
+        v-for="section in footerSections"
+        :key="section.title"
+        :title="section.title"
+        :links="section.links"
+        :span="calculateSpan(footerSections.length)"
+      />
+
+      <FooterSection v-if="footerSections.length === 0" :span="10">
         <p>{{ meta.longDescription }}</p>
       </FooterSection>
     </FooterContainer>
@@ -17,14 +30,41 @@
 
 <script setup lang="ts">
 import { WebsiteLogo } from "~/assets/website-logo";
+import { useNavigation } from "~/composables/useNavigation";
 import { useWebsite } from "~/composables/useWebsite";
 
 const meta = useWebsite();
 const currentYear = ref(new Date().getFullYear());
 
 const hrefAriaLabel = computed(() => `Navigate to the homepage of ${meta.value.name}`);
 
+const { footerSections } = await useNavigation();
+
+const calculateSpan = (sectionCount: number) => {
+  if (sectionCount === 0) return 10;
+  return Math.floor(10 / sectionCount);
+};
+
 onMounted(() => {
   currentYear.value = new Date().getFullYear();
 });
 </script>
+
+<style scoped>
+:deep(.h-8) {
+  height: 3rem !important;
+}
+
+:deep(.list-disc) {
+  list-style-type: none !important;
+}
+
+:deep(ul) {
+  padding-left: 0 !important;
+}
+
+:deep(li) {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+}
+</style>

apps/netlogo/app/components/ClientNavbar.vue

@@ -23,9 +23,9 @@
     </NavbarLinksContainer>
 
     <NavbarActionsContainer>
-      <ClientOnly>
-        <SSRUContentSearchButton />
-      </ClientOnly>
+      <Button variant="default" size="sm" class="text-sm px-4 py-2" @click="navigateToDonate">
+        DONATE
+      </Button>
     </NavbarActionsContainer>
   </Navbar>
 
@@ -38,14 +38,8 @@ import type { Navbar as _Navbar } from "@repo/vue-ui/components/navbar/index";
 import { useMediaQuery } from "@vueuse/core";
 import { onMounted, ref, watch } from "vue";
 import { WebsiteLogo } from "~/assets/website-logo";
-
-interface NavbarLink {
-  title: string;
-  href: string;
-  columns?: number;
-  children?: Array<Omit<NavbarLink, "children">>;
-  active?: boolean;
-}
+import { useNavigation, type NavbarLink } from "~/composables/useNavigation";
+import Button from "../../../../packages/vue-ui/src/components/Button.vue";
 
 const route = useRoute();
 
@@ -72,13 +66,14 @@ const handleMediaQueryChange = (): void => {
   }
 };
 
-const navbarLinks = ref<Array<NavbarLink>>([
-  {
-    title: "Home",
-    href: "/",
-    columns: 2,
-  },
-]);
+const navigateToDonate = () => {
+  navigateTo("/donate");
+};
+
+const { navbarLinks: apiNavbarLinks } = await useNavigation();
+
+// Reactive navbar links with active states
+const navbarLinks = ref<NavbarLink[]>(apiNavbarLinks.value);
 
 const updateActiveStates = () => {
   navbarRef.value?.blur();
@@ -120,7 +115,16 @@ const isLinkParentActive = (link: NavbarLink, currentPath: string): boolean => {
   );
 };
 
-updateActiveStates();
+watch(
+  apiNavbarLinks,
+  (newLinks) => {
+    if (newLinks.length > 0) {
+      navbarLinks.value = newLinks;
+      updateActiveStates();
+    }
+  },
+  { immediate: true },
+);
 
 onMounted(() => {
   if (import.meta.client) {

apps/netlogo/app/components/Community.vue

@@ -0,0 +1,77 @@
+<template>
+  <section class="py-12 hyphens-none">
+    <div class="mb-8">
+      <h1 class="font-bold text-4xl lg:text-5xl text-gray-600 mb-4">Community</h1>
+      <p class="text-gray-600 dark:text-gray-400">
+        Join NetLogo community and start contributing today.
+      </p>
+    </div>
+
+    <div class="flex flex-wrap justify-center gap-6">
+      <UPageCard
+        v-for="community in communities"
+        :key="community.title"
+        class="flex flex-col h-auto w-full max-w-sm"
+      >
+        <template #header>
+          <div class="flex items-center gap-3">
+            <img
+              v-if="community.icon?.id"
+              :src="`${backendUrl}/assets/${community.icon.id}`"
+              :alt="community.title"
+              class="w-12 h-12 rounded-lg object-contain bg-blue-100 p-2"
+            />
+            <div v-else class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+              <UIcon name="i-heroicons-cube" class="w-6 h-6 text-blue-600" />
+            </div>
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-0">
+              {{ community.title }}
+            </h3>
+          </div>
+        </template>
+
+        <template #description>
+          <p class="text-gray-600 dark:text-gray-400 flex-grow">
+            {{ community.description }}
+          </p>
+        </template>
+
+        <template #footer>
+          <NuxtLink
+            :to="community.link"
+            :external="isExternalLink(community.link)"
+            :target="isExternalLink(community.link) ? '_blank' : undefined"
+          >
+            <Button variant="default" size="lg" class="mt-2"> Go </Button>
+          </NuxtLink>
+        </template>
+      </UPageCard>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { CommunityEntry } from "~/utils/api";
+import Button from "../../../../packages/vue-ui/src/components/Button.vue";
+
+defineProps<{
+  communities: CommunityEntry[];
+}>();
+
+const config = useRuntimeConfig();
+const backendUrl = config.public.backendUrl as string;
+
+const isExternalLink = (link: string) => {
+  return link?.startsWith("http://") || link?.startsWith("https://");
+};
+</script>
+
+<style scoped>
+:deep(.flex-grow) {
+  flex-grow: 1;
+}
+
+:deep(p) {
+  hyphens: none !important;
+}
+</style>