docs/blog
Evan Anderson f576745498
Backport UI (#6331)
* Feat: New website (#6286)

* chore: change theme font to satoshi font

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: create hero section

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: improve hero and need to know more sections

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: rename need to know more to what is knative

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: create why serverless section

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update feature icons and knative components sections

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update hero title headings

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update testimonial section

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update case studies items

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update why serverless feature cards with new content

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: tweak width of kelsey testimonial to align appropriately

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: tweak top nav layout

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update top nav links

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: change “readdocs” to “docs”

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: add spacing to the right of the nav menu

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix about link

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: remove home from sub nav

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: change cta button font color to white on hover

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix styling for testimonial section

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make main headline font color to be black

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: rearrange nav items on the blog page

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: align serverless content block to center

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: reduce feature icons size on mobile screens

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: maintain consistent border radius size across cards

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make knative components container span entire width on mobile

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix case studies section to be mobile responsive

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make hero section mobile responsive

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix section spacing in mobile

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: reduce version warning title font size to be smaller

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: automatically hide duplicate menu items in sub nav using css

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: conform text colors to match design

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: cleanup code

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: add the correct kelsey testimonial copy on homepage

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix some layout issues on mobile

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: Remove second paragraph from Kelsey testimonial on front page

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: Update Knative diagram image to the latest one with eventing icon as spiral

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: Update card background to match page background color

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: Put Kelsey testimonials in quote and make quote prominent

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make kelsey testimonial card clickable

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: update knative components overall design

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make other card containers adopt new card design

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: change primary bg color to white

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix background bleed in kelsey testimonial image

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: text align feature contents to the left

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make PNC card to be same size as others

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: reduce border width on hover to reduce flickering

Signed-off-by: thisisobate <obasiuche62@gmail.com>

---------

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* Fix casing of Knative (#6322)

* chore: fix version picker overflowing into top nav (#6325)

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix docs page footer broken on mobile (#6323)

Signed-off-by: thisisobate <obasiuche62@gmail.com>

---------

Signed-off-by: thisisobate <obasiuche62@gmail.com>
Co-authored-by: Uchechukwu Obasi <obasiuche62@gmail.com>
Co-authored-by: Dave Protasowski <dprotaso@gmail.com>
2025-08-13 20:07:41 +00:00
..
config Backport UI (#6331) 2025-08-13 20:07:41 +00:00
docs remove domain-mapping pods from console outputs (#6283) 2025-06-19 15:04:58 +00:00
overrides Add dynamic date on blog pages (#5801) 2024-01-17 15:18:14 +00:00
README.md update blog menu and files (#4783) 2022-02-25 02:37:42 -08:00
mkdocs.yml Remove as_updated field in rss plugin (#6027) 2024-06-26 08:15:52 +00:00

README.md

Updating the Knative Blog

The Knative website has a basic, top-level navigation that looks like this:

nav:
    - Home:
    - Tutorial:
    - Installing:
    - Serving:
    - Eventing:
    - Code samples:
    - Reference:
    - Community:
    - About:
    - Blog:

Currently, we maintain two different copies of the navigation.

docs/config/nav.yml

The main one, for the website as a whole, is located at docs/config/nav.yml and contains the links for all the subject matter except for the Blog and Community pages. It uses relative links for everything except the Blog / Community, for example:

    - Tutorial:
        - Knative Quickstart: getting-started/README.md
        - Using Knative Serving:
          - First Knative Service: getting-started/first-service.md
          - Scaling to Zero: getting-started/first-autoscale.md
          - Traffic Splitting: getting-started/first-traffic-split.md

Note here that each link assumes that the present working directory is docs/docs/, so for example the "Tutorial" README which is located in docs/docs/getting-started/README.md is listed as getting-started/README.md

The Blog pages instead use absolute links to its sections:

    - About:
      - Testimonials: about/testimonials.md
      - Case studies:
        - deepc: about/case-studies/deepc.md
        - Outfit7: about/case-studies/outfit7.md
        - Puppet: about/case-studies/puppet.md
    - Blog: /blog/

Note that the Blog link is /blog/ and not blog/ (and similar for the community site).

docs/blog/config/nav.yml

The blog is actually a separate, self-contained site that is accessible from the main docs page. We do this partly because the blog is not versioned like the docs (i.e. tied to a specific release) and partly to make the left sidebar navigation look clean (i.e. only display blog posts on the blog site).

In order to do this, we essentially have a separate mkdocs site for the blog that gets copied over into the main site. This is done using the hack/build.sh script. While we try to copy over as many files as possible from the main site (to avoid duplicating configuration / html / stylesheets / etc), our nav.yml file (located at docs/blog/config/nav.yml) is unique to the blog site.

nav:
    - Home: /docs/
    - Tutorial: /docs/getting-started/
    - Installing: /docs/install/
    - Serving: /docs/serving/
    - Eventing: /docs/eventing/
    - Code samples: /docs/samples/
    - Reference: /docs/reference/
    - Community: /docs/community/
    - About: /docs/about/testimonials
    - Blog:
      - index.md
      - Releases:
          - releases/announcing-knative-v0-26-release.md
          - releases/announcing-knative-v0-25-release.md
          - releases/announcing-knative-v0-24-release.md
            ...

A couple of key points:

  • The basic, high-level sections are the same as for the main site (Home, Tutorial, etc.).

  • The blog requires absolute links for all sections not in the blog. For example, the Tutorial section link is /docs/getting-started/ for the blog site (whereas it was simply getting-started/ for the main site). Also note that for the blog, we don't need to link to a specific file, as each of those directories has a README that gets redirected to.

  • For the blog, we use relative links, with docs/blog/docs/ as the present working directory.

Updating the blog

When a new blog post is created, it will also need to be added to the blog navigation (i.e. to docs/blog/config/nav.yml) in the appropriate section.

Updating the site navigation

If a major change to the site navigation is made (for example, adding a new section to the top navigation tabs), then the change will need to be made in both docs/config/nav.yml and docs/blog/config/nav.yml.

For changes that are not top-level (i.e. adding a subsection to the "Tutorial" guide or creating a new category of blog post), the change only needs to be made in the relevant section, as it's invisible to the other (for example, the subsection of the "Tutorial" guide only needs to be made in docs/config/nav.yml)

Common files between main site and blog, also known as non nav.yml files

All files in docs/overrides, docs/images, and docs/stylesheets are copied to the blog at build-time.

What this means is that any changes to files in those directories (for example, updating the main site layout editing docs/stylesheets/extra.css) will go live on the blog as soon as those changes are pushed to main. In contrast, on the main site those changes will appear in the development branch and only go live when they are cherry-picked into the current release branch.