Merge pull request #1 from TipsCode/upgrade-nullstack

📌 upgrade nullstack

Author: alissonsuassuna

client.js

@@ -0,0 +1,11 @@
+import Nullstack from 'nullstack';
+
+import Application from './src/Application';
+
+const context = Nullstack.start(Application);
+
+context.start = async function start() {
+  // https://nullstack.app/application-startup
+};
+
+export default context;

index.js

@@ -6,27 +6,24 @@
   "license": "ISC",
   "scripts": {
     "start": "npx nullstack start",
-    "build": "npx nullstack build --mode=ssg --output=docs",
-    "tailwind": "npx tailwindcss-cli build -o src/tailwind.css"
+    "build": "npx nullstack build --mode=ssg --output=docs"
   },
   "dependencies": {
-    "@tailwindcss/typography": "^0.4.0",
+    "@tailwindcss/typography": "0.5.9",
     "babel-eslint": "^10.1.0",
     "dotenv": "^8.2.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
-    "nullstack": "~0.11.0",
+    "nullstack": "~0.17.0",
     "poisonicon": "^0.1.2",
+    "postcss": "^8.4.12",
+    "postcss-loader": "^7.0.1",
     "prismjs": "^1.23.0",
     "remarkable": "^2.0.1",
-    "remarkable-meta": "^1.0.1"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.4",
-    "postcss": "^8.4.12",
-    "tailwindcss": "^3.0.24"
+    "remarkable-meta": "^1.0.1",
+    "tailwindcss": "^3.0.0"
   }
 }

package.json

@@ -0,0 +1,41 @@
+import Nullstack from 'nullstack';
+import { readdirSync, readFileSync } from 'fs';
+import prismjs from 'prismjs';
+import { Remarkable } from 'remarkable';
+import meta from 'remarkable-meta';
+import Application from './src/Application';
+
+const context = Nullstack.start(Application);
+
+context.start = async function start() {
+  await import('prismjs/components/prism-jsx.min');
+  const articles = readdirSync('articles');
+  const md = new Remarkable({
+    // eslint-disable-next-line no-undef
+    highlight: (code) => Prism.highlight(code, prismjs.languages.jsx, 'javascript'),
+  });
+  md.use(meta);
+  md.use((md) => {
+    const originalRender = md.renderer.rules.link_open;
+    md.renderer.rules.link_open = (...args) => {
+      let result = originalRender(...args);
+      const regexp = /href="([^"]*)"/;
+      const href = regexp.exec(result)[1];
+      if (!href.startsWith('/')) {
+        result = result.replace('>', ' target="_blank" rel="noopener">');
+      }
+      return result;
+    };
+  });
+  context.articles = articles.map((name) => {
+    const markdown = readFileSync(`articles/${name}`, 'utf-8');
+    const [slug] = name.split('.');
+    const content = md.render(markdown);
+    const { date: dateString, ...meta } = md.meta;
+    const date = new Date(dateString);
+    const readingTime = ~~(content.split(' ').length / 200);
+    return { slug, content, date, readingTime, ...meta };
+  }).sort((a, b) => b.date - a.date);
+};
+
+export default context;

server.js

@@ -1,9 +1,6 @@
+import '../tailwind.css';
 import './Application.scss';
 import Nullstack from 'nullstack';
-import { readdirSync, readFileSync } from 'fs';
-import prismjs from 'prismjs';
-import { Remarkable } from 'remarkable';
-import meta from 'remarkable-meta';
 import Home from './home/Home';
 import Articles from './articles/Articles';
 import Article from './article/Article';
@@ -14,46 +11,11 @@ import MiniCourse from './mini-course/MiniCourse';
 import MiniCourseThankPage from './delivery-mini-course/MiniCourseThankPage';
 import MiniCourseClasses from './delivery-mini-course/MiniCourseClasses';
 import PageVideoDepo from './delivery-mini-course/PageVideoDepo';
-
 import GoogleAnalytics from './layout/GoogleAnalytics';
 import FacebookPixel from './layout/FacebookPixel';
 
-import FacePixelFullStack from './course-fullstack-turbo/FacePixelFullStack';
-import FacePixelReact from './course-react-pro/FacePixelReact';
-
 class Application extends Nullstack {
 
-  static async start(context) {
-    await import('prismjs/components/prism-jsx.min');
-    const articles = readdirSync('articles');
-    const md = new Remarkable({
-      // eslint-disable-next-line no-undef
-      highlight: (code) => Prism.highlight(code, prismjs.languages.jsx, 'javascript'),
-    });
-    md.use(meta);
-    md.use((md) => {
-      const originalRender = md.renderer.rules.link_open;
-      md.renderer.rules.link_open = (...args) => {
-        let result = originalRender(...args);
-        const regexp = /href="([^"]*)"/;
-        const href = regexp.exec(result)[1];
-        if (!href.startsWith('/')) {
-          result = result.replace('>', ' target="_blank" rel="noopener">');
-        }
-        return result;
-      };
-    });
-    context.articles = articles.map((name) => {
-      const markdown = readFileSync(`articles/${name}`, 'utf-8');
-      const [slug] = name.split('.');
-      const content = md.render(markdown);
-      const { date: dateString, ...meta } = md.meta;
-      const date = new Date(dateString);
-      const readingTime = ~~(content.split(' ').length / 200);
-      return { slug, content, date, readingTime, ...meta };
-    }).sort((a, b) => b.date - a.date);
-  }
-
   prepare({ page }) {
     page.locale = 'pt-BR';
   }
@@ -70,21 +32,24 @@ class Application extends Nullstack {
     );
   }
 
-  render({router}) {
+  renderTrackers() {
     return (
-      <main class="bg-tips-light">
-        <div>
-          {
-            router.url.endsWith('/curso-fullstack-turbo') ? <FacePixelFullStack id="294337825339805" /> : <FacebookPixel id="294337825339805" />
-          }
-
-          {
-            router.url.endsWith('/curso-react-pro') ? <FacePixelReact id="729313284878557" /> : <FacebookPixel id="294337825339805" />
-          }
-          <GoogleAnalytics id="AW-641358523" />
-          <GoogleAnalytics id="UA-120538403-3" />
-        </div>
+      <>
+        <FacebookPixel id="294337825339805" />
+        <GoogleAnalytics id="UA-120538403-3" />
+        <script
+          async
+          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7630588299359214"
+          crossorigin="anonymous"
+        />
+      </>
+    );
+  }
 
+  render() {
+    return (
+      <main class="bg-tips-light">
+        <Trackers />
         <Head />
         <Home route="/" />
         <Articles route="/artigos" />
@@ -97,12 +62,10 @@ class Application extends Nullstack {
         <MiniCourseClasses route="/aulas-do-mini-curso" />
         <PageVideoDepo route="/entrevista-com-aluno" />
         <Article route="/:slug" />
-
-        <span href="/curso-react-pro"> </span>
-        <span href="/obrigado-por-entrar-no-mini-curso"> </span>
-        <span href="/aulas-do-mini-curso"> </span>
-        <span href="/entrevista-com-aluno"> </span>
-  
+        <span href="/curso-react-pro" />
+        <span href="/obrigado-por-entrar-no-mini-curso" />
+        <span href="/aulas-do-mini-curso" />
+        <span href="/entrevista-com-aluno" />
       </main>
     );
   }