Merge pull request #6 from zkSync-Community-Hub/update-theme

Update theme
zkSync-Community-Hub · May 15, 2024 · dfdf910 · dfdf910
2 parents 8473014 + 0332a63
commit dfdf910
Show file tree

Hide file tree

Showing 20 changed files with 457 additions and 42 deletions.
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -3,6 +3,9 @@ on:
   pull_request:
   workflow_dispatch:
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 permissions:
   checks: write
   contents: read

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -3,6 +3,9 @@ on:
   push:
     branches: [staging]
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 jobs:
   build_and_deploy:
     env:

diff --git a/app.vue b/app.vue
@@ -40,7 +40,9 @@ useSeoMeta({
   twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
 });
 
-defineOgImage({ component: 'OgImageCommunityCode' });
+defineOgImage({
+  component: 'OgImageZK',
+});
 
 provide('navigation', navigation);
 </script>
@@ -49,7 +51,7 @@ provide('navigation', navigation);
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent :links="[]" />
+    <HeaderComponent />
 
     <UMain>
       <NuxtLayout>

diff --git a/components/IconOrbit.vue b/components/IconOrbit.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="orbit">
+    <ul class="orbit-wrap">
+      <li class="orbit-center" />
+
+      <li>
+        <ul class="ring-0">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/alchemy.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+
+      <li>
+        <ul class="ring-1">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/hardhat.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/Vyper.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        <ul class="ring-2">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/alchemy.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/Solidity_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        <ul class="ring-3">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/viem.png"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+$orbitItemSize: 1.6em;
+$map: (
+  ring-0: 4,
+  ring-1: 3,
+  ring-2: 8,
+  ring-3: 3,
+);
+$lastRing: 3;
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+}
+
+.orbit {
+  background: transparent;
+  float: left;
+  width: 100%;
+  min-width: 90vw;
+  min-height: 100vh;
+}
+
+.orbit-icon {
+  width: $orbitItemSize;
+  height: $orbitItemSize;
+  line-height: $orbitItemSize;
+  font-size: 1.2em;
+  border-radius: 50%;
+  background: #ccc;
+  color: #fff;
+  text-align: center;
+  display: block;
+}
+
+$orbit-ring-left: 50%;
+$orbit-ring-top: 18%;
+
+.orbit-wrap {
+  height: 40em;
+  list-style: none;
+  font-size: 1.3em;
+
+  > li {
+    position: absolute;
+    left: $orbit-ring-left;
+    top: $orbit-ring-top;
+    transform: translate(-50%, -50%);
+  }
+}
+
+ul[class^='ring'] {
+  @extend %ring;
+  transition: all 300ms ease-in-out;
+  box-shadow: none !important;
+
+  li:not(.black-hole) {
+    @extend %orbiting-object;
+    transition: all 300ms ease-in-out;
+  }
+}
+
+@mixin orbit-item($numItems, $numRing) {
+  @for $s from 1 through $numItems + 1 {
+    // Spread items over the ring
+    $deg: calc(380deg / $numItems);
+
+    .ring-#{$numRing} > *:nth-of-type(#{$s}) {
+      transform: rotate($s * $deg) translate(21em - ($numRing * 4)) rotate(-$s * $deg);
+    }
+  }
+}
+
+.light img {
+  background: rgb(215, 241, 251) !important;
+}
+
+// Render rings
+@for $i from 0 through $lastRing {
+  .ring-#{$i} {
+    $size: 42em - ($i * 8);
+    $randomized: random(15);
+    // decrease each ring in size
+    width: $size;
+    height: $size;
+    animation: clockwiseRotate (75s - ($i * $randomized)) linear infinite;
+
+    i,
+    img {
+      animation: counterClockwiseRotate (75s - ($i * $randomized)) linear infinite;
+      width: 60px;
+      height: 35px;
+      background: rgba(148, 148, 148, 0.826);
+    }
+
+    .black-hole {
+      transform: none !important;
+      position: absolute;
+      // background: black;
+      width: $size - 0.2em;
+      height: $size - 0.2em;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      border-radius: 50%;
+      box-sizing: content-box;
+    }
+  }
+
+  @include orbit-item(map-get($map, ring-#{$i}), $i);
+}
+
+%ring {
+  // border: solid 1px rgb(125 116 153 / 60%);
+  background: linear-gradient(
+    to bottom right,
+    rgba(184, 39, 252, 0.5) 0%,
+    rgba(44, 144, 252, 0.5) 25%,
+    rgba(184, 253, 51, 0.5) 50%,
+    rgba(254, 200, 55, 0.5) 75%,
+    rgba(253, 24, 146, 0.5) 100%
+  );
+  position: relative;
+  padding: 0;
+  border-radius: 50%;
+  list-style: none;
+  box-sizing: content-box;
+}
+
+%orbiting-object {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $orbitItemSize;
+  height: $orbitItemSize;
+  margin: calc(-1 * $orbitItemSize / 2);
+}
+
+/*
+  center;
+*/
+.orbit-center {
+  z-index: 5;
+  font-size: 2em;
+  width: 1.8em;
+  height: 1.8em;
+  line-height: 1.8em;
+  text-align: center;
+  background: transparent;
+  border-radius: 50%;
+}
+.orbit-center__icon {
+  transform: rotateZ(-360deg);
+  transition: all 300ms ease-in-out;
+}
+
+/*
+animations
+*/
+@keyframes clockwiseRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counterClockwiseRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+</style>
diff --git a/layouts/tutorials.vue b/layouts/tutorials.vue
@@ -4,10 +4,8 @@ const route = useRoute();
 if (!route.path) {
   throw new Error('Route path is not defined');
 }
-console.log('PATH', route);
 
 const { data: info } = await useAsyncData(`${route.path}-info`, () => {
-  console.log('ROUTE', route.fullPath);
   return queryContent(`${route.fullPath}/_info`).findOne();
 });
 
@@ -21,25 +19,6 @@ const { data: navigation } = await useAsyncData(`${route.path}-sidenav`, () => {
   return fetchContentNavigation(query);
 });
 
-// const links = computed(() => {
-//   const pageLinks = navigation.value;
-//   return [
-//     {
-//       label: 'Tutorials',
-//       icon: 'i-heroicons-arrow-left-circle',
-//       to: '/tutorials',
-//     },
-//     {
-//       label: info.value?.title || 'Guide',
-//       collapsible: false,
-//       children: pageLinks[0].children[0].children.map((item) => ({
-//         label: item.title,
-//         to: item._path,
-//       })),
-//     },
-//   ];
-// });
-console.log('WHY INFO', info.value);
 const links = [
   {
     label: 'Tutorials',
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,9 @@ on: @@
       push:
         branches: [staging]
+    env:
+      NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
     jobs:
       build_and_deploy:
         env:
@@ Expand Down @@