Relaxed report init

.gitignore

@@ -0,0 +1 @@
+*.ms14 (Security copy)

report/0_intro.pug

@@ -0,0 +1 @@
+p yada

report/1_low_pass/1_low_pass.pug

@@ -0,0 +1,37 @@
+h2 Κατωδιαβατό φίλτρο Inverse Chebyshev
+br
+p.
+	Με βάση το ΑΕΜ (8261), υπολογίστηκαν οι προδιαγραφές του κατωδιαβατού φίλτρου προς σχεδίαση:
+
+figure.block-center.width-15cm
+	table.ui.celled.structured.table.teal.striped.center.aligned
+		thead
+			tr
+				th Προδιαγραφή
+				th(colspan="2") Τιμή
+		tbody
+			tr
+				td f#[sub pass]
+				td 1000
+				td 500
+			tr
+				td f#[sub stop]
+				td 1200
+				td 500
+			tr
+				td a#[sub max]
+				td(colspan="2") 0.6
+			tr
+				td a#[sub min]
+				td(colspan="2") 24
+	figcaption
+		.reference Πίνακας 1
+		.caption.
+			Προδιαγραφές σχεδίασης κατωδιαβατού φίλτρου
+
+h3 Σχεδίαση φίλτρου
+//h4 Υπολογισμός συνάρτησης μεταφοράς
+//h4 Υλοποίηση συνάρτησης μεταφοράς
+//h4 Ρύθμιση κέρδους
+h3 Μελέτη συνάρτησης μεταφοράς στο Matlab
+h3 Υλοποίηση κυκλώματος στο Multisim

report/config.yaml

@@ -0,0 +1,2 @@
+plugins:
+  - mathjax

report/diagrams/diagram.mermaid

@@ -0,0 +1,6 @@
+graph LR
+  mermaid --> svg
+  vega-lite --> svg
+  svg --> html
+  pug --> html
+  html -->|Chrome| pdf

report/diagrams/plot.vegalite.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
+  "data": {
+    "values": [
+      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
+      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
+      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52},
+      {"a": "J","b": 19}, {"a": "K","b": 87}, {"a": "L","b": 52},
+      {"a": "M","b": 19}, {"a": "N","b": 87}, {"a": "O","b": 52}
+    ]
+   },
+  "mark": "bar",
+  "encoding": {
+    "x": {"field": "a", "type": "ordinal"},
+    "y": {"field": "b", "type": "quantitative"},
+    "color": {"value": "#b4588c"}
+  }
+}

report/report.pug

@@ -0,0 +1,137 @@
+.report-sidebar: p Σύνθεση Ενεργών και Παθητικών Κυκλωμάτων
+
+br
+br
+br
+div.center
+  h2.no-count ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
+  h2.no-count ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
+  h2.no-count ΤΟΜΕΑΣ ΗΛΕΚΤΡΟΝΙΚΗΣ
+  br
+  br
+  br
+  br
+  h1#title ΣΥΝΘΕΣΗ ΕΝΕΡΓΩΝ ΚΑΙ ΠΑΘΗΤΙΚΩΝ ΚΥΚΛΩΜΑΤΩΝ
+  h3.no-count 7ο εξάμηνο
+  br
+  br
+  br
+  br
+  h3.no-count.
+    Εισηγητής: Θεοχάρης Ι.<br/>
+    Φανάκης Απόστολος, 8261
+  br
+  span Θεσσαλονίκη 2018
+
+div(style="page-break-before:always")
+
+//Insert components table here!
+include 0_intro
+include 1_low_pass/1_low_pass
+//- include 2_band_pass
+//- include 3_band_elimination
+//- include 4_high_pass
+
+.summary.ui.piled.segment: span.
+
+  We tend to prefer mark-up languages (Markdown, LaTeX, etc.) to interfaced document editors like MS Office or Google Docs, because they make it easier to quickly write documents with consistent style. However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure syntax and errors that also make it difficult to go off the beaten tracks.
+  This report introduces ReLaXed, a solution using Pug and SCSS for document definition and Google Chrome for rendering.
+
+:markdown-it
+
+  ## Web technologies have never looked so good
+  
+  Plenty of CSS frameworks will make sure your documents will look clean and modern. Javascript frameworks can plot schemas, highlight code, or render maths equations the same way LaTeX does. Millions of people (and growing) are now fluent in these technologies. Shorthand languages like Pug and SCSS are finally making it fun to write HTML and CSS. (Headless) web browsers can easily turn all these technologies into PDF, on any platform.
+  
+  As an illustration, it took just one line to import the Semantic UI framework and style this document. Now look at this gorgeous table (don't pay attention to the content, it's place-holder)
+          
+p Here is another cool component provided by Semantic UI:  
+.ui.container
+  .ui.icon.message.yellow.block-center
+    i.lightbulb.outline.icon
+    .content
+      .header Give it a try !
+      p
+      | The ReLaXed homepage is at 
+      a(href='https://github.com/RelaxedJS/ReLaXed') github.com/RelaxedJS/ReLaXed
+
+figure.float-left.width-8cm.ui.raised.segment
+  .panel
+    .label A
+    include diagrams/plot.svg
+  .panel
+    .label B
+    .top-5mm
+      include diagrams/diagram.svg
+
+  figcaption
+    .reference Figure 1
+    .title Examples of graphics generated by web frameworks.
+    .caption.
+      This also demonstrates figure composition into panels - suck it, markdown !
+      #[b A. ] Graph defined as a JSON and transformed to SVG using Vega-lite and Chrome.
+      #[b B. ] Graph generated using Mermaid and Chrome.
+
+:markdown-it(html=true)
+  Next we will have a look at some differences between ReLaXed and other frameworks.
+
+  ## ReLaXed vs other solutions
+
+  Here are a few highlights of what you may win, or lose, using ReLaXed instead
+  of another solution. This section is of course open to contributions.
+
+  Let us start with Markdown. This widely supported language (Github, NPM, etc.)
+  became very popular due to its simple and friendly syntax close to plain text.
+  Markdown also has cool editors and extensions. One example is
+  [``markdown-preview-enhanced``](https://atom.io/packages/markdown-preview-enhanced)
+  which can render plots, flowcharts, and equations.
+
+  ReLaXed has been specially extended so that it could support plot, flowchart,
+  and equations (using the same underlying libraries as
+  markdown-preview-enhanced), as illustrated in Figure 1. In addition, ReLaXed
+  allows you to write any kind of layout with boxes, sidebars, etc. HTML
+  elements are more fun to write with Pug (in markdown, HTML elements must be
+  written in plain HTML). You can define macros, use conditionals and loops, use
+  computed expressions using Javascript , and ReLaXed supports (S)CSS which is
+  pretty cool. Last but not least, you can write parts in markdown if you want
+  to <i class="em em-wink"></i> . Yep, that was an emoji. Cost us one line of
+  code, to import [Emoji CSS](https://afeld.github.io/emoji-css/) as a
+  stylesheet.
+
+  Now what about LaTeX ? Sure, LaTeX is wide-spread in academic and publishing
+  communities, where it's typography and layout optimizations, and its
+  bibliography management tool are very appreciated. But LaTeX is also known for
+  its cryptic errors, its complex advanced syntax which not many make the effort
+  to learn, and as a consequence not many LaTeX venture on the creative side
+  with their own themes and layouts.
+
+div(style="page-break-before:always")
+
+:markdown-it(html=true)
+
+  Certainly the letter and paragraph spacings won't be as nice in ReLaXed (but
+  Google Chrome is still doing a very good job), but the syntax, clear error
+  messages, etc. will certainly make  you happier. ReLaXed is also possibly
+  faster to render big documents (not entirely sure though <i class="em
+  em-thinking_face"></i>).
+
+template#page-footer
+  style(type='text/css').
+    .pdfheader {
+      font-size: 10px;
+      color: #aaa;
+      font-family: Helvetica;
+      font-weight: bold;
+      width: 1000px;
+      border-top: 1px solid #aaa;
+      margin-left: 10%;
+      margin-right: 10%;
+      padding-top: 1mm;
+      margin-bottom: -1mm;
+      text-align: center;
+    }
+  
+  .pdfheader Page #[span.pageNumber] / #[span.totalPages]
+
+style
+  include:scss report.scss

report/report.scss

@@ -0,0 +1,174 @@
+@import 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css';
+@import 'https://afeld.github.io/emoji-css/emoji.css';
+
+$primary_color: #009688;
+$page-width: 17cm;
+
+@page {
+  margin: 1cm 1cm 2cm 0cm;
+}
+
+html {
+  padding-left: 1cm;
+  padding-right: 1cm;
+  font-family: 'Lato';
+  font-size: 14px !important;
+}
+
+body {
+  margin-left: 1cm;
+  counter-reset: h2;
+}
+
+#title {
+  font-weight: bold;
+  font-size: 2.5em;
+}
+
+.summary {
+  background-color: lighten($primary_color, 33%);
+}
+
+h2 {
+  font-size: 1.8em;
+  counter-reset: h3;
+}
+
+h2:before {
+  counter-increment: h2;
+  content: counter(h2) ". "
+}
+
+h3:before {
+  counter-increment: h3;
+  content: counter(h2) "." counter(h3) ". "
+}
+
+h2.no-count:before, h3.no-count:before {
+  content: "";
+  counter-increment: none;
+}
+
+p {
+  line-height: 1.5em;
+  font-size: 1.1em !important;
+  text-align: justify;
+}
+
+a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+$sidebar-width: 0.25in;
+$sidebar-height: 943px;
+
+.report-sidebar {
+  position: fixed;
+  left: -$sidebar-width;
+  top: 0;
+  width: $sidebar-width;
+  height: $sidebar-height;
+  writing-mode: vertical-rl;
+  border-top: $sidebar-width solid transparent;
+  border-left: $sidebar-width solid lighten($primary_color, 10%);
+  border-bottom: $sidebar-width solid transparent;
+  p {
+    text-align: center;
+    color: lighten($primary_color, 30%);
+    margin-top: -1.55em;
+  }
+}
+
+.block-center {
+  display: block;
+  margin: 0 auto;
+}
+
+.mermaid-svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  .node {
+    rect {
+      fill: none;
+      rx: 5px;
+      ry: 5px;
+      stroke: black;
+
+    }
+  }
+  .edgelabel {
+    background: white;
+    color: #444;
+  }
+}
+
+.message, figure {
+  page-break-inside: avoid;
+}
+
+.message {
+  margin-bottom: 1em !important;
+}
+
+figure {
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+  padding: 0.5em;
+  &> .panel {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    &> .label {
+      font-weight: bold;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  &.float-left {
+    margin-left: -1em !important;
+    margin-right: 2em !important;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    float: left;
+  }
+  figcaption {
+    font-size: 0.75em;
+    text-align: justify;
+    width: 100%;
+    margin-top: 1em;
+    &> .reference, .title {
+      font-weight: bold;
+
+      display: inline;
+      margin-right: 0.5em;
+    }
+    &> .reference {
+      color: darken($primary_color, 50%);
+      &::after {
+        content: ': ';
+      }
+    }
+    &> .title {
+      color: darken($primary_color, 40%);
+    }
+    &> .caption {
+      display: inline;
+    }
+  }
+}
+
+@for $i from 1 to 20 {
+  .width-#{$i}cm { width: #{10 * $i}mm !important; }
+}
+
+@for $i from 1 to 20 {
+  .top-#{$i}mm { margin-top: #{$i}mm; }
+}
+
+.center {
+  text-align: center;
+}