initial commit

Author: mudassirgithub

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# 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*
+yarn.lock
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "proseWrap": "always"
+}

README.md

@@ -0,0 +1,45 @@
+---
+tag: "Web Development"
+title: "Getting Started"
+excerpt:
+    "We recommend creating a new Next.js app using create-next-app, which sets
+    up everything automatically for you. To create a project"
+coverImage: "/assets/post/post.png"
+date: "Fri 14th Aug, 2020"
+author:
+    name: Ahmed Mudassir
+    twitter: "https://twitter.com/ahm3dx_"
+    picture: ""
+ogImage:
+    url: "/assets/meta/blogSimple.jpg"
+---
+
+We recommend creating a new Next.js app using `create-next-app`, which sets up
+everything automatically for you to understand how nextjs works. To create a
+project, run:
+
+```shell
+yarn create next-app
+```
+
+After the installation is complete, follow the instructions to start the
+development server. Try editing pages/index.js and see the result on your
+browser.
+
+To build a Basic Blog follow manual steps mentioned below.
+
+## Manual Setup
+
+to create Nextjs, Tailwindcss, Markdown project Manually, first run:
+
+Now add other additional modules to the project, run:
+
+```shell
+yarn add gray-matter react-markdown react-highlight
+```
+
+Now add styling modules, we will be using tailwindcss, run:
+
+```shell
+yarn add tailwindcss postcss-preset-env
+```

_posts/1-getting-started.md

@@ -0,0 +1,45 @@
+---
+tag: "Web Development"
+title: "Writing posts"
+excerpt:
+    "We recommend creating a new Next.js app using create-next-app, which sets
+    up everything automatically for you. To create a project"
+coverImage: "/assets/post/post.png"
+date: "Fri 14th Aug, 2020"
+author:
+    name: Ahmed Mudassir
+    twitter: "https://twitter.com/ahm3dx_"
+    picture: ""
+ogImage:
+    url: "/assets/meta/blogSimple.jpg"
+---
+
+We recommend creating a new Next.js app using `create-next-app`, which sets up
+everything automatically for you to understand how nextjs works. To create a
+project, run:
+
+```shell
+yarn create next-app
+```
+
+After the installation is complete, follow the instructions to start the
+development server. Try editing pages/index.js and see the result on your
+browser.
+
+To build a Basic Blog follow manual steps mentioned below.
+
+## Manual Setup
+
+to create Nextjs, Tailwindcss, Markdown project Manually, first run:
+
+Now add other additional modules to the project, run:
+
+```shell
+yarn add gray-matter react-markdown react-highlight
+```
+
+Now add styling modules, we will be using tailwindcss, run:
+
+```shell
+yarn add tailwindcss postcss-preset-env
+```

_posts/2-writing-posts.md

@@ -0,0 +1,45 @@
+---
+tag: "Web Development"
+title: "Publishing options"
+excerpt:
+    "We recommend creating a new Next.js app using create-next-app, which sets
+    up everything automatically for you. To create a project"
+coverImage: "/assets/post/post.png"
+date: "Fri 14th Aug, 2020"
+author:
+    name: Ahmed Mudassir
+    twitter: "https://twitter.com/ahm3dx_"
+    picture: ""
+ogImage:
+    url: "/assets/meta/blogSimple.jpg"
+---
+
+We recommend creating a new Next.js app using `create-next-app`, which sets up
+everything automatically for you to understand how nextjs works. To create a
+project, run:
+
+```shell
+yarn create next-app
+```
+
+After the installation is complete, follow the instructions to start the
+development server. Try editing pages/index.js and see the result on your
+browser.
+
+To build a Basic Blog follow manual steps mentioned below.
+
+## Manual Setup
+
+to create Nextjs, Tailwindcss, Markdown project Manually, first run:
+
+Now add other additional modules to the project, run:
+
+```shell
+yarn add gray-matter react-markdown react-highlight
+```
+
+Now add styling modules, we will be using tailwindcss, run:
+
+```shell
+yarn add tailwindcss postcss-preset-env
+```

_posts/3-publishing-options.md

@@ -0,0 +1,45 @@
+---
+tag: "Web Development"
+title: "Organising your content"
+excerpt:
+    "We recommend creating a new Next.js app using create-next-app, which sets
+    up everything automatically for you. To create a project"
+coverImage: "/assets/post/post.png"
+date: "Fri 14th Aug, 2020"
+author:
+    name: Ahmed Mudassir
+    twitter: "https://twitter.com/ahm3dx_"
+    picture: ""
+ogImage:
+    url: "/assets/meta/blogSimple.jpg"
+---
+
+We recommend creating a new Next.js app using `create-next-app`, which sets up
+everything automatically for you to understand how nextjs works. To create a
+project, run:
+
+```shell
+yarn create next-app
+```
+
+After the installation is complete, follow the instructions to start the
+development server. Try editing pages/index.js and see the result on your
+browser.
+
+To build a Basic Blog follow manual steps mentioned below.
+
+## Manual Setup
+
+to create Nextjs, Tailwindcss, Markdown project Manually, first run:
+
+Now add other additional modules to the project, run:
+
+```shell
+yarn add gray-matter react-markdown react-highlight
+```
+
+Now add styling modules, we will be using tailwindcss, run:
+
+```shell
+yarn add tailwindcss postcss-preset-env
+```

_posts/4-organising-your-content.md

@@ -0,0 +1,7 @@
+export default function PostExcerpt({ excerpt }) {
+    return (
+        <div className="w-full text-lg font-medium leading-normal sm:text-2xl">
+            {excerpt}
+        </div>
+    );
+}

components/HeroExcerpt/index.js

@@ -0,0 +1,3 @@
+export default function HeroTitle({ title }) {
+    return <div className="text-2xl font-bold sm:text-4xl">{title}</div>;
+}

components/HeroTitle/index.js

@@ -0,0 +1,24 @@
+export default function HomeFooter() {
+    return (
+        <div className="mt-4 bg-code-block">
+            <div className="flex flex-col justify-between w-full max-w-6xl p-4 mx-auto space-y-2 sm:flex-row sm:space-y-0">
+                <a
+                    className="flex flex-row items-baseline space-x-1 hover:underline"
+                    href="https://github.com/mudassirgithub/basic-blog"
+                    target="_blank"
+                >
+                    <span className="text-sm">View Source Code On</span>
+                    <div className="text-base font-bold">Github</div>
+                </a>
+                <a
+                    className="flex flex-row items-baseline space-x-1 hover:underline"
+                    href="https://twitter.com/ahm3dx_"
+                    target="_blank"
+                >
+                    <span className="text-sm">Made by</span>
+                    <div className="text-base font-bold">Ahmed Mudassir</div>
+                </a>
+            </div>
+        </div>
+    );
+}