Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic SVG badges for CODECHECK reports #24

Open
sje30 opened this issue Feb 11, 2022 · 1 comment
Open

Dynamic SVG badges for CODECHECK reports #24

sje30 opened this issue Feb 11, 2022 · 1 comment

Comments

@sje30
Copy link

sje30 commented Feb 11, 2022

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
Copy link
Author

sje30 commented Feb 12, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant