feat: add rich previews #676
Conversation
There was a problem hiding this comment.
Good work @CharlesSheelam ! This sets up the groundwork nicely. A few minor nitpicks and suggested edits included inline.
We should also identify other "important" pages to put these OGP tags in as well...
- education
- resources/modeling-frameworks (https://www.comses.net/resources/modeling-frameworks/)
- documentation
- standards
- ?
django/core/jinja2/base.jinja
Outdated
| <meta property="og:type" content="website"> | ||
| <meta property="og:title" content="CoMSES Net"> | ||
| <meta property="og:description" content="CoMSES Net is an international open research community dedicated to fostering good practices for computational / agent based modeling."> | ||
| <meta property="og:image" content="https://complexity.asu.edu/sites/default/files/comses.jpg"> |
There was a problem hiding this comment.
these probably should refer to an internal static image.. I guess the current logo is generated by JS but it could live in core/static/images as well and be accessible via something like {{ static("images/comses-logo.png") }}.
This can be done by copying frontend/src/assets/images/comses-logo.png to django/core/static/images and then replace all og|twitter:image references to the static invocation above
django/core/jinja2/base.jinja
Outdated
| <!-- Facebook Meta Tags --> | ||
| <meta property="og:url" content="https://www.comses.net/"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:title" content="CoMSES Net"> |
There was a problem hiding this comment.
should we include the full expanded acronym here, Network for Computational Modeling in the Social and Ecological Sciences or will it be too long for the rich preview?
There was a problem hiding this comment.
We could test the full expanded acronym, I have changed it to the full thing for now. If it seems to long later I can change it back.
| <meta property="og:type" content="website"> | ||
| <meta property="og:title" content="Community Jobs"> | ||
| <meta property="og:description" content="View all jobs related to CoMSES"> | ||
| <meta property="og:image" content="https://complexity.asu.edu/sites/default/files/comses.jpg"> |
There was a problem hiding this comment.
should we create custom images for comses jobs / events / codebases and add them to static? might be a nice UX touch
| <meta property="og:url" content="{{ request.build_absolute_uri(absolute_url) }}"> | ||
| <meta property="og:type" content="article"> | ||
| <meta property="og:title" content="{{ codebase.title }}"> | ||
| <meta property="og:description" content="{{ codebase.description.raw|truncate(150) }}"> |
There was a problem hiding this comment.
we should probably use codebase.summarized_description (and modify its implementation to make it work better for this use case as needed)
| <meta property="og:url" content="{{ request.build_absolute_uri(absolute_url) }}"> | ||
| <meta property="og:type" content="article"> | ||
| <meta property="og:title" content="{{ title }}"> | ||
| <meta property="og:description" content="{{ description }}"> |
There was a problem hiding this comment.
I think this is a copypasta issue, for MemberProfile this should probably be name and bio ?
| <meta property="og:url" content="{{ request.build_absolute_uri(absolute_url) }}"> | ||
| <meta property="og:type" content="article"> | ||
| <meta property="og:title" content="{{ title }}"> | ||
| <meta property="og:description" content="{{ description }}"> |
There was a problem hiding this comment.
probably best to use summary instead, as description can be quite long
same thing with Events
…f full description
copied directly over from frontend assets
django/core/jinja2/base.jinja
Outdated
| <meta property="og:type" content="website"> | ||
| <meta property="og:title" content="The Network for Computational Modeling in the Social and Ecological Sciences (CoMSES Net)"> | ||
| <meta property="og:description" content="CoMSES Net is an international open research community dedicated to fostering good practices for computational / agent based modeling."> | ||
| <meta property="og:image" content="/static/images/logo.png"> |
There was a problem hiding this comment.
refer to static assets in a jinja template using the incantation I shared earlier,
{{ static("images/logo-comses.png") }}
so the full line would be something like
<meta property="og:image" content="{{ static('images/logo-comses.png') }}">
For more info on why we dynamically generate these static links,
https://docs.djangoproject.com/en/4.2/howto/static-files/#configuring-static-files
(though the syntax looks a little different since we are using Jinja templates instead of Django templates)
There was a problem hiding this comment.
Apologies, forgot to fix these. I just updated them and the pull request is updated.
Utilized the open graph protocol to add rich previews for Base page, codebases, events, and jobs.