Updated tachyons buttons & added video class by validbeck · Pull Request #486 · validmind/documentation

validbeck · Oct 22, 2024

Internal Notes for Reviewers

sc-7046

Added a regex search to confirm that URLs starting with docs.validmind.ai aren't external links & shouldn't show the icon (like for our developer reference):

documentation/site/_quarto.yml

Line 378 in cfa3ba3

link-external-filter: '^https:\/\/(docs\.validmind\.ai|docs-staging\.validmind\.ai|docs-demo\.vm\.validmind\.ai)\/.*'
Updated the buttons across the site (even the index page!) to use the markdown links instead of the long terrible HTML links, allowing those links to be rendered by Quarto:

documentation/site/styles.css

Line 383 in e25690e

/* Button class that can be used for links */
Added the same convention to the training & updated buttons in training:

documentation/site/training/custom.scss

Line 16 in e25690e

.reveal .slide .button {
Added the rounded corners on screenshots to training as well:

documentation/site/training/custom.scss

Line 9 in e25690e

.reveal .slide .screenshot {
Added a video style class & updated any videos to match; added a section to the style guide:

documentation/site/styles.css

Line 453 in e25690e

.video, iframe[src*="youtube.com"] {

Training	Videos

github-actions · Oct 22, 2024

A PR preview is available: Preview URL

github-actions · Oct 22, 2024

A PR preview is available: Preview URL

github-actions · Oct 23, 2024

PR Summary

This pull request introduces several enhancements to the documentation and styling of buttons across the site. Key changes include:

Documentation Enhancements:
- Added a new testing page buttons.qmd with links styled as buttons.
- Updated various .qmd files to replace HTML form buttons with markdown-styled links for consistency and improved accessibility.
- Introduced new sections in the style guide for embedding videos and handling video links.
- Updated references and links across multiple documentation files to ensure consistency and correctness.
Styling Improvements:
- Added new CSS classes for button styling, including .index, .pink, .white, and .guides to standardize button appearances across the site.
- Enhanced video and iframe styling with a new .video class to ensure consistent appearance and border styling.

These changes aim to improve the user experience by providing a more cohesive and accessible interface, as well as ensuring that documentation is up-to-date and easy to navigate.

Test Suggestions

Verify that all links styled as buttons in the documentation render correctly and are functional.
Check that the new button styles are applied consistently across different pages and sections.
Ensure that embedded videos and iframes display with the correct styling and borders.
Test the navigation through updated documentation links to confirm they lead to the correct destinations.
Review the new sections in the style guide for accuracy and completeness.

github-actions · Oct 23, 2024

A PR preview is available: Preview URL

github-actions · Oct 23, 2024

A PR preview is available: Preview URL

github-actions · Oct 23, 2024

A PR preview is available: Preview URL

nrichers

This PR makes some wonderful changes and I'll approve it as soon as the

HTML hacks are replaced — we have Tachyons CSS or bog-standard Quarto stuff to let us sort out alignment, no need to add yet more HTML.

The new video class is great, BTW. I have a feeling we will get a lot of mileage out of that as we add more and more videos. And the new rounded buttons and screenshots to also update the training materials are 🔥🔥🔥.

site/index.qmd

site/releases/2023/2023-sep-27/highlights.qmd

site/index.qmd

github-actions · Oct 23, 2024

A PR preview is available: Preview URL

github-actions · Oct 23, 2024

PR Summary

This pull request introduces several changes to the documentation and styling of the ValidMind project:

Documentation Link Updates: The PR updates various internal documentation links from absolute URLs to relative paths. This change affects multiple markdown and Quarto files, ensuring that links are more maintainable and consistent across different environments.
Button Styles: New CSS styles are added for buttons, particularly for index buttons and video iframes. These styles include hover effects and specific color schemes to enhance the visual consistency and user experience across the documentation site.
Markdown and Quarto File Modifications: Several markdown and Quarto files have been updated to replace HTML form-based buttons with markdown link-based buttons. This change simplifies the code and leverages the new button styles for a more cohesive look.
Video Embedding: The PR replaces some HTML iframe video embeds with a custom shortcode for embedding YouTube videos, which applies consistent styling and shadow effects.
Training and Release Notes: Updates to training modules and release notes to reflect the new link formats and button styles, ensuring that all documentation is up-to-date with the latest changes.

Test Suggestions

Verify that all updated links in the documentation point to the correct relative paths and render correctly in the browser.
Check the visual appearance of the new button styles across different pages to ensure consistency and responsiveness.
Test the video embedding shortcode to confirm that it applies the correct styles and functions as expected.
Review the training modules and release notes to ensure all content is accessible and formatted correctly with the new changes.

github-actions · Oct 24, 2024

A PR preview is available: Preview URL

nrichers · Oct 24, 2024

@validbeck going back to the naming convention for buttons, I started experimenting with course cards for our training pages and this button actually look kind of useful over a light background:

I sort of wonder, perhaps we could settle on a more generic naming convention than {.guides .index} for the more specialized buttons you created for the home page?

validbeck · Oct 24, 2024

I sort of wonder, perhaps we could settle on a more generic naming convention than {.guides .index} for the more specialized buttons you created for the home page?

Sure, why don't you play and make the necessary adjustments since you seem to have an idea of what you want? Rather than us just going back and forth! Be the change.

EDIT: Or maybe you just meant something like this?

documentation/site/styles.css

Line 410 in 8142d10

.cta {

github-actions · Oct 24, 2024

A PR preview is available: Preview URL

github-actions · Oct 24, 2024

A PR preview is available: Preview URL

… github.com:validmind/documentation into beck/sc-7046/investigate-using-tachyons-css-buttons

nrichers · Oct 24, 2024

Sure, why don't you play and make the necessary adjustments since you seem to have an idea of what you want? Rather than us just going back and forth! Be the change.

Thanks! I pushed a commit to have a standardized nomenclature for buttons. We now have:

.button
.button-pink
.button-white
.button-green

And then your .cta basically applies some special formatting that can be combined with these. The only other thing I did was reshuffle styles.css a bit to group the classes better.

nrichers

LGTM! This PR has turned out great — I'll pull this into my training updates PR as soon as you merge.

github-actions · Oct 24, 2024

A PR preview is available: Preview URL

validbeck added 19 commits October 18, 2024 15:46

Buttons css

3ada700

Testing in a guide

ebf2ca4

Align button text - center

f4251e4

Buttons redone down to May 22 2024

b226a8b

Buttons css for training

5a9a5d8

Saving for the week

1022aa2

Added rounded corners for screenshots to training

740833e

Edited releases up until march 27 2024

210abcd

Edited march 27 2024

de3b80c

Edited all of 2024

99606e2

Edited all releases

94efe53

Edited training for admin

bd14307

Edited all training

ad9f693

Edited index buttons

083eb23

Simplifying stuff

c3c2c5f

Adjusting dev reference buttons

cec6612

Added video css styling

82aeba5

Added videos to style guide

fbc97e0

Merged in from main, updated videos on latest release

e25690e

validbeck added the internal Not to be externalized in the release notes label Oct 22, 2024

validbeck self-assigned this Oct 22, 2024

Adjusting training screenshot corners

e5185e3

validbeck added 2 commits October 22, 2024 16:52

Testing regex for URLs

cfa3ba3

video convention tweak

b2c185d

validbeck requested a review from nrichers October 23, 2024 00:06

Small adjustment

42c0dc3

Example for Tachyons CSS to adjust alignment without HTML

faccf91

nrichers requested changes Oct 23, 2024

View reviewed changes

site/index.qmd Outdated Show resolved Hide resolved

site/releases/2023/2023-sep-27/highlights.qmd Outdated Show resolved Hide resolved

site/index.qmd Outdated Show resolved Hide resolved

validbeck added 2 commits October 23, 2024 16:37

Adjusted alignment on index

1e54f47

<center> > ::: {.tc}

180e037

Adjusted relative links to developer reference

a44021c

validbeck requested a review from nrichers October 23, 2024 23:59

validbeck added 2 commits October 24, 2024 09:11

Made button css generic

8142d10

Changed .prereq > .attn to reflect usage elsewhere

f2f587d

nrichers added 3 commits October 24, 2024 09:36

Update button nomenclature

9372787

Merge branch 'beck/sc-7046/investigate-using-tachyons-css-buttons' of…

e88a2ff

… github.com:validmind/documentation into beck/sc-7046/investigate-using-tachyons-css-buttons

Fix merge conflicts

4748908

nrichers approved these changes Oct 24, 2024

View reviewed changes

validbeck merged commit 4d26a71 into main Oct 24, 2024

validbeck deleted the beck/sc-7046/investigate-using-tachyons-css-buttons branch October 24, 2024 17:05

Search code, repositories, users, issues, pull requests...

Conversation

validbeck commented Oct 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Internal Notes for Reviewers

Uh oh!

github-actions bot commented Oct 22, 2024

Uh oh!

github-actions bot commented Oct 22, 2024

Uh oh!

github-actions bot commented Oct 23, 2024

PR Summary

Test Suggestions

Uh oh!

github-actions bot commented Oct 23, 2024

Uh oh!

github-actions bot commented Oct 23, 2024

Uh oh!

github-actions bot commented Oct 23, 2024

Uh oh!

nrichers left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 23, 2024

Uh oh!

github-actions bot commented Oct 23, 2024

PR Summary

Test Suggestions

Uh oh!

github-actions bot commented Oct 24, 2024

Uh oh!

nrichers commented Oct 24, 2024

Uh oh!

validbeck commented Oct 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 24, 2024

Uh oh!

github-actions bot commented Oct 24, 2024

Uh oh!

nrichers commented Oct 24, 2024

Uh oh!

nrichers left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 24, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

validbeck commented Oct 22, 2024 •

edited

Loading

validbeck commented Oct 24, 2024 •

edited

Loading