From 0a14257d9c5c1de13f0721ba5dfc30fa6be37805 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Tue, 4 Apr 2023 17:00:32 +0200 Subject: [PATCH 1/4] Responsive adjustments --- .../BlogListPage/blog-list-page.module.css | 12 ++++ .../blog-tags-posts-page.module.css | 12 ++++ src/components/Hero/hero.module.css | 14 ++++- .../QuoteCard/quote-card.module.css | 1 + .../StarsCount/stars-count.module.css | 13 +++- src/css/custom.css | 61 ++++++++++++++++--- src/css/vars.css | 2 + src/pages/community/events/events.module.css | 37 ++--------- .../community/support/support.module.css | 35 +++-------- src/pages/index.module.css | 15 +++++ src/pages/libraries/libraries.module.css | 23 +++---- src/pages/training/training.module.css | 20 +++--- 12 files changed, 153 insertions(+), 92 deletions(-) diff --git a/src/components/Blog/BlogListPage/blog-list-page.module.css b/src/components/Blog/BlogListPage/blog-list-page.module.css index d552732f..09366ba2 100644 --- a/src/components/Blog/BlogListPage/blog-list-page.module.css +++ b/src/components/Blog/BlogListPage/blog-list-page.module.css @@ -7,3 +7,15 @@ grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } + +@media (--ifm-narrow-window) { + .projectsContainer { + grid-template-columns: 1fr 1fr; + } +} + +@media (--arrow-mobile-window) { + .projectsContainer { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css b/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css index d552732f..22623bb1 100644 --- a/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css +++ b/src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css @@ -7,3 +7,15 @@ grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } + +@media (--ifm-narrow-window) { + .projectsContainer { + grid-template-columns: 1fr 1fr; + } +} + +@media (--arrow-mobile-window) { + .projectsContainer { + grid-template-columns: 1fr; + } +} diff --git a/src/components/Hero/hero.module.css b/src/components/Hero/hero.module.css index 808d69f0..a9582a2f 100644 --- a/src/components/Hero/hero.module.css +++ b/src/components/Hero/hero.module.css @@ -42,7 +42,6 @@ } } - .container { max-width: 700px; } @@ -53,6 +52,12 @@ u { white-space: nowrap; } +@media (--arrow-mobile-window) { + u { + white-space: normal; + } +} + .subtitle { font-weight: normal; } @@ -64,3 +69,10 @@ u { justify-content: center; margin-top: calc(2 * var(--ifm-spacing-vertical)); } + +@media (--arrow-mobile-window) { + .ctaList { + flex-direction: column; + } +} + diff --git a/src/components/QuoteCard/quote-card.module.css b/src/components/QuoteCard/quote-card.module.css index afc4f23b..beebb9f9 100644 --- a/src/components/QuoteCard/quote-card.module.css +++ b/src/components/QuoteCard/quote-card.module.css @@ -24,6 +24,7 @@ :local(.quoteCard) :global(.card__body) { padding-top: calc(2.5 * var(--ifm-card-vertical-spacing)); + font-size: 0.9rem; } :local(.quoteCard) :global(.avatar__photo-wrapper) { diff --git a/src/components/StarsCount/stars-count.module.css b/src/components/StarsCount/stars-count.module.css index 181fe094..8585a4b4 100644 --- a/src/components/StarsCount/stars-count.module.css +++ b/src/components/StarsCount/stars-count.module.css @@ -1,8 +1,19 @@ .link { font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; } .icon { - vertical-align: top; + vertical-align: text-top; margin-right: 0.4rem; +} + +.starIcon { + margin-left: 0.4rem; + vertical-align: text-top; +} + +.link:hover .icon, .link:hover .starIcon { + filter: brightness(0.8); } \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 48b389de..1aa4c731 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -20,12 +20,6 @@ table { background: var(--background); } -/* To set the ToC properly aligned */ -.plugin-docs main .theme-doc-toc-desktop { - top: var(--ifm-navbar-height); - margin-top: -1rem; -} - /* Navbar */ .plugin-docs .navbar { border-bottom: 1px solid var(--ifm-toc-border-color); @@ -51,6 +45,7 @@ table { /* Search */ .navbar__search-input { border-radius: var(--ifm-global-radius); + transition: width var(--ifm-transition-fast); } .navbar__search[class*='searchBarContainer'] { @@ -96,6 +91,56 @@ table { color: var(--ifm-link-hover-color); } +/* Navbar sidebar */ +.navbar-sidebar__item { + padding: 0 +} + +.navbar-sidebar__back { + margin: 0; + padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); + top: 0; + background: var(--ifm-navbar-background-color); + color: var(--ifm-menu-color); +} + +.navbar-sidebar__back:hover { + background: var(--ifm-menu-color-background-hover); +} + +.navbar-sidebar__close { + transition: transform var(--ifm-transition-fast); +} + +.navbar-sidebar__close:hover { + transform: rotateZ(90deg); +} + +.navbar-sidebar .menu__link { + border-radius: var(--ifm-global-radius); +} + +.navbar-sidebar .menu__link:hover { + cursor: pointer; +} + +.menu__link.menu__link--sublist.menu__link--active { + color: var(--ifm-menu-color); +} + +.menu__list-item-collapsible--active .menu__link.menu__link--active { + color: var(--ifm-menu-color-active); +} + +/* To set the ToC properly aligned */ +.plugin-docs main .theme-doc-toc-desktop { + top: var(--ifm-navbar-height); + margin-top: -1rem; +} + +/* Collapsible ToC */ + + /* Pagination bottom buttons not needed */ .plugin-docs .pagination-nav { display: none; @@ -229,11 +274,13 @@ code { color: var(--ifm-menu-color-active); } + .menu__list-item-collapsible { border-radius: var(--ifm-global-radius); } -.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active { +.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active, +.theme-doc-sidebar-menu .menu__list-item-collapsible--active { background: var(--ifm-menu-color-background-active); } diff --git a/src/css/vars.css b/src/css/vars.css index 9cebab11..4d1b61dd 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -97,3 +97,5 @@ /* Custom Media query mimicking the one from Infima */ @custom-media --ifm-narrow-window (max-width: 996px); + +@custom-media --arrow-mobile-window (max-width: 768px); diff --git a/src/pages/community/events/events.module.css b/src/pages/community/events/events.module.css index 8482fa67..a10ad09d 100644 --- a/src/pages/community/events/events.module.css +++ b/src/pages/community/events/events.module.css @@ -2,44 +2,15 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } -.textContainer { - max-width: 480px; - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* composes: container from global; - composes: text--center from global; */ -} - -.featuresContainer, -.quotesContainer { - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* https://github.com/css-modules/css-modules#composing-from-other-files */ - /* composes: container from global; */ - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); -} - .projectsContainer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } -.navigationContainer { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); -} - -.usageWrapperContainer { - background-color: var(--ifm-color-primary-light); +@media (--ifm-narrow-window) { + .projectsContainer { + grid-template-columns: 1fr; + } } -.usageContainer { - display: flex; - align-content: center; - justify-content: space-between; - padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal); - flex-wrap: wrap; - row-gap: var(--ifm-spacing-vertical); -} diff --git a/src/pages/community/support/support.module.css b/src/pages/community/support/support.module.css index 8482fa67..dadda4c9 100644 --- a/src/pages/community/support/support.module.css +++ b/src/pages/community/support/support.module.css @@ -9,37 +9,20 @@ composes: text--center from global; */ } -.featuresContainer, -.quotesContainer { - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* https://github.com/css-modules/css-modules#composing-from-other-files */ - /* composes: container from global; */ - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); -} - -.projectsContainer { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); -} - .navigationContainer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } -.usageWrapperContainer { - background-color: var(--ifm-color-primary-light); +@media (--ifm-narrow-window) { + .navigationContainer { + grid-template-columns: 1fr 1fr; + } } -.usageContainer { - display: flex; - align-content: center; - justify-content: space-between; - padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal); - flex-wrap: wrap; - row-gap: var(--ifm-spacing-vertical); -} +@media (--arrow-mobile-window) { + .navigationContainer { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/src/pages/index.module.css b/src/pages/index.module.css index a6ccbd7f..cc775dd2 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -31,6 +31,21 @@ gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } +@media (--ifm-narrow-window) { + .projectsContainer { + grid-template-columns: 1fr 1fr; + } +} + +@media (--arrow-mobile-window) { + .featuresContainer, + .quotesContainer, + .projectsContainer, + .navigationContainer { + grid-template-columns: 1fr; + } +} + .usageWrapperContainer { background-color: var(--ifm-color-primary-light); } diff --git a/src/pages/libraries/libraries.module.css b/src/pages/libraries/libraries.module.css index 8482fa67..a6a977e7 100644 --- a/src/pages/libraries/libraries.module.css +++ b/src/pages/libraries/libraries.module.css @@ -19,27 +19,20 @@ gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } -.projectsContainer { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); -} - .navigationContainer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } -.usageWrapperContainer { - background-color: var(--ifm-color-primary-light); +@media (--ifm-narrow-window) { + .featuresContainer { + grid-template-columns: 1fr; + } } -.usageContainer { - display: flex; - align-content: center; - justify-content: space-between; - padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal); - flex-wrap: wrap; - row-gap: var(--ifm-spacing-vertical); +@media (--arrow-mobile-window) { + .navigationContainer { + grid-template-columns: 1fr; + } } diff --git a/src/pages/training/training.module.css b/src/pages/training/training.module.css index 8482fa67..4880150d 100644 --- a/src/pages/training/training.module.css +++ b/src/pages/training/training.module.css @@ -31,15 +31,17 @@ gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); } -.usageWrapperContainer { - background-color: var(--ifm-color-primary-light); +@media (--ifm-narrow-window) { + .projectsContainer { + grid-template-columns: 1fr; + } } -.usageContainer { - display: flex; - align-content: center; - justify-content: space-between; - padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal); - flex-wrap: wrap; - row-gap: var(--ifm-spacing-vertical); +@media (--arrow-mobile-window) { + .featuresContainer, + .quotesContainer, + .projectsContainer, + .navigationContainer { + grid-template-columns: 1fr; + } } From b78974b9415304adf0cafe86bc66d9dad9119c29 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Tue, 4 Apr 2023 17:01:21 +0200 Subject: [PATCH 2/4] Remove unused code and data --- docusaurus.config.js | 25 +------------- src/components/QuoteCard/QuoteCard.tsx | 18 +++++++--- src/pages/about/use-cases/index.tsx | 7 ---- src/pages/about/what-is-arrow/index.tsx | 7 ---- src/pages/consulting/index.tsx | 7 ---- src/pages/index.tsx | 33 ++++++------------ src/pages/index.yml | 46 ------------------------- src/pages/libraries/libraries.tsx | 14 ++++---- src/pages/libraries/libraries.yml | 37 -------------------- 9 files changed, 32 insertions(+), 162 deletions(-) delete mode 100644 src/pages/about/use-cases/index.tsx delete mode 100644 src/pages/about/what-is-arrow/index.tsx delete mode 100644 src/pages/consulting/index.tsx diff --git a/docusaurus.config.js b/docusaurus.config.js index 39234071..bb961e3c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -25,8 +25,6 @@ const createConfig = async () => { url: 'https://arrow-kt.io', baseUrl: '/', trailingSlash: true, - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. organizationName: 'arrow-kt', // Usually your GitHub org/user name. projectName: 'arrow-website', // Usually your repo name. @@ -178,20 +176,11 @@ const createConfig = async () => { }, ], }, -// { -// to: '/training', -// position: 'right', -// label: 'Training', -// }, { type: 'dropdown', position: 'right', label: 'Community', - items: [ -// { to: '/community/support', label: 'Support' }, - { to: '/community/blog', label: 'Blog' }, -// { to: '/community/events', label: 'Events' }, - ], + items: [{ to: '/community/blog', label: 'Blog' }], }, ], }, @@ -208,10 +197,6 @@ const createConfig = async () => { label: 'API Docs', href: 'https://apidocs.arrow-kt.io', }, -// { -// label: 'Training', -// to: '/training', -// }, { label: 'Community', to: '/community/support', @@ -276,14 +261,6 @@ const createConfig = async () => { { title: 'Community', items: [ -// { -// label: 'Support', -// to: '/community/support', -// }, -// { -// label: 'Events', -// to: '/community/events', -// }, { label: 'Blog', to: '/community/blog', diff --git a/src/components/QuoteCard/QuoteCard.tsx b/src/components/QuoteCard/QuoteCard.tsx index 0a74d0b0..d62bb131 100644 --- a/src/components/QuoteCard/QuoteCard.tsx +++ b/src/components/QuoteCard/QuoteCard.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + import styles from './quote-card.module.css'; export interface QuoteCardProps { @@ -9,17 +11,23 @@ export interface QuoteCardProps { body?: string; } -export function QuoteCard({ - name = 'Francisco Díaz', - position = 'Principal at Xebia Functional', - body, -}: QuoteCardProps) { +export function QuoteCard({ name, position, image, body }: QuoteCardProps) { return (

{body}

+ {image && ( +
+ {name} +
+ )}
{name}
{position} diff --git a/src/pages/about/use-cases/index.tsx b/src/pages/about/use-cases/index.tsx deleted file mode 100644 index 25a6cdca..00000000 --- a/src/pages/about/use-cases/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import { Placeholder } from '@site/src/components/Placeholder/Placeholder'; - -export default function UseCases(): JSX.Element { - return ; -} diff --git a/src/pages/about/what-is-arrow/index.tsx b/src/pages/about/what-is-arrow/index.tsx deleted file mode 100644 index 3e8799f1..00000000 --- a/src/pages/about/what-is-arrow/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import { Placeholder } from '@site/src/components/Placeholder/Placeholder'; - -export default function WhatIsArrow(): JSX.Element { - return ; -} diff --git a/src/pages/consulting/index.tsx b/src/pages/consulting/index.tsx deleted file mode 100644 index 9bc4af83..00000000 --- a/src/pages/consulting/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import { Placeholder } from '@site/src/components/Placeholder/Placeholder'; - -export default function Consulting(): JSX.Element { - return ; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6d4377dc..634eeeb8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,7 +7,6 @@ import Layout from '@theme/Layout'; import { Hero } from '@site/src/components/Hero'; import { LinkCard, LinkCardProps } from '@site/src/components/LinkCard/index'; -import { ImageCard, ImageCardProps } from '@site/src/components/ImageCard'; import { QuoteCard, QuoteCardProps } from '@site/src/components/QuoteCard'; import { BorderlessCard } from '@site/src/components/BorderlessCard'; @@ -39,25 +38,11 @@ export default function Home(): JSX.Element { ))} -{/*
*/} -{/*

What can Arrow do

*/} -{/*

*/} -{/* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu */} -{/* turpis molestie, dictum est */} -{/*

*/} -{/*
*/} -{/*
*/} -{/* {data.projects?.map((project: ImageCardProps) => ( */} -{/* */} -{/* ))} */} -{/*
*/}
+ className={`container text--center margin-bottom--lg ${styles.textContainer}`}>

What the community says

- Read reviews about Arrow from the community and its practitioners + Some opinions about Arrow from the community and its practitioners

))}
-
- {data.navs?.map((nav: LinkCardProps) => ( - - ))} -
+ {data.navs && ( +
+ {data.navs.map((nav: LinkCardProps) => ( + + ))} +
+ )}
{data.companies?.map((company: { name: string; logo: string }) => ( diff --git a/src/pages/index.yml b/src/pages/index.yml index 68c417b6..4b5e0ba7 100644 --- a/src/pages/index.yml +++ b/src/pages/index.yml @@ -38,57 +38,11 @@ features: icon: icon-generic-6.svg body: Powerful additions to the basics to make your code more expressive -projects: -# - title: Case study 1 -# -# - title: Case study 2 -# -# - title: Case study 3 -# -# - title: Case study 4 - quotes: - name: George Popides position: Software Engineer at Katanox - image: quoted-person-a.jpg body: Our system consists of multiple services built with Kotlin and Spring Boot and the communication between the services is done through GRPC. The more services involved the more the failure points which means we need a streamlined way to handle failures and errors without affecting the operation of our system. [..] By using Either and Validated, we have eliminated unexpected exceptions in our system and we can now have a look on errors through our logs without worrying about unexpected exceptions that can bring our system down - name: Ilyan Germanov position: Co-founder of Ivy Apps - image: quoted-person-b.jpg body: This week, I'm into sharing things that made my life as an Android developer with Kotlin easier. In my opinion, functional programming is an awesome paradigm and can be a first-class citizen in Kotlin. [..] Arrow is a "Functional companion to Kotlin's Standard Library" and provides the core constructs from the FP world to get you started. - -navs: -# - title: Support -# href: /community/support -# icon: icon-support.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet -# -# - title: Blog -# href: /community/blog -# icon: icon-blog.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet -# -# - title: Events -# href: /community/events -# icon: icon-events.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet - -companies: -# - name: Verizon -# logo: company-logo-0.png -# -# - name: Scalefocus -# logo: company-logo-1.png -# -# - name: Unity -# logo: company-logo-2.png -# -# - name: Santander -# logo: company-logo-3.png -# -# - name: Google -# logo: company-logo-4.png -# -# - name: Microsoft -# logo: company-logo-5.png diff --git a/src/pages/libraries/libraries.tsx b/src/pages/libraries/libraries.tsx index de3f478e..1f484eb0 100644 --- a/src/pages/libraries/libraries.tsx +++ b/src/pages/libraries/libraries.tsx @@ -45,12 +45,14 @@ export default function Libraries(): JSX.Element { be featured here!

-
- {data.navs?.map((nav: BorderlessCardProps) => ( - - ))} -
+ {data.navs && ( +
+ {data.navs.map((nav: BorderlessCardProps) => ( + + ))} +
+ )}
diff --git a/src/pages/libraries/libraries.yml b/src/pages/libraries/libraries.yml index dbc94ccf..8bde8ef2 100644 --- a/src/pages/libraries/libraries.yml +++ b/src/pages/libraries/libraries.yml @@ -43,43 +43,6 @@ libraries: icon: icon-resilience.svg body: Better initial-style DSLs in Kotlin -more_libraries: - - title: Library 5 - href: /learn/coroutines - icon: icon-coroutines.svg - body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est . Etiam eu turpis - - - title: Library 6 - href: /learn/resilience - icon: icon-resilience.svg - body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est . Etiam eu turpis - - - title: Library 7 - href: /learn/immutable-data - icon: icon-immutable-data.svg - body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est . Etiam eu turpis - - - title: Library 8 - href: /learn/design - icon: icon-design.svg - body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est . Etiam eu turpis - -navs: -# - title: Support -# href: /community/support -# icon: icon-support.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet -# -# - title: Blog -# href: /community/blog -# icon: icon-blog.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet -# -# - title: Events -# href: /community/events -# icon: icon-events.svg -# body: Lorem ipsum dolor sit amet, consectetur adipiscing eliorem ipsum dolor sit amet - banner: title: Want to know more about Arrow? ctaList: From 62f8bdf90cfd3593c95a5762f8b69727bcb30e5d Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Tue, 4 Apr 2023 17:01:42 +0200 Subject: [PATCH 3/4] Adjust StarsCount component using SVG icon --- src/components/StarsCount/StarsCount.tsx | 15 ++++++++++++--- static/img/icon-star.svg | 3 +++ 2 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 static/img/icon-star.svg diff --git a/src/components/StarsCount/StarsCount.tsx b/src/components/StarsCount/StarsCount.tsx index 77afab9d..5831a442 100644 --- a/src/components/StarsCount/StarsCount.tsx +++ b/src/components/StarsCount/StarsCount.tsx @@ -10,10 +10,12 @@ import styles from './stars-count.module.css'; const githubLink = 'https://github.com/arrow-kt/arrow'; const icon = '/img/icon-social-github.svg'; +const starIcon = '/img/icon-star.svg'; export const StarsCount = () => { const isBrowser = useIsBrowser(); const iconPath = useBaseUrl(`${icon}`); + const starIconPath = useBaseUrl(`${starIcon}`); const { githubInfo } = useGithubInfo(); if (!isBrowser) { @@ -33,10 +35,17 @@ export const StarsCount = () => { src={iconPath} className={styles.icon} alt="GitHub" - height="24px" - width="24px" + height="20px" + width="20px" + /> + arrow • {stars.toLocaleString()} + Star - arrow • {stars.toLocaleString()} ⭐ )} diff --git a/static/img/icon-star.svg b/static/img/icon-star.svg new file mode 100644 index 00000000..68e342ff --- /dev/null +++ b/static/img/icon-star.svg @@ -0,0 +1,3 @@ + + + From a341a34467ebb46244171046d0e9d3b053cf5ce6 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Tue, 4 Apr 2023 18:11:16 +0200 Subject: [PATCH 4/4] Fix non existing default href for ImageCard --- src/components/ImageCard/ImageCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageCard/ImageCard.tsx b/src/components/ImageCard/ImageCard.tsx index bf0f1aa6..d55b1840 100644 --- a/src/components/ImageCard/ImageCard.tsx +++ b/src/components/ImageCard/ImageCard.tsx @@ -22,7 +22,7 @@ export function ImageCardBase({ subtitle, image = useBaseUrl('/img/sample-image.jpg'), body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie', - href = '/about/use-cases', + href, landscapeMode = false, }: ImageCardOptionsProps) { return (