animate processing bar

packages/website/src/components/FooterNavigation/FooterNavigation.js

@@ -23,8 +23,7 @@ const sections = [
     header: "Developers",
     links: [
       { title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
-      { title: "API Documentation", href: "https://siasky.net/docs/", ...external },
+      { title: "API and SDK Documentation", href: "https://siasky.net/docs/", ...external },
-      { title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
       { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
     ],
   },
@@ -44,7 +43,7 @@ const sections = [
       { title: "Sia Foundation", href: "https://sia.tech", ...external },
       { title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external },
       { title: "SiaStats", href: "https://siastats.info", ...external },
-      { title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external },
+      { title: "Skynet AppStore", href: "https://skyapps.hns.siasky.net/", ...external },
     ],
   },
   {

packages/website/src/components/Navigation/Navigation.js

@@ -10,10 +10,10 @@ import DiscordSmall from "../Icons/DiscordSmall.svg";
 import { useWindowSize, useWindowScroll } from "react-use";
 
 const routes = [
-  { title: "Home", route: "/" },
+  { title: "Home", to: "/" },
-  { title: "About", route: "/about" },
+  { title: "About", to: "/about" },
-  { title: "Developers", route: "/developers" },
+  { title: "Developers", to: "/developers" },
-  { title: "News", route: "/news" },
+  { title: "News", to: "/news" },
 ];
 
 const LogInLink = () => (
@@ -99,10 +99,10 @@ const Navigation = ({ mode }) => {
           </div>
 
           <div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12">
-            {routes.map(({ title, route }) => (
+            {routes.map(({ title, to }) => (
               <Link
-                key={route}
+                key={to}
-                to={route}
+                to={to}
                 activeClassName="underline-navigation"
                 className={classnames("text-sm font-light transition-colors duration-500", {
                   "text-white": mode === "dark",

packages/website/src/components/Uploader/Uploader.js

@@ -129,7 +129,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
       <div
         className={classnames("flex bg-palette-200 mt-1", {
           "bg-error-dashed opacity-20": status === "error",
-          "bg-primary-dashed opacity-20": status === "processing",
+          "bg-primary-dashed move opacity-20": status === "processing",
         })}
         style={{ height: "5px" }}
       >

packages/website/src/pages/developers.js

@@ -7,10 +7,10 @@ import Link from "../components/Link";
 
 const LearnMoreButton = () => (
   <Link
-    href="https://secure.siasky.net"
+    href="https://support.siasky.net/the-technology/developing-on-skynet"
-    className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
     target="_blank"
     rel="noopener noreferrer"
+    className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
   >
     Learn more
   </Link>
@@ -50,26 +50,41 @@ const reasonCards = [
 ];
 
 const resources = [
-  { title: "Skynet Developer Guide", description: "Developer portal for resources and guides.", href: "" },
+  {
-  { title: "Skynet SDK Docs", description: "SDKs in Javascript, Go, Python and more.", href: "" },
+    title: "Skynet Developer Guide",
-  { title: "Skynet Playground", description: "Interact with the core of Skynet, no code needed. ", href: "" },
+    description: "Developer portal for resources and guides.",
-  { title: "Skapp.io", description: "Explore webs apps in the ecosystem, many open source.", href: "" },
+    href: "https://support.siasky.net/the-technology/developing-on-skynet",
-  { title: "Skynet Core Repo", description: "The code base that makes the rest tick.", href: "" },
+  },
+  {
+    title: "Skynet SDK Docs",
+    description: "SDKs in Javascript, Go, Python and more.",
+    href: "https://siasky.net/docs/",
+  },
+  {
+    title: "Skynet AppStore",
+    description: "Explore webs apps in the ecosystem, many open source.",
+    href: "https://skyapps.hns.siasky.net",
+  },
+  {
+    title: "Skynet Core Repo",
+    description: "The code base that makes the rest tick.",
+    href: "https://gitlab.com/skynetlabs/skyd",
+  },
   {
     title: "Skynet on Github",
     description: "Includes SDKs, resources, and web portal. PR’s always welcome.",
-    href: "",
+    href: "https://github.com/NebulousLabs",
   },
   {
     title: "Join us on Discord",
     description: "A generous developer community, ready to solve hard problems.",
-    href: "",
+    href: "https://discordapp.com/invite/sia",
   },
 ];
 
 const docs = [
-  { name: "Developer Guide", href: "" },
+  { name: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet" },
-  { name: "Skynet SDK Docs", href: "" },
+  { name: "Skynet SDK Docs", href: "https://siasky.net/docs/" },
 ];
 
 const DevelopersPage = () => (
@@ -146,6 +161,8 @@ const DevelopersPage = () => (
             <li key={index}>
               <Link
                 href={href}
+                target="_blank"
+                rel="noopener noreferrer"
                 className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
               >
                 <div className="font-semibold text-lg">{title}</div>

packages/website/src/styles/global.css

@@ -10,8 +10,22 @@
   background-size: 2px 2px;
 }
 
+@keyframes bg-primary-dashed-animation {
+  0% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: 15px;
+  }
+}
+
 .bg-primary-dashed {
   background: repeating-linear-gradient(to right, #00c65e, #00c65e 10px, transparent 10px, transparent 15px);
+  background-size: 15px 15px;
+}
+
+.bg-primary-dashed.move {
+  animation: bg-primary-dashed-animation 0.3s infinite linear forwards;
 }
 
 .bg-error-dashed {