code-challenge/index.js at master · Stanko/code-challenge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
const yaml = require('js-yaml');
const fs = require('fs');

let data;

try {
  data = yaml.load(fs.readFileSync('./data.yaml', 'utf8'));
} catch (e) {
  console.log(e);
  process.exit();
}

const htmlTemplate = fs.readFileSync('./template.html', 'utf8');

const weeks = {};

data.submissions.forEach((submission) => {
  if (!weeks[submission.week]) {
    weeks[submission.week] = [];
  }

  weeks[submission.week].push(submission);
});

const html = [];

Object.keys(weeks)
  .sort((a, b) => a.localeCompare(b))
  .forEach((week, i) => {
    const items = [];

    weeks[week]
      .sort((a, b) => a.author.localeCompare(b.author))
      .map((submission) => {
        const sourceCodeLink = submission['link-to-source-code']
          ? `<span class="separator" aria-hidden>&bull;</span>
          <a href="${submission['link-to-source-code']}">Source code</a>`
          : '';
        const notes = submission.notes
          ? `<p class="notes">${submission.notes}</p>`
          : '';

        const winner = submission.winner
          ? ` <span class="winner" title="Winning submission!" aria-label="Winning submission!">🍫</pan>`
          : '';

        const star = submission.star
          ? ` <span class="star" title="Submission with the most reactions on Slack!" aria-label="Submission with the most reactions on Slack!">⭐</pan>`
          : '';

        items.push(`
          <li class="submission">
            <h3 class="author">${submission.author}${winner}${star}</h3>
            <div class="links">
              <a href="${submission.link}">Demo</a>
              ${sourceCodeLink}
            </div>
            ${notes}
          </li>`);
      });

    const weekIndex = parseInt(week, 10);
    const isExpanded = i === 0;

    if (i === 0) {
      html.push('<div class="eyebrow">Weeks:</div>');
    }

    html.push(`
      <div class="week" id="week-${weekIndex}">
        <h2 class="week-title">
          <button
            type="button"
            aria-expanded="${isExpanded.toString()}"
            aria-controls="submissions-${weekIndex}"
          >
            ${week.replace(/^0/, '')}
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
            </svg>
          </button>
        </h2>
        <ul class="submissions" id="submissions-${weekIndex}" style="${
      isExpanded ? '' : 'display: none'
    }">
          ${items.join('\n')}
        </ul>
      </div>`);
  });

const index = htmlTemplate.replace(
  '<!-- CONTENT GOES HERE -->',
  html.join('\n')
);

const BUILD_DIR = './build';

if (!fs.existsSync(BUILD_DIR)) {
  fs.mkdirSync(BUILD_DIR);
}

fs.writeFileSync(`${BUILD_DIR}/index.html`, index, { encoding: 'utf-8' });

const FILES_TO_COPY = [
  'index.css',
  'icon.ico',
  'icon-16.png',
  'icon-32.png',
  'icon-180.png',
  'weekly-code-challenge.png',
].forEach((fileName) => {
  fs.copyFileSync(fileName, `${BUILD_DIR}/${fileName}`);
});