Skip to content

Commit

Permalink
Merge pull request #197 from sametcodes/develop
Browse files Browse the repository at this point in the history 
Implemented websafe font support
  • Loading branch information
@sametcodes
sametcodes authored Apr 29, 2023
2 parents eda5808 + 296cadd commit 59a95d3
Show file tree
Hide file tree
Showing 27 changed files with 376 additions and 306 deletions.
44 changes: 44 additions & 0 deletions PREVIEW.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# preview.readme.rocks

_All your statistics at once._

## Your development metrics
![](https://preview.readme.rocks/api/view/641b5deaa6550999ac4331d0)
![](https://preview.readme.rocks/api/view/641b5e30a6550999ac4331d2)
![](https://preview.readme.rocks/api/view/642dfbff39f5d6e5e5f45c3b)
![](https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=sametcodes&id=641b2efa3e90e7e555cdacd7)
![](https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=_aka5h&id=64414ea69c1f3df3b3e01264)
![](https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=arthurcolle&id=6442108c4320fb5c413f663c)

## Recent projects and used languages

![](https://preview.readme.rocks/api/view/6431b08616981eaebfd030f9)
![](https://preview.readme.rocks/api/view/6431b559ddde9c1558a16fe6)

## Line stats
![](https://preview.readme.rocks/api/view/6440669e4c5d605274994a4b)

## Calendar and streaks

![](https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=_aka5h&viewConfig%5Btitle%5D=LeetCode%20submissions&viewConfig%5Bsubtitle%5D=Last%205%20months&viewConfig%5BweekCount%5D=20&viewConfig%5BboxColor%5D=%2340c463&viewConfig%5BshowMonthLabels%5D=true&viewConfig%5BshowStreak%5D=true&id=64415382192eb283354af5a1)
![](https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=arthurcolle&viewConfig%5Btitle%5D=HackerNews%20Activity&viewConfig%5Bsubtitle%5D=Comments,%20jobs%20and%20polls&viewConfig%5BweekCount%5D=20&viewConfig%5BboxColor%5D=%23ff7a00&viewConfig%5BshowMonthLabels%5D=true&viewConfig%5BshowStreak%5D=false&id=6442166417556cdd9b746ff5)

## Your latest `daily.dev` and `dev.to` articles

<img src="https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=honeypot&queryConfig%5Bcount%5D=3&id=641cd30dbe50187858f7d61a" />
<img src="https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=isaacdlyman&queryConfig%5Bcount%5D=2&id=641c6e78c50c62ccdb646278" />

## Contributors

<img src="https://preview.readme.rocks/api/view?queryConfig%5Bowner_name%5D=facebook&queryConfig%5Brepository_name%5D=react&viewConfig%5Btitle%5D=Our%20contributors&viewConfig%5Bsubtitle%5D=Thank%20you%20for%20all%20your%20contributions.%20We%20appreciate%20that.&viewConfig%5Bitems_per_row%5D=15&id=642f70a3104ae4fd80d6efac" />

## Milestones

[![](https://preview.readme.rocks/api/view/6434324683b8f4f727a83c32)](milestone/3)

## Sponsors and goals
<a href="https://github.com/sponsorships/d-fischer">
<img src="https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=d-fischer&id=64248c899d4315a82e3cb3f7" />
</a>

<img src="https://preview.readme.rocks/api/view?queryConfig%5Busername%5D=ljharb&viewConfig%5Btitle%5D=My%20sponsors&viewConfig%5Bsubtitle%5D=Thank%20you%20for%20sponsoring%20me.&viewConfig%5Bitems_per_row%5D=15&id=64300f9e4160c69275201776" />
3 changes: 1 addition & 2 deletions lib/@dsvgui/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
node_modules
storybook-static
document/fonts/*/index.ts
storybook-static
79 changes: 34 additions & 45 deletions lib/@dsvgui/components/article/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Document } from "@/lib/@dsvgui";
import { Document, Text } from "@/lib/@dsvgui";
import { wrapText } from "@/lib/@dsvgui/utils";
import { getTextWidth } from "@/lib/@dsvgui/utils/index";

Expand Down Expand Up @@ -32,7 +32,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
const titleWidth =
Math.max(
...articles.map((article) =>
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 700 })
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 500 })
),
400
) + 20;
Expand All @@ -52,11 +52,11 @@ export const Article: React.FC<IArticle> = ({ articles }) => {

const title = wrapText(
article.meta.title,
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: 700 },
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: 500 },
(line: string, index: number) => (
<tspan key={index} x="0" dy={index === 0 ? 0 : 25}>
<Text x={0} y={index * 25} option={{ size: 16, weight: 500 }}>
{line}
</tspan>
</Text>
)
);

Expand All @@ -74,36 +74,25 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
)}
<g transform={`translate(0 ${yOffset})`}>
<g transform={`translate(${xOffset} 24)`}>
<text
xmlSpace="preserve"
fontFamily="Manrope"
fontWeight="700"
fill="#0c0c0c"
fontSize="16"
>
{title}
</text>
<text
fill="#999999"
xmlSpace="preserve"
fontSize={12}
fontFamily="Manrope"
y={5 + title.length * 15}
>
{wrapText(
article.meta.description.replace(/\n/gm, " "),
{
maxLineWidth: titleWidth - 20,
fontSize: 12,
maxLines: 3,
},
(line: string, index) => (
<tspan key={index} x="0" dy={index === 0 ? 0 : 13}>
{line}
</tspan>
)
)}
</text>
{title}
{wrapText(
article.meta.description.replace(/\n/gm, " "),
{
maxLineWidth: titleWidth - 20,
fontSize: 12,
maxLines: 3,
},
(line: string, index) => (
<Text
x={0}
y={17 + title.length + index * 13}
option={{ size: 12, weight: 500 }}
className="subtitle"
>
{line}
</Text>
)
)}
</g>

<g transform={`translate(${xOffset} 90)`}>
Expand All @@ -114,9 +103,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
y={-11}
fontSize="15px"
/>
<text fill="#555" fontSize="12" x="3" y="1">
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
{article.publish_date}
</text>
</Text>
</g>
<g transform={`translate(${15 + titleWidth / 4} 0)`}>
<AiOutlineLike
Expand All @@ -125,9 +114,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
y={-11}
fontSize="15px"
/>
<text fill="#555" fontSize="12" x="3" y="1">
{article.like_count} likes
</text>
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
{article.like_count}
</Text>
</g>
<g transform={`translate(${15 + titleWidth / 2} 0)`}>
<BiTimeFive
Expand All @@ -136,9 +125,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
y={-11}
fontSize="15px"
/>
<text fill="#555" fontSize="12" x="3" y="1">
{article.reading_time_minutes} mins
</text>
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
{article.reading_time_minutes}
</Text>
</g>
<g transform={`translate(${15 + (titleWidth / 4) * 3} 0)`}>
<IoPersonCircleOutline
Expand All @@ -147,9 +136,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
y={-11}
fontSize="15px"
/>
<text fill="#555" fontSize="12" x="3" y="1">
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
{article.meta.author}
</text>
</Text>
</g>
</g>

Expand Down
52 changes: 18 additions & 34 deletions lib/@dsvgui/components/barstats/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Document } from "@/lib/@dsvgui";
import { Document, Text } from "@/lib/@dsvgui";
import { stringToColorCode } from "@/lib/@dsvgui/utils";
import { getTextWidth } from "../../utils/index";

Expand Down Expand Up @@ -33,32 +33,14 @@ export const BarStats: React.FC<IBarStats> = ({
<g id="content">
<g id="Frame 134">
<g id="title">
<text
id="Most used languages"
className="title"
xmlSpace="preserve"
fontFamily="Manrope"
fontWeight="600"
letterSpacing="0px"
>
<tspan x="0" y="21.511">
{title}
</tspan>
</text>
<Text x={0} y={21.5} option="title">
{title}
</Text>
</g>
<g id="subtitle">
<text
id="in the last 7 days"
className="subtitle"
xmlSpace="preserve"
fontFamily="Manrope"
fontWeight="600"
letterSpacing="0px"
>
<tspan x="0" y="40">
{subtitle}
</tspan>
</text>
<Text x={0} y={40} option="subtitle">
{subtitle}
</Text>
</g>
<g id="bars" shapeRendering="crispEdges">
{items.map((item, index, array) => {
Expand Down Expand Up @@ -97,18 +79,20 @@ export const BarStats: React.FC<IBarStats> = ({
r={circleSize}
fill={stringToColorCode(item.key)}
/>
<text
xmlSpace="preserve"
fontSize="14"
fill="#7e7e7e"
<Text
x={x + 15}
y={y + 5}
option={{
size: 14,
weight: 500,
}}
className="subtitle"
>
<tspan>{item.name} </tspan>
<tspan fontWeight="bolder">
%{((item.value / totalValue) * 100).toFixed(1)}{" "}
</tspan>
</text>
{`${item.name} %${(
(item.value / totalValue) *
100
).toFixed(1)}`}
</Text>
</g>
);
})}
Expand Down
62 changes: 29 additions & 33 deletions lib/@dsvgui/components/calendar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Document } from "@/lib/@dsvgui";
import { Document, Text } from "@/lib/@dsvgui";
import { generateColorVariations } from "@/lib/@dsvgui/utils";
import { getTextWidth } from "../../utils/index";

export type ICalendar = {
title?: string;
Expand Down Expand Up @@ -146,11 +145,14 @@ export const Calendar: React.FC<ICalendar> = ({
const monthString = month.toLocaleString("default", { month: "short" });
const x = width - i * 4 * (boxSize + boxMargin + 1) - 25;
return (
<text key={monthString} id={monthString} className="clabel">
<tspan x={x > 0 ? x : 0} y="165.864">
{monthString}
</tspan>
</text>
<Text
key={monthString}
x={x > 0 ? x : 0}
y={166}
option={{ size: 12, weight: 500 }}
>
{monthString}
</Text>
);
}
);
Expand All @@ -163,37 +165,31 @@ export const Calendar: React.FC<ICalendar> = ({
{(title || subtitle || showStreak) && (
<g id="Title">
{title && (
<text xmlSpace="preserve" className="title">
<tspan x="0" y="18">
{title}
</tspan>
</text>
<Text x={0} y={18} option="title">
{title}
</Text>
)}
{title && subtitle && (
<text xmlSpace="preserve" className="subtitle">
<tspan x="0" y="38">
{subtitle}
</tspan>
</text>
<Text x={0} y={38} option="subtitle">
{subtitle}
</Text>
)}
{showStreak && (
<>
<text xmlSpace="preserve" className="title">
<tspan
x={width - getTextWidth(streak, { fontSize: 22 })}
y="18"
>
{streak}
</tspan>
</text>
<text xmlSpace="preserve" className="subtitle">
<tspan
x={width - getTextWidth("Streak", { fontSize: 16 })}
y="38"
>
Streak
</tspan>
</text>
<Text
x={(textWidth) => width - textWidth}
y={18}
option="title"
>
{streak}
</Text>
<Text
x={(textWidth) => width - textWidth}
y={36}
option="subtitle"
>
Streak
</Text>
</>
)}
</g>
Expand Down
Loading

1 comment on commit 59a95d3

@vercel
Copy link

@vercel vercel bot commented on 59a95d3 Apr 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

readmerocks – ./

readmerocks-sametcodes.vercel.app
readmerocks-git-main-sametcodes.vercel.app
readme.rocks
www.readme.rocks

Please sign in to comment.