Revert "Enable iframe embeds (#5)" (#6)

This reverts commit 7d470ee.

Author: jacob-ebey

README.md

@@ -6,16 +6,14 @@
 
 A website documenting Webpack 5 Module Federation.
 
-#### _Set-up Locally_
-
+#### *Set-up Locally*
 ```bash
-#install dependencies & run dev server with yarn
+#install dependencies & run dev server with yarn 
 yarn install
 yarn dev
 
-#or with npm
+#or with npm 
 npm install
 npm run dev
 ```
-
 This will start a dev server, navigate to localhost:3000 to check it out.

components/article-page/index.jsx

@@ -34,8 +34,7 @@ export default function ArticlePage ({
   title,
   secondaryTitle,
   menuItems,
-  secondaryMenuItems,
-  isText = true
+  secondaryMenuItems
 }) {
   return (
     <AppShell
@@ -54,14 +53,14 @@ export default function ArticlePage ({
         </Hero>
       )}
     >
-      <Segment className={isText ? styles.articlePageContent : null} vertical>
-        {isText ? (<Grid container stackable verticalAlign='middle' className='fb'>
+      <Segment className={styles.articlePageContent} vertical>
+        <Grid container stackable verticalAlign='middle' className='fb'>
           <Grid.Row>
             <Grid.Column width={16}>
               {children}
             </Grid.Column>
           </Grid.Row>
-        </Grid>) : children}
+        </Grid>
       </Segment>
     </AppShell>
   )

data/info.md

@@ -1,12 +1,11 @@
 ---
 title: info page
-background_color: "#AEC4BE"
+background_color: '#AEC4BE'
 ---
-
-## This blog was created using [TinaCMS](https://tinacms.org) & [NextJS](https://nextjs.org/)
+## This blog was created using [TinaCMS](https://tinacms.org) & [NextJS](https://nextjs.org/) 
 
 ## To get started, read the TinaCMS [docs](https://tinacms.org/docs) or checkout the [repository](https://github.com/kendallstrautman/brevifolia-next-tinacms).
 
 - ## Email: [[email protected]]
 - ## Twitter: [@tina_cms](https://twitter.com/tina_cms)
-- ## Github: [tinacms](https://github.com/tinacms/tinacms)
+- ## Github: [tinacms](https://github.com/tinacms/tinacms)

nav-items.js

@@ -8,37 +8,36 @@
 const menuItems = {
   menuItems: [
     {
-      href: "/",
-      children: "Home",
+      href: '/',
+      children: 'Home'
     },
     {
-      href: "/blog/get-started",
-      children: "Get Started",
+      href: '/blog/get-started',
+      children: 'Get Started'
     },
     {
-      href:
-        "https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669",
-      children: "Learn More",
-      rel: "noopener noreferrer",
-      target: "blank",
+      href: 'https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669',
+      children: 'Learn More',
+      rel: 'noopener noreferrer',
+      target: 'blank'
     },
     {
-      href: "/blog",
-      children: "Blog",
+      href: '/blog',
+      children: 'Blog'
     },
     {
-      href: "/videos",
-      children: "Videos",
-    },
+      href: '/videos',
+      children: 'Videos'
+    }
   ],
   secondaryMenuItems: [
     {
-      href: "https://github.com/module-federation",
-      children: "GitHub",
-      rel: "noopener noreferrer",
-      target: "blank",
-    },
-  ],
-};
+      href: 'https://github.com/module-federation',
+      children: 'GitHub',
+      rel: 'noopener noreferrer',
+      target: 'blank'
+    }
+  ]
+}
 
-export default menuItems;
+export default menuItems

next.config.js

@@ -1,11 +1,11 @@
 // const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
-module.exports = {
+module.exports = ({
   webpack: function (config) {
     config.module.rules.push({
       test: /\.md$/,
-      use: "raw-loader",
-    });
+      use: 'raw-loader'
+    })
 
     // config.plugins.push(new ModuleFederationPlugin({
     //   name: 'federated_libraries',
@@ -22,6 +22,6 @@ module.exports = {
     // config.resolve.alias.buffer = 'buffer';
     // config.resolve.alias.path = 'path-browserify';
 
-    return config;
-  },
-};
+    return config
+  }
+})

package.json

@@ -11,16 +11,13 @@
     "start": "next start",
     "export": "next export",
     "deploy": "yarn build && yarn export",
-    "forestry-preview": "next -p 8080 -H 0.0.0.0",
-    "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\"",
-    "prettier:check": "prettier --list-different \"**/*.{js,json,md,ts,tsx}\""
+    "forestry-preview": "next -p 8080 -H 0.0.0.0"
   },
   "dependencies": {
     "buffer": "^5.5.0",
     "gray-matter": "^4.0.2",
     "marksy": "^8.0.0",
     "next": "^9.3.3",
-    "node-fetch": "^2.6.0",
     "oembed-parser": "^1.3.7",
     "path-browserify": "^1.0.1",
     "prism-themes": "^1.3.0",
@@ -32,11 +29,7 @@
   },
   "devDependencies": {
     "babel-plugin-prismjs": "^2.0.1",
-    "dynamic-resource-hints": "^0.0.7",
-    "intersection-observer": "^0.10.0",
-    "prettier": "^2.0.5",
     "raw-loader": "^4.0.0",
-    "react-intersection-observer": "^8.26.2",
     "sass": "^1.26.3"
   },
   "keywords": [

pages/_app.js

@@ -1,12 +1,11 @@
-import React from "react";
-import Head from "next/head";
-import "intersection-observer";
+import React from 'react'
+import Head from 'next/head'
 
-import "prism-themes/themes/prism-vs.css";
-import "semantic-ui-css/semantic.min.css";
+import 'prism-themes/themes/prism-vs.css'
+import 'semantic-ui-css/semantic.min.css'
 
-import config from "../data/config.json";
-import "../styles/bootstrap.css";
+import config from '../data/config.json'
+import '../styles/bootstrap.css'
 const tracking = `
 function getUrlParams(search) {
     const hashes = search.slice(search.indexOf('?') + 1).split('&')
@@ -24,23 +23,23 @@ function getUrlParams(search) {
   gtag('config', 'UA-120967034-1');
   var redirect = getUrlParams(window.location.href).utm_medium
   if(redirect) window.location.replace(redirect)
-`;
-function MyApp({ Component, pageProps }) {
+`
+function MyApp ({ Component, pageProps }) {
   return (
     <>
       <Head>
         <title>{config.title}</title>
-        <script src="https://www.googletagmanager.com/gtag/js?id=UA-120967034-1" />
+        <script src='https://www.googletagmanager.com/gtag/js?id=UA-120967034-1' />
 
-        <meta name="description" content={config.description} />
+        <meta name='description' content={config.description} />
         <script dangerouslySetInnerHTML={{ __html: tracking }} />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
       </Head>
 
       <Component {...pageProps} />
     </>
-  );
+  )
 }
 
-export default MyApp;
+export default MyApp
 // https://federated-libraries-next.now.sh/?utm_source=ModuleFederationExamples&utm_medium=https://github.com/sponsors/ScriptedAlchemy&utm_campaign=sponsor_link

pages/blog/[slug].js

@@ -1,60 +1,70 @@
-import * as React from "react";
-import Head from "next/head";
-import Prism from "prismjs";
-import matter from "gray-matter";
-import marksy from "marksy/jsx";
+import * as React from 'react'
+import Head from 'next/head'
+import Prism from 'prismjs'
+import matter from 'gray-matter'
+import marksy from 'marksy/jsx'
 
-import ArticlePage from "../../components/article-page";
-import navItems from "../../nav-items";
+import ArticlePage from '../../components/article-page'
+import navItems from '../../nav-items'
 
-import config from "../../data/config.json";
+import config from '../../data/config.json'
+
+export function getStaticPaths () {
+  const ctx = require.context('../../posts', true, /\.md$/)
+
+  const paths = ctx.keys().map((key, index) => {
+    const slug = key.split('/')[1].replace(/ /g, '-').slice(0, -3).trim()
+    return { params: { slug } }
+  })
+
+  return {
+    paths,
+    fallback: false
+  }
+}
+
+export async function getStaticProps ({ params: { slug } }) {
+  const markdown = await import(`../../posts/${slug}.md`)
+  const { content, data: { date, ...rest } } = matter(markdown.default)
+
+  return {
+    props: {
+      content,
+      data: {
+        ...rest,
+        date: date.toISOString().substring(0, 10)
+      }
+    }
+  }
+}
 
 const compile = marksy({
   createElement: React.createElement,
-  highlight(language, code) {
-    return Prism.highlight(code, Prism.languages[language], language);
-  },
-});
-
-export default function BlogPostPage({ content, data }) {
-  const body = compile(content);
-  const embeddedArticle = data.medium_link ? (
-    <iframe
-      id="medium-content"
-      referrerPolicy="no-referrer"
-      width="100%"
-      style={{ height: "200vh", marginTop: "-50px" }}
-      frameBorder={0}
-      src={data.medium_link}
-    ></iframe>
-  ) : null;
+  highlight (language, code) {
+    return Prism.highlight(code, Prism.languages[language], language)
+  }
+})
+
+export default function BlogPostPage ({ content, data }) {
+  const body = compile(content)
+
   return (
     <>
       <Head>
-        <title>
-          {data.title} | {config.title}
-        </title>
-        {data.secondary_title && (
-          <meta name="description" content={data.secondary_title}></meta>
-        )}
+        <title>{data.title} | {config.title}</title>
+        {data.secondary_title && <meta name='description' content={data.secondary_title} />}
       </Head>
 
       <ArticlePage
         menuItems={navItems.menuItems}
         secondaryMenuItems={navItems.secondaryMenuItems}
         title={data.title}
         secondaryTitle={data.secondary_title}
-        isText={!embeddedArticle}
       >
-        <article id="frame" className="center-images">
-          {embeddedArticle ? embeddedArticle : body.tree}
+        <article className='center-images'>
+          {body.tree}
         </article>
       </ArticlePage>
     </>
-  );
+  )
 }
-BlogPostPage.getInitialProps = async function (ctx) {
-  const { slug } = ctx.query;
-  const content = await import(`../../posts/${slug}.md`);
-  return matter(content.default);
-};