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

Some additions to the project import configuration page #185

Merged
merged 2 commits into from
Jul 11, 2023
Merged

Some additions to the project import configuration page #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afc52db
Some additions to the project import configuration page
agjohnson Jul 7, 2023
4441a93
Update JS comment to be accurate
agjohnson Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion readthedocsext/theme/static/readthedocsext/theme/js/site.js
View file
Open in desktop

Large diffs are not rendered by default.

95 changes: 47 additions & 48 deletions readthedocsext/theme/templates/projects/import_base.html
View file
Open in desktop
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
Open in desktop
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 %}
14 changes: 9 additions & 5 deletions src/js/application/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,17 @@ export class Application {
});
jquery(".ui.menu > .item[data-tab]").tab();

// 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({
/* Initialize clipboard.js using a few selectors that we are using. This
* isn't a great fit for Knockout custom data binding or plugin, as the
* library uses some builtin/hardcoded selectors. */
var clipboard_global = new clipboard(
"[data-clipboard-text], [data-clipboard-target]"
);
// Provide the user with some visual feedback using FUI popups
jquery("[data-clipboard-text], [data-clipboard-target]").popup({
on: "click",
hoverable: false,
content: "Copied!",
});
}
}