Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add JS for swapping examples on project creation form #184

Closed
agjohnson opened this issue Jul 7, 2023 · 1 comment · Fixed by #368
Closed

Add JS for swapping examples on project creation form #184

agjohnson opened this issue Jul 7, 2023 · 1 comment · Fixed by #368
Labels
Improvement Minor improvement to code
Milestone
New dashboard fea...

Comments

@agjohnson
Copy link
Contributor

With #166, the project creation page now has a nice dropdown on the page to select different examples for tools. Currently, the selection doesn't do anything, as there is only one option. When we add a second option to the dropdown, there will need to be some JS or FUI interaction added.

Most likely, this could use FUI tabs for the content pane, and the dropdown would activate the tabs. This might require playing with the tab configuration as I've found tabs to be a bit fiddly.

An alternative option would be to store each example as a script element and populate the code example using Knockout.

There are two options here that could improve the UI. These can be separate work, but might dictate how we implement this:

  • Work in pygments (or a front end option) for code highlighting
  • Read the configuration files from disk instead of embedding them in the template
@agjohnson agjohnson added the Improvement Minor improvement to code label Jul 7, 2023
agjohnson added a commit that referenced this issue Jul 7, 2023
@agjohnson
Some additions to the project import configuration page
afc52db 
I pulled down #166 to provide a bit of guidance, but ended up with fixes
to the PR either way. I added a few features on top, to replace plain
text with visual elements and interactive components. These aren't fully
working yet (the example selector namely, see #184).
@agjohnson agjohnson mentioned this issue Jul 7, 2023
Merged
agjohnson added a commit that referenced this issue Jul 11, 2023
@agjohnson
Some additions to the project import configuration page (#185)
3d33c89 
* Some additions to the project import configuration page

I pulled down #166 to provide a bit of guidance, but ended up with fixes
to the PR either way. I added a few features on top, to replace plain
text with visual elements and interactive components. These aren't fully
working yet (the example selector namely, see #184).

* Update JS comment to be accurate
agjohnson added a commit that referenced this issue Jul 11, 2023
@agjohnson
Some additions to the project import configuration page (#185)
16b38df 
* Some additions to the project import configuration page

I pulled down #166 to provide a bit of guidance, but ended up with fixes
to the PR either way. I added a few features on top, to replace plain
text with visual elements and interactive components. These aren't fully
working yet (the example selector namely, see #184).

* Update JS comment to be accurate
agjohnson added a commit that referenced this issue Jul 11, 2023
@humitos @agjohnson
Import project: suggest a config file (yaml) (#166)
6b328c3 
* Import project: suggest a config file (yaml)

I tried to add the intermediate page where we suggest a common Sphinx YAML file
for the user to copy and paste.

I found the pattern a little hard to follow. The base template didn't have all
the blocks I needed, so I added some more but I don't feel comfortable with
them.

I also had to create a block to overwrite the CSS classes of the main div, which
sounds weird to me as well.

Besides, I'm not sure how to use the CSS classes to achieve what I need: syntax
highlighting, smaller text, etc.

* Some additions to the project import configuration page (#185)

* Some additions to the project import configuration page

I pulled down #166 to provide a bit of guidance, but ended up with fixes
to the PR either way. I added a few features on top, to replace plain
text with visual elements and interactive components. These aren't fully
working yet (the example selector namely, see #184).

* Update JS comment to be accurate

---------

Co-authored-by: Anthony <[email protected]>
@agjohnson agjohnson added this to the New dashboard features milestone Dec 8, 2023
@humitos humitos mentioned this issue Jun 6, 2024
Closed
humitos added a commit that referenced this issue Jun 6, 2024
@humitos
Add project: show more yaml examples
570abd6 
I used tabs to show different examples of YAML files, as suggested in #184.
It looks great for an initial interactive approach.

I like the tabs over the dropdown because it gives the user a clear idea there
are more than Sphinx and MkDocs tools supported, which is a good marketing
strategy, in my opinion.

It also adds an "Others" option that's more generic and shows how to use
`build.commands` in a generic way: install dependencies, build, copy assets
under `$READTHDOCS_OUTPUT` directory.
@humitos humitos mentioned this issue Jun 6, 2024
Merged
@agjohnson
Copy link
Contributor Author

The answer here is really simple: readthedocs/readthedocs.org#10352 (comment)

@agjohnson agjohnson mentioned this issue Jun 6, 2024
Open
humitos added a commit that referenced this issue Jun 10, 2024
@humitos @agjohnson
Add project: show more yaml examples (#368)
228f122 
* Add project: show more `yaml` examples

I used tabs to show different examples of YAML files, as suggested in #184.
It looks great for an initial interactive approach.

I like the tabs over the dropdown because it gives the user a clear idea there
are more than Sphinx and MkDocs tools supported, which is a good marketing
strategy, in my opinion.

It also adds an "Others" option that's more generic and shows how to use
`build.commands` in a generic way: install dependencies, build, copy assets
under `$READTHDOCS_OUTPUT` directory.

* Update readthedocsext/theme/templates/projects/import_config.html

Co-authored-by: Anthony <[email protected]>

* Update readthedocsext/theme/templates/projects/import_config.html

Co-authored-by: Anthony <[email protected]>

* Combine Dropdown + Tabs

* Fix indentation

* More indentation

---------

Co-authored-by: Anthony <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Improvement Minor improvement to code
Projects
None yet
Milestone
New dashboard features
Development

Successfully merging a pull request may close this issue.

Add project: show more yaml examples readthedocs/ext-theme
1 participant
@agjohnson