pages/_layouts/about.liquid
Andrew Boyer 0ac9e447ca
Added support for a newsletter (#2517)
In reference to idea:
https://github.com/alshedivat/al-folio/discussions/2097
In reference to request:
https://github.com/alshedivat/al-folio/issues/923#issuecomment-2171924663

Added support to integrate a [loops.so](https://loops.so/) mailing list
into the site.

To use, you need to enable `newsletter` in `_config.yml`. You also must
specify a loops endpoint (although I think any mailing list endpoint can
work), which you can get when you set up a mailing list on loops. More
documentation on loops: [here](https://loops.so/docs/forms/custom-form).

Once that is enabled, the behavior is different depending on how you
specified your footer to behave in `_config.yml`. If `footer_fixed:
true`, then the sign up will appear at the bottom of the about page, as
well as at the bottom of blog posts, if you enable `related_posts`.

If `footer_fixed: false`, then the newsletter signup will be in the
footer (on every page), like it is in on [my
website](https://asboyer.com).

I'm not attached to the placement of the signup, and you can choose to
include it wherever you want with `{% include scripts/newsletter.liquid
%}`. Also if you include positional variables into that, you can choose
how you center the signup. So `{% include scripts/newsletter.liquid
left=true %}` positions the signup bar to the left.

Here are some screenshots below:
## Dark version

![image](https://github.com/alshedivat/al-folio/assets/52665298/af7fdb81-6e5f-47a9-958b-4cb93bba9e8f)

## Light version

![image](https://github.com/alshedivat/al-folio/assets/52665298/927f8bc5-b481-448b-ae5e-6f5b1c613243)
I think the input field color should probably change to maybe be light
for both themes? What do you think? I think the dark background looks
cool, but I don't usually see that done like that on other sites.

## Footer fixed

![image](https://github.com/alshedivat/al-folio/assets/52665298/c52f3dc1-0e45-400e-8b71-eeb00d00cb01)


![image](https://github.com/alshedivat/al-folio/assets/52665298/678a2d45-88ab-4d9a-b8cc-9fc6db26d744)

## Footer not fixed

![image](https://github.com/alshedivat/al-folio/assets/52665298/fd2c0228-2bce-4335-ac3c-5cb20a3307e2)


![image](https://github.com/alshedivat/al-folio/assets/52665298/f594b4f2-67e0-4f2b-a3e8-febd579aaf19)
To clarify, if footer isn't fixed, the email signup will appear on every
page.

---------

Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
2024-06-19 14:49:19 -03:00

81 lines
2.5 KiB
Plaintext

---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">
{% if site.title == 'blank' %}
<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }}
{{ site.last_name }}
{% else %}
{{ site.title }}
{% endif %}
</h1>
<p class="desc">{{ page.subtitle }}</p>
</header>
<article>
{% if page.profile %}
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
{% if page.profile.image %}
{% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
{% if page.profile.image_circular %}
{% assign profile_image_class = 'img-fluid z-depth-1 rounded-circle' %}
{% else %}
{% assign profile_image_class = 'img-fluid z-depth-1
rounded' %}
{% endif %}
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
30vw, 95vw"{% endcapture %}
{%
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
cache_bust=true
%}
{% endif %}
{% if page.profile.more_info %}
<div class="more-info">{{ page.profile.more_info }}</div>
{% endif %}
</div>
{% endif %}
<div class="clearfix">{{ content }}</div>
<!-- News -->
{% if page.news and site.announcements.enabled %}
<h2>
<a href="{{ '/news/' | relative_url }}" style="color: inherit">news</a>
</h2>
{% include news.liquid limit=true %}
{% endif %}
<!-- Latest posts -->
{% if site.latest_posts.enabled %}
<h2>
<a href="{{ '/blog/' | relative_url }}" style="color: inherit">latest posts</a>
</h2>
{% include latest_posts.liquid %}
{% endif %}
<!-- Selected papers -->
{% if page.selected_papers %}
<h2>
<a href="{{ '/publications/' | relative_url }}" style="color: inherit">selected publications</a>
</h2>
{% include selected_papers.liquid %}
{% endif %}
<!-- Social -->
{% if page.social %}
<div class="social">
<div class="contact-icons">{% include social.liquid %}</div>
<div class="contact-note">{{ site.contact_note }}</div>
</div>
{% endif %}
{% if site.newsletter.enabled and site.footer_fixed %}
{% include scripts/newsletter.liquid center=true %}
{% endif %}
</article>
</div>