thecarisma / themata Goto Github PK

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

can be set in the conf.py as

html_theme_options = {
   "has_twitter_meta_data": True,
   "twitter_handle": "@themata",
   "twitter_meta_data": {
      "card": "",
      "site": "",
      "title": "",
      "description": "",
      "image": "",
   }
}

The default card value is summary, default site is the twitter handle of the website, the default title is the title of the project, the default description is the website description the default image is the site icon. The fields are optional.

See https://cards-dev.twitter.com/validator https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary

Add theme feature to add landing page features so website is not just bland basic ugly looking documentation website.
E.g. https://www.jetbrains.com/pycharm-edu/

Possible configurations

html_theme_options = {
    landing_page_items: {
        section_one: [
              #... 
         ]
    }
}

Be creative

• https://www.bearer.com/, https://docs.bearer.com/
• https://spring.io/projects/spring-cloud-sleuth
• https://docs.microsoft.com/en-us/dotnet/csharp/, https://docs.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/
• https://axios-http.com/docs/intro
• https://undici.nodejs.org/#/
• rrui
• https://dev.mysql.com/doc/refman/8.0/en/preface.html
• https://code.visualstudio.com/docs
• https://www.jetbrains.com/pycharm-edu/
• https://brave.com/download/
• https://notepad-plus-plus.org/
• https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started
• https://docs.nvidia.com/
• https://developer.android.com/training/basics/firstapp, https://developer.android.com/kotlin
• https://faq.whatsapp.com/, https://faq.whatsapp.com/general/download-and-installation/how-to-update-whatsapp/
• https://docs.sonarqube.org/latest/
• https://www.dell.com/support/home/en-us, https://www.dell.com/support/software/us/en/04/
• https://docs.gitbook.com/
• http://preview.themeforest.net/item/thedocs-online-documentation-template/full_screen_preview/13070884, http://preview.themeforest.net/item/thedocs-online-documentation-template/full_screen_preview/13070884
• https://docs.developerhub.io/, https://docs.developerhub.io/support-center/api-references
• https://slatedocs.github.io/slate/#introduction
• https://www.phpdoc.org/, https://docs.phpdoc.org/3.0/guide/guides/templates.html
• https://docusaurus.io/, https://docusaurus.io/docs, https://docusaurus.io/showcase
• https://swagger.io/tools/swagger-ui/, https://swagger.io/docs/specification/about/
• https://daux.io/, https://daux.io/Getting_Started.html
• #35
• https://api.stackexchange.com/docs/js-lib
• https://learning.postman.com/docs/writing-scripts/script-references/test-examples/
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• https://docs.newrelic.com/
• https://newrelic.com/blog/how-to-relic/distributed-tracing-general-availability
• https://reactrouter.com/docs/en/v6

To create issue,
Generate a doc without setting syntax_highlighter_theme value.
Should resolve this in themata.js

Add variables that are resolved after page load completes in

__themata_base_url__
__themata_page_url__

Add a button to the pre, code block to copy the source code, and likely another button to open the code in a fill modal dialog

html_theme_options = {
    #...
    'selected_code_block_buttons': [ 
        'copy', 
        'modal'
    ],
    #...
}

Use Javascript to toggle dark and light theme on a webpage on a button click. Also somehow store the theme preference.

Instead of using more than one CSS file to switch themes, use the html_theme_options variable to set options for the dark theme.

html_theme_options = {
    'dark_theme': {
        'text_color': 'white',
        'background_color': 'black'
    }
}

Also, Accept a theme option to use static or extract some metatag from the page content.

html_theme_options = {
    'metadata': {
        "dynamic": True
        #...
    }
}

Create a python script that auto-generates an HTML page as distributable and installed the sphinx theme. Use the script to generate a new theme for thematic collection and allow the script to be capable of generating a single sphinx theme for a saved HTML page.

Scenario 1

If the page https://docs.github.com/en is saved as HTML, the script will generate a sphinx theme that can generate a doc in the save Github doc design.

Scenario 2

If the page https://docs.github.com/en is saved as HTML, the script will generate a sphinx theme for part of the themata collection, this is exclusive to the themata collection only.

Features

• Can generate a random name from the page or title, between 5 - 6 letters long
• Generates completely usable python sphinx theme
• Allows customizing the layout properties automatically base on the themata framework and APIs.
• Allows customizing the CSS and JS to auto-generate theme_options
• Can generate a showcase like documentation page for the generated theme base on themata API
• Scenario 1 functional
• Scenario 2 functional
• Add a label or detail on the page (a standalone likely) that shows it generated by themata
• Warn user if the HTML page already has a theme in themata
• Build a Tkinter GUI to perform the operations
  • Download the webpage
  • Set the theme options using themata API and frameworks for
    • layout
    • JS
    • CSS
  • all the main features operations above

TODO

• Rewrite all existing themata themes to be auto-generated by the script without breaking backward compatibility
• Generate the new themes from the issue #32 with the script
• Record the page that a theme is derived from in themata for warning

In the conf.py file

html_theme_options = {
    "li_text_color": "red"
}

theme option to dump in head

html_theme_options = {
   "custom_css": "h2 { font-weight: bold;}"
}

Will be dump in generated webpage head like

<head>
<!-- ...-->
<style>
h2 { font-weight: bold;}
</style>
</head>

Automatically navigate to the section on the webpage if the highlight param is set in the URL. e.g. macros.html?highlight=cester_no_print_info should navigate to the cester_no_print_info section.

html_theme_options = {
   "table_width" : "100%",
   "table_align" : "left",
}

The table_width will not be set by default
The table_align is left by center

Derive logic to detect if the value is relative then expand it in the layout.html

Comment feature, such as

• facebook comment
• disqus comment
• github comment using GITHUB API

Also since the website is generated at compile time try to auto-detect the appropriate value.
e.g. in the navigation where the next page has no label or title, replace with the first 5 words on that page or the first topic.

https://www.programiz.com/python-programming/methods/string/index

The default code and syntax highlight from sphinx sucks ass, add the following optional alternatives

• ace
• highlightjs
• rainbow
• prism
• Google Prettify
• syntaxhighlighter.js
• microlight
• syntaxyjs

Currently, h1 is no different from h2 or h3, needs to be corrected.

Use the screen size to determine the layout and elements positions, in CSS

accept collapsible_sidebar for water theme

Use the provider github token to add contributor, edit and other data to a page

html_them_options = {
    "github_api_token": "XXXXXXXXXXXXXXXXXXXXXXXX"
}

ses https://docs.microsoft.com/en-us/sql/t-sql/functions/newsequentialid-transact-sql?redirectedfrom=MSDN&view=sql-server-ver15

Also review the other type of note, warning, error and find the suitable color blend,

see https://github.com/exoticlibraries/libcester/blob/master/docs/_static/css/libcester.css

In the conf.py

html_theme_options = {
   "search_box_text_color" : "red",
   "search_box_background_color" : "yellow"
}

See https://github.com/exoticlibraries/libcester/blob/master/docs/_static/css/libcester.css

Also, there should be space between the text and the top menubar, the top menu should not consume part of the text