Skip to content

Commit

Permalink
Some additions to the project import configuration page
Browse files Browse the repository at this point in the history 
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).
  • Loading branch information
@agjohnson
agjohnson committed Jul 7, 2023
1 parent b39b210 commit afc52db
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 70 deletions.
2 changes: 1 addition & 1 deletion readthedocsext/theme/static/readthedocsext/theme/js/site.js
View file

Large diffs are not rendered by default.

95 changes: 47 additions & 48 deletions readthedocsext/theme/templates/projects/import_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Add Project" %}{% endblock %}
{% block title %}{% trans "Add project" %}{% endblock %}

{% block content %}
{% block project_add_content %}
<div class="ui very padded centered stackable grid">
{% block project_add_content %}
<div class="{% block project_add_css_classes %}ui ten wide tablet six wide computer column{% endblock project_add_css_classes %}">
<div class="{% block project_add_content_classes %}ui fourteen wide tablet eight wide computer column{% endblock %}">

{% block project_add_content_header %}
<h1 class="ui medium header">
Expand All @@ -22,57 +22,56 @@ <h1 class="ui medium header">
</h1>
{% endblock project_add_content_header %}

{% block project_add_content_main %}
{% endblock project_add_content_main %}
{% block project_add_content_form %}
<form class="ui form" action="{% url "projects_import_manual" %}" method="post">

<form class="ui form" action="{% url "projects_import_manual" %}" method="post">
{% csrf_token %}
{{ wizard.management_form }}

{% csrf_token %}
{{ wizard.management_form }}

{% block wizard_form %}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
{% csrf_token %}
{{ form|crispy }}
{% endfor %}
{% else %}
{{ wizard.form|crispy }}
{% endif %}
{% endblock wizard_form %}

{% block wizard_actions %}
<div>
{% if wizard.steps.prev %}
{# TODO: the previous button should not validate the form #}
<button class="ui button" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">
{% trans "Previous" %}
</button>
{% endif %}

{% if wizard.steps.next %}
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
{% block wizard_form %}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
{% csrf_token %}
{{ form|crispy }}
{% endfor %}
{% else %}
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
{{ wizard.form|crispy }}
{% endif %}
</div>
{% endblock wizard_actions %}
{% endblock wizard_form %}

</form>
{% block wizard_actions %}
<div>
{% if wizard.steps.prev %}
<button class="ui button" name="wizard_goto_step" value="{{ wizard.steps.prev }}">
{% trans "Previous" %}
</button>
{% endif %}

{% if wizard.steps.next %}
<input class="ui button primary" type="submit" value="{% trans "Next" %}" />
{% else %}
<input class="ui button primary" type="submit" value="{% trans "Finish" %}" />
{% endif %}
</div>
{% endblock wizard_actions %}

</form>
{% endblock project_add_content_form %}
</div>
{% endblock project_add_content %}

{% block project_add_help_topics %}
<div class="ui ten wide tablet four wide computer column">
<h2 class="ui small header">{% trans "Help topics" %}</h2>
<div data-bind="using: EmbedTopicsView('intro/import-guide')">
<div data-bind="template: { name: 'doc-topics' }"></div>
<div class="ui fourteen wide tablet four wide computer column">
{% block project_add_sidebar %}
<h2 class="ui small header">{% trans "Help topics" %}</h2>
<div class="ui bulleted list">
{% block project_add_sidebar_help_topics %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/intro/import-guide.html" text="Connecting a repository" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/en/stable/tutorial/index.html" text="Read the Docs tutorial" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/examples.html" text="Example projects" is_external=True class="item" %}
{% endblock project_add_sidebar_help_topics %}
</div>
{% endblock project_add_sidebar %}
</div>
</div>
{% endblock project_add_help_topics %}
</div>

{% include "includes/utils/embed_docs.html" %}

{% endblock %}
{% endblock project_add_content %}
{% endblock content %}
73 changes: 54 additions & 19 deletions readthedocsext/theme/templates/projects/import_config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,60 @@
{% load i18n %}

{% block project_add_content_subheader %}
{% trans "Add a configuration file (<code>.readthedocs.yaml</code>) to your project" %}
{% trans "Add a configuration file to your project" %}
{% endblock project_add_content_subheader %}

{% block project_add_css_classes %}ui ten wide tablet wide computer column{% endblock project_add_css_classes %}
{% block project_add_content_main %}
<p class="info">
{% block project_add_content_classes %}ui fourteen wide tablet twelve wide computer column{% endblock %}

{% block project_add_content_form %}
<div class="ui small info message">
{% blocktrans trimmed %}
Make sure your project has a <code>.readthedocs.yaml</code> at the root of your repository. This file is required by Read the Docs to be able to build your documentation. You can <a href="https://docs.readthedocs.io/en/stable/config-file/v2.html">read more about this in our documentation</a>.
A <code>.readthedocs.yaml</code> configuration file is required at the root of your repository in order to build your documentation.
{% endblocktrans %}
</p>

<a href="https://docs.readthedocs.io/page/config-file/index.html" target="_blank">
{% trans "Learn how to add a configuration file to your project." %}
</a>
</div>

<div class="ui basic fitted right aligned segment">
<span>{% trans "Example configuration for:" %}</span>
<div class="ui inline dropdown" data-bind="semanticui: { dropdown: {}}">
<input type="hidden" name="tool" value="sphinx">
<span class="text">Sphinx</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="sphinx">Sphinx</div>

{% comment %}
Adding a second option here will require a bit of JS or FUI:
https://github.com/readthedocs/ext-theme/issues/184
{% endcomment %}

<p class="info">
Here you have an example for a common Sphinx project:
{# The `actionable` class here prevents the select from selecting the text #}
<a class="actionable item" href="https://docs.readthedocs.io/page/config-file/index.html#getting-started-with-a-template" target="_blank">
{% trans "See more examples" %}
</a>
</div>
</div>
</div>

<pre class="ui padded">
<code class="ui small text">
# .readthedocs.yaml
<div class="ui mini padded inverted scrolling segment">
<div class="ui top attached label">
<code>.readthedocs.yaml</code>
</div>
<a class="ui top right attached icon label" href="#" data-clipboard-target="#project-create-sample-sphinx">
<i class="fas fa-copy icon"></i>
</a>
<code class="highlight">
<pre id="project-create-sample-sphinx">
# Read the Docs configuration file
# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details

# Required
version: 2

# Set the OS, Python version and other tools you might need
# Set the OS, Python version, and other tools you might need
build:
os: ubuntu-22.04
tools:
Expand All @@ -50,12 +80,17 @@
# python:
# install:
# - requirements: docs/requirements.txt
</code>
</pre>
</p>
</pre>
</code>
</div>

{# Show the base form #}
{{ block.super }}

{{ block.super }}
{% endblock project_add_content_main %}
{% endblock project_add_content_form %}

{% block project_add_help_topics %}
{% endblock project_add_help_topics %}
{% block project_add_sidebar_help_topics %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/config-file/index.html" text="Configuration file tutorial" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/config-file/v2.html" text="Configuration file reference" is_external=True class="item" %}
{% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/guides/setup/git-repo-manual.html" text="Manually configuring a Git repository" is_external=True class="item" %}
{% endblock project_add_sidebar_help_topics %}
7 changes: 5 additions & 2 deletions src/js/application/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,13 @@ export class Application {
// Initialize clipboard, but only for data-clipboard-text. This is the most
// generalized pattern for clipboard usage, so we won't yet worry about
// adding the other data binding selectors.
var clipboard_global = new clipboard(".ui.button[data-clipboard-text]");
jquery(".ui.button[data-clipboard-text]").popup({
var clipboard_global = new clipboard(
"[data-clipboard-text], [data-clipboard-target]"
);
jquery("[data-clipboard-text], [data-clipboard-target]").popup({
on: "click",
hoverable: false,
content: "Copied!",
});
}
}

0 comments on commit afc52db

Please sign in to comment.