refactor: website v2 (alpha) #9
Conversation
|
@moul here is the PR to review. It's a partial copy/paste from the Gno repo 818 PR. |
| ## Phase I. (ongoing) | ||
|
|
||
| - <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">Evaluation DAO (30%)</button> | ||
|
|
||
| - <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">Tutorials (80%)</button> | ||
|
|
||
| - <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">Governance Module (25%)</button> | ||
|
|
||
| </div> | ||
| <div> |
There was a problem hiding this comment.
We should skip this part from the website and do it directly on contracts.
Please, keep the rest of the informative things that always make sense; we'll move the dynamic part to a realm.
There was a problem hiding this comment.
another idea, we do it with pure markdown on a repo managed by devrels cc @waymobetta.
and this page is just informative + linking to the repo; and later we replace the manual repo with smart contracts.
There was a problem hiding this comment.
@moul Do you mean we should keep something like we currently have here: https://gno.land/game-of-realms + link ?
|
|
||
| <div class="accordion gor-accordion"> | ||
|
|
||
| <button type="button" aria-expanded="false" class="accordion-trigger is-muted" aria-controls="acc-1" id="accpanel-1"> ☑ <span class="is-finished">Clarifying this issue</span> — [100% completed] </button> |
There was a problem hiding this comment.
it starts going too far in terms of being non-markdown centric
There was a problem hiding this comment.
@moul I agree, I was not in favor of using HTML/CSS in Markdown, and it's still my opinion. it's really hard to read... That's why the UI lib use a markdown friendly way to use components.
| <div class="stack"> | ||
|
|
||
| [About Gno.land](/about) | ||
| [Explore Github repo](https://github.com/gnolang) | ||
|
|
||
| </div><!-- end stack--> |
There was a problem hiding this comment.
| <div class="stack"> | |
| [About Gno.land](/about) | |
| [Explore Github repo](https://github.com/gnolang) | |
| </div><!-- end stack--> | |
| <div class="stack"> | |
| [About Gno.land](/about) | |
| [Explore Github repo](https://github.com/gnolang) | |
| </div><!-- end stack--> |
grouped by goal looks better to me
There was a problem hiding this comment.
@moul Yeah, but it's not possible. As I told you in the previous Gno PR, HTML in markdown is a nightmare because of MD writing convention:
But I agree, like I said in a meeting we had earlier, using div in markdown is not very user friendly as we don't have indentation and we must follow line break + space convention that are not common in HTML... That's why our futur component lib should help here.
If I do that, the inner markdown will not be rendered as markdown but as HTML
There was a problem hiding this comment.
ok, so yeah, maybe not the best solution for long term; let's keep this for now.
I think we should do something more markdownish, like https://marp.app/.
|
|
||
| Using Gno, developers can rapidly accelerate application development and adopt a modular structure by reusing and reassembling existing modules without building from scratch. They can embed one structure inside another in an intuitive way while preserving localism, and the language specification is simple, successfully balancing practicality and minimalism. | ||
|
|
||
| The Go language is so well designed that the Gno smart contract system will become the new gold standard for smart contract development and other blockchain applications. As a programming language that is universally adopted, secure, composable, and complete, Gno is essential for the broader adoption of web3 and its sustainable growth. |
There was a problem hiding this comment.
This page needs to be completed, and I suggest removing it or replacing it with something shorter with a disclaimer.
Ideally, we should update this kind of docs on the main repo, and www.gno.land should link to the up-to-date documentation or synchronize.
There was a problem hiding this comment.
Let me ask to Christina, she is the one who wrote the text and I don't know what was her needs/goals here.
There was a problem hiding this comment.
synchronized is better for UX as we are currently redirecting our users in so many different websites, that looks similar but without the same navbar. It becomes tricky to navigate in these situations.
There was a problem hiding this comment.
@moul It seems that Adriana requested it as she needs it for applying for the TM. Christina will reach you out about that.
Co-authored-by: Manfred Touron <94029+moul@users.noreply.github.com>
Co-authored-by: Manfred Touron <94029+moul@users.noreply.github.com>
Co-authored-by: Manfred Touron <94029+moul@users.noreply.github.com>
Co-authored-by: Manfred Touron <94029+moul@users.noreply.github.com>
| margin-bottom: 2.5rem; | ||
| } | ||
|
|
||
| .accordion-trigger { |
There was a problem hiding this comment.
approving all these for now;
would be good to have as goal the creation of a framework for user gno.land generated markdown to benefit from standard minimal components, so please help curate the classes.
There was a problem hiding this comment.
There was a problem hiding this comment.
yep, it actually started with smart contracts, that's a joint effort between alexis and I to make a UI framework for smart contract developers.
Also linked with:
static/font/font.css
Outdated
| font-weight: 400; | ||
| font-display: swap; | ||
| src: url("inter/Inter-Regular.woff2?v=3.19") format("woff2"), |
There was a problem hiding this comment.
do we have to use non-standard fonts? I can understand for monospace.
we can maybe support non-standard non-monospace fonts if we're sure that the fonts will load only after everything else loads first (not in parallel, but explicitly last).
There was a problem hiding this comment.
I have made some tests and I think we can avoid use non-standard sans-serif font if we use a good font fallback system such as: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
But besides the fonts, I can understand your wish to improve the website loading speed, I've pushed some optimizations that give us good results.
- preloading rendering javascript ressources
- preloading
Robotofont and make a good use of HTTP/2 request multiplexing. - remove useless fonts and blocking style
- minify css ressource
- add images sizes to avoid HTML/CSSOM reflow - repaint events
- reorganize JS files
I think we can go further with a little bit of time and tests, but the Google Lighthouse standards give use good results for now (keeping in mind it's local)
| {{ define "header_logo" }} | ||
| <a id="logo" href="/"><img src="/static/img/logo.png" alt="Gno.land" title="Gno.land" height="38" /></a> | ||
| {{ end }} | ||
| <span></span> |
There was a problem hiding this comment.
are these needed? if so please add some comment why, otherwise delete
There was a problem hiding this comment.
@jaekwon, These span elements are used for burger button icon (in mobile). I also don't like empty html code and prefer pseudo-element instead, but it more convenient for this kind of icons.
| class="validate" | ||
| target="_self" | ||
| > | ||
| <label for="mce-EMAIL"><img src="/static/img/ico-email.svg" alt="email" /><span>Subscribe by email:</span></label> |
There was a problem hiding this comment.
no script, no tracking, great
| <pre id="source"> | ||
| {{ .Data.MainContent }} | ||
| </pre> | ||
| <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div> |
There was a problem hiding this comment.
not sure if what was desired was {{- -}} or not, I think {{- -}} removes preceding and trailing whitespaces if i remember correctly. anyways if you already knew that, never mind.
There was a problem hiding this comment.
You are right (if it's same as in Hugo framework).
There was a problem hiding this comment.
yeah, it's the html/template golang package; hugo is using it extensively and extends the builtin functions.
it's a gem from Golang which is super simple and powerful for code/page/whatever generation.
ove loading speed
|
We might add a module bundler or a task runner to improve front-end work (DX) |
feel free to add whatever as soon as it's not mandatory to make changes, but just an extended comfort for advanced developers. |
|
Merging so we can deploy. @alexiscolin feel free to make updates in new PRs, and now I suggest smaller PRs when possible. Thanks for you work. |
Website v2 (alpha)
New website design, new layout and new marketing content (related to gnolang/gno#818)
Design
Marketing contents
Code