small cleanups (#7)

# What 💻 * Adjusted the particles configuration * cleaned up some things missed when testing nuxt content * adjusted prettier ignore # Why ✋ * cleaner templates and particles configuration is now in a separate file * components made for Nuxt Content need to be placed in `/components/content/` folder. This accidentally got covered by the prettier ignore file. The purpose of the prettier ignore for markdown content is so that we don't have prettier formatting non-standard markdown content (like vue component syntax) and breaking them. This is why markdown is ignored for now on prettier auto formatting.
matter-labs · Mar 27, 2024 · d3206fc · d3206fc
1 parent df27edd
commit d3206fc
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 182 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,4 +2,4 @@ node_modules
 .github
 .idea
 public
-content
+**/*.md
diff --git a/app.vue b/app.vue
@@ -67,7 +67,7 @@ provide('navigation', navigation);
     <ClientOnly>
       <LazyUContentSearch
         :files="files"
-        :navigation="navigation"
+        :navigation="navigation || []"
       />
     </ClientOnly>
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -7,7 +7,7 @@ export default defineNuxtConfig({
   hooks: {
     // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
     'components:extend': (components) => {
-      const globals = components.filter((c) => ['UButton', 'UIcon', 'Test'].includes(c.pascalName));
+      const globals = components.filter((c) => ['UButton', 'UIcon'].includes(c.pascalName));
 
       globals.forEach((c) => (c.global = true));
     },

diff --git a/pages/index.vue b/pages/index.vue
@@ -8,123 +8,53 @@ useSeoMeta({
   description: page.value?.description,
   ogDescription: page.value?.description,
 });
-
-const particlesLoaded = async (container: unknown) => {
-  console.log('Particles container loaded', container);
-};
 </script>
 
 <template>
   <div v-if="page">
-    <div>
-      <vue-particles
-        id="tsparticles"
-        :options="{
-          fpsLimit: 120,
-          interactivity: {
-            events: {
-              onClick: {
-                enable: true,
-                mode: 'push',
-              },
-              onHover: {
-                enable: true,
-                mode: 'repulse',
-              },
-            },
-            modes: {
-              bubble: {
-                distance: 400,
-                duration: 2,
-                opacity: 0.8,
-                size: 40,
-              },
-              push: {
-                quantity: 4,
-              },
-              repulse: {
-                distance: 50,
-                duration: 0.4,
-              },
-            },
-          },
-          particles: {
-            color: {
-              value: '#8b8ccf',
-            },
-            links: {
-              color: '#8b8ccf',
-              distance: 150,
-              enable: true,
-              opacity: 0.5,
-              width: 1,
-            },
-            move: {
-              direction: 'none',
-              enable: true,
-              outModes: 'bounce',
-              random: false,
-              speed: 0.5,
-              straight: false,
-            },
-            number: {
-              density: {
-                enable: true,
-              },
-              value: 80,
-            },
-            opacity: {
-              value: 0.5,
-            },
-            shape: {
-              type: 'circle',
-            },
-            size: {
-              value: { min: 1, max: 5 },
-            },
-          },
-          detectRetina: true,
-        }"
-        @particles-loaded="particlesLoaded"
-      />
-      <ULandingHero
-        v-if="page.hero"
-        v-bind="page.hero"
-      >
-        <template #headline>
-          <UBadge
-            v-if="page.hero.headline"
-            variant="subtle"
-            size="lg"
-            class="relative rounded-full font-semibold"
+    <ULandingHero
+      v-if="page.hero"
+      v-bind="page.hero"
+    >
+      <ClientOnly>
+        <vue-particles
+          id="tsparticles"
+          url="particles.json"
+        />
+      </ClientOnly>
+      <template #headline>
+        <UBadge
+          v-if="page.hero.headline"
+          variant="subtle"
+          size="lg"
+          class="relative rounded-full font-semibold"
+        >
+          <NuxtLink
+            :to="page.hero.headline.to"
+            target="_blank"
+            class="focus:outline-none"
+            tabindex="-1"
           >
-            <NuxtLink
-              :to="page.hero.headline.to"
-              target="_blank"
-              class="focus:outline-none"
-              tabindex="-1"
-            >
-              <span
-                class="absolute inset-0"
-                aria-hidden="true"
-              />
-            </NuxtLink>
+            <span
+              class="absolute inset-0"
+              aria-hidden="true"
+            />
+          </NuxtLink>
 
-            {{ page.hero.headline.label }}
+          {{ page.hero.headline.label }}
 
-            <UIcon
-              v-if="page.hero.headline.icon"
-              :name="page.hero.headline.icon"
-              class="pointer-events-none ml-1 h-4 w-4"
-            />
-          </UBadge>
-        </template>
+          <UIcon
+            v-if="page.hero.headline.icon"
+            :name="page.hero.headline.icon"
+            class="pointer-events-none ml-1 h-4 w-4"
+          />
+        </UBadge>
+      </template>
 
-        <template #title>
-          <MDC :value="page.hero.title" />
-        </template>
-      </ULandingHero>
-    </div>
+      <template #title>
+        <MDC :value="page.hero.title" />
+      </template>
+    </ULandingHero>
 
     <ULandingSection
       :title="page.features.title"

diff --git a/public/particles.json b/public/particles.json
@@ -1,74 +1,67 @@
 {
-  "background":{
-     "color":{
-        "value":"#0d47a1"
-     }
+  "fpsLimit": 120,
+  "interactivity": {
+    "events": {
+      "onClick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "onHover": {
+        "enable": true,
+        "mode": "repulse"
+      }
+    },
+    "modes": {
+      "bubble": {
+        "distance": 400,
+        "duration": 2,
+        "opacity": 0.8,
+        "size": 40
+      },
+      "push": {
+        "quantity": 4
+      },
+      "repulse": {
+        "distance": 50,
+        "duration": 0.4
+      }
+    }
   },
-  "fpsLimit":120,
-  "interactivity":{
-     "events":{
-        "onClick":{
-           "enable":true,
-           "mode":"push"
-        },
-        "onHover":{
-           "enable":true,
-           "mode":"repulse"
-        }
-     },
-     "modes":{
-        "bubble":{
-           "distance":400,
-           "duration":2,
-           "opacity":0.8,
-           "size":40
-        },
-        "push":{
-           "quantity":4
-        },
-        "repulse":{
-           "distance":200,
-           "duration":0.4
-        }
-     }
+  "particles": {
+    "color": {
+      "value": "#8b8ccf"
+    },
+    "links": {
+      "color": "#8b8ccf",
+      "distance": 150,
+      "enable": true,
+      "opacity": 0.5,
+      "width": 1
+    },
+    "move": {
+      "direction": "none",
+      "enable": true,
+      "outModes": "bounce",
+      "random": false,
+      "speed": 0.5,
+      "straight": false
+    },
+    "number": {
+      "density": {
+        "enable": true
+      },
+      "value": 80
+    },
+    "opacity": {
+      "value": 0.5
+    },
+    "shape": {
+      "type": "circle"
+    },
+    "size": {
+      "value": { "min": 1, "max": 5 }
+    }
   },
-  "particles":{
-     "color":{
-        "value":"#ffffff"
-     },
-     "links":{
-        "color":"#ffffff",
-        "distance":150,
-        "enable":true,
-        "opacity":0.5,
-        "width":1
-     },
-     "move":{
-        "direction":"none",
-        "enable":true,
-        "outModes":"bounce",
-        "random":false,
-        "speed":6,
-        "straight":false
-     },
-     "number":{
-        "density":{
-           "enable":true
-        },
-        "value":80
-     },
-     "opacity":{
-        "value":0.5
-     },
-     "shape":{
-        "type":"circle"
-     },
-     "size":{
-        "value":{
-           "min":1,
-           "max":5
-        }
-     }
-  },
-  "detectRetina":true
+  "detectRetina": true
 }
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ node_modules @@
     .github
     .idea
     public
-    content
+    **/*.md