nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

variant: add download for generator #188

Browse source
This commit is contained in:
Sören Weber 2022-02-19 14:21:16 +01:00
parent 864d1d83ab
commit 83393ef5b8
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 42 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
exampleSite/content/basics/generator/_index.en.md
View file

@ -18,6 +18,8 @@ This is best seen in the `neon` variant with the differnet headings colors. Ther
<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
<a id="vardownload" class="btn btn-default">Download color variant</a>
<script>
function initGraph(){
var graphDefinition = generateGraph();
@ -30,8 +32,32 @@ function initGraph(){
generateGraphStyles();
}
}, 100 );
var btn = document.querySelector( '#vardownload' );
btn.addEventListener('click', getStylesheet);
};
function download(data, mimetype, filename){
// Creating a Blob for having a csv file format
// and passing the data with type
const blob = new Blob([data], { type: mimetype });
// Creating an object for downloading url
const url = window.URL.createObjectURL(blob);
// Creating an anchor(a) tag of HTML
const a = document.createElement('a');
// Passing the blob downloading url
a.setAttribute('href', url);
// Setting the anchor tag attribute for downloading
// and passing the download file name
a.setAttribute('download', filename);
// Performing a download with click
a.click();
}
function getStylesheet(){
download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' );
}
function adjustCSSRules(selector, props, sheets){
// get stylesheet(s)
if (!sheets) sheets = [...document.styleSheets];
@ -61,6 +87,10 @@ function adjustCSSRules(selector, props, sheets){
}
}
function getColorValue( c ){
return getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ).trim();
}
function changeColor( c ){
var style = null;
var theme = getTheme();
@ -82,7 +112,7 @@ function changeColor( c ){
}
var r = document.querySelector( ':root' );
var v = getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ).trim();
var v = getColorValue( c );
var n = prompt( '--'+c, v ).trim();
if( n ){
r = style.quer
@ -93,6 +123,15 @@ function changeColor( c ){
}
}
function generateStylesheet(){
var style =
'/* ' + themename + ' */\n' +
':root {\n' +
variables.reduce( function( a, e ){ return a + ' --' + e.name + ': ' + getColorValue(e.name) + ';\n'; }, '' ) +
'}\n';
return style;
}
function styleGroup( selector, colorvar ){
adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
@ -173,6 +212,7 @@ function generateGraph(){
return graph;
}
var themename = 'my-variant';
var variables = [
{ name: 'MAIN-TEXT-color', group: 'content', default: '#101010' },
{ name: 'MAIN-LINK-color', group: 'content', default: '#486ac9' },

2
layouts/partials/stylesheet.html
View file

@ -36,7 +36,7 @@
if( !s || !s.match ){
return '';
}
var matches = s.match(/^.*\/theme-(.*?)\.css.*$/);
var matches = s.match(/^.*\/?theme-(.*?)\.css.*$/);
var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
return theme;
}