Giter VIP home page Giter VIP logo

f5-sphinx-theme's Introduction

F5 Sphinx Theme

image

The f5-sphinx-theme provides F5 Networks styling and layouts for projects built with Sphinx. This theme should not be used without modification for any project that doesn't publish documentation to clouddocs.f5.com.

Setup and Configuration

  1. pip install f5-sphinx-theme
  2. Update your project's conf.py with the following settings: :

    import f5_sphinx_theme
    html_theme = 'f5_sphinx_theme'
    html_sidebars = {'**': ['searchbox.html', 'localtoc.html', 'globaltoc.html']}
  3. (Optional) Set the html_theme_options{} dictionary. Supported options are shown below. :

    html_theme_options = {
                            'site_name': '<desired site name>',           \\ DEFAULTS TO "CloudDocs home"
                            'next_prev_link': True or False,              \\ DEFAULTS TO FALSE
                            'html_last_updated_fmt': '%Y-%m-%d %H:%M:%S', \\ REQUIRED FOR FEDERATED SEARCH, DO NOT CHANGE
                            # 'surveymonkey_url' = '',                    \\ DEFAULTS TO ''
                            # 'medallia_embed_url' = '',                  \\ DEFAULTS TO ''
                            # 'medallia_id' = '',                         \\ DEFAULTS TO "medallia_inline_survey"
                            # 'feedback_exclude_pages': ['page.html'],    \\ DEFAULTS TO ['index.html', 'search.html'], THE TABLE OF CONTENTS AND SEARCH PAGE
                            # 'base_url' = ''                             \\ DEFAULTS TO '/',
                            # 'sidebar_toc_maxdepth' = ''                 \\ DEFAULTS TO '', Override 'maxdepth' behavior on sidebar toc in layout.html. This is an integer value.
                            # 'hide_right_menu': True or False,           \\ DEFAULTS TO FALSE
                            # 'next_prev_link_skip_index': True or False, \\ DEFAULTS TO FALSE. Hide Next and Previous buttons from all 'index' pages?
                            # 'show_project': True,                       \\ DEFAULTS TO TRUE. Show project and version in left menu
                            # 'dropdown': {                               \\ DEFAULTS TO ''. Enable dropdown menu
                            #   'name': 'SPK v1.9.1',
                            #   'links': {
                            #     'SPK v1.9.0': '/service-proxy/1.9.0/intro.html',
                            #     'SPK v1.8.2': '/service-proxy/1.8.2/intro.html'
                            #   }
    }
                         }

    The base_url theme option is intended to allow customization of the root URL.

Note

Depending on your publication/deployment process, you may have to re-build your documentation for the changes to take effect.

Version Selector

You can add a version selector to the navbar, as shown below:

image

The version selector is not enabled by default. To enable it, add the following settings to your docs/conf.py:

html_theme_options = {
  'version_selector': True,
}

html_context = {
  'version_meta_path': 'uri/of/your/json/versions/file.json',
  'project_safe': re.sub('[^A-Za-z0-9]+', '', project)
}

The 'version_meta_path' refers to the location of a version.json file in the host S3 bucket. The versions displayed in the version selector are generated from this JSON file via an AJAX call. You only need to update one file to make the change across all versions. Generating the JSON is left up to the implementor (i.e., you), but it can be incorporated into a CI/CD process. Ideally, the JSON should be at the root of the project directory in S3, with versions being in subfolders as shown here:

project_root
  |
  +---versions.json
  |
  +---v2.0.0
  |   \--- <docs_html>
  |
  +---v1.0.1
  |   \--- <docs_html>
  |
  +---v1.0.0
      \--- <docs_html>

See the [test](/test) directory in this repo for a basic example.

Usage

See the project wiki for more information.

Testing

This project uses GitHub Actions for CI/CD.

Copyright 2017-18 F5 Networks Inc.

License

Apache V2.0

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

f5-sphinx-theme's People

Contributors

0xhiteshpatel avatar alankrit8 avatar andreykashcheev avatar brentmcomer avatar jputrino avatar jswongf5 avatar kkinch avatar nerdoftech avatar recursivelycurious avatar swormke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

f5-sphinx-theme's Issues

Fix docker links in header

The docker hub link should point to https://hub.docker.com/r/f5networks/.

The docker store link should point to https://store.docker.com/images/f5networks/. (NEED TO VERIFY)

RFE: moving "warning" into a block

Version

latest dev

Description

currently the following is in layout.html (could this be in a block?)

    <div class="admonition warning" id="enviroment-warning" style="display: none;">
        <p class="first admonition-title">Warning</p>
        <p class="last">This is draft content. See <a href="https://clouddocs.f5.com">clouddocs.f5.com</a> for content released to the public.</p>
    </div>

Ideally it would be nice to be able to drop this out if deploying on an internal system that is outside of clouddocs.

Something like:

{%- block environment_warning %}
    <div class="admonition warning" id="enviroment-warning" style="display: none;">
        <p class="first admonition-title">Warning</p>
        <p class="last">This is draft content. See <a href="https://clouddocs.f5.com">clouddocs.f5.com</a> for content released to the public.</p>
    </div>
{%- endblock %}

same ask for (should I create a separate issue?)

 <button type="button" id="export-pdf" class="btn btn-link right">Create PDF</button>

Version selector is broken in staging environment

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

v2.0.2b7

Description

In the staging environment, the version selector drop-down isn't working. The selector appears but is not functional.

Add Tests

Version

all

Description

We need to move beyond the basic html/css checks we currently have and incorporate unit/functional tests.

See other open source sphinx themes for guidance.

Tools:

Add AGC config guides to header

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

N/A

Description

Add the AGC config guides to the header, to stay in parity with clouddocs.

Add Travis-CI integration

Travis-CI should do the following to start:

  1. Pip install the module
  2. Have a deploy section to push to pypi on tagged builds

Funky formatting in admonitions

Version

N/A (since we don't have any official releases yet)

Description

In admonition boxes, we don't apply the padding: 6px rule to all of the content within the box. It's currently only applying to the title and to the last element of the content. We need to apply it to all of the content in the box.

Example:
2017-06-21_14-57-32

GA implementation

Version

latest

Description

We need to update the theme per the GA implementation spec. See CLDOCS-49 in JIRA for details (F5 internal only).

correct ASP product name

References to 'Application Service Proxy' must be changed to 'Application Services Proxy' (note the additional 's' in 'Services').

Relocate header from clouddocs repo to this project

Description

  1. The header has recently been updated in the clouddocs repo. The changes should be made here as well.
  2. This project should be considered the single source of truth for the header and footer. Both will live here; clouddocs can access them via sphinx builder.

Search not working in 1.0.3b4?

  • Search functionality appears to be broken in 1.0.3b4.
  • Details: Looked at the example sent out for 1.0.3b4, and the search feature was not functioning.

Version

1.0.3b4

Description

I didn't update myself yet, but poked around the example site that was using that beta version. The version bar was there, but the search did not function. Possibly something in the version feature caused search to not function.

Add support for beta icon

The Google Cloud docs have a beta icon embedded in the sidebar nav to denote items that are part of beta releases. It would be nice to incorporate this kind of identifier into our documentation.

2017-05-11_12-13-01

layout - divide into chunks for better extendability

Version

x

Description

Currently, if you want to use a custom layout, you must copy all of the html from the theme layout in order to update any piece of it. This is problematic because the layout in a project overrides the theme layout, so any updates made here wouldn't roll out to the project using a custom layout.

I would like to refactor the layout template to make it more easily customizable for use in different projects. For example, the breadcrumbs should be in its own {% block %} so a project can alter just that piece of the template.

Single source content from clouddocs

Version

<Fill in the version you have installed, such as 1.0>

Description

We currently have content like the header, footer, css, and scripts in 2 different places. We should update this project to use the resources from clouddocs where possible.

Add metadata

Version

for v1.0.0

Description

Add metadata to the sphinx theme to support google analytics and federated search:

  • GA tags (provided offline)
  • title
  • kb_doc_type
  • document last published date
  • product
  • version

Update header - add AS3 to products

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

1.0

Description

Add the AS3 Extension to the products list.

Update theme for sphinx 2.0 compliance

Version

1.0.7

Description

Sphinx has made a lot of updates in advance of the 2.0 release, which will fully support python3 (among other things). We need to review the changes, especially the deprecations, and update this theme accordingly.

For example:
Running sphinx 1.8 with v1.0.7-beta produces this error:
/usr/lib/python2.7/site-packages/sphinx/builders/html.py:138: RemovedInSphinx20Warning: builder.css_files is deprecated. Please use app.add_stylesheet() instead.

This means that we need to update how we call css files from the theme layout.
(We should change this so that we're using central resources from the clouddocs project and move the files out of this repo.)

Add 'not on latest version' warning

The rtd-sphinx-theme has a banner that tells users they're not looking at the latest version of the documentation. We should investigate how this is done and do something similar in our theme, if possible.

2017-04-26_14-51-32

Add version nav

For product docs, we will need a way for users to easily navigate between doc versions. Read the Docs handles this with an expandable version menu (bottom right in this example):
2017-05-18_10-52-34

We need to figure out how best to integrate similar functionality into our theme as a configurable option.

Excess whitespace between codeblock and callout

reported by @michaeldayreads in f5-ci-docs:

There is excessive whitespace following:
http://clouddocs.f5.com/containers/v1/marathon/mctlr-manage-bigip-objects.html#id3

and before the "tip" that shows immediately above:
http://clouddocs.f5.com/containers/v1/marathon/mctlr-manage-bigip-objects.html#create-a-virtual-server-for-a-marathon-application

Inspect element suggests the clearfix css in bootstrap.min.css may be contributing. Manually toggling the setting for clear: both; for the pseudo ::after element on

removes or places the white space.

Seen in chrome, brave, FF.

Add new 'site home' variable

We should add a link to the site home (clouddocs.f5.com) to the path that appears at the top of each document (i.e., Cloud Docs Home > [project-name] > [current doc]).

Fix header/footer

The header and footer changes made to the f5 clouddocs site need to be made here as well.

css revisions

  • side bar color to #EBEBEB
  • fix z-index on top menu, side bar interaction

Search is broken in v1.0.0

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

1.0.0

Description

The search is broken. When you click the search button from the sidebar, it takes you to the search page, but no results load. Same behavior when searching directly from that page.
See https://clouddocs.f5networks.net/under-review/f5-ci-docs/theme-test/search.html

Breadcrumbs links are broken

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

1.0.2

Description

All of the links in the breadcrumb are pointing to the same place. This has been verified in the OpenStack and Public Cloud documentation sets.

2018-04-16_15-50-32
2018-04-16_15-50-11

Code block improvements

Version

N/A

Description

  • Code blocks with long strings on one line just make the window bigger. These should be limited to a specific size and wrap contents, without breaking the linenos.

2017-10-06_15-51-05

  • Investigate using highlight.js.

Layout additions - last updated and link to source

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

pre-1.0

Description

We should add the ability to insert the last_updated string and a link to the source file in the docs.
See https://github.com/translate/sphinx-themes/blob/master/sphinx-bootstrap/layout.html.

Remove Index from breadcrumbs

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

Description

Most projects using this theme are not actively creating index entries. We should not include the index link in the breadcrumbs by default; instead, users who do create index entries can elect to turn that link on.

CSS - adjust sidebars

Version

Description

  1. Bullet points in sidebars are indented too far; there should be less white space on the left side.

2017-08-01_11-42-50

<div class="sidebar">
<p class="first sidebar-title">Understanding client-side proxies</p>
<p>An ASP instance sitting in between the client and server inspects and modifies all of the data exchanged between the two.</p>
<ul class="last simple">
<li>The ASP intercepts traffic as it leaves the client;</li>
<li>an ASP running on the same Kubernetes node as the client handles the client’s network data;</li>
<li>the ASP applies policy to the network traffic on behalf of the server.</li>
</ul>
</div>
  1. When you have two sidebars, they appear inline (i.e., in the same row) when rendered in the html. Instead, they should stack on top of each other.
    2017-09-28_16-46-24

htmlhintrc settings are not being picked up in builds

  • Title: A short but descriptive summary of the issue, whether it be a bug or enhancement.
  • Details: For bugs, use the below template.
  • Do not include requests for development or report issues with code or products here. This repository contains documentation only.>

Version

N/A

Description

See the following build in Travis-CI:
https://travis-ci.org/f5devcentral/f5-sphinx-theme/builds/393836586

We have an htmlhintrc file that tells htmlhint to ignore DOCTYPE warnings. These settings are not being picked up in the build anymore.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.