Support a new AsciiDoc admonition block: IMPORTANT #64
Comments
jwflory
added
?: needs triage
|
May I work on this? I'll craft an icon set which can be used consistently for all the admonitions. |
|
@Yavnikaa Sure, you can start working on this one 👍🏻 Curious to know what icon set you go with. We should use an open source set where possible. |
|
I followed the steps indicated above and came up with a design for the admonition block. I prepared these two iterations:
I found the second-one more attention seeking and hence a better fir for the purpose. I have tried to align all the text and icon in the same left margin, but its not perfect in the mockup, so pls ignore that :p Since, the icons on homepage of the inventory website are line icons, I settled on Feather Icons to pickup the icons from. It is open-source and we can credit the creator too. I came up with a sample set.
Looking forward to the feedback! If you like these, I can create my PR for the IMPORTANT label and others can follow it easily, to complete the tasks asap. :)) |
|
@Yavnikaa Thanks for the mockups. I agree the second one has better contrast. Your sample set is a great model for what this should look like. 👍🏻 Feather Icons look nice too! When adding them, let's make a note in the Legal section of the README. It can go in a new list titled Attributions with name and URL. Go ahead with the implementation, looking forward to seeing your Pull Request! Have a good weekend. |
|
Just a little confirmation here. Since the blocks currently follow a table structure, changing only the CSS won't do to match our design. Can I alter the html structure as well in the layouts section ? @jwflory any feedback or pointers from you? We had a little discussion in issue #63, but we might need your heads-up to proceed further. |
|
@jwflory @Yavnikaa As we already have shortcodes for the note, tip, info and warning admonitions in our theme as
@jwflory with which one should we go ahead? |
|
@Neha9849 Yeah, this was the key question! I was naïve to open the issues. It happens though! As I explained in my note in #63, I think we should stick to using the shortcodes. @Yavnikaa Could we pass this issue to @BeeBombshell to work on while you tackle #35? I think this will help keep everyone working on something impactful. |
|
Yes sure. No issues! :)) |
|
Thanks, @Yavnikaa! @BeeBombshell, shall I assign you for #64 and #66? |
|
Sure @jwflory! I'll start working on them right away! 😄 |
|
@jwflory I've added the shortcodes for both the
|
|
@BeeBombshell Amazing 💯 I'll review #83 by end of today U.S. Eastern time. |
* 💄 fix: Added CAUTION admonition shortcode (closes #66) * 💄 fix: Added IMPORTANT admonition shortcode (closes #64) * 💄 fix: Added admonition icons and updated docs * Revert IDE changes to French localized file. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> * Remove extraneous changes to index page Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> Co-authored-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]>
* 💄 fix: Added CAUTION admonition shortcode (closes unicef#66) * 💄 fix: Added IMPORTANT admonition shortcode (closes unicef#64) * 💄 fix: Added admonition icons and updated docs * Revert IDE changes to French localized file. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> * Remove extraneous changes to index page Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> Co-authored-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]>
fixing the pdf view minor fix Update exampleSite/content/installation/elements/_index.en.md Co-authored-by: Justin W. Flory <[email protected]> :lipstick: layouts(navigation): Use consistent color on all pages (unicef#58) This commit fixes a bug where the UNICEF Blue was hard-coded into the navigation bar, and changes that hard-coded value to use the primary color set by the site maintainer in the Hugo config file (`params.` `primary_color`). Additionally, I changed the color for the translations options to use a white color, since it is hard to read when the primary color is a darker color. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :new: :lipstick: layouts: Add dpg-report layout (see unicef/coach#1) (unicef#44) This commit creates a new custom layout for DPG report cards in the UNICEF Inventory theme. DPG report cards are at-a-glance views of a Venture Fund company's progress in meeting the DPG Standard. More context about this change is in unicef/coach#1. This commit should be merged once the idea is validated and the early prototyping phase is complete. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :new: :lipstick: layouts(shortcodes): Create table layout (unicef#70) Shortcode for a table used in unicef/inventory#125. :new: :sparkles: layouts(shortcodes): Add embed-pdf shortcode (unicef#56) I have added a demo of this shortcode on the `installation/elements` page. For using this Shortcode, we have to pass the name of the pdf into the shortcode as shown in the demo. The pdfs should be stored in the `static/pdfs` folder. Fixes unicef#33. Co-authored-by: Justin W. Flory <[email protected]> :bug: layouts(default): Add condition to show "RA Section" when content is available (unicef#68) Fixes unicef#30. * Add hugo condition to only show "RA Section" when there's content available * Modify hugo conditions to check for available content before displaying the ra section * Fix duplication of 'RA' section bug introduce by commit e4a8438 * Refactor hugo condition reposible for fixing the bugs in both issue unicef#30 and commit e4a8438 * Undo code refactoring introduced by commit 3f534dd Co-authored-by: Zab <[email protected]> :lipstick: assets(css): Make Table of Contents more appealing and responsive (unicef#73) * Complete the stated task * Make table of contents more appealing and responsive * Update template title * Update layouts/partials/head.html Commit emoji: https://gitmoji.dev/ Co-authored-by: Justin W. Flory <[email protected]> 🐛 assets(css): Fix styling of highlight code blocks (unicef#72) * 🐛 fix: Improved styling of highlight code blocks * Reduced whitespace between codelines using css * 📝 docs: Added comment for CSS changes :recycle: layouts(dpg-report): Reuse download-pdf partial (unicef#74) The PDF download button logic was moved into a partial after this layout was created. This refactors to use the partial and maintain less code. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :bug: :wrench: config: Removed Duplicate Home Link in Footer (unicef#80) Fixes unicef#57. In Footer partial, we have this: ```html <li><a class="nav-link text-white" href="{{ site.BaseURL | relLangURL }}">HOME</a></li> {{ range site.Menus.main }} {{if ne .Name "pages"}} <li class="nav-item"> <a class="nav-link text-white text-uppercase" href="{{ .URL | absLangURL }}">{{ .Name }}</a> </li> {{ end }} {{ end }} ``` In all other upstreams, we don't have Home in the Menu array but we do have it in the exampleSite. This is what causes the duplication in exampleSite. So, I have removed it from the config file of the example site. :bug: :memo: README: Fix link for example site config (unicef#82) An example configuration used to be bundled at the top of the repo, but now it is included as part of the example site used in building this theme. This commit fixes the broken link in the README. Closes unicef#79. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :bug: :wrench: ci: Fix GH Pages push with string comparison operator This commit changes the string comparison operator for the git user name in the deploy script used in continuous integration. Currently the check is checking if the string is not empty, then it overrides what was set. We actually wanted the inverse. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :new: :memo: .github: Add contributing guidelines (unicef#86) * 🆕 📝 .github: Add contributing guidelines This commit adds new contributing guidelines for the UNICEF Inventory theme. It includes four main topics: 1. Contribution process (a.k.a. governance) 2. Conventions & courtesies 3. Structure & components 4. How to create a developer environment Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> * Address @Idadelveloper feedback in PR unicef#86; s/tickets/issues/ This commit makes a few changes, mostly coming from Ida's feedback in Pull Request unicef#86: 1. Add a note about creating a git feature branch after being assigned an issue. 2. Add a note to tag an issue number in the commit message(s) of a Pull Request. 3. Change all mentions of "ticket" to "issue" to be more clear. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> 💄 Admonitions: Standardize appearance and add new shortcodes (unicef#83) * 💄 fix: Added CAUTION admonition shortcode (closes unicef#66) * 💄 fix: Added IMPORTANT admonition shortcode (closes unicef#64) * 💄 fix: Added admonition icons and updated docs * Revert IDE changes to French localized file. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> * Remove extraneous changes to index page Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> Co-authored-by: Justin W. Flory (he/him) [UNICEF Innovation] <[email protected]> :lipstick: css: Highlight buttons on hovering (unicef#94) Fixes unicef#90. Type of Change: - Code - User Interface 📝 docs: Added table shortcode in elements page (unicef#96) Fixes unicef#71. This PR adds table shortcodes to the existing tables along with the documentation to the elements page. added inventory layouts Added layouts of inventory
Summary
When an AsciiDoc
IMPORTANTadmonition is used, it should be more distinguished from the rest of the content on a page.Background
Is the new feature related to a problem? Describe the problem: AsciiDoc supports several kinds of admonitions, but when they are used, they are not visually distinguished:
What does the new feature look like to you?: Each admonition should use a unique icon and color to visually represent the admonition. It should be visually distinguished from the rest of the content on a page.
Details
There are many AsciiDoc admonitions, and a
IMPORTANTis just one type. For icons, we should take an approach like using a common set of open source icons that can be used for all admonitions. This way, they will also be more similarly matched to each other. Additionally, when each admonition is used, AsciiDoc+Hugo will automatically create HTMLidandclassattributes so they can be styled further with layouts and CSS. To see these attributes, you will need to edit a content page, add the admonition, run the Hugo server, and use the browser tools to inspect the element on the rendered page to see what the HTML attributes are.For the
IMPORTANTadmonition, this could be a red color with an icon to catch attention or symbolize something urgent. It should catch the reader's attention—it is something important!Outcome
IMPORTANTadmonitions are supported with a unique appearance in the rendered site when used in content files.The text was updated successfully, but these errors were encountered: