Skiltgenerator for personlig bilskilt i SVG-format. Kan brukes som badge på GitHub.
Er du en av de som er lidenskapelig opptatt av trafikksikring i Norge, som har støttet Statens vegvesen arbeid med nasjonale trafikksikkerhetskampanjer? Altså kjøpt deg personlig bilskilt... #EgoBilskilt
Det har nemlig jeg! 😁
Bruk skilt-generatoren jeg har lagd til å generere SVG-filer av ditt skilt, slik at enda flere kan se at nettop DU er en som bryr deg om trafikksikring 🚗
Alt du trenger å gjøre for å generere personlig bilskilt er å legge ved teksten du vil ha vist i URL'en til https://personlig-bilskilt.storbukas.no/DITT-SKILT. Det er en begrensing på syv tegn, samme som Statens Vegvesen.
https://personlig-bilskilt.storbukas.no/DITT-SKILT
<img src="https://personlig-bilskilt.storbukas.no/TACO">
<img src="https://personlig-bilskilt.storbukas.no/2SLOW">
<img src="https://personlig-bilskilt.storbukas.no/1337">Du kan også bruke vanlige kjennemerker
<img src="https://personlig-bilskilt.storbukas.no/PR12345">Du kan også generere andre skilttyper
<img src="https://personlig-bilskilt.storbukas.no/svart/RÅNER"><img src="https://personlig-bilskilt.storbukas.no/varebil/SNEKKER"><img src="https://personlig-bilskilt.storbukas.no/svalbard/ISBJØRN"><img src="https://personlig-bilskilt.storbukas.no/militaer/HV"><img src="https://personlig-bilskilt.storbukas.no/ambassade/TAXFREE">Start med å hente repoet
git clone https://github.com/storbukas/personlig-bilskilt
Gå inn i mappen
cd personlig-bilskilt
Istaller avhengigheter
npm install
Kjør opp applikasjonen
npm run build
npm start
For hver endring du gjør er du nødt til å bygge på nytt for å se resultatet, med npm run build
Hvis du vil serve applikasjonen med hot-reloading, kan du kjøre følgende
npm run start:dev
Så er applikasjonen tilgjengelig på port 8080, altså http://localhost:8080
App listening on port 8080
Forutsetter at du allerede har satt opp et prosjekt på Google Cloud.
Eksempel under forutsetter at du bruker Google Cloud Shell, noen av eksemplene som Wev Preview gjelder ikke dersom du benytter lokal terminal.
Start med å hente repoet
git clone https://github.com/storbukas/personlig-bilskilt
Gå inn i mappen
cd personlig-bilskilt
Cloud Shell lar deg teste applikasjonen før du deployer, sånn at du kan sjekke at den kjører som forventet.
For å teste applikasjonen, skriv inn følgende
export PORT=8080 && npm install
npm start
Se en forhåndsvisning av appen din ved å trykke på "Web preview"
For å deploye applikasjonen må du kjøre
gcloud app deploy
Dersom deploy er vellyket, vil du få en melding som ligner på denne
Updating service [personlig-bilskilt]...done.
Setting traffic split for service [personlig-bilskilt]...done.
Deployed service [personlig-bilskilt] to [https://personlig-bilskilt-dot-storbukas-no.uc.r.appspot.com]
You can stream logs from the command line by running:
$ gcloud app logs tail -s personlig-bilskilt
To view your application in the web browser run:
$ gcloud app browse -s personlig-bilskilt
I mitt tilfelle kan jeg nå min applikasjon på: https://personlig-bilskilt-dot-storbukas-no.uc.r.appspot.com
Jeg ønsket å ha en litt kortere URL, og valgte derfor å sette opp dispatch.yaml og custom domain.
dispatch.yaml
dispatch:
- url: personlig-bilskilt.storbukas.no/*
service: personlig-bilskiltSlik at jeg kan nå applikasjonen via https://personlig-bilskilt.storbukas.no.
Deploy til App Engine (GitHub Action) bruker secrets som må bli satt opp dersom du forker repoet, og vil at endringer på master automatisk blir deployet til GCP.
- name: Setup Cloud SDK
uses: google-github-actions/setup-gcloud@v0.2.0
with:
project_id: ${{ secrets.GCP_PROJECT }}
service_account_key: ${{ secrets.GCP_SA_KEY }}-
Opprett et nytt Google Cloud Project (eller velg et eksisterende prosjekt)
-
Opprett en Google Cloud-tjenestekonto eller velg en eksisterende
-
Legg til følgende Cloud IAM-roller i tjenestekontoen din:
-
App Engine Admin- tillater oppretting av nye App Engine-apper -
Service Account User- kreves for å distribuere til App Engine som servicekonto -
Storage Admin- tillater opplasting av kildekoden -
Cloud Build Editor- tillater bygging av kildekode
-
-
Last ned en JSON-tjenestekontonøkkel for tjenestekontoen
-
Legg til følgende secrets i repoet:
-
GCP_PROJECT: Google Cloud-prosjekt-ID -
GCP_SA_KEY: den nedlastede tjenestekontonøkkelen
-
Det er også mulig å bruke <script> taggen i SVG for å endre tekst basert på query params, men siden GitHub sanerer SVG-filer det linkes til og fjerner <script> taggen har jeg lagd en enkel Node.js og Express server som håndterer dette.
Dette kan du teste her: http://git.storbukas.no/personlig-kjennemerke.svg?kjennemerke=GITHUB
Rådata for SVG-filen
<svg width="62.5mm" height="16.4042mm" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'>
<script>//<![CDATA[
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
function init(evt) {
var svgDocument = evt.target.ownerDocument;
var svgRoot = svgDocument.documentElement;
var kjennemerkeSvg = svgRoot.getElementById("kjennemerkeText");
var kjennemerkeNode = kjennemerkeSvg.childNodes[0];
var kjennemerke = GetURLParameter('kjennemerke');
if (kjennemerke) {
kjennemerkeNode.nodeValue = kjennemerke.toUpperCase();
}
}
//]]>
</script>
<desc>Created by Lars Erik Storbukås</desc>
<!-- BILSKILT -->
<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel">
<!-- SKILTRAMME -->
<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M12,8 L224,8 C226.209,8 228,9.79086 228,12 L228,50 C228,52.2091 226.209,54 224,54 L12,54 C9.79086,54 8,52.2091 8,50 L8,12 C8,9.79086 9.79086,8 12,8 " />
</g>
<!-- BAKGRUNNSFARGE FLAGGBÅND -->
<g fill="#003399" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M15,10 L29,10 L29,52 L15,52 C12.2386,52 10,49.7614 10,47 L10,15 C10,12.2386 12.2386,10 15,10 " />
</g>
<!-- LANDSKODE NORGE -->
<g fill="#ffffff" fill-opacity="1" stroke="none" transform="matrix(0.0872069,0,0,0.0909609,9.28749,10.0998)">
<path vector-effect="none" fill-rule="nonzero" d="M176.49,395.13 L145.442,395.13 L92.408,309.369 L92.408,395.13 L62.87,395.13 L62.87,270.18 L101.387,270.18 L146.953,341.759 L146.953,270.18 L176.491,270.18 L176.49,395.13" />
</g>
<!-- FLAGG - RØDFARGE -->
<g fill="#ef2b2d" fill-opacity="1" stroke="none" transform="matrix(0.0890639,0,0,0.0890639,10,10.0998)">
<path vector-effect="none" fill-rule="evenodd" d="M23.645,62.481 L189.565,62.481 L189.565,183.151 L23.645,183.151 L23.645,62.481" />
</g>
<!-- FLAGG - HVITFARGE -->
<g fill="#ffffff" fill-opacity="1" stroke="none" transform="matrix(0.0890639,0,0,0.0890639,10,10.0998)">
<path vector-effect="none" fill-rule="evenodd" d="M68.895,62.481 L99.062,62.481 L99.062,183.151 L68.895,183.151 L68.895,62.481" />
</g>
<g fill="#ffffff" fill-opacity="1" stroke="none" transform="matrix(0.0890639,0,0,0.0890639,10,10.0998)">
<path vector-effect="none" fill-rule="evenodd" d="M23.645,107.73 L189.565,107.73 L189.565,137.897 L23.645,137.897 L23.645,107.73" />
</g>
<!-- FLAGG - BLÅFARGE -->
<g fill="#002868" fill-opacity="1" stroke="none" transform="matrix(0.0890639,0,0,0.0890639,10,10.0998)">
<path vector-effect="none" fill-rule="evenodd" d="M76.437,62.481 L91.52,62.481 L91.52,183.151 L76.437,183.151 L76.437,62.481" />
</g>
<g fill="#002868" fill-opacity="1" stroke="none" transform="matrix(0.0890639,0,0,0.0890639,10,10.0998)">
<path vector-effect="none" fill-rule="evenodd" d="M23.645,115.27 L189.565,115.27 L189.565,130.353 L23.645,130.353 L23.645,115.27" />
</g>
<!-- BAKGRUNNSFARGE SKILT -->
<g fill="#FFFFFF" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M29,10 L221,10 C223.761,10 226,12.2386 226,15 L226,47 C226,49.7614 223.761,52 221,52 L29,52 L29,10" />
</g>
<!-- TEKST SKILT-->
<text id="kjennemerkeText" x="127" y="44" fill="#000000" stroke="#000000" font-size="36px" letter-spacing="2" text-anchor="middle" font-family="LFT Etica, Lucida Sans Unicode, Lucida Grande, sans-serif">GEEK</text>
</g>
</svg>Du kan også laste ned SVG-filen direkte, og endre teksten som vises der (da kan du også fjerne <script> taggen).
Alle bidrag er velkomne.
Vi bruker SemVer for versjonering. For tilgjengelige versjoner, se releases i dette repoet.
Dette prosjektet er lisensiert under MIT-lisensen - se LISENS-filen for detaljer.