diff options
author | Vijay A <avijayr@protonmail.com> | 2021-08-21 09:03:32 +0530 |
---|---|---|
committer | Vijay A <avijayr@protonmail.com> | 2021-08-21 09:16:59 +0530 |
commit | 16d8de38b74c298fda27c22c804850a999183d57 (patch) | |
tree | 6c869677e3bb8472f5b86c92908bb256ec0c5be5 /scripts | |
parent | chore: typescript conversion (diff) | |
download | ferdium-app-16d8de38b74c298fda27c22c804850a999183d57.tar.gz ferdium-app-16d8de38b74c298fda27c22c804850a999183d57.tar.zst ferdium-app-16d8de38b74c298fda27c22c804850a999183d57.zip |
chore: move build-time js files out of 'src' and into 'scripts'
so that they not packaged into final deployable artefact
Diffstat (limited to 'scripts')
-rw-r--r-- | scripts/add-crowdin-contributors.js | 81 | ||||
-rw-r--r-- | scripts/build-theme-info.js | 97 | ||||
-rw-r--r-- | scripts/link-readme.js | 63 | ||||
-rw-r--r-- | scripts/theme/default/legacy.js | 38 |
4 files changed, 279 insertions, 0 deletions
diff --git a/scripts/add-crowdin-contributors.js b/scripts/add-crowdin-contributors.js new file mode 100644 index 000000000..05e377a94 --- /dev/null +++ b/scripts/add-crowdin-contributors.js | |||
@@ -0,0 +1,81 @@ | |||
1 | /** | ||
2 | * Add CrowdIn Contributors to AllContributors list | ||
3 | * | ||
4 | * This script will add CrowdIn Contributors to the list of all contributors. | ||
5 | * As the CrowdIn API doesn't give good access to the data needed, this script | ||
6 | * requires you to manually execute a script on the members page of CrowdIn | ||
7 | * and paste its output into this script. | ||
8 | * | ||
9 | * Usage: | ||
10 | * 1. Open https://crowdin.com/project/getferdi/settings#members | ||
11 | * 2. Open the console and execute the script below: | ||
12 | |||
13 | const members = []; | ||
14 | // All elements containing members | ||
15 | const membersEl = [...document.querySelectorAll('.ps-members-name')]; | ||
16 | // Remove the first 4 contributors as they are already in the list | ||
17 | for (let i = 0; i < 4; i += 1) { | ||
18 | membersEl.shift(); | ||
19 | } | ||
20 | membersEl.forEach((el) => { | ||
21 | const text = el.innerText; | ||
22 | let picture = el.querySelector('img').getAttribute('src'); | ||
23 | picture = picture.replace(/\?.+/, ''); | ||
24 | |||
25 | // Check if the text includes a separate username | ||
26 | if (text.includes('(')) { | ||
27 | const username = /(?<=\()\w*(?=\))/.exec(text)[0]; | ||
28 | const name = /^.*(?= \()/.exec(text)[0]; | ||
29 | |||
30 | if (username) { | ||
31 | members.push({ | ||
32 | name: name || username, | ||
33 | login: username, | ||
34 | avatar_url: picture, | ||
35 | }); | ||
36 | return; | ||
37 | } | ||
38 | } | ||
39 | members.push({ | ||
40 | name: text, | ||
41 | login: text, | ||
42 | avatar_url: picture, | ||
43 | }); | ||
44 | }); | ||
45 | |||
46 | // Output data to console | ||
47 | console.clear(); | ||
48 | console.log(JSON.stringify(members)); | ||
49 | |||
50 | * 3. Paste the output of the script (JSON Array) below to set 'list' to that value | ||
51 | * 4. Execute this script using 'node scripts/add-crowdin-contributors.js' | ||
52 | * 5. Regenerate the README table using the CLI ('all-contributors generate') | ||
53 | * Please check if the generated data is ok and no data is lost. | ||
54 | */ | ||
55 | const list = []; | ||
56 | |||
57 | const fs = require('fs-extra'); | ||
58 | const path = require('path'); | ||
59 | const allContributors = require('all-contributors-cli'); | ||
60 | |||
61 | const infoPath = path.join(__dirname, '..', '..', '.all-contributorsrc'); | ||
62 | |||
63 | (async () => { | ||
64 | const info = await fs.readJSON(infoPath); | ||
65 | |||
66 | for (const user of list) { | ||
67 | // eslint-disable-next-line no-await-in-loop | ||
68 | info.contributors = await allContributors.addContributorWithDetails({ | ||
69 | ...user, | ||
70 | contributions: ['translation'], | ||
71 | profile: `https://crowdin.com/profile/${user.login}`, | ||
72 | options: { | ||
73 | contributors: info.contributors, | ||
74 | }, | ||
75 | }); | ||
76 | } | ||
77 | |||
78 | fs.writeJSON(infoPath, info, { | ||
79 | spaces: 2, | ||
80 | }); | ||
81 | })(); | ||
diff --git a/scripts/build-theme-info.js b/scripts/build-theme-info.js new file mode 100644 index 000000000..4058be942 --- /dev/null +++ b/scripts/build-theme-info.js | |||
@@ -0,0 +1,97 @@ | |||
1 | /** | ||
2 | * Script to get information on which selectors use the brand color. | ||
3 | * This is needed to provide the accent color feature - the feature will create CSS rules | ||
4 | * to overwrite the color of these selectors. | ||
5 | */ | ||
6 | const css = require('css'); | ||
7 | const fs = require('fs-extra'); | ||
8 | const path = require('path'); | ||
9 | const theme = require('@meetfranz/theme'); | ||
10 | |||
11 | // Colors that should be replaced with the accent color | ||
12 | const accentColors = [ | ||
13 | theme.DEFAULT_ACCENT_COLOR.toLowerCase(), | ||
14 | '#7367f0', | ||
15 | '#5e50ee', | ||
16 | ]; | ||
17 | |||
18 | const cssFile = path.join(__dirname, '..', '..', 'build', 'styles', 'main.css'); | ||
19 | const outputFile = path.join(__dirname, '..', 'assets', 'themeInfo.json'); | ||
20 | |||
21 | // Parse and extract the rules from a CSS stylesheet file | ||
22 | async function getRulesFromCssFile(file) { | ||
23 | const cssSrc = (await fs.readFile(file)).toString(); | ||
24 | const cssTree = css.parse(cssSrc); | ||
25 | |||
26 | return cssTree.stylesheet.rules; | ||
27 | } | ||
28 | |||
29 | /** | ||
30 | * Get all selectors from a list of parsed CSS rules that set any property to one of the specified | ||
31 | * values. | ||
32 | * | ||
33 | * This function will output an object in this format: | ||
34 | * { | ||
35 | * 'property-name': [ array of selectors ] | ||
36 | * } | ||
37 | * | ||
38 | * e.g. | ||
39 | * { | ||
40 | * 'background-color': [ | ||
41 | * '.background', | ||
42 | * '.input-dark' | ||
43 | * ] | ||
44 | * } | ||
45 | * | ||
46 | * @param {Array} rules Rules as outputted by the `css` module | ||
47 | * @param {Array} values Array of values that should be searched for | ||
48 | */ | ||
49 | function getSelectorsDeclaringValues(rules, values) { | ||
50 | const output = {}; | ||
51 | |||
52 | rules.forEach((rule) => { | ||
53 | if (rule.declarations) { | ||
54 | rule.declarations.forEach((declaration) => { | ||
55 | if (declaration.type === 'declaration' | ||
56 | && values.includes(declaration.value.toLowerCase())) { | ||
57 | if (!output[declaration.property]) { | ||
58 | output[declaration.property] = []; | ||
59 | } | ||
60 | output[declaration.property] = output[declaration.property].concat(rule.selectors); | ||
61 | } | ||
62 | }); | ||
63 | } | ||
64 | }); | ||
65 | |||
66 | return output; | ||
67 | } | ||
68 | |||
69 | async function generateThemeInfo() { | ||
70 | if (!await fs.pathExists(cssFile)) { | ||
71 | console.log('Please make sure to build the project first.'); | ||
72 | return; | ||
73 | } | ||
74 | |||
75 | // Read and parse css bundle | ||
76 | const rules = await getRulesFromCssFile(cssFile); | ||
77 | |||
78 | console.log(`Found ${rules.length} rules`); | ||
79 | |||
80 | // Get rules specifying the brand colors | ||
81 | const brandRules = getSelectorsDeclaringValues(rules, accentColors); | ||
82 | |||
83 | console.log(`Found ${Object.keys(brandRules).join(', ')} properties that set color to brand color`); | ||
84 | |||
85 | // Join array of declarations into a single string | ||
86 | Object.keys(brandRules).forEach((rule) => { | ||
87 | brandRules[rule] = brandRules[rule].join(', '); | ||
88 | }); | ||
89 | |||
90 | // Write object with theme info to file | ||
91 | fs.writeFile( | ||
92 | outputFile, | ||
93 | JSON.stringify(brandRules), | ||
94 | ); | ||
95 | } | ||
96 | |||
97 | generateThemeInfo(); | ||
diff --git a/scripts/link-readme.js b/scripts/link-readme.js new file mode 100644 index 000000000..1e47cddf8 --- /dev/null +++ b/scripts/link-readme.js | |||
@@ -0,0 +1,63 @@ | |||
1 | /** | ||
2 | * Script that automatically creates links to issues and users inside README.md | ||
3 | * | ||
4 | * e.g. "#123" => "[#123](https://github.com/getferdi/ferdi/issues/123)" | ||
5 | * and "franz/#123" => "[franz#123](https://github.com/meetfranz/franz/issues/123)" | ||
6 | * and "@abc" => "[@abc](https://github.com/abc)" | ||
7 | */ | ||
8 | |||
9 | const fs = require('fs-extra'); | ||
10 | const path = require('path'); | ||
11 | |||
12 | console.log('Linking issues and PRs in README.md'); | ||
13 | |||
14 | const readmepath = path.join(__dirname, '..', '..', 'README.md'); | ||
15 | |||
16 | // Read README.md | ||
17 | let readme = fs.readFileSync(readmepath, 'utf-8'); | ||
18 | |||
19 | let replacements = 0; | ||
20 | |||
21 | // Replace Franz issues | ||
22 | // Regex matches strings that don't begin with a "[", i.e. are not already linked | ||
23 | // followed by a "franz#" and digits to indicate | ||
24 | // a GitHub issue, and not ending with a "]" | ||
25 | readme = readme.replace(/(?<!\[)franz#\d{1,}(?![\]\d])/gi, (match) => { | ||
26 | const issueNr = match.replace('franz#', ''); | ||
27 | replacements += 1; | ||
28 | return `[franz#${issueNr}](https://github.com/meetfranz/franz/issues/${issueNr})`; | ||
29 | }); | ||
30 | |||
31 | // Replace external issues | ||
32 | // Regex matches strings that don't begin with a "[", followed a repo name in the format "user/repo" | ||
33 | // followed by a "#" and digits to indicate a GitHub issue, and not ending with a "]" | ||
34 | readme = readme.replace(/(?<!\[)\w+\/\w+#\d{1,}(?![\]\d])/gi, (match) => { | ||
35 | const issueNr = match.replace(/\D/g, ''); | ||
36 | const repo = match.replace(/#\d+/g, ''); | ||
37 | replacements += 1; | ||
38 | return `[${repo}#${issueNr}](https://github.com/${repo}/issues/${issueNr})`; | ||
39 | }); | ||
40 | |||
41 | // Replace Ferdi issues | ||
42 | // Regex matches strings that don't begin with a "[", i.e. are not already linked and | ||
43 | // don't begin with "franz", i.e. are not Franz issues, followed by a "#" and digits to indicate | ||
44 | // a GitHub issue, and not ending with a "]" | ||
45 | readme = readme.replace(/(?<!\[|franz)#\d{1,}(?![\]\d])/gi, (match) => { | ||
46 | const issueNr = match.replace('#', ''); | ||
47 | replacements += 1; | ||
48 | return `[#${issueNr}](https://github.com/getferdi/ferdi/issues/${issueNr})`; | ||
49 | }); | ||
50 | |||
51 | // Link GitHub users | ||
52 | // Regex matches strings that don't begin with a "[", i.e. are not already linked | ||
53 | // followed by a "@" and at least one word character and not ending with a "]" | ||
54 | readme = readme.replace(/(?<!\[)@\w+(?!\])/gi, (match) => { | ||
55 | const username = match.replace('@', ''); | ||
56 | replacements += 1; | ||
57 | return `[@${username}](https://github.com/${username})`; | ||
58 | }); | ||
59 | |||
60 | // Write to file | ||
61 | fs.writeFileSync(readmepath, readme); | ||
62 | |||
63 | console.log(`Added ${replacements} strings`); | ||
diff --git a/scripts/theme/default/legacy.js b/scripts/theme/default/legacy.js new file mode 100644 index 000000000..015dca756 --- /dev/null +++ b/scripts/theme/default/legacy.js | |||
@@ -0,0 +1,38 @@ | |||
1 | /* legacy config, injected into sass at build time */ | ||
2 | export const themeBrandPrimary = '#7266F0'; | ||
3 | export const themeBrandSuccess = '#5cb85c'; | ||
4 | export const themeBrandInfo = '#5bc0de'; | ||
5 | export const themeBrandWarning = '#FF9F00'; | ||
6 | export const themeBrandDanger = '#d9534f'; | ||
7 | |||
8 | export const themeGrayDark = '#373a3c'; | ||
9 | export const themeGray = '#55595c'; | ||
10 | export const themeGrayLight = '#818a91'; | ||
11 | export const themeGrayLighter = '#eceeef'; | ||
12 | export const themeGrayLightest = '#f7f7f9'; | ||
13 | |||
14 | export const themeBorderRadius = '6px'; | ||
15 | export const themeBorderRadiusSmall = '3px'; | ||
16 | |||
17 | export const themeSidebarWidth = '68px'; | ||
18 | |||
19 | export const themeTextColor = themeGrayDark; | ||
20 | |||
21 | export const themeTransitionTime = '.5s'; | ||
22 | |||
23 | export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; | ||
24 | |||
25 | export const darkThemeBlack = '#1A1A1A'; | ||
26 | |||
27 | export const darkThemeGrayDarkest = '#1E1E1E'; | ||
28 | export const darkThemeGrayDarker = '#2D2F31'; | ||
29 | export const darkThemeGrayDark = '#383A3B'; | ||
30 | |||
31 | export const darkThemeGray = '#47494B'; | ||
32 | |||
33 | export const darkThemeGrayLight = '#515355'; | ||
34 | export const darkThemeGrayLighter = '#8a8b8b'; | ||
35 | export const darkThemeGrayLightest = '#FFFFFF'; | ||
36 | |||
37 | export const darkThemeGraySmoke = '#CED0D1'; | ||
38 | export const darkThemeTextColor = '#FFFFFF'; | ||