diff --git a/app.py b/app.py index 5ef9e6aaaa81592781c79be660d4e7bd29369dda..9b7bd0d620b7bcaaefa3049b32fea4f6decc48ae 100644 --- a/app.py +++ b/app.py @@ -53,7 +53,7 @@ autofix = [ # every arrowshead into lines [re.compile("[<{]"), "("], - [re.compile("[>}L]"), ")"], + [re.compile("[>}]"), ")"], [re.compile("[vV]"), "-"], [re.compile("[\\^]"), "-"], diff --git a/requirements.txt b/requirements.txt index 0eb56cde55b46acb6505560d24f7cc6d5b5ba89f..943be229eade8ed6079899a7770f40539c806ae0 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1,3 @@ Flask -requests \ No newline at end of file +requests +vpype \ No newline at end of file diff --git a/static/css/interface.css b/static/css/interface.css index 9f9109ade2ee6e4091ab963a34524c7842008302..2972f28861f08aa69092058c84528a5e3363db66 100644 --- a/static/css/interface.css +++ b/static/css/interface.css @@ -204,8 +204,8 @@ aside.left{ ================================================= */ .title.font{ - padding: 2rem 2rem; - gap: 1rem var(--bar-h); + padding: 2rem 2rem 4rem; + gap: 0 var(--bar-h); grid-template-columns: repeat(2, calc(50% - calc(var(--bar-h) / 2))); } .title .f-ascii{ @@ -224,34 +224,23 @@ aside.left{ border: none; width: auto; } -.title .special{ - grid-column: 1 / -1; - grid-row: 2 / span 1; -} - -ul.special{ - display: flex; - gap: 1rem; - justify-content: center; - align-items: center; +.title svg { + overflow: visible; + max-width: 100%; + grid-column: span 2; + max-height: 24rem; + margin: 0 auto; } -.special .materiality{ - display: block; - border: 1px solid currentColor; - padding: 1rem 2rem; - border-radius: 2rem; - text-decoration: none; - text-align: center; +.title svg a{ + fill: var(--c-link); } -.special .choice{ - display: flex; - gap: 1rem; - flex-direction: column; +.title svg a.software{ + font-weight: bold; } -ul.classic{ - list-style: initial; - padding: 0 1rem; - margin: 0.5rem 0; +.title .intro{ + margin: 1rem auto; + grid-column: span 2; + max-width: 48rem; } /* font diff --git a/templates/base.html b/templates/base.html index 91500c21cd67a44fda1ee3546af67530d4b96967..3a651ed49cc7f84fcb3d73a31ffaf78c95ec2afa 100644 --- a/templates/base.html +++ b/templates/base.html @@ -26,11 +26,11 @@ <nav class="tabs"> <ul> - <li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/"> index</a></li> - <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">draw</a></li> - <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">catalogue</a></li> - <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li> - <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li> + <li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/">about</a></li> + <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">ASCII draw</a></li> + <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</a></li> + <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">FIGfont catalogue</a></li> + <!-- <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li> --> </ul> </nav> diff --git a/templates/index.html b/templates/index.html index e66a46b4d49cd62e9eea3fd718dffce4a3df9038..bcd3f0db2e91ea10368594669679ae9c7f9a038f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -15,50 +15,179 @@ {% include 'logo.svg' %} </div> - <ul class="special"> - <li class="choice"> - <div class="materiality"><a href="https://etherpad.org/" target="_blank">Etherpad</a></div> - <div class="materiality"><a href="http://www.figlet.org/" target="_blank">FIGlet</a></div> - </li> - <li>2</li> - <li class="materiality">ASCII</li> - <li>2 <a href="https://ivanceras.github.io/svgbob-editor/" target="_blank">Svgbob.rs</a></li> - <li class="materiality">SVG</li> - <li>2 <a href="https://github.com/abey79/vpype" target="_blank">vpype</a></li> - <li class="materiality">HPGL</li> - </ul> - </div> - <div class="box two-columns"> - <div> - <h2>Cobbled paths</h2> - <p> - It is a web interface that brings multiple tools together, to allow experimental and direct collaboration on - pen-plotted drawings by making Ascii art. - </p> - <p> - It makes a way from the blocky discontinuity of Ascii drawings, - to the smoothness of bezier curves, - to an anologic pen-plotter interpretation. - </p> - <p> - Like cobbled paths, none of those technologies are new, and we've been walking on them for years. - </p> + <div class="intro"> + <p> + Cobbled Paths is a web interface that brings multiple tools together, to allow experimental and direct collaboration on + pen-plotted drawings by making Ascii art. + </p> + <p> + It makes a way from the blocky discontinuity of Ascii drawings, + to the smoothness of bezier curves, + to an anologic pen-plotter interpretation. + </p> + </div> + + <svg viewBox="0.00 0.00 1228.37 384.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 380)"> + <!-- DB1 --> + <g id="node1" class="node"> + <polygon fill="none" stroke="black" points="107.18,-230 104.18,-234 83.18,-234 80.18,-230 27.18,-230 27.18,-193 107.18,-193 107.18,-230"></polygon> + <text text-anchor="middle" x="67.18" y="-207.8" font-family="Liberation Mono" font-size="14.00">default</text> + </g> + <!-- DB --> + <g id="node4" class="node"> + <polygon fill="none" stroke="black" points="394.86,-310.5 391.86,-314.5 370.86,-314.5 367.86,-310.5 272.86,-310.5 272.86,-258.5 394.86,-258.5 394.86,-310.5"></polygon> + <text text-anchor="middle" x="333.86" y="-288.3" font-family="Liberation Mono" font-size="14.00">FIGlet font </text> + <text text-anchor="middle" x="333.86" y="-273.3" font-family="Liberation Mono" font-size="14.00">Catalogue</text> + </g> + <!-- DB1->DB --> + <g id="edge1" class="edge"> + <path fill="none" stroke="black" d="M108.18,-211.5C184.25,-211.5 191.66,-278.09 261.57,-284.07"></path> + <polygon fill="black" stroke="black" points="261.72,-287.58 271.86,-284.5 262.01,-280.59 261.72,-287.58"></polygon> + </g> + <!-- DB2 --> + <g id="node2" class="node"> + <polygon fill="none" stroke="black" points="123.68,-376 120.68,-380 99.68,-380 96.68,-376 10.68,-376 10.68,-339 123.68,-339 123.68,-376"></polygon> + <text text-anchor="middle" x="67.18" y="-353.8" font-family="Liberation Mono" font-size="14.00">contributed</text> + </g> + <!-- DB2->DB --> + <g id="edge2" class="edge"> + <path fill="none" stroke="black" d="M125.18,-357.5C194.44,-357.5 198.77,-291.45 261.69,-285.01"></path> + <polygon fill="black" stroke="black" points="262.05,-288.49 271.86,-284.5 261.7,-281.5 262.05,-288.49"></polygon> + </g> + <!-- DB3 --> + <g id="node3" class="node"> + <polygon fill="none" stroke="black" points="95.18,-303 92.18,-307 71.18,-307 68.18,-303 39.18,-303 39.18,-266 95.18,-266 95.18,-303"></polygon> + <text text-anchor="middle" x="67.18" y="-280.8" font-family="Liberation Mono" font-size="14.00">JAVe</text> + </g> + <!-- DB3->DB --> + <g id="edge3" class="edge"> + <path fill="none" stroke="black" d="M96.18,-284.5C170.75,-284.5 191.91,-284.5 261.68,-284.5"></path> + <polygon fill="black" stroke="black" points="261.86,-288 271.86,-284.5 261.86,-281 261.86,-288"></polygon> + </g> + <!-- FLF --> + <g id="node8" class="node"> + <polygon fill="none" stroke="black" points="728.37,-199.5 623.37,-199.5 623.37,-163.5 728.37,-163.5 728.37,-199.5"></polygon> + <text text-anchor="middle" x="675.87" y="-177.8" font-family="Liberation Mono" font-size="14.00">FIGlet font</text> + </g> + <!-- DB->FLF --> + <g id="edge8" class="edge"> + <path fill="none" stroke="black" d="M395.17,-265.89C442.87,-250.77 510.93,-228.27 569.37,-205.5 590.21,-197.38 595.67,-185.69 613.05,-182.39"></path> + <polygon fill="black" stroke="black" points="613.71,-185.85 623.37,-181.5 613.11,-178.87 613.71,-185.85"></polygon> + </g> + <!-- ETHER --> + <g id="node5" class="node"> + <a href="https://etherpad.org/" class="software" target="_blank"> + <ellipse fill="none" stroke="black" cx="67.18" cy="-126.5" rx="67.35" ry="30.31"></ellipse> + <text text-anchor="middle" x="67.18" y="-122.8" font-family="Liberation Mono" font-size="14.00">Etherpad</text> + </a> + </g> + <!-- cASCII --> + <g id="node6" class="node"> + <ellipse fill="none" stroke="black" cx="333.86" cy="-63.5" rx="84.29" ry="41.02"></ellipse> + <text text-anchor="middle" x="333.86" y="-67.3" font-family="Liberation Mono" font-size="14.00">Free Ascii </text> + <text text-anchor="middle" x="333.86" y="-52.3" font-family="Liberation Mono" font-size="14.00">drawing</text> + <text text-anchor="middle" x="333.86" y="-02.3" font-family="Liberation Mono" font-size="14.00"> + <a href="https://www.asciiart.eu/">asciiart.eu</a> + </text> + </g> + <!-- ETHER->cASCII --> + <g id="edge4" class="edge"> + <path fill="none" stroke="black" d="M126.92,-112.52C162.44,-104.06 208.33,-93.14 247.78,-83.75"></path> + <polygon fill="black" stroke="black" points="248.74,-87.12 257.66,-81.4 247.12,-80.31 248.74,-87.12"></polygon> + </g> + <!-- cFLF --> + <g id="node7" class="node"> + <ellipse fill="none" stroke="black" cx="333.86" cy="-181.5" rx="90.52" ry="41.02"></ellipse> + <text text-anchor="middle" x="333.86" y="-185.3" font-family="Liberation Mono" font-size="14.00">FIGlet font </text> + <text text-anchor="middle" x="333.86" y="-170.3" font-family="Liberation Mono" font-size="14.00">making</text> + <text text-anchor="middle" x="333.86" y="-120.3" font-family="Liberation Mono" font-size="14.00"> + <a href="http://www.jave.de/figlet/figfont.html">FIGfont Specs</a> + </text> + </g> + <!-- ETHER->cFLF --> + <g id="edge5" class="edge"> + <path fill="none" stroke="black" d="M128.57,-139.05C161.9,-145.98 203.99,-154.72 241.28,-162.47"></path> + <polygon fill="black" stroke="black" points="240.65,-165.91 251.16,-164.52 242.08,-159.06 240.65,-165.91"></polygon> + </g> + <!-- ASCII --> + <g id="node9" class="node"> + <polygon fill="none" stroke="black" points="703.87,-89.5 647.87,-89.5 647.87,-53.5 703.87,-53.5 703.87,-89.5"></polygon> + <text text-anchor="middle" x="675.87" y="-67.8" font-family="Liberation Mono" font-size="14.00">ASCII</text> + </g> + <!-- cASCII->ASCII --> + <g id="edge6" class="edge"> + <path fill="none" stroke="black" d="M418.04,-65.46C488.11,-67.11 585.1,-69.39 637.56,-70.62"></path> + <polygon fill="black" stroke="black" points="637.66,-74.13 647.74,-70.86 637.83,-67.13 637.66,-74.13"></polygon> + <text text-anchor="middle" x="523.87" y="-73.3" font-family="Liberation Mono" font-size="14.00">/export/txt</text> + </g> + <!-- cFLF->FLF --> + <g id="edge7" class="edge"> + <path fill="none" stroke="black" d="M424.53,-181.5C478.59,-181.5 549.15,-181.5 613.16,-181.5"></path> + <polygon fill="black" stroke="black" points="613.37,-185 623.37,-181.5 613.37,-178 613.37,-185"></polygon> + <text text-anchor="middle" x="523.87" y="-185.3" font-family="Liberation Mono" font-size="14.00">/export/txt</text> + </g> + <!-- FLF->ASCII --> + <g id="edge9" class="edge"> + <a href="http://www.figlet.org/" target="_blank" class="software"> + <path fill="none" stroke="black" d="M675.87,-163.31C675.87,-146.02 675.87,-119.77 675.87,-99.76"></path> + <polygon fill="black" stroke="black" points="679.37,-99.66 675.87,-89.66 672.37,-99.66 679.37,-99.66"></polygon> + <text text-anchor="middle" x="665.37" y="-122.8" font-family="Liberation Mono" font-size="14.00">FIGlet </text> + </a> + </g> + <!-- SVG --> + <g id="node10" class="node"> + <polygon fill="none" stroke="black" points="965.37,-89.5 911.37,-89.5 911.37,-53.5 965.37,-53.5 965.37,-89.5"></polygon> + <text text-anchor="middle" x="938.37" y="-67.8" font-family="Liberation Mono" font-size="14.00">SVG</text> + </g> + <!-- ASCII->SVG --> + <g id="edge10" class="edge"> + <a href="https://ivanceras.github.io/svgbob-editor/" target="_blank" class="software"> + <path fill="none" stroke="black" d="M704.26,-71.5C751.43,-71.5 848.02,-71.5 900.86,-71.5"></path> + <polygon fill="black" stroke="black" points="901.13,-75 911.13,-71.5 901.13,-68 901.13,-75"></polygon> + <text text-anchor="middle" x="819.87" y="-80.3" font-family="Liberation Mono" font-size="14.00">svgbob.rs</text> + </a> + <a href="https://ivanceras.github.io/content/Svgbob/Specification.html"> + <text text-anchor="middle" x="819.87" y="-55.3" font-family="Liberation Mono" font-size="14.00">svgbob specs</text> + </a> + </g> + <!-- HPGL --> + <g id="node11" class="node"> + <polygon fill="none" stroke="black" points="1194.87,-131.5 1140.87,-131.5 1140.87,-95.5 1194.87,-95.5 1194.87,-131.5"></polygon> + <text text-anchor="middle" x="1167.87" y="-109.8" font-family="Liberation Mono" font-size="14.00">HPGL</text> + </g> + <!-- SVG->HPGL --> + <g id="edge11" class="edge"> + <a href="https://github.com/abey79/vpype" target="_blank" class="software"> + <path fill="none" stroke="black" d="M965.37,-71.5C1041.56,-71.5 1058.62,-109.81 1129.5,-113.25"></path> + <polygon fill="black" stroke="black" points="1129.79,-116.76 1139.87,-113.5 1129.96,-109.76 1129.79,-116.76"></polygon> + <text text-anchor="middle" x="1040.37" y="-100.3" font-family="Liberation Mono" font-size="14.00">vpype</text> + </a> + </g> + <!-- SVG2 --> + <g id="node12" class="node"> + <polygon fill="none" stroke="black" points="1220.37,-59 1115.37,-59 1115.37,0 1220.37,0 1220.37,-59"></polygon> + <text text-anchor="middle" x="1167.87" y="-40.8" font-family="Liberation Mono" font-size="14.00">SVG </text> + <text text-anchor="middle" x="1167.87" y="-25.8" font-family="Liberation Mono" font-size="14.00">simplified </text> + <text text-anchor="middle" x="1167.87" y="-10.8" font-family="Liberation Mono" font-size="14.00">& joined</text> + </g> + <!-- SVG->SVG2 --> + <g id="edge12" class="edge"> + <a href="https://github.com/abey79/vpype" target="_blank" class="software"> + <path fill="none" stroke="black" d="M965.37,-71.5C967.2,-71.5 1072.15,-41.32 1105.4,-32.13"></path> + <polygon fill="black" stroke="black" points="1106.59,-35.43 1115.37,-29.5 1104.81,-28.66 1106.59,-35.43"></polygon> + <text text-anchor="middle" x="1040.37" y="-59.3" font-family="Liberation Mono" font-size="14.00">vpype</text> + </a> + </g> + </g> + </svg> +<div class="intro"> <p> - Like cobbled paths, it is a reminder of the permeability between the discrete and the continuous, - and how regular stones can form tortuous paths. - </p> - </div> - <div> - <h2>Handfull links</h2> - <ul class="classic"> - <li><a href="http://www.jave.de/figlet/figfont.html">FIGfont Specification</a>, everything about FIGlet font file format</li> - <li><a href="https://ivanceras.github.io/content/Svgbob/Specification.html">Svgbob Specification</a>, character recognized by svgbob and how it operates</li> - <li><a href="">HPGL Specification</a></li> - <li><a href="https://www.asciiart.eu/">asciiart.eu</a>, an ascii art collection</li> - <li><a href="http://www.jave.de/">JavE</a>, an ascii drawing editor</li> - <li><a href="https://adelfaure.net/">adel faure</a>, an ascii artist</li> - </ul> - </div> + Like cobbled paths, none of those technologies are new, and we've been walking on them for years. + Like cobbled paths, it is a reminder of the permeability between the discrete and the continuous, + and how regular stones can form tortuous paths. + </p> + </div> </div> {% endblock %}