acid-info / logos-docusaurus-plugins Goto Github PK

In the sidebar and TOC, there is a 1px x-axis jump between two state; active/non-active. So when active and the left border is shown, the item jumps to the right and when non-active (no border left) item shifts back to left (original position).

I think we can solve this by setting border-box correctly.

• Overal description
• How to run & develop locally (+ how to link to the template)
• Packaging and release

linkContent => rgba 0.6

https://dev.acid.info/

We need a more elaborative version of README which explains different options and configs either the ones from Docu or the one built into Logos Plugin.

Occasionally, the search feature can be problematic, as illustrated in the following screenshot:

However, in the majority of instances, the search functionality works perfectly fine. It's worth noting that this issue is infrequent but nonetheless quite frustrating.

I tried upgrading the logos-docusaurus-preset package to v1.0.0-alpha.50 and I got this error:

yarn run v1.22.19
warning ../../package.json: No license field
$ docusaurus start
[INFO] Starting the development server...
[ERROR] Error: Plugin "docusaurus-theme-mermaid" is used 2 times with ID "default".
To use the same plugin multiple times on a Docusaurus site, you need to assign a unique ID to each plugin instance.

The plugin ID is "default" by default. It's possible that the preset you are using already includes a plugin instance, in which case you either want to disable the plugin in the preset (to use a single instance), or assign another ID to your extra plugin instance (to use multiple instances).
    at /Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/plugins/pluginIds.js:23:23
    at Array.forEach (<anonymous>)
    at /Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/plugins/pluginIds.js:21:45
    at Array.forEach (<anonymous>)
    at ensureUniquePluginInstanceIds (/Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/plugins/pluginIds.js:19:35)
    at initPlugins (/Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/plugins/init.js:92:51)
    at async loadPlugins (/Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/plugins/index.js:26:21)
    at async load (/Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/server/index.js:76:58)
    at async Command.start (/Users/lordghostx/Desktop/docs.waku.org/node_modules/@docusaurus/core/lib/commands/start.js:44:19)
[INFO] Docusaurus version: 2.4.1
Node version: v20.3.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I've tried lower versions too (40 - 49), and I got the same error.

• Nomos links to dev.codex.storage
• Waku footers: Nomos links to dev.waku.org

In recent future, we might need to be able to be able to adjust/customize typography of the website. We are talking about a few parameters typeface and font-size(s)

@jeangovil is this possible, if so can you estimate the amount of work?

• There’s 2 font sizes - 14px and 16px, while there should be only 14px
• The spacing doesn’t correspond to the one in the design

https://file.notion.so/f/s/d42e6696-1e0a-45ab-bd9e-b6c28fde624a/Untitled.png?id=1c68e67a-1ed8-4a7e-9c7f-4a7e4e05a9f8&table=block&spaceId=1518abd9-c08f-4989-93c1-96525e62bce5&expirationTimestamp=1686133008227&signature=IEreJAD3bM5QWSqzKK3gjQhRZUFHkvUJ195SJzXQOPg&downloadName=Untitled.png

TBD

Do you think we can make the code blocks more noticeable for users unfamiliar with the docs?

https://waku-guide-git-add-nwaku-guides-logosdao.vercel.app/guides/nwaku/run-docker#get-docker-image

https://waku-guide-git-add-nwaku-guides-logosdao.vercel.app/guides/nwaku/configure-discovery#configure-dns-discovery

Here are some suggestions:

• Changing the font/code styling to a different theme
• Adding a background color that's different from the page, examples: Vue, GitHub, MUI

@jeangovil has suggested to enable Dependabot from GitHub in order to keep the websites using this package updated upon new package releases.
Dependabot Version Updates

I am not sure what are the implications of this for the infra team, so hence CCing @serhanwbahar here too.

https://waku-guide-az85yiowl-logosdao.vercel.app/getting-started/concepts/network-domains#overview-of-protocol-interaction

Graph is hard to read (small font) and it does nothing when we click on it.

Not sure if it's part of theme scope or not but would be good if it could zoom in or go in a modal when one click on it.

Cc @LordGhostX

All landing page hero module gradient masks need to be extended; model reaches below the mask into the features section

48px => should be bigger, 96px

LSD theme is applied but there still some parts which are mis-aligned. The design has already been done, we need to implement it into the them.

• "Powered by Waku" page not look good
• Select menus are not LSD
• In light mode, the underlying is too light so it's hard to see that something is a hyperlink
• article page footer redesigned

https://www.figma.com/file/TFbzcQ1N622YGMMzdPQr6B/UI?type=design&node-id=1213%3A144500&t=8Mz6NH3xsrdl48jD-1

What is that?

• provide the design @nireims
• implementation

@nireims it would be nice to enhance the design for blog index page and blog post/articles as follow

• Create a banner/hero section for /blog could be as simple as a headline (for example in case of vac it would be "Rlog - Vac Research Log" ) and ten a subtitle or description (for vac e.g; "Vac builds public good protocols for the decentralized web.")
• Design a article header to distinguish it from the rest of content. This can be aligned with LPE but not necessary. This part should content title, subtitle if any, date and authors

example (not in terms of aesthetic) -> https://www.cloudquery.io/blog

CC @jinhojang6 & @jeangovil

Black theme does not work great on the "Powered by Waku" page with the logos

Cc @LordGhostX are there "dark" logos available for our partners and can we make it switch?

Look at staging branch of https://github.org/waku-org/waku.guide

1. Discord invite link is incorrect

Discord invite link at the bottom of the page is prefixed by https://discordapp.com/users instead of https://discord.gg

2. Missing "Waku" Logo/such title:

See top left corner. Feels empty/something missing. No Waku title and nothing happens when clicking on Waku Logo

3. How to enable multi-language dropdown?

I want to start adding JavaScript doc to waku.guide, how do I proceed?

An issue occurs with the styling of sidebar items with both a dropdown and a linked page. I'll show a comparison with the previous theme:

New theme: https://dev-docs.waku.org/overview/concepts/peer-discovery
Old theme: https://docs.waku.org/overview/concepts/peer-discovery

1. The page is not highlighted

The "Protocols" page is opened here, and there's a highlighting:

The "Peer Discovery" page is opened, but there is no highlighting:

2. Dropdowns with pages aren't collapsing

Try collapsing the dropdown of the "Peer Discovery" page using the arrow after opening it once.

3. Can we make the sidebar bigger?

There is a lot of space between the sidebar and the page. Can we increase the width of the sidebar so items are not cluttered?

Waku visual is offset from the center, should be positioned slightly to the right to clip over the screen width.
The issue is not persistent. It happens sometimes on left side sometimes on right.

Create a new preset that includes visual assets and preferably SEO content inside plugin's repo

Please see the visual reference here
https://discord.com/channels/971270741817458739/1110170821449744394/1115629705811480606

@nireims @jinhojang6 looking at pages like this, you notice inconsistency in width and spacing in the layout.

• We need to unified all components width to fit into the content container.
• We need to unify all vertical spacing between component (unless in content there has been extra breakpoints)

The most recent commits removed some CSS effects from the Waku Docs:

1. There's a yt-video class on the videos on the /presentations page. Let's bring it back.

.yt-video {
    max-width: 100%;
    width: 640px;
    height: 360px;
}

2. There's a GitHub icon in the navbar with the header-github-link class. Let's bring it back.

Before:

Now:

Here's the CSS:

.header-github-link:before {
    content: '';
    width: 24px;
    height: 24px;
    display: flex;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

html[data-theme='dark'] .header-github-link:before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

We need to assign a min height to each content container on documentation pages. Atm, if content is not long enough, you see the footer which is not nice. here is an example.
https://dev.logos.co/

Will circle back when the landing page is confirmed

https://dev.waku.org/

https://dev.codex.storage/

Codex has a bigger gap

TODO:

• Add support for docusaurus-plugin-content-docs
• Add support for docusaurus-plugin-content-blog
• Add support for docusaurus-plugin-content-pages
• Implement image renderer for pages without images
• Implement image renderer for pages with images

@nireims

• Design for pages without images
• Design for pages with images

In light mode, the underlying is too light so it's hard to see that something is a hyperlink

All items in nav bar regardless og their state show an under line! this should not be the case, underline should only be shown upon hover! not sure if this is a LSD config or not , but surely does not look good for the header and same for the dropdown menus. It should not show an underline.

Licensing on page is marked:

Waku © 2023
All rights reserved.

What are the guidelines for external contributors that wishes to contribute to the documentation or even to the website content (e.g. waku-org/waku.org#25)

Should we make them sign a CLA?

Should we keep a private licence on the doc repo? same questions for landing page.

We need to remove left padding on feature items on left side so they are aligned with "FEATUREs"

https://dev-docs.waku.org/guides/nwaku/run-docker

We have received some reports that website after a while cause a browser crash! This happen on a very strong machine with Nvidia RTX 4090.

The size of all LSD buttons, icon buttons, etc in the header must be changed from “medium” to “small”.

Some BUs require to inject fathom JS snipped to their client. It seems that we might nether to add some code or develop a plugin for it. Here is a relavant discussion.

atm, only Waku has asked but we need to make it scalable so parameters can be customized. Here is the sample script received from @serhanwbahar.

<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function(f, a, t, h, o, m){
    a[h]=a[h]||function(){
        (a[h].q=a[h].q||[]).push(arguments)
    };
    o=f.createElement('script'),
    m=f.getElementsByTagName('script')[0];
    o.async=1; o.src=t; o.id='fathom-script';
    m.parentNode.insertBefore(o,m)
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
fathom('set', 'siteId', 'FUTMI');
fathom('trackPageview');
</script>
<!-- / Fathom -->