refactor: mega revamp of devs site to match interledger.org v4 #43

huijing · 2024-03-01T11:05:48Z

Closes #36

This PR:

Updates the splash page's navigation menu
Updates the hero banner gradient to match the visual direction
Updates the hero banner font styling to match the visual direction
Updates the splash page footer
Updates the splash page content to link to the different Interledger projects
Removes all pages from docs except the specification pages
Adds a Get Involved page to the docs
Builds out the Engineering blog and ports over selected articles from the old blogs

To be merged after interledger.org v4 is launched on March 11.

⚠️ PLEASE IGNORE THE NETLIFY PREVIEW, IT WAS A FAILED EXPERIMENT ⚠️

netlify · 2024-03-01T11:30:10Z

✅ Deploy Preview for interledger-devs-preview ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/interledger-devs-preview/deploys/65e1bf05a65c22bf00f4a4c9
😎 Deploy Preview	https://deploy-preview-43--interledger-devs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

huijing · 2024-03-01T11:55:33Z

src/components/Header.astro

@@ -21,11 +21,9 @@ import DevelopersLogo from "../components/DevelopersLogo.astro";
        Interledger Foundation
      </span>
  </a>
-  <div class="secondary-wrap">
+  <div class="sl-hidden md:sl-flex secondary-wrap">


Bit of a bug fix, because the Github icon shows up in the mobile menu, and should have been part of the secondary wrap to begin with.

huijing · 2024-03-01T11:55:52Z

src/components/pages/FoundationFooter.astro

@@ -20,8 +20,8 @@ const currentYear = new Date().getFullYear();
      <h4>Connect with us</h4>
      <ul>
        <li>
-          <a href="/contact" aria-label="Contact form">
-            <svg role="img" viewBox="0 0 253 178"><title>Mail</title><path fill-rule="evenodd" d="M253 46v109c0 3 0 5-1 8l-64-64 65-53ZM23 0h207c13 0 23 10 23 23v4l-102 84c-18 15-30 15-48 0L0 27v-4C0 10 10 0 23 0Zm218 175c-3 2-7 3-11 3H23c-4 0-8-1-11-3l66-66 15 13c24 19 44 19 67 0l15-13 66 66ZM1 163c0-3-1-5-1-8V46l65 53-64 64Z" clip-rule="evenodd"/></svg>
+          <a href="https://www.youtube.com/@InterledgerFoundation" aria-label="Interledger's Youtube channel">


Replaced the contact form link with youtube link (did that on the main site too)

huijing · 2024-03-01T11:56:26Z

src/components/pages/FoundationHeader.astro

@@ -24,67 +21,75 @@ import FoundationLogo from "../FoundationLogo.astro";
            <li class="menu-item menu-item--level-2">


This just updates the navigation links to match the main site.

huijing · 2024-03-01T11:57:03Z

src/layouts/BaseLayout.astro

@@ -88,27 +83,28 @@ const { title, description } = Astro.props;
 		}
 	}

-	.heading--1,
-	h1 {
+	.heading--1 {


Remove styling for base heading tags for better flexibility on individual pages.

huijing · 2024-03-01T11:57:12Z

src/layouts/BlogLayout.astro

@@ -0,0 +1,135 @@
+---
+import BaseLayout from "./BaseLayout.astro";


wow, new blog who dis?

huijing · 2024-03-01T11:57:52Z

src/pages/blog/[...page].astro

@@ -0,0 +1,99 @@
+---


dynamic page template for when pagination kicks in (yes, this is a bit of future proofing but after 12 articles, i will add in the pagination component)

huijing · 2024-03-01T11:58:14Z

src/pages/index.astro

@@ -1,50 +1,66 @@
 ---
-import HomeLayout from '../layouts/HomeLayout.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';


Can't call it HomeLayout anymore since the blog template also needs to use this.

BlairCurrey

Checked it out locally - looks nice!

It's not a change introduced here, but it looks like maybe the Contact us and Terms and Conditions links are wrong?

interledger.org-developers/src/components/pages/FoundationFooter.astro

Line 64 in 4ca66eb

<li><a href="">Contact us</a></li>

And maybe the terms and conditions?

interledger.org-developers/src/components/pages/FoundationFooter.astro

Line 62 in 4ca66eb

<li><a href="/">Terms & conditions</a></li>

BlairCurrey · 2024-03-01T16:28:33Z

src/content/docs/get-involved.md

What do you think about a call to action for getting involved that leads to here (on the /developer page)? I can envision a button similar to the "Read the documentation" one on the current version (https://interledger.org/developers/) but I think any form of direct link would be good since it seems to me like this is a pretty core purpose of the page. Currently it looks like the the only path to this article is the link in "Read the Interledger specifications" (and then clicking "Get Involved"). So it seems like people would only get here by accident.

Oh definitely. You know what, I'll just put the button back in.

huijing · 2024-03-04T10:51:02Z

Checked it out locally - looks nice!

It's not a change introduced here, but it looks like maybe the Contact us and Terms and Conditions links are wrong?

interledger.org-developers/src/components/pages/FoundationFooter.astro

Line 64 in 4ca66eb

<li><a href="">Contact us</a></li>

And maybe the terms and conditions?

interledger.org-developers/src/components/pages/FoundationFooter.astro

Line 62 in 4ca66eb

<li><a href="/">Terms & conditions</a></li>

yeah, we don't seem to actually have terms and conditions at the moment. i need to chase anna about this.

huijing · 2024-03-04T12:19:11Z

src/pages/index.astro

-            <h3>Specifications</h3>
-            <p>Interledger specifications</p>
-          </a>
+          <h2 class="heading--6"><OpenPaymentsIcon /> Open Payments</h2>


Project icons make the card headings pop more

huijing · 2024-03-04T12:19:27Z

src/pages/index.astro

+        <div class="text-wrapper">
+          <h1 class="hero__heading heading--2">Interledger Developers Portal</h1>
+          <p class="hero__txt">Help shape the future of interoperable payments and enable seamless exchange of value across payment networks.</p>
+          <a class="hero__btn" href="/developers/get-involved">Get involved</a>


Great idea from @BlairCurrey

huijing · 2024-03-04T12:20:07Z

src/components/pages/FoundationFooter.astro

@@ -61,7 +61,7 @@ const currentYear = new Date().getFullYear();
  <ul class="footer-links">
    <li><a href="/">Terms & conditions</a></li>
    <li><a href="https://www.iubenda.com/privacy-policy/88624819">Privacy policy</a></li>
-    <li><a href="">Contact us</a></li>
+    <li><a href="/contact">Contact us</a></li>


Fix missing link.
Will have to chase Anna about the terms & conditions link, this is an issue for the main site as well.

mkurapov

Looks great, just a few comments I had

mkurapov · 2024-03-08T10:00:04Z

src/pages/index.astro

-          </a>
+          <h2 class="heading--6"><OpenPaymentsIcon /> Open Payments</h2>
+          <p>Open Payments is an open API standard that can be implemented by account servicing entities to facilitate interoperability in the setup and completion of payments for different use cases.</p>
+          <a href="https://github.com/interledger/open-payments">Learn more on Github</a>


should these link to the Open Payments and Rafiki documentation sites instead?

For now, the READMEs on the respective projects have better introductory content than the documentation sites. Until we come up with good content for the home pages of those sites, we will link to the Github pages for now.

mkurapov · 2024-03-08T10:02:50Z

src/content/docs/get-involved.md

+
+If you are most comfortable working with **React**, you can contribute to [Rafiki](https://github.com/interledger/rafiki) or [Testnet](https://github.com/interledger/testnet).
+
+If you are most comfortable working with **Angular**, you can contribute to [Testnet](https://github.com/interledger/testnet) or [Interledger Pay](https://github.com/interledger/interledger-pay).


I don't think we have any Angular projects, all of the frontends are react-based

This list came from @AlexLakatos though 🤔

src/pages/index.astro

mkurapov · 2024-03-08T10:08:52Z

src/pages/index.astro

+    <section>
+      <div class="content-wrapper">
+        <p class="heading--4">Learn more about the various open-source projects that Interledger is working on.</p>
+      </div>


we didn't want to include WM here?

@AlexLakatos said not. But we can always add it in later if we wanted to.

Co-authored-by: Max Kurapov <[email protected]>

huijing · 2024-03-11T10:05:48Z

Bypassing branch protections because we already made the switch on the main site and nobody cares to approve this PR.

huijing added 2 commits March 1, 2024 19:03

Mega revamp of devs site to match interledger.org v4

72d51a1

Attempt to set up netlify preview

245db14

huijing commented Mar 1, 2024

View reviewed changes

src/layouts/BlogLayout.astro

@@ -0,0 +1,135 @@

---

import BaseLayout from "./BaseLayout.astro";

Copy link

Contributor Author

huijing Mar 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, new blog who dis?

huijing commented Mar 1, 2024

View reviewed changes

Remove unnecessary code from previous test attempts

421dff4

BlairCurrey reviewed Mar 1, 2024

View reviewed changes

Updates from team feedback

7007b22

huijing commented Mar 4, 2024

View reviewed changes

huijing added 4 commits March 5, 2024 16:25

Remove background effect for mobile

410724a

Add terms and conditions link

b54e71d

Add values link to nav

d725c2e

Fix sticky header issue

93077c0

mkurapov reviewed Mar 8, 2024

View reviewed changes

huijing and others added 2 commits March 11, 2024 15:38

Apply suggestions from code review

268751e

Co-authored-by: Max Kurapov <[email protected]>

Adjust sidebar links

36f8055

huijing merged commit e90ec88 into main Mar 11, 2024
1 check passed

huijing deleted the chj/6/devs-site-revamp branch March 11, 2024 10:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: mega revamp of devs site to match interledger.org v4 #43

refactor: mega revamp of devs site to match interledger.org v4 #43

huijing commented Mar 1, 2024 •

edited

Loading

netlify bot commented Mar 1, 2024 •

edited

Loading

huijing Mar 1, 2024

huijing Mar 1, 2024 •

edited

Loading

huijing Mar 1, 2024

huijing Mar 1, 2024

huijing Mar 1, 2024

huijing Mar 1, 2024

huijing Mar 1, 2024

BlairCurrey left a comment

BlairCurrey Mar 1, 2024 •

edited

Loading

huijing Mar 4, 2024

huijing commented Mar 4, 2024

huijing Mar 4, 2024

huijing Mar 4, 2024

huijing Mar 4, 2024

mkurapov left a comment

mkurapov Mar 8, 2024

huijing Mar 11, 2024

mkurapov Mar 8, 2024

huijing Mar 11, 2024

mkurapov Mar 8, 2024

huijing Mar 11, 2024

huijing commented Mar 11, 2024

		@@ -24,67 +21,75 @@ import FoundationLogo from "../FoundationLogo.astro";
		<li class="menu-item menu-item--level-2">

		@@ -0,0 +1,135 @@
		---
		import BaseLayout from "./BaseLayout.astro";


		If you are most comfortable working with React, you can contribute to [Rafiki](https://github.com/interledger/rafiki) or [Testnet](https://github.com/interledger/testnet).

		If you are most comfortable working with Angular, you can contribute to [Testnet](https://github.com/interledger/testnet) or [Interledger Pay](https://github.com/interledger/interledger-pay).

refactor: mega revamp of devs site to match interledger.org v4 #43

refactor: mega revamp of devs site to match interledger.org v4 #43

Conversation

huijing commented Mar 1, 2024 • edited Loading

netlify bot commented Mar 1, 2024 • edited Loading

✅ Deploy Preview for interledger-devs-preview ready!

Choose a reason for hiding this comment

huijing Mar 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BlairCurrey left a comment

Choose a reason for hiding this comment

BlairCurrey Mar 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

huijing commented Mar 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mkurapov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

huijing commented Mar 11, 2024

huijing commented Mar 1, 2024 •

edited

Loading

netlify bot commented Mar 1, 2024 •

edited

Loading

huijing Mar 1, 2024 •

edited

Loading

BlairCurrey Mar 1, 2024 •

edited

Loading