codecheckers / discussion

General discussions and questions
0 stars 0 forks source link

Dynamic SVG badges for CODECHECK reports #24

Open sje30 opened 2 years ago

sje30 commented 2 years ago

During the review of our codecheck paper, a reviewer commented

The badge that is delivered would need some time information since the check is valid at one point in time (with a given software stack) and does not guarantee future runs.

So, what we were thinking was extending the codecheck logo by another line to include either a timestamp, or even just the certificate number (which starts with the year). codecheck_logo

I was thinking of having the URL split over two lines, e.g.

https://codecheck.org.uk/ cert/2022-001

(and if so, then we'd need a bit of extra website work to make the URL [https://codecheck.org.uk/cert/2022-001]

@nuest did you make the previous version of the logo? If we added an extra line, could we then use sed to generate new ones?

Alternatively, I see there are now several implementations of 'plain' SVG badges, https://forthebadge.com/generator/ https://metacpan.org/pod/Badge::Simple codecheck org uk-cert_2022-01

but this style looks a bit too long to me.

sje30 commented 2 years ago

ok; sed won't work, as the svg doesn't contain text ( it has been converted to path)

playing around with tikz (of course), I came up with this prototype:

twopart

which was made using

\documentclass{article}
\usepackage{tikz,xcolor,amssymb}
\usepackage[sfdefault]{roboto}
\usetikzlibrary{calc}
\usetikzlibrary{arrows}
\usepackage{relsize}

\tikzset{fontscale/.style = {font=\relsize{#1}}
    }

\usetikzlibrary{shapes.multipart}
\definecolor{topcolor}{HTML}{008033}
\definecolor{botcolor}{HTML}{55555f}
\tikzset{
state/.style={
       rectangle split,
       rectangle split parts=2,
       rectangle split part fill={topcolor,botcolor},
       rounded corners,
       minimum height=2em,
       text=white,
       text width=4.4cm,
       inner sep=2pt,
       }
     }
\newcommand{\Checkmark}{$\checkmark$}

\begin{document}
\thispagestyle{empty}
\begin{tikzpicture}
\node [state] {\Huge{CODE}\\\huge{CHECK}\nodepart{two}https://codecheck.org.uk/\\cert/2022-001};
\node (c) at (1,0.5) [font=\fontsize{40}{0}\selectfont,text=white] {\Checkmark};
\end{tikzpicture}
\end{document}

pdflatex twopart.tex
pdfcrop twopart.pdf
pdf2svg twopart-crop.tex twopart.svg

Starting point: https://tex.stackexchange.com/questions/301404/how-to-split-tikz-rectangle-by-half-with-different-colors-and-text-lines

I didn't think about fine tuning it yet, more proof of concept.

What font did you use in inkscape? I couldn't work it out.