Merge pull request #168 from WebXDAO/nextjs-upgrade

Landing: 11ty to Nextjs by @AbhinavMV

Author: mkubdev

.eleventy.js

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.eleventyignore

@@ -1,9 +1,37 @@
-_site/
-_tmp/
-.DS_Store
-node_modules/
-.vscode/
-*git/
-.env
-.cache/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+#package-lock.json
 package-lock.json
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.eslintrc.json

@@ -43,160 +43,10 @@ This step is only required the very first time.
 npm run build
 ```
 
-### 6\. Run Eleventy
+### 6\. Run Nextjs
 
 ```
 npm run start
 ```
 
 ### 7\. ✨ Enjoy
-
-## Technologies used
-
-* [Netlify CMS](https://www.netlifycms.org/) (Currently WIP 🚧):
-
-Netlify CMS is used to handle the CMS part of this static website. It uses Git as backend, so there is no need to maintain a different server. Maintained by the awesome folks of Netlify.
-
-* [Eleventy (11ty)](https://github.com/11ty/eleventy):
-
-Eleventy is a simpler static site generator using JavaScript. Eleventy will compile all of our files and generate a static output where we can host it anywhere.
-
-* [Alpine.js](https://alpinejs.dev/):
-
-Alpine JS is a minimal framework to provide JavaScript behavior in our markup. Think it as a lite version of React & Vue. We use Alpine JS to add JavaScript components like Dropdown, Toggle etc.
-
-* [Tailwind CSS](https://tailwindcss.com/):
-
-Tailwind CSS is a utility first CSS Framework. It has a set of preset utility classes to style anything without touching CSS file.
-    
-## Folder Structure
-
-Root `/` folder of our project contains all configuration files like `tailwind.config.js`, `.eleventy.js` etc..
-
-`/src` folder contains all of our site contents and data. Before configuring anything, you go to the `/src` folder and make some changes to see if its working.
-
-## Make Changes
-
-Go to the `/src` folder and open `index.html` file. Now make any changes and save it to see if the changes are reloading or not. If it's reloading with your changes, then it means it's working perfectly. If you have any issues, comment here or raise an issue at GitHub.
-
-* This is the new folder structure :
-
-```
-src
-│   index.html
-│
-└───__data
-│   │   navigation.yaml
-│   │   settings.yaml
-│   
-└───__includes
-│   │   default.html
-│   │
-│   └───partials
-│       │   navbar.html
-│       │   footer.html
-│
-└───static
-│   │  
-│   └───css
-│   │
-│   └───img
-.eleventy.js
-.eleventyignore
-.gitignore
-.nojekyll
-CODE_OF_CONDUCT.md
-LICENSE
-package.json
-package-lock.json
-postscss.config.js
-tailwind.config.js
-README.md
-```
-
-## Nunjucks
-
-Writing code with NEAT Stack is fun because of [Nunjucks](https://mozilla.github.io/nunjucks/). Eleventy supports Nunjucks Templating language by default. So that you can split HTML Code and avoid writing repetitive code like a boss.
-
-Including a part of HTML is easy. Go to `src/_includes/partials/navbar.html` and make some changes there. Now we can include the navbar anywhere we wanted using `{% include ..}`
-
-Another great feature of Nunjucks is the Loops. Suppose you have a card block repeating over 10 times, using Nunjucks, just write it once and loop it. That means you will be able to modify easily by changing in one place. The data should be separated here and it will be handled seamlessly by our Eleventy.
-
-Example Nunjucks loop :
-* `_data/navigation.yaml` :
-```yaml
----
-items:
-  - text: HOME
-    url: "/"
-  - text: LEARN
-    url: "/learn"
-  - text: BLOG
-    url: "/blog"
-  - text: ABOUT
-    url: "/about"
-  - text: PROJECTS
-    url: "/projects"
-```
-
-* `navbar.html` :
-```html
-<ul>
-    {% for item in navigation.items %}
-        <li class="nav__item">
-            <a  href="{{ item.url }}">{{ item.text }}</a>
-        </li>
-    {% endfor %}
-</ul>
-```
-
-That's it. Adding classes or modifying layout is now easier since Eleventy & Nunjucks combined do all the magic for us.
-
-## Eleventy Data
-
-Since we talked about the `_data` above. If you enter the data as raw text inside a page, it means you cannot edit that text using CMS. So it's important to plan initially according to your needs. Make a list on which data you need to change later and which is not.
-
-By default, Eleventy looks for a folder called `_data/` and get the data from the files inside. They accept json, yaml, js etc. So you can write data in any format you like. If you have to fetch a data from a different server, you can create .js file which returns the data.
-
-> The `_data` folder name can be changed using Eleventy configuration
-
-## Writing HTML
-
-Its really simple to create pages or sections in Eleventy. Just create an HTML file in the /src folder and it will automatically build it as a page. If you are writing a blog, you can even use Markdown (`.md` file type) as well.
-
-#### Example to create a blog page
-
-1. Create a file called `blog.html`
-
-```html
----
-title: Our Blog
-layout: default
-path: blog
----
-
-<div class="container max-w-3xl mt-6 px-6">
-
-    <h1 class="font-bold text-5xl">{{title}}</h1>
-
-    {{ content | safe }}
-
-</div>
-```
-
-2. Access it to localhost:8080/blog/
-
-## Alpine JS
-
-Adding interactivity is easy using Alpine JS. You can learn more about from the docs. Here's how a simple Toggle works with Alpine JS.
-
-```html
-<nav x-data="{ isOpen: false }" @keydown.escape="isOpen = false">
-  <button @click="isOpen = !isOpen"">Menu </button>
-  <div :class="{ 'block': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false" x-show.transition="true">
-     ... menu
-  </div>
-</nav>
-```
-
-Here you can see the initial data is created for `isOpen` and its set to `false` and it changes the data on button click. Based on the Value, we just toggle the `div` visibility. Wasn't it easy compared to jQuery? We didn't even created a `js` file.

.gitignore

@@ -0,0 +1,72 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
+  return (
+    <section className='bg-white py-8'>
+      {!contentOnly && (
+        <div className='container max-w-5xl mx-auto'>
+          <h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
+            Blogs
+          </h1>
+          <div className='w-full mb-4'>
+            <div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
+          </div>
+        </div>
+      )}
+      <div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
+        {articles.length > 0 ? (
+          articles.slice(0, show).map((article, index) => (
+            <Link key={article.title + index} href={article.url} passHref>
+              <div className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
+                <div className='bg-white p-4 rounded-lg'>
+                  <div className='relative bg-contain'>
+                    <Image
+                      alt={article.title}
+                      layout='responsive'
+                      height={150}
+                      width={150}
+                      className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
+                      src={article.social_image}
+                    />
+                  </div>
+                  <div className='flex justify-between'>
+                    <h2 className='text-xl text-gray-900 font-semibold mb-4'>{article.title}</h2>
+                  </div>
+                  <p className='leading-relaxed text-sm text-gray-600'>{article.description}</p>
+                </div>
+                <time className='p-4 text-gray-500 text-xs flex items-end'>
+                  <Image
+                    layout='fixed'
+                    width={40}
+                    height={40}
+                    src={article?.user?.profile_image}
+                    alt={article.user.name}
+                    className='rounded-full'
+                  />
+                  <p className='ml-2 opacity-50'>
+                    by {article.user.name} on
+                    {' ' + article.readable_publish_date}
+                  </p>
+                </time>
+              </div>
+            </Link>
+          ))
+        ) : (
+          <div className='text-center w-full'>No Blogs found....</div>
+        )}
+      </div>
+      {!contentOnly && (
+        <div className='flex justify-center'>
+          <a href='https://dev.to/web3community' target='_blank' rel='noreferrer'>
+            <button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
+              See All
+            </button>
+          </a>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default Blogs