Merge pull request #6 from bitrise-io/stacks

Stacks

.eslintrc.js

@@ -16,4 +16,19 @@ module.exports = {
     'no-param-reassign': ['error', { props: false }],
     'class-methods-use-this': 'off',
   },
+  overrides: [
+    {
+      files: ['./src/**/worker.js'],
+      rules: {
+        'no-return-await': 'off',
+        'no-restricted-globals': 'off',
+      },
+    },
+    {
+      files: ['./index.js'],
+      rules: {
+        'no-eval': 'off',
+      },
+    },
+  ],
 };

index.js

@@ -28,7 +28,6 @@ async function importWorker(workerPath) {
   if (!importedWorkers[workerName]) {
     if (workerContent.match(/addEventListener\('fetch',/)) {
       // Service Worker Syntax
-      // eslint-disable-next-line no-eval
       eval(`(() => {
         function addEventListener(_, cb) {
           importedWorkers['${workerName}'] = { type: "Service" };
@@ -39,7 +38,6 @@ async function importWorker(workerPath) {
     }
     if (workerContent.match(/export default {/)) {
       // ES6 Module Syntax
-      // eslint-disable-next-line no-eval
       eval(`(() => {
         ${workerContent.replace(
           /export default {/,
@@ -49,10 +47,7 @@ async function importWorker(workerPath) {
         )}
       })();`);
     }
-    console.log(
-      `Registered new ${importedWorkers[workerName].type} Worker: ${workerName}`,
-      importedWorkers[workerName].handler,
-    );
+    process.stdout.write(`[info] Registered new ${importedWorkers[workerName].type} Worker: ${workerName}\n`);
   }
   return importedWorkers[workerName];
 }
@@ -68,6 +63,9 @@ async function getWorker(urlObject) {
   if (urlObject.pathname.match(/^\/changelog/)) {
     return importWorker('./src/js/changelog/worker.js');
   }
+  if (urlObject.pathname.match(/^\/stacks/)) {
+    return importWorker('./src/js/stacks/worker.js');
+  }
   return {
     type: 'ES6 Module',
     handler: {
@@ -92,16 +90,25 @@ if (webpackConfig.mode === 'development') app.use(hotMiddleware(compiler));
 app.get(/\/.*/, async (req, res) => {
   const urlObject = new URL(`http://${req.hostname}${req.url}`);
 
+  process.stdout.write(`[info] Handling request to ${urlObject}\n`);
+
   try {
-    const content = await fs.promises.readFile(`./dist${urlObject.pathname}`);
+    const filePath = `./dist${urlObject.pathname}`;
+    const content = await fs.promises.readFile(filePath);
     res.statusCode = 200;
     const extname = path.extname(urlObject.pathname);
     if (extname === '.js') res.setHeader('Content-Type', 'text/javascript');
     if (extname === '.html') res.setHeader('Content-Type', 'text/html');
     if (extname === '.json') res.setHeader('Content-Type', 'application/json');
+
+    process.stdout.write(`[info] Serving local file ${filePath}\n`);
+
     res.end(content);
   } catch (error) {
     const requestHandler = await getWorker(urlObject);
+
+    process.stdout.write(`[info] Using request handler ${requestHandler.type}\n`);
+
     const fetchEvent = {
       request: {
         url: urlObject,
@@ -111,7 +118,14 @@ app.get(/\/.*/, async (req, res) => {
         res.statusCode = response.status;
         res.setHeader('Content-Type', response.headers.get('Content-Type'));
         const text = await response.text();
-        res.end(text.replace('https://webflow-scripts.bitrise.io/', '/'));
+
+        process.stdout.write(`[info] Serving response with status ${res.statusCode}\n`);
+
+        res.end(
+          text
+            .replace("document.location.host === 'test-e93bfd.webflow.io'", 'true')
+            .replace('https://webflow-scripts.bitrise.io/', '/'),
+        );
       },
     };
 
@@ -126,5 +140,5 @@ app.get(/\/.*/, async (req, res) => {
 });
 
 app.listen(port, hostname, () => {
-  console.log(`Server running at http://${hostname}:${port}/`);
+  process.stdout.write(`Server running at http://${hostname}:${port}/\n`);
 });

src/css/stacks.css

@@ -0,0 +1,101 @@
+div#stacks-content {
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+}
+
+div#stacks-content p {
+  margin: 1rem 0;
+}
+
+div#stacks-content code {
+  padding: .125rem .25rem;
+  background: var(--gray-200);
+  border-radius: .25rem;
+  font-size: .875rem;
+}
+
+div#stacks-content pre {
+  padding: 1rem;
+  background: var(--gray-200);
+  border-radius: .25rem;
+  font-size: .875rem;
+  overflow-x: auto;
+}
+
+div#stacks-content pre code {
+  padding: 0;
+  background: none;
+}
+
+div#stacks-content h2 {
+  font-size: 1.5rem;
+  line-height: 1.5em;
+  margin: 1.5rem 0 1rem 0;
+}
+
+div#stacks-content h3 {
+  font-size: 1.17rem;
+  line-height: 1.5em;
+  margin: 1.5rem 0 1rem 0;
+}
+
+div#stacks-content h2 a,
+div#stacks-content h3 a {
+  display: none;
+}
+div#stacks-content h3:hover a,
+div#stacks-content h2:hover a {
+  display: inline;
+}
+
+div#stacks-content details {
+  padding: 1rem;
+  border: 1px solid var(--gray-200);
+  border-radius: .25rem;
+  margin-bottom: .5rem;
+}
+div#stacks-content details summary::-webkit-details-marker { 
+  display:none;
+}
+div#stacks-content details summary svg {
+  content: "";
+  float: right;
+  transition: transform .1s;
+}
+div#stacks-content details[open] summary svg {
+  transform: rotateZ(180deg);
+} 
+
+div#stacks-content .book-hint.info {
+  border-color: #6bf;
+  background-color: rgba(102, 187, 255, .1);
+}
+
+div#stacks-content .book-hint.warning {
+  border-color: #fd6;
+  background-color: rgba(255, 221, 102, .1);
+}
+
+div#stacks-content .book-hint.danger {
+  border-color: #f66;
+  background-color: rgba(255, 102, 102, .1);
+}
+
+div#stacks-content blockquote {
+  margin: 1rem 0;
+  padding: .5rem 1rem .5rem .75rem;
+  border-inline-start: .25rem solid var(--gray-200);
+  border-radius: .25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+div#stacks-content table tr th,
+div#stacks-content table tr td {
+  padding: .5rem 1rem;
+  border: 1px solid var(--gray-200);
+}
+
+div#stacks-content table tr:nth-child(2n) {
+  background: var(--gray-100);
+}

src/js/changelog-topic.js

@@ -1,30 +1,17 @@
 import ChangelogService from './changelog/ChangelogService';
 import ChangelogTagFactory from './changelog/ChangelogTagFactory';
-import { formatDate, setMetaContent } from './shared/common';
+import { detectTopicFromUrl, formatDate, setMetaContent } from './shared/common';
 
 import '../css/changelog.css';
 
-/**
- * @param {URL} url
- * @returns {?string}
- */
-function detectTopicFromUrl(url) {
-  const path = url.pathname;
-  const match = path.match(/changelog\/(.+)$/);
-  if (match) {
-    return match[1];
-  }
-  return null;
-}
-
 const tagFactory = new ChangelogTagFactory();
 
 /** @type {HTMLDivElement} */
 const topicMetaSeparator = document.querySelector('#changelog-topic-meta-separator');
 topicMetaSeparator.style.display = 'none';
 
 const url = new URL(document.location.href);
-const topicSlugId = detectTopicFromUrl(url);
+const topicSlugId = detectTopicFromUrl(url, 'changelog');
 
 /** @type {string} */
 const apiBase = document.location.hostname.match(/(localhost|127\.0\.0\.1)/) ? '' : 'https://bitrise.io';

src/js/changelog/worker.js

@@ -18,7 +18,6 @@ async function addCorsHeaders(originalResponse) {
   return response;
 }
 
-// eslint-disable-next-line no-restricted-globals
 addEventListener('fetch', (event) => {
   const urlObject = new URL(event.request.url);
   let useCors = true;

src/js/integrations/worker.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-restricted-globals
 addEventListener('fetch', (event) => {
   const urlObject = new URL(event.request.url);
 

src/js/shared/common.js

@@ -93,6 +93,23 @@ function formatDate(date) {
   return `${month} ${day.replace(/^0/, '')}, ${year}`;
 }
 
+/**
+ * @param {URL} url
+ * @param {string} prefix
+ * @returns {?string}
+ */
+function detectTopicFromUrl(url, prefix) {
+  const path = url.pathname;
+  if (path.match(new RegExp(`${prefix}/?$`))) {
+    return '';
+  }
+  const match = path.match(new RegExp(`${prefix}/(.+)$`));
+  if (match) {
+    return match[1];
+  }
+  return null;
+}
+
 export {
   capitalize,
   fancyConsoleLog,
@@ -103,4 +120,5 @@ export {
   icaseEqual,
   icaseIncludes,
   setMetaContent,
+  detectTopicFromUrl,
 };