Use Docusaurus + Add Articles #63

thebrandonlucas · 2024-05-13T13:44:09Z

This is a massive PR change to completely restructure the site to use docusaurus, a docs-site generator with all sorts of built-in bells and whistles that is commonly used and familiar. It allows us to write our articles in markdown and handles routing/rendering automatically. I kept the home page as mostly the same as our current payjoin.org site with some enhancements (and removed a couple other things). I've also been using excalidraw to create explainer diagrams for payjoin v1/v2. You can see them all here.

This PR is not yet complete as I think we should write a couple of tutorials on how to use it (especially payjoin v2) as well as write some articles on building a send/receive payjoin. We can also discuss whether we want to port over PDK to this website and make it it's own dedicated page with tutorials and navigation (it can have it's own homepage on the same site, etc.) or whether we think it's better to keep them separate. I personally favor integrating everything we can for ease of access unless we feel the site is getting hard to navigate, but generally we should try to funnel people from very high level -> very technical in a naturally progressive way, which this docs site is designed to handle well. PDK website doesn't have much on it currently that would require porting, and I notice the actual API docs are outsourced to the rust documentation anyway, so we wouldn't be losing much in the port and would probably gain navigability.

We can also consider just putting the blog (or a blog) on payjoin updates on here, as well as podcast appearances, news, video tutorials, etc. Docusaurus comes with a sample blog built-in for reference, I think that would fit well here.

This took a lot of inspiration from fedimint's setup. I like a lot about how that project is setup, in addition, their Github is also very well organized.

Overall, this change will make it much easier for us to iterate on documentation and educational materials. Let me know what you think.

thebrandonlucas · 2024-06-02T20:55:04Z

After discussion with @DanGould, it was agreed to revert any copy changes and and not to introduce any new content changes, so that this PR can instead focus on underlying structural changes to docusaurus to the extent possible, to reduce the amount of changes being introduced in one PR. However, since this is a major structural change to the underlying website code, this having many changes at once is inevitable to an extent.

To that end, I kept the content nearly exactly the same as the current website. The homepage remains mostly the same, with the following changes:

The navbar is a bit different now due to docusaurus default styling. All the links are the same with the addition of a link to our GitHub page.
Some slight changes to the copy style (using defaults)
New (default docusaurus) footer, content kept the same
Removed supported/unsupported wallets table (we can re-add later if we choose to do so, but should probably find a way to keep it in sync with the Payjoin wiki when/if we decide to redo it)
Added redirects for the three routes we had at /lightning, /scale, /privacy for backward-compatibility
The /lightning, /scale, /privacy articles as well as the FAQ are now located at /docs, which is what you get when you click "Learn" in the navbar.

Overall, I think this move will allow us to focus on the bigger picture and iterate on content much faster and not get stuck in minutiae of styling & design decisions. Docusaurus still allows a great deal of flexibility if we choose to do that.

I have tested all the links myself and they look good, let me know what you think!

DanGould

Overall this is exactly what I was looking for. Getting all the content in the docusaurus format, even the old FAQ is killer.

There are just a few files (which I believe I left comments on) which are part of the template that will never be used in this project which I would like to see removed

DanGould · 2024-06-03T00:26:03Z

blog/2019-05-29-long-blog-post.md

+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet


I find it odd to commit Lorem ipsum

DanGould · 2024-06-03T00:26:14Z

blog/2019-05-28-first-blog-post.md

+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet


Lorem ipsum?

Oversight on my part, these template blog posts I originally intended to modify into our substack posts and came with the template docusaurus. We can add this later if we feel the need to.

DanGould · 2024-06-03T00:26:29Z

blog/2021-08-01-mdx-blog-post.mdx

+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).


we seem not to render this post

DanGould · 2024-06-03T00:26:39Z

blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg

We are not using this file, are we?

DanGould · 2024-06-03T00:27:02Z

blog/2021-08-26-welcome/index.md

DanGould · 2024-06-03T00:29:24Z

src/components/HomepageFeatures/styles.module.css

Is this file used?

DanGould · 2024-06-03T00:31:25Z

static/img/docusaurus-social-card.jpg

I think when the site is linked this is going to show up. We may not want that

DanGould · 2024-06-03T00:31:46Z

static/img/favicon.ico

did the old favicon get replaced?

DanGould · 2024-06-03T00:32:17Z

static/img/undraw_docusaurus_mountain.svg

Are these docusaurus images used?

README.md

thebrandonlucas · 2024-06-03T00:49:51Z

src/components/UsedBy/index.tsx

+      {/* <div>
+        <a href="https://payjoindevkit.org/" target="_blank">
+          <button className="font-extrabold  bg-gradient-to-r bg-secondary border-white border-2 border-solid shadow-[0px_0px_10px_10px_rgba(0,0,0,0.3)] shadow-primary hover:scale-105 transition-all p-8 rounded-lg cursor-pointer text-5xl ">
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-white">
+              Integrate Payjoin
+            </span>
+          </button>
+        </a>
+      </div> */}


I removed this fancy "Integrate Payjoin" button for the time being in favor of maintaining parity with the current site.

DanGould

Some more unused files

DanGould · 2024-06-03T00:46:29Z

.prettierignore

+# Ignore files for YARN
 yarn.lock


lock files ensure my build and your build use the same dependencies in different environments. AFAIK they are usually only ignored when developing libraries. Any reason to ignore here?

This is .prettierignore, not .gitignore. yarn.lock is being committed, just not linted.

README.md

DanGould · 2024-06-03T00:49:57Z

static/img/docusaurus-social-card.jpg

hopefully we find some place to use this

DanGould · 2024-06-03T00:50:04Z

static/img/docusaurus.png

is this used?

DanGould · 2024-06-03T00:50:30Z

static/img/logo.svg

Is this used?

DanGould · 2024-06-03T00:50:37Z

static/img/undraw_docusaurus_mountain.svg

DanGould · 2024-06-03T00:50:42Z

static/img/undraw_docusaurus_react.svg

DanGould · 2024-06-03T00:50:46Z

static/img/undraw_docusaurus_tree.svg

DanGould · 2024-06-03T02:40:24Z

It's live on payjoin.org and exceeds my expectation on mobile! I'm so stoked you pulled this one through. 🚀 The new arch is gonna 10x what we can do with the website BOOM.

thebrandonlucas added 3 commits May 9, 2024 22:26

sidebar: wip

488cc60

wip

672486b

use docusaurus, add payjoin v1/v2 articles

eb60c09

thebrandonlucas requested a review from DanGould May 13, 2024 13:49

thebrandonlucas added 26 commits May 15, 2024 08:09

wip: payjoin-cli tutorial

04c158b

remove algolia fake api key

fe445dc

cleanup and add icons

5cf0d89

change path

2d11f1a

update payjoin-cli tutorial

0409e9a

rename site

01afef5

update title

1b156a6

ignore docusaurus folder

916c17a

update v2 description

961b881

fix broken links

64cfb3f

space

23a8674

revert typography to have parity with current website

c670577

add newsletter link to header

85c25bf

revert links

4af3a4b

external links

e13c289

Link and styling fixes

d80d167

delete new articles and restore current: why payjoin

9370a81

change 'Edit This Page' link

6f1fc73

update 'Edit This Page' URLs

9fae0ee

update .gitignore and .prettierignore to ignore .docusaurus

874d688

respect .gitignore rules

33eef23

target=_blank for 'Developer Kit' button

8bfc351

delete markdown page

a77896d

comment shiny integrate button

948e029

alternating background colors & fix mobile styling

282e9df

Add FAQ

a5b6fa0

thebrandonlucas added 4 commits June 2, 2024 15:42

update README

ca753e0

add client-side redirects

3e6a024

add target='_blank' to pdk link

b2daa12

more target='_blank'

2590001

thebrandonlucas force-pushed the docs branch from 3e62cb2 to 2590001 Compare June 2, 2024 20:41

thebrandonlucas marked this pull request as ready for review June 2, 2024 20:55

DanGould requested changes Jun 3, 2024

View reviewed changes

thebrandonlucas added 4 commits June 2, 2024 20:42

update README

70bb8cd

remove blog template posts

c2ece40

remove blog code comments

82c8064

remove svg comments

04052c9

thebrandonlucas commented Jun 3, 2024

View reviewed changes

DanGould requested changes Jun 3, 2024

View reviewed changes

thebrandonlucas added 3 commits June 2, 2024 20:55

remove unused images

5b49b4a

remove unused commented code

e98bd95

use monad as social card

5eb036a

DanGould self-requested a review June 3, 2024 02:35

DanGould approved these changes Jun 3, 2024

View reviewed changes

DanGould merged commit f0819aa into master Jun 3, 2024

thebrandonlucas mentioned this pull request Jun 4, 2024

Add Introduction Article #64

Closed

thebrandonlucas mentioned this pull request Jul 21, 2024

Add v1 and v2 explainer articles #74

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Docusaurus + Add Articles #63

Use Docusaurus + Add Articles #63

thebrandonlucas commented May 13, 2024 •

edited

Loading

thebrandonlucas commented Jun 2, 2024

DanGould left a comment •

edited

Loading

DanGould Jun 3, 2024

DanGould Jun 3, 2024

thebrandonlucas Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

thebrandonlucas Jun 3, 2024

DanGould left a comment

DanGould Jun 3, 2024

thebrandonlucas Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould Jun 3, 2024

DanGould commented Jun 3, 2024


		<!--truncate-->

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Use Docusaurus + Add Articles #63

Use Docusaurus + Add Articles #63

Conversation

thebrandonlucas commented May 13, 2024 • edited Loading

thebrandonlucas commented Jun 2, 2024

DanGould left a comment • 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

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

DanGould 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanGould commented Jun 3, 2024

thebrandonlucas commented May 13, 2024 •

edited

Loading

DanGould left a comment •

edited

Loading