Skip to content

Commit

Permalink
Merge pull request #13 from xames3/feature-release-mk-ii
Browse files Browse the repository at this point in the history 
Feature Release Mk-II

- This brings the support for adding various new social media connections like LinkedIn, ORCID, Twitter and YouTube to the modal pop-up.
- This change also fixes the issue with rendering images over URL. With this change, the images need not be necessarily stored on the device and can be parsed directly over the internet.

BREAKING CHANGE:

- This commit brings more stability to the overall theme in terms of UI elements and functionality.
- This commit also introduces the mini sidebar (right sidebar or the scroll spy functionality) to the theme.
  • Loading branch information
@xames3
xames3 authored Nov 3, 2024
2 parents 8fe9a96 + 59c86af commit 4a40894
Show file tree
Hide file tree
Showing 21 changed files with 1,541 additions and 1,433 deletions.
13 changes: 11 additions & 2 deletions coeus_sphinx_theme/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Author: Akshay Mestry <[email protected]>
Created on: Sunday, August 11 2024
Last updated on: Wednesday, October 09 2024
Last updated on: Tuesday, October 29 2024
This module defines the extensions for Coeus Sphinx Theme, providing
utilities and configuration for integrating a custom theme into Sphinx
Expand Down Expand Up @@ -127,6 +127,15 @@
[1] Added support for embedding Jupyter Lite/Notebooks inside the
documentation using the `notebook` directive.
.. versionadded:: 2024.11.01
[1] Added support for on hover modal popup for contributors.
.. versionchanged:: 2024.11.01
[1] Added support for parsing different JupyterLab themes and
custom iframe width.
"""

from __future__ import annotations
Expand All @@ -150,7 +159,7 @@
from sphinx.application import Sphinx

theme_name: t.Final[str] = "coeus_sphinx_theme"
theme_version: str = "2024.10.10"
theme_version: str = "2024.11.01"

natively_supported_extensions: t.Sequence[str] = (
"sphinx_carousel.carousel",
Expand Down
37 changes: 20 additions & 17 deletions coeus_sphinx_theme/breadcrumbs.html.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,26 @@ Coeus Sphinx Theme Breadcrumbs Template
=======================================
Author: Akshay Mestry <[email protected]>
Created on: Monday, August 26 2024
Last updated on: Monday, August 26 2024
Created on: Tuesday, October 29 2024
Last updated on: Tuesday, October 29 2024
-->
{% block breadcrumbs_section %}
{%- set separator %}
<div class="mr-1">{{ theme_breadcrumbs_separator|default("/") }}</div>
{%- endset %}
<nav aria-label="{{ _('breadcrumbs') }}" class="flex items-center mb-4 space-x-1 text-sm text-muted-foreground">
<a class="overflow-hidden text-ellipsis whitespace-nowrap hover:text-foreground" href="{{ pathto(master_doc) }}">
<span class="hidden md:inline">{{ docstitle }}</span>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 96 960 960" aria-label="Home" fill="currentColor" stroke="none" class="md:hidden">
<path d="M240 856h120V616h240v240h120V496L480 316 240 496v360Zm-80 80V456l320-240 320 240v480H520V696h-80v240H160Zm320-350Z" />
</svg>
</a>
{%- for doc in parents -%}
<a class="hover:text-foreground overflow-hidden text-ellipsis whitespace-nowrap" href="{{ doc.link|e }}">{{ doc.title }}</a>
{{ separator }} {%- endfor -%}
<span aria-current="page" class="font-bold text-foreground overflow-hidden text-ellipsis whitespace-nowrap">{{ title }}</span>
</nav>
{%- set separator %}
<div style="margin-right: .25rem;">{{ theme_breadcrumbs_separator|default('/') }}</div>
{%- endset %}
<nav aria-label="{{ _('breadcrumbs') }}" class="breadcrumbs space-x-1">
<a class="breadcrumbs-passive" href="{{ pathto(master_doc) }}">
<span class="hidden md:inline">{{ docstitle }}</span>
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 96 960 960" aria-label="Home"
fill="currentColor" stroke="none" class="md:hidden">
<path
d="M240 856h120V616h240v240h120V496L480 316 240 496v360Zm-80 80V456l320-240 320 240v480H520V696h-80v240H160Zm320-350Z" />
</svg>
</a>
{%- for doc in parents -%}
<a class="breadcrumbs-passive" href="{{ doc.link|e }}">{{
doc.title }}</a>
{{ separator }} {%- endfor -%}
<span aria-current="page" class="breadcrumbs-active" style="margin-left: 0rem">{{ title }}</span>
</nav>
{% endblock breadcrumbs_section %}
146 changes: 97 additions & 49 deletions coeus_sphinx_theme/contributors.html.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,107 @@ Coeus Sphinx Theme Contributors Template
========================================
Author: Akshay Mestry <[email protected]>
Created on: Sunday, August 25 2024
Last updated on: Friday, September 13 2024
Created on: Tuesday, October 29 2024
Last updated on: Wednesday, October 30 2024
-->
{% block contributors_metadata %}
{%- if people %}
{%- set prefix = prefix|d("Published by") -%}
{%- set names = people | map(attribute="name") | list -%}
{%- set emails = people | map(attribute="email") | list -%}
{%- set contributors = names | length -%}
{%- set limit = limit if limit and limit > 1 and limit - 1 < contributors else 2 -%}
<div class="container flex-1 px-0 my-8">
<p class="contributors-timestamp">{{ timestamp|d("Updated Today") }}</p>
<div class="contributors-publisher">
{% if contributors == 1 %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" aria-label="Ask {{ names[0]|safe }} via email">{{ names[0]|safe }}</a></span>
{% elif contributors == 2 %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" aria-label="Ask {{ names[0]|safe }} via email">{{ names[0]|safe }}</a> and <a href="mailto:{{ emails[1] }}?subject={{ subject }}" aria-label="Ask {{ names[1]|safe }} via email">{{ names[1]|safe }}</a></span>
{% else %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" aria-label="Ask author via email">{{ names[0]|safe }}</a>, <a href="mailto:{{ emails[1] }}?subject={{ subject }}" aria-label="Ask author via email">{{ names[1]|safe }}</a> and <a href="#" data-bs-toggle="modal" data-bs-target="#peopleModal">{{ contributors - limit }}</a> other
{% if contributors - limit == 1 %}
contributor
{% else %}
contributors
{% endif %}
</span>
{% endif %}
<div class="project-socials">
{% for key, value in socials | dictsort %}
<a class="{{ value[1]|e }}" href="{{ value[0]|e }}" {% if value[0]|e !='#' %}target="_blank"{% endif %}aria-label="Share this article via {{ key|title }} (opens a new tab)"></a>
{%- if people %}
{%- set prefix = prefix|d("Published by") -%}
{%- set names = people | map(attribute="name") | list -%}
{%- set emails = people | map(attribute="email") | list -%}
{%- set githubs = people | map(attribute="github") | list -%}
{%- set headshots = people | map(attribute="headshot") | list -%}
{%- set orcids = people | map(attribute="orcid") | list -%}
{%- set linkedins = people | map(attribute="linkedin") | list -%}
{%- set twitters = people | map(attribute="twitter") | list -%}
{%- set youtubes = people | map(attribute="youtube") | list -%}
{%- set statuses = people | map(attribute="status") | list -%}
{%- set contributors = names | length -%}
{%- set limit = limit if limit and limit > 1 and limit - 1 < contributors else 2 -%}
<div class="contributors-wrapper">
<p class="contributors-timestamp">{{ timestamp|d("Updated Today") }}</p>
<div class="contributors-publisher">
{% if contributors == 1 %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" class="contributor-name"
data-index="0" aria-label="Ask {{ names[0]|safe }} via email">{{ names[0]|safe }}</a></span>
{% elif contributors == 2 %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" class="contributor-name"
data-index="0" aria-label="Ask {{ names[0]|safe }} via email">{{ names[0]|safe }}</a> and <a
href="mailto:{{ emails[1] }}?subject={{ subject }}" class="contributor-name" data-index="1"
aria-label="Ask {{ names[1]|safe }} via email">{{ names[1]|safe }}</a></span>
{% else %}
<span>{{ prefix }} <a href="mailto:{{ emails[0] }}?subject={{ subject }}" class="contributor-name"
data-index="0" aria-label="Ask {{ names[0]|safe }} via email">{{ names[0]|safe }}</a>, <a
href="mailto:{{ emails[1] }}?subject={{ subject }}" class="contributor-name" data-index="1"
aria-label="Ask {{ names[1]|safe }} via email">{{ names[1]|safe }}</a> and <a href="#"
data-bs-toggle="modal" data-bs-target="#">{{ contributors - limit }}</a> other
{% if contributors - limit == 1 %}
contributor
{% else %}
contributors
{% endif %}
</span>
{% endif %}
<div class="project-socials">
{% for key, value in socials | dictsort %}
<a class="{{ value[1]|e }}" href="{{ value[0]|e }}" {% if value[0]|e !='#' %}target="_blank" {% endif
%}aria-label="Share this article via {{ key|title }} (opens a new tab)"></a>
{% endfor %}
<a class="fa-brands fa-github" href="{{ github }}" {% if github !='#' %}target="_blank" {% endif
%}aria-label="Check out source on GitHub"></a>
<a class="fa-solid fa-envelope" href="mailto:{{ email }}?subject={{ subject }}"
aria-label="Ask team via email" style="font-weight: 900;"></a>
</div>
</div>
<div class="contributors-article-metadata">
<p class="contributors-metadata-badge" id="readingTime"></p>
<p class="contributors-metadata-badge">
<i class="fa-solid fa-map-pin" style="padding-right: 0.3rem;"></i>{{ location|d("Earth") }}
</p>
<div class="language-switcher">
<p class="contributors-metadata-badge">
<i class="fa-solid fa-language" style="padding-right: 0.3rem;"></i>
<select id="language-selector" class="no-chevron-select" onchange="switchLanguage()">
{% for code, name in languages.items() %}
<option value="{{ code }}" {% if language==code %}selected{% endif %}>
{{ name }}
</option>
{% endfor %}
<a class="fa-brands fa-github" href="{{ github }}" {% if github !='#' %}target="_blank"{% endif %}aria-label="Check out source on GitHub"></a>
<a class="fa-solid fa-envelope" href="mailto:{{ email }}?subject={{ subject }}" aria-label="Ask author via email" style="font-weight: 900;"></a>
<a class="fa-solid fa-link copylink" href="#" @click.prevent="window.navigator.clipboard.writeText($el.href); $el.setAttribute('data-tooltip', 'Copied to clipboard'); setTimeout(() => $el.setAttribute('data-tooltip', 'Copy article URL to clipboard'), 2000)" aria-label="Copy article URL to clipboard" style="font-weight: 900;"></a>
</div>
</div>
<div class="contributors-article-metadata">
<p class="contributors-metadata-badge" id="readingTime"></p>
<p class="contributors-metadata-badge">
<i class="fa-solid fa-location-dot" style="padding-right: 0.3rem;"></i>{{ location|d("Earth") }}
</p>
<div class="language-switcher">
<p class="contributors-metadata-badge">
<i class="fa-solid fa-language" style="padding-right: 0.3rem;"></i>
<select id="language-selector" class="no-chevron-select" onchange="switchLanguage()">
{% for code, name in languages.items() %}
<option value="{{ code }}" {% if language == code %}selected{% endif %}>
{{ name }}
</option>
{% endfor %}
</select>
</p>
</select>
</p>
</div>
</div>
{% for name in names %}
<div id="contributors-publisher-modal-{{ loop.index0 }}" class="contributors-publisher-modal">
<div style="display: flex; gap: 0.25rem;">
<img src="{{ headshots[loop.index0]|d('https://static.thenounproject.com/png/4035892-200.png') }}" alt="{{ name }}'s photo">
<div class="contributor-identity">
<p>{{ name }}</p>
<p style="font-weight: 400; font-size: 0.85rem; color: gray; margin-top: -0.25rem; margin-bottom: 0.25rem;">{{ statuses[loop.index0]|d('Open Science Contributor') }}</p>
<div class="contributor-reachout-details">
{% if emails[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="mailto:{{ emails[loop.index0] }}"><i class="fa-solid fa-envelope" style="padding-right: 0.3rem;"></i>Email</a></p>
{% endif %}
{% if githubs[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="{{ githubs[loop.index0] }}" target="_blank"><i class="fa-brands fa-github" style="padding-right: 0.3rem;"></i>GitHub</a></p>
{% endif %}
{% if orcids[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="{{ orcids[loop.index0] }}" target="_blank"><i class="fa-brands fa-orcid" style="padding-right: 0.3rem;"></i>ORCID</a></p>
{% endif %}
{% if linkedins[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="{{ linkedins[loop.index0] }}" target="_blank"><i class="fa-brands fa-linkedin" style="padding-right: 0.3rem;"></i>LinkedIn</a></p>
{% endif %}
{% if twitters[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="{{ twitters[loop.index0] }}" target="_blank"><i class="fa-brands fa-x-twitter" style="padding-right: 0.3rem;"></i>Twitter</a></p>
{% endif %}
{% if youtubes[loop.index0] %}
<p class="contributors-metadata-badge" style="margin-right: 0.25rem;"><a href="{{ youtubes[loop.index0] }}" target="_blank"><i class="fa-brands fa-youtube" style="padding-right: 0.3rem;"></i>YouTube</a></p>
{% endif %}
</div>
</div>
</div>
</div>
{%- endif %}
{% endfor %}
</div>
{%- endif %}
{% endblock contributors_metadata %}
71 changes: 61 additions & 10 deletions coeus_sphinx_theme/extensions/contributors.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Author: Akshay Mestry <[email protected]>
Created on: Wednesday, August 14 2024
Last updated on: Friday, September 13 2024
Last updated on: Wednesday, October 30 2024
This module provides a custom directive for the Coeus Sphinx Theme,
that allows authors and contributors to add information about themselves
Expand Down Expand Up @@ -62,11 +62,20 @@
.. versionchanged:: 2024.09.16
[1] The `language` option is now optional and is not enforced.
.. versionadded:: 2024.11.01
[1] Added support for on hover modal popup for contributors.
[2] Added support for proper resolving images over `http/s`.
[3] Added support for optional extra social media connections like
ORCID, LinkedIn, Twitter and YouTube.
"""

from __future__ import annotations

import os
import re
import shutil
import typing as t

import docutils.nodes as nodes
Expand All @@ -83,6 +92,9 @@
"contributors.html.jinja",
)

options_re: t.Pattern = re.compile(r"(-\s:.*:\s)(.*)")
relpath_re: t.Pattern = re.compile(r"^(\.|\/)*")

socials: dict[str, str] = {
"twitter": "fa-brands fa-x-twitter",
"discord": "fa-brands fa-discord",
Expand Down Expand Up @@ -120,18 +132,57 @@ def run(self) -> list[nodes.Node]:
encountered.
:return: List of `docutils` node(s).
.. versionadded:: 2024.11.01
[1] Added support for on hover modal popup for contributors.
[2] Added support for proper resolving images over `http/s`.
[3] Added support for optional extra social media
connections like ORCID, LinkedIn, Twitter and YouTube.
"""
self.assert_has_content()
e = self.state.document.settings.env
build = os.path.dirname(e.doctreedir)
if not os.path.exists((images := os.path.join(build, "_images"))):
os.makedirs(images, exist_ok=True)
person = 0
people = [{}]
for content in self.content:
if not content:
people.append({})
person += 1
else:
if (matches := options_re.match(content)) is not None:
pattern, value = matches.groups()
match pattern.strip(" -:"):
case "name":
people[person]["name"] = value
case "email":
people[person]["email"] = value
case "headshot":
if not value.startswith(("http://", "https://")):
r = relpath_re.match(value).group()
s = os.path.join(e.srcdir, value.lstrip("./"))
_ = os.path.basename(s)
d = os.path.join("_images", _)
people[person]["headshot"] = os.path.join(r, d)
shutil.copyfile(s, os.path.join(build, d))
else:
people[person]["headshot"] = value
case "github":
people[person]["github"] = value
case "orcid":
people[person]["orcid"] = value
case "linkedin":
people[person]["linkedin"] = value
case "twitter":
people[person]["twitter"] = value
case "youtube":
people[person]["youtube"] = value
case "status":
people[person]["status"] = value
element = node("\n".join(self.content), **self.options)
content = [_.split("- ")[-1].strip() for _ in self.content if _]
element.attributes["people"] = [
{
"name": content[idx],
"email": content[idx + 1],
"github": content[idx + 2],
}
for idx in range(0, len(content), 3)
]
element.attributes["people"] = people
return [element]


Expand Down
Loading

0 comments on commit 4a40894

Please sign in to comment.