From 2ea25f62eb3c27baa50ddcc4e0f5c9a7bf9149bf Mon Sep 17 00:00:00 2001 From: Pulkit Kathuria Date: Sat, 6 Apr 2024 18:43:53 +0900 Subject: [PATCH] (ui) article added --- app/frontend/src/components/Article.astro | 91 +++++++++++++++++++++ app/frontend/src/components/Hero.astro | 2 +- app/frontend/src/components/Layout.astro | 2 +- app/frontend/src/components/LineChart.astro | 2 +- app/frontend/src/components/Themes.astro | 17 ++-- app/frontend/src/pages/index.astro | 2 + 6 files changed, 105 insertions(+), 11 deletions(-) create mode 100644 app/frontend/src/components/Article.astro diff --git a/app/frontend/src/components/Article.astro b/app/frontend/src/components/Article.astro new file mode 100644 index 0000000..ad2bae1 --- /dev/null +++ b/app/frontend/src/components/Article.astro @@ -0,0 +1,91 @@ +--- + +--- + +
+

+
What is
+ CoverItUp? +

+

+ All in One Developer's KPI Tool +

+ +
+ CoverItUp - is a new, one of it's kind, complete solution for software + engineers to measure code metrics. +
+
+ + This tool empowers developers to take control of their code coverage analysis + for any type of matrices, all in one place. + +
+
+ This tool is fully customizable tool to track metrics that should matter to you + the most. Such as, not just the code coverage, but equally important other metrics. + Such as ・build times ・number of dependencies ・bundle sizes etc. Together with + additional features, which I share further in this post. +
+
+ Context: mostly all repos use services like CodeCov, Coveralls badges + to display the code-coverage of unit tests on their README on Github. Over years, + many other badges, such ・as number of downloads ・number of people online on + Discord etc also made their way into the README. +
+
+ However, there are other indicators that are equally important. And developers + have less control as developers are mostly restricted to the tools that are available + right now to record those metrics. +
+ Therefore, I designed this tool in such a way, that developers can record any + types of scores that they see fit. +
+
+ +
+ + Generally for any software project, we use tools like SonarQube for code + inspection, CodeCov for code coverage, Code Climate for smells and others. +
+ For enterprise users, this also means expensive licenses and managing several + self hosting. Therefore, some may consider is as a free alternative to CodeCov + or SonarQube. +
+ And for users, using the cloud services for these respective tools, involves + managing separate accounts, authentications etc. +
+
+ + All these tools provide solutions to one or two metrics. Hence, users end + up using multiple services for different use cases in same project. +
+
+ + We didn’t want to do either. Instead, provide full control to developer + with the choice of indicator a developer wants to measure. + + + Over my years of development, I have realized that just badges may not be + enough to determine the trajectory of a repository. Therefore, I implemented + trend charts that can be embedded inside the README as images, same way we + embed badges. +

+ On top of the core feature to track code wellness, the tool provides badges and + charts that can be embed into the README. It also provides smart feedback to + user on pull requests by sharing difference in the indicators for 2 branches. + The tool doesn’t spam the comment box, and upon new commits filters out the diff + that have already been commented. +

+ + It comes in dark and light themes. The embedding of charts come in 2 + different themes. The width and heights are fully adjustable and output can + be either png or svg if you prefer smaller sizes. SVG are best suited to + embed in the README or pull request comments. While PNG are used if you want + to create your own dashboards on a Wiki or Confluence page for all the + repositories in an organization. +
+
+ diff --git a/app/frontend/src/components/Hero.astro b/app/frontend/src/components/Hero.astro index 6936e88..07b643b 100644 --- a/app/frontend/src/components/Hero.astro +++ b/app/frontend/src/components/Hero.astro @@ -23,7 +23,7 @@

Record what matters.

diff --git a/app/frontend/src/components/Layout.astro b/app/frontend/src/components/Layout.astro index d294833..1fcdf20 100644 --- a/app/frontend/src/components/Layout.astro +++ b/app/frontend/src/components/Layout.astro @@ -68,7 +68,7 @@ const { title, description } = Astro.props; .bg-gradient { background: #780206; background: -webkit-linear-gradient(to right, #061161, #780206); - background: linear-gradient(to right, #061161, #780206); + background: linear-gradient(to right, #0f1024, #3b384f); } /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { diff --git a/app/frontend/src/components/LineChart.astro b/app/frontend/src/components/LineChart.astro index 8f3e560..fa7d235 100644 --- a/app/frontend/src/components/LineChart.astro +++ b/app/frontend/src/components/LineChart.astro @@ -34,7 +34,7 @@ 
{`
 - uses: kevincobain2000/action-coveritup@v2
-    with:
+  with:
     type: go-build-time
     command: go build main.go
     record: runtime`}
diff --git a/app/frontend/src/components/Themes.astro b/app/frontend/src/components/Themes.astro index da6022c..b229479 100644 --- a/app/frontend/src/components/Themes.astro +++ b/app/frontend/src/components/Themes.astro @@ -8,27 +8,28 @@ &
Github Enterprise

-

Instant feedback on your code changes.

+

Instant feedback on your code changes.

-

+

Supports all languages and frameworks

- Medium: Revolutionizing code tracking for developers + Medium: How to use lint the right way
- Medium: How to use lint the right way + Medium: Revolutionizing code tracking for developers +

diff --git a/app/frontend/src/pages/index.astro b/app/frontend/src/pages/index.astro index f3133ef..e5f1748 100644 --- a/app/frontend/src/pages/index.astro +++ b/app/frontend/src/pages/index.astro @@ -4,6 +4,7 @@ import Nav from "@components/Nav.astro"; import LineChart from "@components/LineChart.astro"; import Themes from "@components/Themes.astro"; import Hero from "@components/Hero.astro"; +import Article from "@components/Article.astro"; import BarChart from "@components/BarChart.astro"; import SelfHosting from "@components/SelfHosting.astro"; import FinalAction from "@components/FinalAction.astro"; @@ -23,6 +24,7 @@ import Footer from "@components/Footer.astro";