Rework of shipwright.io website using hugo:lotus-docs

[rxinui]

Changes

Fixes #129

Migration from Hugo:Docsy to Hugo:Lotus-Docs (see https://lotusdocs.dev)

Disclaimer: I am neither a frontend developer nor a designer. This is actually my first experience with Hugo, so please bear with me...

🚀 LIVE DEMO ON GITHUB PAGES Note: the netlify preview drifts from how it should be, please use this github pages link instead.

The primary focus has been on the homepage (also known as data/landing.yaml). Beyond the new user interface, the intention of the homepage has shifted to better describe shipwright.io and make it appealing to future end-users and developers.

⚠️ Please note that the current content is not final and reflects my vision of Shipwright. It should be adjusted according to the maintainers' preferences.

In my opinion, what was lacking on the shipwright.io website was a clear purpose for end-users, highlighting the benefits and interests they could gain from the project. Therefore, the landing page is structured as follows:

1. Hero Section: Features an image of a terminal displaying a Build YAML file. The goal is to immediately showcase Shipwright's capabilities. Since Build is a core component, I thought it was an ideal illustration. Alternatively, this image could be replaced with an architectural diagram of Shipwright + K8s + Tekton. Because "shipwright" is related to maritime world, I have designed an artsy interpretation of waves (as shipwright will make waves into the CNCF landscape!!)

2. Why Shipwright.io: Highlights the project's features - such as Vitess.io did.

3. Step-by-Step Overview: Demonstrates how easy it is to use Shipwright. It introduces the main components—BuildStrategy, Build, and BuildRun—in a logical sequence, with illustrations to aid comprehension. This section is inspired by ArgoProj.

4. Footer: Utilizes another CNCF logo available from their GitHub repository. Since Shipwright is a sandbox project, I thought it would be fitting to use the corresponding banner.

Inspiration has been drawn from other CNCF project websites, such as:

• https://vitess.io/
• https://argoproj.github.io/
• https://dapr.io/

All images are created by me, except for the logos from CNCF projects. The repository structure is simplified by Lotus-Docs, offering additional functionalities such as FlexSearch, DocSearch, MermaidJS, and Google Analytics. However, these functionalities are not fully implemented or configured, as they are not the focus of this issue.

What has not been done

• Custom CSS to match shipwright scheme color
• Checks on the blog and docs importation behaviour
• Use of Netlify (i use GitHub Pages using GitHub Workflow, no dependency)
• Enhancement of the docs content nor correction
• Remove TOC hard-written within markdown (like https://rxinui.github.io/shipwright-website/docs/build/buildrun/), as lotus-docs auto-generate it (like https://rxinui.github.io/shipwright-website/docs/build/build/)
• Work on Mobile version

Submitter Checklist

See the contributor guide
for details on coding conventions, github and prow interactions, and the code review process.

Release Notes

Migrate to hugo:lotus-docs

[rxinui]

CC: @adambkaplan

Following-up slack thread https://kubernetes.slack.com/archives/C019ZRGUEJC/p1745581312832979

[rxinui]

Update: mobile version is now fixed. Replace all .svg to .png for bootstrapv5 to auto-resize correctly.

[rxinui]

@adambkaplan i remove the typo shipwright.io --> shipwright as requested.
Also updated the diagram per @HeavyWombat request.

[adambkaplan]

Good start here!

That said, I'm concerned with the volume of changes here that appear to be outside the scope of adopting the new theme. This is hindering my ability to debug the preview deployment (ex: broken or missing nav links).

I may try to follow along and re-implement the migration.

[rxinui]

I let some comments and corrected my mistakes.

[adambkaplan]

After giving an initial stab at my own "minimal" migration of the site to LotusDocs, I uncovered a bit of tech debt that can be addressed right away, related to the imgproc shortcode. See #163

[rxinui]

@adambkaplan i fix the broken links !!! You can try it out on the preview.

Basically, hugo.yaml has baseURL: field which obviously is set to shipwright.io hence explain why the preview append the relative path of the docs to shipwright.io which induces the redirection to the old docs.

Now I comment it, but we can also put it back as when it will be merged, this won't have any side effect.

[rxinui]

@SaschaSchwarze0 changes requested are now effective

[rxinui]

@SaschaSchwarze0 typo on codye.png is fixed. To issue it, I use the free version of Codye available on MacOS. Nice for Powerpoint talks.

[rxinui]

Any more blockers on this one @SaschaSchwarze0 @adambkaplan ?

[qu1queee]

/lgtm

[adambkaplan]

/approve

Let's go!

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: adambkaplan

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [adambkaplan]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment