Skip to content

Commit 93dd849

Browse files
committed
feat: add a short testimonial content for demo, small UI adjustments
1 parent 9138dde commit 93dd849

5 files changed

Lines changed: 65 additions & 145 deletions

File tree

core/mock_data.py

Lines changed: 31 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,23 @@
77
from libraries.utils import commit_data_to_stats_bars
88

99

10+
def _with_carousel_nav(items, slug_key="title"):
11+
"""Annotate each item with `slug`, `prev_url`, `next_url` for in-page
12+
carousel/modal navigation. `prev_url` is empty on the first item and
13+
`next_url` is empty on the last.
14+
"""
15+
slugs = [slugify(item[slug_key]) for item in items]
16+
return [
17+
{
18+
**item,
19+
"slug": slugs[i],
20+
"prev_url": f"#{slugs[i - 1]}" if i > 0 else "",
21+
"next_url": f"#{slugs[i + 1]}" if i < len(slugs) - 1 else "",
22+
}
23+
for i, item in enumerate(items)
24+
]
25+
26+
1027
class SharedResources:
1128
demo_posts = [
1229
{
@@ -335,142 +352,29 @@ class SharedResources:
335352
""",
336353
},
337354
{
338-
"title": "The use of Boost C++ libraries in drug discovery",
339-
"subtitle": "By Oleg Trott, PhD",
340-
"quote": (
341-
"What I really liked about Boost was that the libraries are "
342-
"peer-reviewed, raising expectations about quality and "
343-
"security. And I don't think I encountered a single bug in any of the Boost libraries I used. "
344-
),
355+
"title": "Lorem ipsum dolor sit amet",
356+
"subtitle": "By Ipsum Loremson",
357+
"quote": "Lorem ipsum content to test short testimonial",
345358
"author": {
346-
"name": "Oleg Trott, PhD",
359+
"name": "Ipsum Loremson",
347360
"profile_url": "#",
348361
"avatar_url": "/static/img/v3/demo_page/Avatar.png",
349-
"role": "Creator of AutoDock Vina",
362+
"role": "Lorem Ipsum Industries",
350363
"badge": BadgeToken.TIER_3,
351364
},
352365
"content": """
353-
<p><a href="https://vina.scripps.edu/">AutoDock Vina</a> is the most popular
354-
molecular docking program, with
355-
<a href="https://scholar.google.com/citations?user=4BD7MkgAAAAJ">40,000
356-
citations</a>, as of this writing. It is used widely to look for treatments
357-
for various diseases from cardiovascular and infectious ones to cancer. I
358-
created AutoDock Vina back when I was a postdoc at The Scripps Research
359-
Institute. And Boost C++ libraries were of great help.</p>
360-
361-
<p>The mechanisms of action of various drugs are different in each case,
362-
but what they have in common is that the drug (typically a small molecule
363-
consisting of dozens of atoms) binds a huge molecule, like a protein
364-
(consisting of thousands of atoms). This binding is normally non-covalent
365-
(think "physics", not "chemistry"). It is also quite specific &ndash; the
366-
shape and other properties of the drug have to be complementary to the
367-
protein, not unlike a lock and key. This binding interferes with the normal
368-
operation of the protein in question, and this may have some desired
369-
biological effect.</p>
370-
371-
<p>Modeling this binding process computationally is challenging, but, if
372-
done well, it can predict which small molecules would be promising as
373-
drugs.</p>
374-
375-
<p>When I got hired by The Scripps Research Institute almost 20 years ago,
376-
they had already been developing a molecular docking program, which they
377-
called "AutoDock", for many years. AutoDock was being used widely,
378-
including in huge efforts like the IBM World Community Grid, where
379-
volunteers contributed their personal compute to do docking calculations.
380-
In one such project, AutoDock was being used to look for new anti-HIV
381-
drugs. I estimated that in that single project, millions of dollars were
382-
being spent just on electricity (a cost borne by the volunteers). So
383-
performance was important.</p>
384-
385-
<p>Initially, my plan was to contribute to AutoDock, but after a few weeks
386-
on the job, I realized that the best path forward would be to write a new
387-
docking program instead. I thought I could re-implement the same or
388-
equivalent algorithm in a fraction of the lines of code, using modern (at
389-
the time) C++, employing STL and Boost.</p>
390-
391-
<p>While I didn't get fired right away, I'll say this: If you set out to do
392-
something ambitious in academia, the clock starts ticking for you, because
393-
while you are busy working on your new high-effort and high-risk project,
394-
you are probably not publishing some low-effort and low-risk work that is
395-
encouraged in academia. And what if your project fails? Rather perilous
396-
for your career.</p>
397-
398-
<p>To make matters worse, during this rewrite, my ambitions grew much
399-
further. I was no longer content with just a rewrite and started
400-
experimenting with alternative algorithms and scoring functions. (The
401-
scoring function tells us which binding is better.) Long story short,
402-
after 1.5 years, I released a new docking program and called it "VINA"
403-
(short for "VINA Is Not AutoDock"). It was superior to AutoDock:</p>
404-
405-
<ul>
406-
<li>It was roughly 60 times faster, when using a single thread (potentially
407-
saving many millions in electricity and compute)</li>
408-
<li>Additionally, it supported parallelism across multiple CPU cores
409-
seamlessly</li>
410-
<li>It was significantly more accurate in its binding pose predictions, on
411-
average</li>
412-
<li>It supported all major platforms directly (AutoDock required a Unix-like
413-
environment)</li>
414-
<li>The code was a few times smaller</li>
415-
</ul>
416-
417-
<p>Later, I was asked to change the name to "AutoDock Vina". "AutoDock"
418-
became a brand, rather than the name of a particular program. Sadly, this
419-
is causing confusion to this day. Many people think that "Vina" was a new
420-
version of old software, but it was brand-new and simpler code implementing
421-
a more complex algorithm.</p>
422-
423-
<p>Boost C++ libraries were quite useful to me in cutting down on the
424-
development time, which as I mentioned was important. In particular, I
425-
used</p>
426-
427-
<ul>
428-
<li>Boost.Thread &ndash; it enabled parallelism in a platform-independent way</li>
429-
<li>Boost.Serialization &ndash; for object persistence</li>
430-
<li>Boost.Math &ndash; for quaternions, which are used to represent 3D rotations
431-
conveniently (Boost.QVM would have been more appropriate, but I don't
432-
think it was part of Boost back then)</li>
433-
<li>Boost.ProgramOptions &ndash; for parsing command line options and
434-
configuration files, as well as to display the help message</li>
435-
<li>Boost.Filesystem &ndash; for handling files in a platform-independent way</li>
436-
<li>Boost.PointerContainer &ndash; for containers of pointers to objects</li>
437-
<li>Boost.Array &ndash; for "vectors" of statically known length</li>
438-
<li>Boost.Optional &ndash; for objects that may or may not be there</li>
439-
<li>Boost.LexicalCast &ndash; for parsing numbers, mostly</li>
440-
<li>Boost.Random &ndash; for thread-safe random number generation</li>
441-
<li>Boost.Timer &ndash; to show the users a progress bar, while they are waiting
442-
for the results</li>
443-
</ul>
444-
445-
<p>Since then, some of these libraries made it into the C++ standard, I
446-
believe.</p>
447-
448-
<p>What I really liked about Boost was that the libraries are peer-reviewed,
449-
raising expectations about quality and security. And I don't think I
450-
encountered a single bug in any of the Boost libraries I used. My thanks
451-
to the developers!</p>
366+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
367+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
368+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
369+
consequat.</p>
370+
371+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
372+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
373+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
452374
""",
453375
},
454376
]
455-
# Note: built with a regular for-loop instead of a comprehension because
456-
# comprehensions inside a class body cannot read sibling class-level
457-
# names from their body (Python class-scope quirk).
458-
_testimonial_slugs = [slugify(_t["title"]) for _t in _raw_testimonials]
459-
testimonials = []
460-
for _i, _t in enumerate(_raw_testimonials):
461-
testimonials.append(
462-
{
463-
**_t,
464-
"slug": _testimonial_slugs[_i],
465-
"prev_url": (f"#{_testimonial_slugs[_i - 1]}" if _i > 0 else ""),
466-
"next_url": (
467-
f"#{_testimonial_slugs[_i + 1]}"
468-
if _i < len(_testimonial_slugs) - 1
469-
else ""
470-
),
471-
}
472-
)
473-
del _i, _t
377+
testimonials = _with_carousel_nav(_raw_testimonials)
474378

475379
library_intro = {
476380
"library_name": "Boost.Core.",

static/css/v3/content-modal.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
flex-direction: column;
2929
gap: var(--space-large);
3030
width: 916px;
31-
max-width: calc(100vw - 2 * var(--space-large));
31+
max-width: calc(100vw - 2 * 54px);
3232
max-height: calc(100vh - 2 * var(--space-xl));
3333
padding: var(--space-xlarge) 0;
3434
background-color: var(--color-surface-weak);
@@ -277,7 +277,7 @@
277277
@media (max-width: 767px) {
278278
.content-modal__container {
279279
width: auto;
280-
max-width: calc(100vw - 2 * var(--space-default));
280+
max-width: calc(100vw - 2 * var(--space-medium));
281281
max-height: calc(100vh - 2 * var(--space-large));
282282
border-radius: var(--border-radius-l);
283283
gap: var(--space-large);

static/css/v3/dialog.css

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,11 @@
3939
display: flex !important;
4040
}
4141

42-
/* Reserve the scrollbar gutter permanently so removing the scrollbar (via
43-
the scroll-lock rule below) doesn't reflow the page horizontally. */
44-
html {
45-
scrollbar-gutter: stable;
46-
}
47-
48-
/* Third-party scroll-lock libraries (e.g.Boost Gecko search widget)
49-
add inline padding-right to <body> to compensate for a
50-
disappearing scrollbar. Our html-level scrollbar-gutter already reserves
51-
that space, so the third-party compensation is double-padding and shifts
52-
the page. Force body padding-right to zero to neutralise it. */
53-
body {
54-
padding-right: 0 !important;
55-
}
56-
5742
/* Lock background page scroll while any dialog is open. CSS-only via :has(),
5843
so it works without JavaScript. Covers both hash-based dialogs
59-
(.dialog-modal:target) and checkbox-based ones (library filter). */
44+
(.dialog-modal:target) and checkbox-based ones (library filter).
45+
Relies on `scrollbar-gutter: stable` in foundations.css so removing the
46+
scrollbar here doesn't reflow the page horizontally. */
6047
html:has(.dialog-modal:target),
6148
html:has(.library-filter__toggle:checked) {
6249
overflow: hidden;

static/css/v3/foundations.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,29 @@ body.v3 {
1212
background: var(--color-surface-page);
1313
}
1414

15+
html.v3,
16+
body.v3,
17+
html.v3 *,
18+
body.v3 * {
19+
scrollbar-width: thin;
20+
}
21+
22+
/* Reserve the scrollbar gutter permanently so any state that toggles the
23+
scrollbar (e.g. dialog scroll-lock in dialog.css) doesn't reflow the
24+
page horizontally. */
25+
html {
26+
scrollbar-gutter: stable;
27+
}
28+
29+
/* Third-party scroll-lock libraries (e.g. Boost Gecko search widget) add
30+
inline padding-right to <body> to compensate for a disappearing
31+
scrollbar. The scrollbar-gutter rule above already reserves that space,
32+
so the third-party compensation is double-padding and shifts the page.
33+
Force body padding-right to zero to neutralise it. */
34+
body {
35+
padding-right: 0 !important;
36+
}
37+
1538
html.v3 code {
1639
font-family: var(--font-code);
1740
}

static/css/v3/testimonial-card.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,8 @@
149149
border: none;
150150
padding: 0;
151151
box-sizing: border-box;
152+
display: flex;
153+
flex-direction: column;
152154

153155
/* Hide off-screen slides from the tab order and accessibility tree.
154156
Delayed transition keeps the outgoing slide visible during the
@@ -158,6 +160,10 @@
158160
transition: visibility 0s linear 0.3s;
159161
}
160162

163+
.testimonial-card__list-item > .user-profile {
164+
margin-top: auto;
165+
}
166+
161167
@media (prefers-reduced-motion: reduce) {
162168
.testimonial-card__list,
163169
.testimonial-card__list-item {

0 commit comments

Comments
 (0)