Docs Homepage #23

mwvd · 2024-11-05T17:51:37Z

Docs homepage updates

This PR adds a refreshed homepage to the documentation site

Changes

Raw HTML added to render in core/index.rst
- Inlined CSS
- Homepage specific style override
  - Hides the sphinx generated page header for core/index.rst
  - Override style added to shared/_static/home.css
Images added to core/_static/assets/home

Notes

Reusable sections in raw generated HTML here could possibly also be automated with Javascript:

Note

In this example I moved image assets from core/_static/assets/home into core/_static/home/assets
(see core/_static/home/data.json below)

core/index.rst:

<!-- ... -->
<body>
  <div class="container" id="container">
    <h1 class="hx">Tenstorrent<br/>Documentation</h1>
    <!-- sections appended here -->
  </div>
  <script async>
    const main = async () => {
      const container = document.getElementById("container");

      const response = await fetch("_static/data.json");
      const sections = await response.json();

      sections.forEach((section) => {
        const sectionElement = document.createElement("div");
        sectionElement.classList.add("section");

        const sectionTitle = document.createElement("h2");
        sectionTitle.textContent = section.title;
        sectionElement.appendChild(sectionTitle);

        const grid = document.createElement("div");
        grid.classList.add("grid");
        sectionElement.appendChild(grid);

        section.cards.forEach((card) => {
          const cardElement = document.createElement("a");
          cardElement.href = card.url;
          if (card.url.startsWith("http")) {
            cardElement.target = "_blank";
          }
          cardElement.classList.add("card");
          if (card.small) {
            cardElement.classList.add("small-card");
          }

          const image = document.createElement("img");
          image.src = card.image;
          cardElement.appendChild(image);

          const title = document.createElement(card.small ? "h4" : "h3");
          title.textContent = card.title;
          cardElement.appendChild(title);

          grid.appendChild(cardElement);
        });

        container.appendChild(sectionElement);
      });
    }
    main();
  </script>
</body>
<!-- ... -->

core/_static/home/data.json:

[
  {
    "title": "Add-in Boards",
    "cards": [
      {
        "title": "Grayskull™",
        "image": "_static/home/grayskull.png",
        "url": "aibs/grayskull.html"
      },
      {
        "title": "Wormhole™",
        "image": "_static/home/wormhole.png",
        "url": "aibs/wormhole.html"
      },
      {
        "title": "Warp 100 Bridge",
        "image": "_static/home/warp-100-bridge.png",
        "url": "aibs/ack.html",
        "small": true
      },
      {
        "title": "Active Cooling Kit",
        "image": "_static/home/active-cooling-kit.png",
        "url": "aibs/warp100.html",
        "small": true
      }
    ]
  },
  {
    "title": "Systems",
    "cards": [
      {
        "title": "TT-QuietBox",
        "image": "_static/home/tt-quietbox.png",
        "url": "systems/quietbox.html"
      },
      {
        "title": "TT-LoudBox",
        "image": "_static/home/tt-loudbox.png",
        "url": "systems/t3000.html"
      },
      {
        "title": "T7000",
        "image": "_static/home/t7000.png",
        "url": "systems/t7000.html",
        "small": true
      },
      {
        "title": "T1000",
        "image": "_static/home/t1000.png",
        "url": "systems/t1000.html",
        "small": true
      }
    ]
  },
  {
    "title": "Software",
    "cards": [
      {
        "title": "TT-NN",
        "image": "_static/home/tt-nn.png",
        "url": "https://tenstorrent.github.io/ttnn/latest/index.html",
        "small": true
      },
      {
        "title": "TT-Buda™",
        "image": "_static/home/tt-buda.png",
        "url": "https://tenstorrent.github.io/pybuda/latest/index.html",
        "small": true
      },
      {
        "title": "TT-Metalium™",
        "image": "_static/home/tt-metalium.png",
        "url": "https://tenstorrent.github.io/tt-metalium/latest/index.html",
        "small": true
      },
      {
        "title": "Software/Utilities",
        "image": "_static/home/software-utilities.png",
        "url": "https://tenstorrent.github.io/syseng/latest/index.html",
        "small": true
      },
      {
        "title": "TT-MLIR",
        "image": "_static/home/tt-mlir.png",
        "url": "https://docs.tenstorrent.com/tt-mlir/",
        "small": true
      }
    ]
  },
  {
    "title": "Support",
    "cards": [
      {
        "title": "FAQ",
        "image": "_static/home/faq.png",
        "url": "https://tenstorrent.com/faq",
        "small": true
      },
      {
        "title": "Compliance",
        "image": "_static/home/compliance.png",
        "url": "support/README.html",
        "small": true
      },
      {
        "title": "Contact Us",
        "image": "_static/home/contact-us.png",
        "url": "https://tenstorrent.com/contact",
        "small": true
      }
    ]
  },
  {
    "title": "All Documentation",
    "cards": []
  }
]

This approach is probably easier to maintain long-term, but I don't really like the idea of introducing client-side rendering to a docs site, especially when it's async (sections could be inline JS and we could drop the async, but then it's not quickly openable from a code editor). I'm open to other thoughts here.

Screenshots

dimitri-tenstorrent · 2024-11-18T21:51:38Z

@mwvd I have deployed this version onto staging here https://tenstorrent-docs-test.github.io/

One of the new changes the team requested is a prominent Getting Started section on the new homepage. The new getting started section is here - https://tenstorrent-docs-test.github.io/quickstart.html

Also, we decided to remove software/utilities box as it was conflicting with the instructions from Getting Started.

dimitri-tenstorrent

Reviewed 👍

dimitri-tenstorrent · 2024-11-18T21:52:32Z

core/index.rst

@@ -1,6 +1,256 @@
 Tenstorrent
 ==============================

+.. raw:: html


Could we use :include: tag here and have the HTML inside of home.html?

Yes- much better idea- I'll do this

Couldn't figure this out with :include:, but was able to move the HTML into /core/_templates/home.html and then include it here with:

.. raw:: html :file: _templates/home.html

dimitri-tenstorrent · 2024-11-18T21:53:52Z

shared/_static/home.css

+  Hides sphinx generated homepage header (https://docs.tenstorrent.com/)
+*/
+
+#tenstorrent > h1 {


Can I not remove it via deleting the first two lines of index.rst

Tenstorrent ==============================

Tenstorrent ==============================

Removing this seems to make the page title default to the closest header:

mwvd · 2024-11-18T22:23:39Z

@dimitri-tenstorrent seems like the staging build is missing everything below the "All Documentation" header:

Is this just because of config handling orchestration for staging? Or would this be the same in the production environment also

mwvd · 2024-11-18T22:25:01Z

One of the new changes the team requested is a prominent Getting Started section on the new homepage. The new getting started section is here - https://tenstorrent-docs-test.github.io/quickstart.html

I'll talk to Keith about this tomorrow and aim for EOW in another PR

Also, we decided to remove software/utilities box as it was conflicting with the instructions from Getting Started.

✅

dimitri-tenstorrent · 2024-11-18T22:25:24Z

@dimitri-tenstorrent seems like the staging build is missing everything below the "All Documentation" header:

Is this just because of config handling orchestration for staging? Or would this be the same in the production environment also

Ah, the table of contents was hidden in the last version, but I can re-add it to this one.

…hub.io into feature/homepage

update docs homepage

d4c4c61

mwvd requested a review from dimitri-tenstorrent November 5, 2024 17:51

dimitri-tenstorrent reviewed Nov 18, 2024

View reviewed changes

mwvd added 6 commits November 20, 2024 12:45

update asset contact-us.png

7f2ef1c

remove software/utilities box

4d5e590

move homepage raw HTML contents to external file

45e279a

Merge branch 'main' of https://github.com/tenstorrent/tenstorrent.git…

a9c1363

…hub.io into feature/homepage

remove "All Documentation" header from home.html

6d03a13

formatting cleanup

6197fa1

mwvd requested a review from dimitri-tenstorrent November 25, 2024 16:04

mwvd added 2 commits November 26, 2024 14:20

Merge branch 'main' into feature/homepage

56dcbc3

Merge branch 'main' into feature/homepage

76f8e96

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs Homepage #23

Docs Homepage #23

mwvd commented Nov 5, 2024 •

edited

Loading

dimitri-tenstorrent commented Nov 18, 2024

dimitri-tenstorrent left a comment

dimitri-tenstorrent Nov 18, 2024

mwvd Nov 19, 2024

mwvd Nov 25, 2024

dimitri-tenstorrent Nov 18, 2024

mwvd Nov 25, 2024

mwvd commented Nov 18, 2024

mwvd commented Nov 18, 2024 •

edited

Loading

dimitri-tenstorrent commented Nov 18, 2024

Docs Homepage #23

Are you sure you want to change the base?

Docs Homepage #23

Conversation

mwvd commented Nov 5, 2024 • edited Loading

Docs homepage updates

Changes

Notes

Screenshots

dimitri-tenstorrent commented Nov 18, 2024

dimitri-tenstorrent left a comment

Choose a reason for hiding this comment

dimitri-tenstorrent Nov 18, 2024

Choose a reason for hiding this comment

mwvd Nov 19, 2024

Choose a reason for hiding this comment

mwvd Nov 25, 2024

Choose a reason for hiding this comment

dimitri-tenstorrent Nov 18, 2024

Choose a reason for hiding this comment

mwvd Nov 25, 2024

Choose a reason for hiding this comment

mwvd commented Nov 18, 2024

mwvd commented Nov 18, 2024 • edited Loading

dimitri-tenstorrent commented Nov 18, 2024

mwvd commented Nov 5, 2024 •

edited

Loading

mwvd commented Nov 18, 2024 •

edited

Loading