feat: visual redesign and removal of obsolete content #445

huijing · 2024-03-15T10:33:12Z

Closes #444
Will also resolve #460

~~This will end up being a mega-PR where the home page is completely re-worked.~~ ~~Is currently a fork of @melissahenderson's working branch and will be constantly rebased as that branch is updated.~~
Plans change. ¯\_(ツ)_/¯

~~Potential new chronology of events might be:~~
~~1. Launch of WM alpha extension~~
~~2. Add docs pages related to alpha, i.e. how to get set up with testnet, screenshots of how to configure extension (potentially in conjunction with home page update)~~
~~3. Update home page (this PR)~~
~~4. WM beta extension is available~~
~~5. mh branch gets published~~

~~For now, just send good thoughts.~~

Okay, we've changed plans yet again. This PR has been open for way too long, some people's infants have probably started walking by now.
The long and short of it is, since @raducristianpopa has added 2 pages with the new design already, it highlighted the fact that the new design is ready and has been ready for months now. There is no reason to not roll it out. Therefore, we are separating the content rewrite from the redesign.

netlify · 2024-03-15T10:33:29Z

✅ Deploy Preview for webmonetization-preview ready!

Name	Link
🔨 Latest commit	`8ea8494`
🔍 Latest deploy log	https://app.netlify.com/sites/webmonetization-preview/deploys/66c46f4f1b7610000824cbc8
😎 Deploy Preview	https://deploy-preview-445--webmonetization-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-04-01T11:05:16Z

src/components/docs/PageSidebar.astro

@@ -0,0 +1,17 @@
+---


Modified from withastro/starlight#1675 (comment)

huijing · 2024-08-19T09:30:19Z

src/components/docs/Libraries.astro

@@ -1,5 +1,5 @@
 ---
-const { tools } = Astro.props;
+const { plugins } = Astro.props;


Renamed this to plugins because Arpi's tools are coming soon

huijing · 2024-08-19T09:31:15Z

src/components/pages/LinkTagGenerator/LinkTagGenerator.jsx

@@ -48,7 +48,7 @@ export default function LinkTagGenerator() {
            }}
          />
          <button
-            className={styles.btn}
+            className='btn'


Moved btn styles into shared styles instead

huijing · 2024-08-19T09:31:21Z

src/components/pages/LinkTagGenerator/LinkTagGenerator.jsx

@@ -60,9 +60,9 @@ export default function LinkTagGenerator() {
          </button>
        </div>
        {invalidUrl ? (
-          <span className={styles.error}>
+          <p className='error'>


Same for this

huijing · 2024-08-19T09:31:34Z

src/components/pages/LinkTagGenerator/LinkTagGenerator.module.css

@@ -18,24 +18,3 @@
  border: 1px solid var(--sl-color-gray-2);
  padding: var(--space-2xs);
 }
-


Moved to webm.css since it's shared

huijing · 2024-08-19T09:34:40Z

src/components/docs/BrowserCompat.astro

@@ -10,15 +10,15 @@ const compatData = json.api
        <td></td>
        <th class="desktop" colspan='6' title='desktop'>
          <img
-            src={`/img/icon-desktop.svg`}
+            src={`/img/components/browsercompat/icon-desktop.svg`}


This whole file is path updates because I reorganised the img folder

huijing · 2024-08-19T09:35:10Z

src/components/pages/LinkCard.astro

@@ -0,0 +1,19 @@
+---


Used in the "new" home page that you can see at /index-beta

huijing · 2024-08-19T09:35:30Z

src/components/pages/Note.astro

@@ -0,0 +1,23 @@
+---


Also used for "new" home page at /index-beta

huijing · 2024-08-19T09:35:49Z

src/components/pages/ProbRevshare/components/_import.jsx

@@ -21,16 +21,13 @@ export function ImportView() {
          setError('')
        }}
      />
-      <p className={styles.error}>{error}</p>
+      <p className='error'>{error}</p>


The shared styles can be found in webm.css

huijing · 2024-08-19T09:36:02Z

src/components/pages/ProbRevshare/styles.module.css

@@ -55,22 +55,6 @@
  margin-block-end: var(--space-m);
 }

-.btn {


Styles moved to webm.css

huijing · 2024-08-19T09:36:25Z

src/content/docs/docs/resources/libraries.mdx

@@ -6,4 +6,4 @@ tableOfContents: false
 import Libraries from '/src/components/docs/Libraries.astro'
 import data from '/src/data/home.json'

-<Libraries tools={data.tools} />
+<Libraries plugins={data.plugins} />


JSON key renamed from tools to plugins

huijing · 2024-08-19T09:36:40Z

src/data/home.json

@@ -1,107 +1,106 @@
 {
  "browsers": [],
  "providers": [],
-  "search": [


Reworked this JSON data file to remove the obsolete bits

huijing · 2024-08-19T09:37:05Z

src/pages/index.astro

@@ -10,6 +10,9 @@ changeLanguage("en");

 const title = t("site.title");
 const description = t("site.description");
+const pluginsList = data.plugins.filter(function(plugin){


No point displaying all the old ones. I've added text to send people to the full list if they want to help with the updating

raducristianpopa

Can we remove the footer from the playground?
The WM logo that was present in the playground is now missing. It is only displayed as text. If this was intentional - I am okay with this approach.

The welcome screen looks good! A few comments for the playground.

raducristianpopa · 2024-08-19T09:40:41Z

src/pages/play.astro

-      </div>
+<Base title={title} description={description}>
+  <section class="section">
+    <div class="contentWrapperMd">


We want to utilize all the available width. Can we remove the contentWrapperMd or update so it doesn't have a max width and add an inline padding of 2rem?

raducristianpopa · 2024-08-19T09:41:55Z

src/pages/play.astro

@@ -54,113 +24,42 @@ changeLanguage('en')
              required
            />
          </div>
-          <button class='full-width' type='submit' disabled>
+          <button class='btn full-width' type='submit' disabled>


The initial button had a padding of 0.75rem and the font size was higher as well. The previous one was more prominent and I think we were using the default font size for the button.

i've bumped the font size back up. the previous button styles used the smaller text, but your point is good, buttons should be prominent.

raducristianpopa · 2024-08-19T09:46:32Z

src/pages/play.astro

-        margin-block: 0.5rem;
-        padding-block-start: 0.5rem;
-        padding-inline-start: 0.5rem;
+        margin-block: var(--space-2xs);


The text in the ul is significantly higher on a desktop screen size. I feel like we can make it a bit smaller. This is probably coming from the applied styles to main.

i've tried to make it smaller, i think it kinda matches the current version now

JoblersTune · 2024-08-19T11:48:55Z

@huijing going through the new site I found this in src/components/pages/PrCta.astro

---
const { label } = Astro.props;
---
<div class="cta">
  <img class="iconMerge" src="/img/icon-merge.svg" alt="" />
  <p>
    Do you know another {label}?{" "}
    <a
      href="https://github.com/WICG/webmonetization/edit/main/docusaurus.config.js"
      target="_blank"
      rel="noreferrer noopener"
    >
      Make a PR
    </a>
  </p>
</div>

Shouldn't the link be: https://github.com/WICG/webmonetization/pulls

Perhaps we can just as well fix that here too.

JoblersTune · 2024-08-19T11:54:45Z

You mentioned fixing #460 but I still see

JoblersTune · 2024-08-19T11:56:23Z

Also just wondering what happened to

Linking the spec?
Mentioning "Web Monetization Enabled Search Engines"

JoblersTune · 2024-08-19T11:59:10Z

src/data/home.json

+    {
+      "name": "Fynbos",
+      "image": "logo-wallet-fynbos.svg",
+      "link": "https://fynbos.app/"


Suggested change

"link": "https://fynbos.app/"

"link": "https://wallet.fynbos.app/wallet"

You're linking to their investment page not the wallet.

JoblersTune · 2024-08-19T12:16:30Z

src/pages/prob-revshare.astro

@@ -13,18 +13,23 @@ const description = t("site.description");
    <div class="contentWrapperMd">
      <h1 class="heading2">Probabilistic Revshare Generator</h1>
      <p>Probabilistic revenue sharing (revshare) is one way to share a portion of a web monetized page’s earnings between multiple payment pointers.</p> 
-      <p>Use this tool to define a list of payment pointers and their weights. Then, add the generated monetization <code>link</code> element to your site. The <code>link</code> will contain a unique URL hosted on <code>https://webmonetization.org/api/revshare/pay/</code>. If you'd prefer to not use a hosted URL, you can set up revshare by <a href="/docs/guides/set-up-probabilistic-revenue-sharing" target="_blank">adding a script to your site</a>.</p>
+      <p>Use this tool to define a list of payment pointers and their weights. Then, add the generated monetization <code>link</code> element to your site. The <code>link</code> will contain a unique URL hosted on <code>https://webmonetization.org/api/revshare/pay/</code>. If you'd prefer to not use a hosted URL, you can set up revshare by <a href="/docs/resources/set-up-probabilistic-revenue-sharing" target="_blank">adding a script to your site</a>.</p>


Surely we need to still move these files if we want the new links to work? They're not working for me, but the files are still in the guides folder.

melissahenderson · 2024-08-19T13:39:19Z

Re "Web Monetization Enabled Search Engines": Mojeek's site appears to only have the meta tag, not the link tag. So I'm not sure we have any WM-enabled search engines at the moment.

raducristianpopa

Playground and welcome screen looks good!

JoblersTune · 2024-08-20T06:42:46Z

I realise this is also kind of out of scope of this PR but I'm also wondering if we have the correct link here?
<p> Web Monetization is being proposed as a W3C standard at <a href="https://github.com/WICG/webmonetization" rel="noreferrer noopener" target="_blank" > the Web Platform Incubator Community Group</a>. </p>

Shouldn't it rather be https://wicg.io/?

JoblersTune · 2024-08-20T07:15:43Z

src/components/docs/Footer.astro

I can't find where this is used. Can you help me?

u're right. it's not used.

JoblersTune · 2024-08-20T07:42:57Z

src/pages/index-beta.astro

+    </div>
+  </section>
+
+  <section class="section">


Maybe we can have the LinkCards stack vertically on smaller screens?

And can we add a aria-hidden="true" to the svgs in the cards?

src/pages/index.astro

JoblersTune · 2024-08-20T08:29:24Z

src/data/home.json

Following @melissahenderson comment, perhaps we should remove the "Web Monetization Enabled Search Engines". Sorry for duplicating work.

JoblersTune · 2024-08-20T08:30:33Z

src/pages/index.astro

Also here to remove the "Web Monetization Enabled Search Engines" section and also the Mojeek logo then.

huijing force-pushed the chj/444/home-page-revamp branch 2 times, most recently from fd3c3a9 to 96a5c5d Compare March 19, 2024 08:13

huijing force-pushed the chj/444/home-page-revamp branch from d01e8f1 to 45898b3 Compare April 1, 2024 04:47

huijing commented Apr 1, 2024

View reviewed changes

src/components/docs/PageSidebar.astro Outdated

@@ -0,0 +1,17 @@

---

Copy link

Collaborator Author

huijing Apr 1, 2024

Choose a reason for hiding this comment

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

Modified from withastro/starlight#1675 (comment)

huijing force-pushed the chj/444/home-page-revamp branch 3 times, most recently from 9c30cdf to 6e0358b Compare April 8, 2024 01:51

huijing force-pushed the chj/444/home-page-revamp branch 3 times, most recently from ca75c70 to 5c7ef33 Compare April 23, 2024 09:42

huijing force-pushed the chj/444/home-page-revamp branch from 76484a0 to 07dbdc6 Compare May 9, 2024 09:32

huijing force-pushed the chj/444/home-page-revamp branch from df0f45b to 6dc82f1 Compare July 30, 2024 15:01

melissahenderson and others added 4 commits August 19, 2024 13:38

docs: home page redesign and revamp

b7603c0

add animations to cards

d1d15ce

update link to community forem wm tag

5f1dbb8

feat: split out visual redesign from content redesign

36f096a

huijing force-pushed the chj/444/home-page-revamp branch from 6dc82f1 to 36f096a Compare August 19, 2024 09:03

update welcome page with new design styling

ef62b66

huijing changed the title ~~feat: home page redesign and content update~~ feat: visual redesign and removal of obsolete content Aug 19, 2024

huijing commented Aug 19, 2024

View reviewed changes

huijing requested a review from raducristianpopa August 19, 2024 09:33

remove stray console log

5af9ad4

huijing commented Aug 19, 2024

View reviewed changes

src/components/pages/LinkCard.astro

@@ -0,0 +1,19 @@

---

Copy link

Collaborator Author

huijing Aug 19, 2024

Choose a reason for hiding this comment

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

Used in the "new" home page that you can see at /index-beta

huijing commented Aug 19, 2024

View reviewed changes

src/components/pages/Note.astro

@@ -0,0 +1,23 @@

---

Copy link

Collaborator Author

huijing Aug 19, 2024

Choose a reason for hiding this comment

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

Also used for "new" home page at /index-beta

huijing commented Aug 19, 2024

View reviewed changes

raducristianpopa reviewed Aug 19, 2024

View reviewed changes

JoblersTune reviewed Aug 19, 2024

View reviewed changes

huijing added 4 commits August 19, 2024 22:02

address PR review feedback

9b348a8

fix capitalization

5be566f

bump font size for logs down

3427cdf

better layout for multiple payment pointers

17325dd

raducristianpopa approved these changes Aug 20, 2024

View reviewed changes

JoblersTune reviewed Aug 20, 2024

View reviewed changes

incorporate review feedback

8c90c6d

huijing force-pushed the chj/444/home-page-revamp branch from 9357701 to 8c90c6d Compare August 20, 2024 10:12

remove image file

8ea8494

huijing merged commit 8e3f01f into main Aug 20, 2024
6 checks passed

huijing deleted the chj/444/home-page-revamp branch August 20, 2024 10:33

	"link": "https://fynbos.app/"
	"link": "https://wallet.fynbos.app/wallet"

feat: visual redesign and removal of obsolete content #445

feat: visual redesign and removal of obsolete content #445

Conversation

huijing commented Mar 15, 2024 • edited Loading

netlify bot commented Mar 15, 2024 • edited Loading

✅ Deploy Preview for webmonetization-preview ready!

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

Choose a reason for hiding this comment

raducristianpopa left a comment

Choose a reason for hiding this comment

raducristianpopa Aug 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

raducristianpopa Aug 19, 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

JoblersTune commented Aug 19, 2024

JoblersTune commented Aug 19, 2024

JoblersTune commented Aug 19, 2024

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

melissahenderson commented Aug 19, 2024

raducristianpopa left a comment

Choose a reason for hiding this comment

JoblersTune commented Aug 20, 2024

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 15, 2024 •

edited

Loading

netlify bot commented Mar 15, 2024 •

edited

Loading

raducristianpopa Aug 19, 2024 •

edited

Loading

raducristianpopa Aug 19, 2024 •

edited

Loading