Repository: statichunt/geeky-nextjs
Branch: main
Commit: dc59a2bd646b
Files: 100
Total size: 157.9 KB
Directory structure:
gitextract_hmo74npt/
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .sitepins/
│ ├── config.json
│ └── schema/
│ └── posts.json
├── README.md
├── config/
│ ├── config.json
│ ├── menu.json
│ ├── social.json
│ └── theme.json
├── content/
│ ├── 404.md
│ ├── _index.md
│ ├── about.md
│ ├── contact.md
│ ├── elements.md
│ └── posts/
│ ├── _index.md
│ ├── post-1.md
│ ├── post-10.md
│ ├── post-11.md
│ ├── post-12.md
│ ├── post-13.md
│ ├── post-14.md
│ ├── post-15.md
│ ├── post-2.md
│ ├── post-3.md
│ ├── post-4.md
│ ├── post-5.md
│ ├── post-6.md
│ ├── post-7.md
│ ├── post-8.md
│ └── post-9.md
├── context/
│ └── state.js
├── hooks/
│ ├── useLoadMore.js
│ ├── useOs.js
│ └── useWindow.js
├── jsconfig.json
├── layouts/
│ ├── 404.js
│ ├── About.js
│ ├── Baseof.js
│ ├── Contact.js
│ ├── Default.js
│ ├── PostSingle.js
│ ├── components/
│ │ ├── ImageFallback.js
│ │ ├── InnerPagination.js
│ │ ├── Logo.js
│ │ ├── NewsLetterForm.js
│ │ ├── Pagination.js
│ │ ├── Share.js
│ │ ├── Social.js
│ │ ├── ThemeSwitcher.js
│ │ └── TwSizeIndicator.js
│ ├── partials/
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── Post.js
│ │ ├── SearchModal.js
│ │ └── Sidebar.js
│ └── shortcodes/
│ ├── Accordion.jsx
│ ├── Button.jsx
│ ├── Code.jsx
│ ├── Notice.jsx
│ ├── Tab.jsx
│ ├── Tabs.jsx
│ ├── Video.jsx
│ ├── Youtube.jsx
│ └── all.js
├── lib/
│ ├── contentParser.js
│ ├── jsonGenerator.js
│ ├── taxonomyParser.js
│ └── utils/
│ ├── dateFormat.js
│ ├── mdxParser.js
│ ├── readingTime.js
│ ├── similarItems.js
│ ├── sortFunctions.js
│ └── textConverter.js
├── netlify.toml
├── next.config.js
├── package.json
├── pages/
│ ├── 404.js
│ ├── [regular].js
│ ├── _app.js
│ ├── _document.js
│ ├── categories/
│ │ ├── [category].js
│ │ └── index.js
│ ├── index.js
│ ├── page/
│ │ └── [slug].js
│ ├── posts/
│ │ ├── [single].js
│ │ └── index.js
│ └── search.js
├── postcss.config.js
├── public/
│ ├── .htaccess
│ ├── .well-known/
│ │ └── sitepins.json
│ ├── robots.txt
│ └── sitepins-manifest.json
├── styles/
│ ├── base.scss
│ ├── buttons.scss
│ ├── components.scss
│ ├── navigation.scss
│ ├── style.scss
│ └── utilities.scss
└── tailwind.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
; https://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
yarn.lock
package-lock.json
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
/.json
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# Local Netlify folder
.netlify
================================================
FILE: .sitepins/config.json
================================================
{
"media": "public/images",
"content": "content",
"code": "layouts",
"arrangement": [],
"public": "public",
"configs": [
"config"
]
}
================================================
FILE: .sitepins/schema/posts.json
================================================
{
"file": "content/posts/post-1.md",
"name": "posts",
"fileType": "md",
"fmType": "yaml",
"template": [
{
"name": "title",
"label": "Title",
"type": "string",
"value": "",
"isRequired": true,
"defaultValue": ""
},
{
"name": "date",
"label": "Date",
"type": "Date",
"value": "",
"isRequired": true,
"defaultValue": "",
"alwaysUseCurrentDate": false
},
{
"name": "image",
"label": "Image",
"type": "media",
"value": "",
"isRequired": true,
"defaultValue": ""
},
{
"name": "categories",
"label": "Categories",
"type": "Array",
"value": [],
"isRequired": true,
"defaultValue": ""
},
{
"name": "featured",
"label": "Featured",
"type": "boolean",
"value": false,
"defaultValue": ""
},
{
"name": "draft",
"label": "Draft",
"type": "boolean",
"value": false,
"defaultValue": ""
}
]
}
================================================
FILE: README.md
================================================
<h1 align=center>Geeky Nextjs</h1>
<p align=center>Geeky is a free NextJs personal blog template</p>
<h2 align="center"> <a target="_blank" href="https://geeky-nextjs.vercel.app/" rel="nofollow">Demo</a> | <a target="_blank" href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fgeeky-nextjs.vercel.app%2F&form_factor=desktop">Page Speed (100%)</a>
</h2>
<p align=center>
<a href="https://github.com/vercel/next.js/releases/tag/v13.0.6" alt="Contributors">
<img src="https://img.shields.io/static/v1?label=NEXTJS&message=13.0&color=000&logo=nextjs" />
</a>
<a href="https://github.com/statichunt/geeky-nextjs/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/statichunt/geeky-nextjs" alt="license"></a>
<img src="https://img.shields.io/github/languages/code-size/statichunt/geeky-nextjs" alt="code size">
<a href="https://github.com/statichunt/geeky-nextjs/graphs/contributors">
<img src="https://img.shields.io/github/contributors/statichunt/geeky-nextjs" alt="contributors"></a>
</p>
---
<p align="center">
</p>
---
## Key Features
- Google Page Speed score 100! (Desktop)
- Supports Contact Form
- Disqus Comment Support
- Related Posts Suggestion
- MDX Support with many built-in custom components
- Semantic HTML Document Structure
- Custom Logo Support
- Includes All SCSS Files
- Taxonomy Page Support
- Images Optimized With Next/image
<!-- installation -->
## Installation
After downloading the template, you have some prerequisites to install. Then you can run it on your localhost. You can view the package.json file to see which scripts are included.
### Install prerequisites (once for a machine)
- **Node Installation:** [Install node js](https://nodejs.org/en/download/) [Recommended LTS version]
### Local setup
After successfully installing those dependencies, open this template with any IDE [[VS Code](https://code.visualstudio.com/) recommended], and then open the internal terminal of IDM [vs code shortcut <code>ctrl/cmd+\`</code>]
- Install dependencies
```
npm install
```
- Run locally
```
npm run dev
```
After that, it will open up a preview of the template in your default browser, watch for changes to source files, and live-reload the browser when changes are saved.
## Production Build
After finishing all the customization, you can create a production build by running this command.
```
npm run build
```
<!-- edit with sitepins -->
## 📝 Edit Content with CMS
This template comes pre-configured with [**Sitepins**](https://sitepins.com), a Git-based Headless CMS designed for seamless content management. You can update your website’s text, images, and configuration without touching a single line of code.
**How to get started:**
Click the Edit with Sitepins button below and follow the on-screen instructions to start editing your content visually.
<a target="_blank" href="https://app.sitepins.com/new/clone?name=Geeky%20Nextjs&repository=https://github.com/statichunt/geeky-nextjs/">
<img src="https://sitepins.com/button.svg" alt="Edit with Sitepins">
</a>
<!-- reporting issue -->
## Reporting Issues
We use GitHub Issues as the official bug tracker for this Template. Please Search [existing issues](https://github.com/statichunt/geeky-nextjs/issues). It’s possible someone has already reported the same problem.
If your problem or idea has not been addressed yet, feel free to [open a new issue](https://github.com/statichunt/geeky-nextjs/issues).
<!-- licence -->
## License
Copyright (c) 2019 - Present, Designed & Developed by [statichunt](https://statichunt.com)
**Code License:** Released under the [MIT](https://github.com/statichunt/geeky-nextjs/blob/main/LICENSE) license.
**Image license:** The images are only for demonstration purposes. They have their license, we don't have permission to share those images.
================================================
FILE: config/config.json
================================================
{
"site": {
"title": "Geeky Nextjs",
"base_url": "/",
"favicon": "/images/favicon.png",
"logo": "/images/logo.png",
"logo_white": "/images/logo-light.png",
"logo_width": "150",
"logo_height": "39",
"logo_text": "Geeky"
},
"settings": {
"theme_switcher": true,
"default_theme": "system",
"pagination": 6,
"InnerPaginationOptions": {
"enableTop": false,
"enableBottom": true
},
"summary_length": 200,
"blog_folder": "posts"
},
"params": {
"tag_manager_id": "",
"footer_content": "Lorem ipsum dolor sit amt, conse adip iscing. donec iaculis tempasus laoreet. Libero ullam rgscper.",
"copyright": "Designed and Developed By [Statichunt](https://statichunt.com/)"
},
"metadata": {
"meta_author": "Statichunt",
"meta_image": "/images/og-image.png",
"meta_description": "Geeky Nextjs Personal Blog Template"
},
"widgets": {
"about": {
"enable": true,
"content": "Lorem ipsum dolor sit amet, conse tfctetur adipiscing elit. Vel in in donec iaculis tempasus odio nunc laoreet . Libero ullam rgscorper."
},
"featured_posts": {
"enable": true,
"title": "Blog Categories",
"showPost": 3
},
"categories": {
"enable": true,
"title": "Blog Categories"
},
"newsletter": {
"enable": true,
"title": "Newsletter",
"content": "Join thousands of Tiny Salt subscribers and get our best recipes delivered each week!",
"privacy_policy_page": "#",
"malichipm_url": ""
}
},
"disqus": {
"enable": true,
"shortname": "themefisher-template",
"settings": {}
}
}
================================================
FILE: config/menu.json
================================================
{
"main": [
{
"name": "Home",
"url": "/"
},
{
"name": "About",
"url": "/about"
},
{
"name": "Elements",
"url": "/elements"
},
{
"name": "Contact",
"url": "/contact"
},
{
"name": "Pages",
"url": "",
"hasChildren": true,
"children": [
{
"name": "Categories",
"url": "/categories"
}
]
}
],
"footer": [
{
"name": "Home",
"url": "/"
},
{
"name": "About",
"url": "/about"
},
{
"name": "Contact",
"url": "/contact"
},
{
"name": "Privacy Policy",
"url": "#"
}
]
}
================================================
FILE: config/social.json
================================================
{
"facebook": "https://facebook.com/",
"stackoverflow": "https://stackoverflow.com/",
"twitter": "https://twitter.com/",
"instagram": "https://instagram.com/",
"youtube": "",
"linkedin": "https://linkedin.com/",
"github": "https://github.com/",
"gitlab": "",
"discord": "",
"slack": "",
"medium": "",
"codepen": "",
"bitbucket": "",
"dribbble": "",
"behance": "",
"pinterest": "",
"soundcloud": "",
"tumblr": "",
"reddit": "",
"vk": "",
"whatsapp": "",
"snapchat": "",
"vimeo": "",
"tiktok": "",
"foursquare": "",
"rss": "",
"email": "",
"phone": "",
"address": "",
"skype": "",
"website": ""
}
================================================
FILE: config/theme.json
================================================
{
"colors": {
"default": {
"theme_color": {
"primary": "#2ba283",
"body": "#fff",
"border": "#e1e1e1",
"theme_light": "#f2f2f2",
"theme_dark": "#1a202c"
},
"text_color": {
"default": "#555",
"dark": "#222",
"light": "#999"
}
},
"darkmode": {
"theme_color": {
"primary": "#059669",
"body": "#111",
"border": "#636363",
"theme_light": "#f4f7f7",
"theme_dark": "#383848"
},
"text_color": {
"default": "#a4a4a4",
"dark": "#ddd",
"light": "#fff"
}
}
},
"fonts": {
"font_family": {
"primary": "Raleway:wght@400",
"primary_type": "sans-serif",
"secondary": "Merriweather Sans:wght@400;700",
"secondary_type": "sans-serif"
},
"font_size": {
"base": "16",
"scale": "1.200"
}
}
}
================================================
FILE: content/404.md
================================================
---
title: "Error 404"
layout: "404"
---
## Page Not Found
================================================
FILE: content/_index.md
================================================
---
banner:
title: Welcome **!**
title_small: "to John Bravo's Blog"
content: Are Developer and recently started your own business Already made website to ensure presence wants to develop.
image_enable: true
image: /images/banner-author.png
button:
enable: true
label: Know About Me
link: /about
rel: ""
featured_posts:
enable: true
title: Featured Posts
promotion:
enable: true
image: /images/promotion.png
link: "#"
recent_posts:
title: Recent Posts
enable: true
---
================================================
FILE: content/about.md
================================================
---
title: About The Author
image: /images/author.png
description: "meta description"
layout: about
education:
title: Formal Education
degrees:
- university: "Southeast University"
content: "1985 • 1991 • gravida nibh velvelit auctor alimo quet menean solli"
- university: "Northeast University"
content: "1985 • 1991 • gravida nibh velvelit auctor alimo quet menean solli"
- university: "Easteast University"
content: "1985 • 1991 • gravida nibh velvelit auctor alimo quet menean solli"
- university: "Southeast University"
content: "1985 • 1991 • gravida nibh velvelit auctor alimo quet menean solli"
experience:
title: Work Experience
list:
- Best Writer Award
- Best New Newel
- Best Book
- Best Article
- Best New Newel
- Best New Newel
- Best Book
- Best Article
- Best New Newel
- Best Book
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, ultrices scelerisue cras. Tincidunt hendrerit egestas venenatis risus sit nunc. Est esglit non in ipsum lect;aaus adipiscing et enim porttitor. Dui ultrices et volud eetpat nunc, turpis rutrum elit vestibululm ipsum. Arcu fringilla duis vitae mos dsdllis duicras interdum purus cursus massa metus. Acc umsan felaais, egsdvet nisi, viverra turpis fermentum sit suspf bafedfb ndisse fermentum consectetur. Facilisis feugiat trisique orci tempor sed masd fbsssa tristique ultrices sodales. Augue est sapien elementum facilisis. Enim tincidnt cras interdum purus ndisse. morbi quis nunc.
Et dolor placerat tempus risus nunc urna, nunc a. Mattis viverra ut sapidaaen enim sed tortor. Mattis gravida fusce cras interdum purus cursus massa metus. Acc umsan felaais, eget nisi, viverra turpis fermentum sit suspf bafedfb ndisse. morbi quis nunc, at arcu quam facilisi. In in lacus aliquam dictum sagittis morbi odio. Et magnis cursus sem sed condimentum. Nibh non potenti ac amsdfet Tincidunt hendrerit egestas venenatis risus sit nunc. Est esglit non in ipsuasdm lect;aaus adipiscing et enim porttitor. Dui ultrices et volud eetpat nunc, turpis ndisse. morbi quis nunc, at arcu quam facilisi ndisse. morbi quis nunc, at arcu quam facilisi
================================================
FILE: content/contact.md
================================================
---
title: "Let’s, Talk </br> About You"
description: "meta description"
phone: "+211234565523"
mail: "info@email.com"
location: "9567 Turner Trace Apt. BC C3G8A4"
form_action: "#"
layout: "contact"
addresses:
- icon: FaUserAlt
content: +211234565523
link: tel:+211234565523
- icon: FaMapMarkerAlt
content: info@email.com
link: mailto:info@email.com
- icon: FaLocation
content: 9567 Turner Trace Apt. BC C3G8A4
draft: false
---
================================================
FILE: content/elements.md
================================================
---
title: "Elements"
draft: false
---
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
---
### Paragraph
Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Could someone survive inside a transporter buffer for 75 years? Fate. It protects fools, little children, and ships.
Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Could someone survive inside a transporter buffer for 75 years? Fate. It protects fools, little children, and ships.
---
### Emphasis
1. Did you come here for something in **particular** or just general
2. Did you come here for something in <ins>particular</ins>
3. _Did you come here_
4. Did you come here for **something** in particular
5. Did you come here for something in particular
6. Did you come here for something in particular
7. URLs and URLs in angle brackets will automatically get turned into links. [http://www.example.com](http://www.example.com) or
8. [http://www.example.com](http://www.example.com) and sometimes example.com (but not on Github, for example).
---
### Link
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a reference-style link][arbitrary case-insensitive reference text]
[I'm a relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself].
example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.themefisher.com
[1]: https://gethugothemes.com
[link text itself]: https://www.getjekyllthemes.com
---
### Ordered List
1. List item
2. List item
3. List item
4. List item
5. List item
---
### Unordered List
- List item
- List item
- List item
- List item
- List item
---
### Code and Syntax Highlighting
#### HTML
<Code language="html">
{`<ul>
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about/">About</a>
</li>
</ul>`}
</Code>
---
#### CSS
<Code language="css">
{`img {
vertical-align: middle;
border: 0;
max-width: 100%;
height: auto;
}`}
</Code>
---
#### JavaScript
<Code language="javascript">
{`window.addEventListener("load", (e) => {
document.querySelector(".preloader").style.display = "none";
})`}
</Code>
---
### Button
<Button href="#" type="solid">Button</Button>
---
### Quote
> Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once.
---
### Notice
<Notice type="note">
This is a simple note.
</Notice>
<Notice type="tip">
This is a simple note.
</Notice>
<Notice type="info">
This is a simple note.
</Notice>
<Notice type="warning">
This is a simple note.
</Notice>
---
<Tabs>
<Tab name="Tab 1">
#### Did you come here for something in particular?
Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf.
</Tab>
<Tab name="Tab 2">
#### I wanna talk about the assassination attempt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</Tab>
<Tab name="Tab 3">
#### We know you’re dealing in stolen ore
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
</Tab>
</Tabs>
---
### Table
| # | First | Last | Handle |
| :-- | :----------: | :----------: | -----------: |
| 1 | Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 |
| 2 | Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 |
| 3 | Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 |
---
### Collapse
<Accordion title="Why should you need to do this?">
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
</Accordion>
<Accordion title="How can I adjust Horizontal centering">
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
</Accordion>
<Accordion title="Should you use Negative margin?">
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
- This is a thing.
</Accordion>
---
### Image
---
### Youtube video
<Youtube id="ZEe-IFezQok" title="Play:Youtube"/>
---
### Custom video
<Video width="100%" src="https://joy1.videvo.net/videvo_files/video/free/video0467/large_watermarked/_import_61516692993d77.04238324_preview.mp4" />
================================================
FILE: content/posts/_index.md
================================================
---
title: "Blog Posts"
---
================================================
FILE: content/posts/post-1.md
================================================
---
title: "How to make toys from old Olarpaper"
date: 2022-04-04T01:00:00Z
image: /images/post/post-1.png
categories: ["programming"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-10.md
================================================
---
title: "My work from home workstation"
date: 2022-04-04T10:00:00Z
image: /images/post/post-2.png
categories: ["programming"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-11.md
================================================
---
title: "Robotic world is growing very fast"
date: 2022-04-04T11:00:00Z
image: /images/post/post-3.png
categories: ["assistance"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-12.md
================================================
---
title: "What is a Virtual Assistant"
date: 2022-04-04T12:00:00Z
image: /images/post/post-4.png
categories: ["github"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-13.md
================================================
---
title: "Why you need to learn PHP"
date: 2022-04-04T13:00:00Z
image: /images/post/post-5.png
categories: ["youtube", "artificial-intelligence"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-14.md
================================================
---
title: "What you need to know about Programming"
date: 2022-04-04T14:00:00Z
image: /images/post/post-6.png
categories: ["robotics", "youtube"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-15.md
================================================
---
title: "How to make toys from old Olarpaper"
date: 2022-04-04T15:00:00Z
image: /images/post/post-7.png
categories: ["robotics", "assistance"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-2.md
================================================
---
title: My work from home workstation
date: 2022-04-04T02:00:00Z
image: /images/post/post-2.png
categories: ["drone"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-3.md
================================================
---
title: What you need to know about Photography
date: 2022-04-02T03:00:00+00:00
image: /images/post/post-3.png
categories: ["workstation"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-4.md
================================================
---
title: "How to make toys from old Olarpaper"
date: 2022-04-04T04:00:00Z
image: /images/post/post-4.png
categories: ["robotics", "programming"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-5.md
================================================
---
title: "How to make toys from old Olarpaper"
date: 2022-04-04T05:00:00Z
image: /images/post/post-5.png
categories: ["assistance", "github"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Work From Home
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!quatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-6.md
================================================
---
title: "How to make toys from old Olarpaper"
date: 2022-04-04T06:00:00Z
image: /images/post/post-6.png
categories: ["artificial-intelligence", "programming"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-7.md
================================================
---
title: "Artificial Intelligence and Robotics In A Nutshell"
date: 2022-04-04T07:00:00Z
image: /images/post/post-7.png
categories: ["programming", "youtube"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-8.md
================================================
---
title: "Drone Software and Development"
date: 2022-04-04T08:00:00Z
image: /images/post/post-8.png
categories: ["drone", "robotics"]
featured: true
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: content/posts/post-9.md
================================================
---
title: "Github Repository Controls"
date: 2022-04-04T09:00:00Z
image: /images/post/post-1.png
categories: ["workstation", "youtube"]
featured: false
draft: false
---
Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
## Covid-19 Situation
Nam ut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
*Example Caption*
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo vel ad consectetur ut aperiam. Itaque eligendi natus aperiam? Excepturi repellendus consequatur quibusdam optio expedita praesentium est adipisci dolorem ut eius!
================================================
FILE: context/state.js
================================================
import { createContext, useContext } from "react";
import posts from "../.json/posts.json";
const SearchContext = createContext();
export const JsonContext = ({ children }) => {
const state = {
posts,
};
return (
<SearchContext.Provider value={state}>{children}</SearchContext.Provider>
);
};
export const useSearchContext = () => {
return useContext(SearchContext);
};
================================================
FILE: hooks/useLoadMore.js
================================================
import { useEffect, useState } from "react";
// how to use
// const { loadedItems, loadItemsHandler, loadItemsFinished } = useLoadMore(filteredWebsites,6,mounted);
// returns {loadedItems, loadItemsHandler, loadItemsFinished}
const useLoadMore = (items, loadPerClick, mounted) => {
const [loadedItems, setLoadedItems] = useState([]);
const [next, setNext] = useState(loadPerClick);
const loadItems = (start, end) => {
const slicedItems = items.slice(start, end);
setLoadedItems([...loadedItems, ...slicedItems]);
};
const loadItemsHandler = () => {
loadItems(next, next + loadPerClick);
setNext(next + loadPerClick);
};
useEffect(() => {
loadItems(0, loadPerClick);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mounted]);
const loadItemsFinished = Number(items.length) == Number(loadedItems.length);
return {
loadedItems,
loadItemsHandler,
loadItemsFinished,
};
};
export default useLoadMore;
================================================
FILE: hooks/useOs.js
================================================
import { useEffect, useState } from "react";
// how to use
// const macOS = useOs()
// returns true/false
const useOs = () => {
// get Os
const [os, setOs] = useState(false);
useEffect(() => {
setOs(navigator.platform.indexOf("Mac") > -1);
}, []);
return os;
};
export default useOs;
================================================
FILE: hooks/useWindow.js
================================================
import { useEffect, useState } from "react";
// how to use
// const mobile = useWindow(767) < 768
// returns true/false
const useWindow = (size) => {
// getWindowDimensions
const [windowSize, setWindowSize] = useState(size || 768);
useEffect(() => {
function viewport() {
var width = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);
setWindowSize(width);
}
viewport();
window.onresize = viewport;
}, []);
return windowSize;
};
export default useWindow;
================================================
FILE: jsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@layouts/*": ["layouts/*"],
"@components/*": ["layouts/components/*"],
"@partials/*": ["layouts/partials/*"],
"@shortcodes/*": ["layouts/shortcodes/*"],
"@config/*": ["config/*"],
"@json/*": ["json/*"],
"@hooks/*": ["hooks/*"],
"@lib/*": ["lib/*"]
}
}
}
================================================
FILE: layouts/404.js
================================================
import { markdownify } from "@lib/utils/textConverter";
const NotFound = ({ data }) => {
const { frontmatter, content } = data;
return (
<section className="section">
<div className="container">
<div className="flex h-[40vh] items-center justify-center">
<div className="text-center">
<h1 className="mb-4">{frontmatter.title}</h1>
{markdownify(content, "div", "content")}
</div>
</div>
</div>
</section>
);
};
export default NotFound;
================================================
FILE: layouts/About.js
================================================
import { markdownify } from "@lib/utils/textConverter";
import shortcodes from "@shortcodes/all";
import { MDXRemote } from "next-mdx-remote";
import Image from "next/image";
const About = ({ data }) => {
const { frontmatter, mdxContent } = data;
const { title, image, education, experience } = frontmatter;
return (
<section className="section mt-16">
<div className="container text-center">
{image && (
<div className="mb-8">
<Image
src={image}
width={1298}
height={616}
alt={title}
className="rounded-lg"
priority={true}
/>
</div>
)}
{markdownify(title, "h1", "h1 text-left lg:text-[55px] mt-12")}
<div className="content text-left">
<MDXRemote {...mdxContent} components={shortcodes} />
</div>
<div className="row mt-24 text-left lg:flex-nowrap">
<div className="lg:col-6 ">
<div className="rounded border border-border p-6 dark:border-darkmode-border ">
{markdownify(education.title, "h2", "section-title mb-12")}
<div className="row">
{education.degrees.map((degree, index) => (
<div className="mb-7 md:col-6" key={"degree-" + index}>
<h4 className="text-base lg:text-[25px]">
{degree.university}
</h4>
<p className="mt-2">{degree.content}</p>
</div>
))}
</div>
</div>
</div>
<div className="experience mt-10 lg:mt-0 lg:col-6">
<div className="rounded border border-border p-6 dark:border-darkmode-border ">
{markdownify(experience.title, "h2", "section-title mb-12")}
<ul className="row">
{experience?.list?.map((item, index) => (
<li
className="mb-5 text-lg font-bold text-dark dark:text-darkmode-light lg:col-6"
key={"experience-" + index}
>
{item}
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</section>
);
};
export default About;
================================================
FILE: layouts/Baseof.js
================================================
import config from "@config/config.json";
import { plainify } from "@lib/utils/textConverter";
import Footer from "@partials/Footer";
import Header from "@partials/Header";
import Head from "next/head";
import { useRouter } from "next/router";
const Base = ({
title,
meta_title,
description,
image,
noindex,
canonical,
children,
}) => {
const { meta_image, meta_author, meta_description } = config.metadata;
const { base_url } = config.site;
const router = useRouter();
return (
<>
<Head>
{/* title */}
<title>
{plainify(
meta_title ? meta_title : title ? title : config.site.title
)}
</title>
{/* canonical url */}
{canonical && <link rel="canonical" href={canonical} itemProp="url" />}
{/* noindex robots */}
{noindex && <meta name="robots" content="noindex,nofollow" />}
{/* meta-description */}
<meta
name="description"
content={plainify(description ? description : meta_description)}
/>
{/* author from config.json */}
<meta name="author" content={meta_author} />
{/* og-title */}
<meta
property="og:title"
content={plainify(
meta_title ? meta_title : title ? title : config.site.title
)}
/>
{/* og-description */}
<meta
property="og:description"
content={plainify(description ? description : meta_description)}
/>
<meta property="og:type" content="website" />
<meta
property="og:url"
content={`${base_url}/${router.asPath.replace("/", "")}`}
/>
{/* twitter-title */}
<meta
name="twitter:title"
content={plainify(
meta_title ? meta_title : title ? title : config.site.title
)}
/>
{/* twitter-description */}
<meta
name="twitter:description"
content={plainify(description ? description : meta_description)}
/>
{/* og-image */}
<meta
property="og:image"
content={`${base_url}${image ? image : meta_image}`}
/>
{/* twitter-image */}
<meta
name="twitter:image"
content={`${base_url}${image ? image : meta_image}`}
/>
<meta name="twitter:card" content="summary_large_image" />
</Head>
<Header />
{/* main site */}
<main>{children}</main>
<Footer />
</>
);
};
export default Base;
================================================
FILE: layouts/Contact.js
================================================
import { markdownify } from "@lib/utils/textConverter";
import Link from "next/link";
import { BsArrowRightShort } from "react-icons/bs";
import { FaEnvelope, FaMapMarkerAlt, FaUserAlt } from "react-icons/fa";
import ImageFallback from "./components/ImageFallback";
const Contact = ({ data }) => {
const { frontmatter } = data;
const { title, form_action, phone, mail, location } = frontmatter;
return (
<section className="section lg:mt-16">
<div className="container">
<div className="row relative pb-16">
<ImageFallback
className="-z-[1] object-cover object-top"
src={"/images/map.svg"}
fill="true"
alt="map bg"
priority={true}
/>
<div className="lg:col-6">
{markdownify(
title,
"h1",
"h1 my-10 lg:my-11 lg:pt-11 text-center lg:text-left lg:text-[64px]"
)}
</div>
<div className="contact-form-wrapper rounded border border-border p-6 dark:border-darkmode-border lg:col-6">
<h2>
Send Us A
<span className="ml-1.5 inline-flex items-center text-primary">
Message
<BsArrowRightShort />
</span>
</h2>
<form
className="contact-form mt-12"
method="POST"
action={form_action}
>
<div className="mb-6">
<label className="mb-2 block font-secondary" htmlFor="name">
Full name
<small className="font-secondary text-sm text-primary">
*
</small>
</label>
<input
className="form-input w-full"
name="name"
type="text"
placeholder="Thomas Milano"
required
/>
</div>
<div className="mb-6">
<label className="mb-2 block font-secondary" htmlFor="email">
Email Address
<small className="font-secondary text-sm text-primary">
*
</small>
</label>
<input
className="form-input w-full"
name="email"
type="email"
placeholder="example@gmail.com"
required
/>
</div>
<div className="mb-6">
<label className="mb-2 block font-secondary" htmlFor="subject">
Subject
<small className="font-secondary text-sm text-primary">
*
</small>
</label>
<input
className="form-input w-full"
name="subject"
type="text"
placeholder="Blog advertisement"
required
/>
</div>
<div className="mb-6">
<label className="mb-2 block font-secondary" htmlFor="message">
Your Message Here
<small className="font-secondary text-sm text-primary">
*
</small>
</label>
<textarea
className="form-textarea w-full"
placeholder="Hello I’m Mr ‘x’ from………….."
rows="7"
/>
</div>
<input
className="btn btn-primary"
type="submit"
value="Send Now"
/>
</form>
</div>
</div>
<div className="row">
{phone && (
<div className="md:col-6 lg:col-4">
<Link
href={`tel:${phone}`}
className="my-4 flex h-[100px] items-center justify-center
rounded border border-border p-4 text-primary dark:border-darkmode-border"
>
<FaUserAlt />
<p className="ml-1.5 text-lg font-bold text-dark dark:text-darkmode-light">
{phone}
</p>
</Link>
</div>
)}
{mail && (
<div className="md:col-6 lg:col-4">
<Link
href={`mailto:${mail}`}
className="my-4 flex h-[100px] items-center justify-center
rounded border border-border p-4 text-primary dark:border-darkmode-border"
>
<FaEnvelope />
<p className="ml-1.5 text-lg font-bold text-dark dark:text-darkmode-light">
{mail}
</p>
</Link>
</div>
)}
{location && (
<div className="md:col-6 lg:col-4">
<span
className="my-4 flex h-[100px] items-center justify-center
rounded border border-border p-4 text-primary dark:border-darkmode-border"
>
<FaMapMarkerAlt />
<p className="ml-1.5 text-lg font-bold text-dark dark:text-darkmode-light">
{location}
</p>
</span>
</div>
)}
</div>
</div>
</section>
);
};
export default Contact;
================================================
FILE: layouts/Default.js
================================================
import { markdownify } from "@lib/utils/textConverter";
import shortcodes from "@shortcodes/all";
import { MDXRemote } from "next-mdx-remote";
const Default = ({ data }) => {
const { frontmatter, mdxContent } = data;
const { title } = frontmatter;
return (
<section className="section">
<div className="container">
{markdownify(title, "h1", "h2 mb-8 text-center")}
<div className="content">
<MDXRemote {...mdxContent} components={shortcodes} />
</div>
</div>
</section>
);
};
export default Default;
================================================
FILE: layouts/PostSingle.js
================================================
import config from "@config/config.json";
import Base from "@layouts/Baseof";
import InnerPagination from "@layouts/components/InnerPagination";
import dateFormat from "@lib/utils/dateFormat";
import { markdownify } from "@lib/utils/textConverter";
import { DiscussionEmbed } from "disqus-react";
import { MDXRemote } from "next-mdx-remote";
import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "next/link";
import { FaRegCalendar, FaUserAlt } from "react-icons/fa";
import Post from "./partials/Post";
import Sidebar from "./partials/Sidebar";
import shortcodes from "./shortcodes/all";
const { disqus } = config;
const { meta_author } = config.metadata;
const PostSingle = ({
frontmatter,
content,
mdxContent,
slug,
posts,
allCategories,
relatedPosts,
}) => {
let { description, title, date, image, categories } = frontmatter;
description = description ? description : content.slice(0, 120);
const { theme } = useTheme();
const author = frontmatter.author ? frontmatter.author : meta_author;
// Local copy so we don't modify global config.
let disqusConfig = config.disqus.settings;
disqusConfig.identifier = frontmatter.disqusId
? frontmatter.disqusId
: config.settings.blog_folder + "/" + slug;
return (
<Base title={title} description={description}>
<section className="section single-blog mt-6">
<div className="container">
<div className="row">
<div className="lg:col-8">
<article>
<div className="relative">
{image && (
<Image
src={image}
height="500"
width="1000"
alt={title}
className="rounded-lg"
/>
)}
<ul className="absolute top-3 left-2 flex flex-wrap items-center">
{categories.map((tag, index) => (
<li
className="mx-2 inline-flex h-7 rounded-[35px] bg-primary px-3 text-white"
key={"tag-" + index}
>
<Link
className="capitalize"
href={`/categories/${tag.replace(" ", "-")}`}
>
{tag}
</Link>
</li>
))}
</ul>
</div>
{config.settings.InnerPaginationOptions.enableTop && (
<div className="mt-4">
<InnerPagination posts={posts} date={date} />
</div>
)}
{markdownify(title, "h1", "lg:text-[42px] mt-4")}
<ul className="flex items-center space-x-4">
<li>
<Link
className="inline-flex items-center font-secondary text-xs leading-3"
href="/about"
>
<FaUserAlt className="mr-1.5" />
{author}
</Link>
</li>
<li className="inline-flex items-center font-secondary text-xs leading-3">
<FaRegCalendar className="mr-1.5" />
{dateFormat(date)}
</li>
</ul>
<div className="content mb-16">
<MDXRemote {...mdxContent} components={shortcodes} />
</div>
{config.settings.InnerPaginationOptions.enableBottom && (
<InnerPagination posts={posts} date={date} />
)}
</article>
<div className="mt-16">
{disqus.enable && (
<DiscussionEmbed
key={theme}
shortname={disqus.shortname}
config={disqusConfig}
/>
)}
</div>
</div>
<Sidebar
posts={posts.filter((post) => post.slug !== slug)}
categories={allCategories}
/>
</div>
</div>
{/* Related posts */}
<div className="container mt-20">
<h2 className="section-title">Related Posts</h2>
<div className="row mt-16">
{relatedPosts.slice(0, 3).map((post, index) => (
<div key={"post-" + index} className="mb-12 lg:col-4">
<Post post={post} />
</div>
))}
</div>
</div>
</section>
</Base>
);
};
export default PostSingle;
================================================
FILE: layouts/components/ImageFallback.js
================================================
/* eslint-disable jsx-a11y/alt-text */
import Image from "next/image";
import { useEffect, useState } from "react";
const ImageFallback = (props) => {
const { src, fallback, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
useEffect(() => {
setImgSrc(src);
}, [src]);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallback);
}}
/>
);
};
export default ImageFallback;
================================================
FILE: layouts/components/InnerPagination.js
================================================
import { sortByDate } from "@lib/utils/sortFunctions";
import Link from "next/link";
const InnerPagination = ({ posts, date }) => {
const orderedPosts = sortByDate(posts);
const lastIndex = orderedPosts.length - 1;
const postIndex = orderedPosts.findIndex(
(post) => post.frontmatter.date == date
);
const next = postIndex == 0 ? undefined : orderedPosts[postIndex - 1].slug;
const prev =
postIndex == lastIndex ? undefined : orderedPosts[postIndex + 1].slug;
const prevButton = prev && (
<Link href={prev} className={"btn btn-primary"}>
Prev
</Link>
);
const nextButton = next && (
<Link href={next} className={"btn btn-primary"}>
Next
</Link>
);
return (
<div className="row">
<span className="col">{prevButton}</span>
<span className="col-8" />
<span className="col">{nextButton}</span>
</div>
);
};
export default InnerPagination;
================================================
FILE: layouts/components/Logo.js
================================================
import ImageFallback from "@components/ImageFallback";
import config from "@config/config.json";
import { useTheme } from "next-themes";
import Link from "next/link";
import { useEffect, useState } from "react";
const Logo = ({ src }) => {
// destructuring items from config object
const { logo, logo_white, logo_width, logo_height, logo_text, title } =
config.site;
const { theme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return (
<Link href="/" className="navbar-brand">
{src || logo ? (
<ImageFallback
width={logo_width.replace("px", "") * 2}
height={logo_height.replace("px", "") * 2}
src={
mounted && (theme === "dark" || resolvedTheme === "dark")
? logo_white
: logo
}
alt={title}
priority
style={{
height: logo_height.replace("px", "") + "px",
width: logo_width.replace("px", "") + "px",
}}
className={"m-auto"}
/>
) : logo_text ? (
logo_text
) : (
title
)}
</Link>
);
};
export default Logo;
================================================
FILE: layouts/components/NewsLetterForm.js
================================================
import React, { useState } from "react";
import { FaEnvelope } from "react-icons/fa";
function CustomForm({ status, message, onValidated }) {
const [email, setEmail] = useState("");
const resetForm = () => {
setEmail("");
};
const handleSubmit = (e) => {
e.preventDefault();
email && email.indexOf("@") > -1 && onValidated({ EMAIL: email });
resetForm();
};
return (
<>
<form action="#" className="py-6" onSubmit={handleSubmit}>
<fieldset className="relative">
<input
className="newsletter-input form-input h-12 w-full rounded-3xl border-none bg-theme-light px-5 py-3 pr-12 text-dark placeholder:text-xs dark:bg-darkmode-theme-dark"
type="text"
placeholder="Type And Hit Enter"
onChange={(e) => setEmail(e.target.value)}
/>
<FaEnvelope className="absolute top-1/2 right-5 -translate-y-1/2 text-xl transition duration-75" />
</fieldset>
<button className="d-block btn btn-primary mt-4 w-full" type="submit">
Sign In
</button>
</form>
{status === "sending" && (
<div className="mt-4 text-primary">sending...</div>
)}
{status === "error" && (
<div
className="mt-4 text-red-700"
dangerouslySetInnerHTML={{ __html: message }}
/>
)}
{status === "success" && (
<div className="mt-4 text-green-700">Subscribed !</div>
)}
</>
);
}
export default CustomForm;
================================================
FILE: layouts/components/Pagination.js
================================================
import Link from "next/link";
import React from "react";
import { BsArrowRightShort, BsArrowLeftShort } from "react-icons/bs";
const Pagination = ({ section, currentPage, totalPages }) => {
const indexPageLink = currentPage === 2;
const hasPrevPage = currentPage > 1;
const hasNextPage = totalPages > currentPage;
let pageList = [];
for (let i = 1; i <= totalPages; i++) {
pageList.push(i);
}
return (
<>
{totalPages > 1 && (
<nav
className="item-center mb-4 flex justify-center space-x-1 lg:space-x-2"
aria-label="Pagination"
>
{/* previous */}
{hasPrevPage ? (
<Link
href={
indexPageLink
? `${section ? "/" + section : "/"}`
: `${section ? "/" + section : ""}/page/${currentPage - 1}`
}
className="flex items-center rounded-full px-2 py-1 text-3xl font-bold leading-none text-dark dark:text-darkmode-light"
>
<>
<BsArrowLeftShort />
<span className="ml-3 text-lg ">Previous</span>
</>
</Link>
) : (
<span className="flex items-center rounded-full px-2 py-1 text-3xl font-bold text-dark dark:text-darkmode-light ">
<>
<BsArrowLeftShort />
<span className="ml-3 text-lg">Previous</span>
</>
</span>
)}
{/* page index */}
{pageList.map((pagination, i) => (
<React.Fragment key={`page-${i}`}>
{pagination === currentPage ? (
<span
aria-current="page"
className={`inline-flex h-[38px] w-[38px] items-center justify-center rounded-full bg-primary px-4 py-1 font-secondary text-lg font-bold leading-none text-dark text-white dark:text-darkmode-light`}
>
{pagination}
</span>
) : (
<Link
href={
i === 0
? `${section ? "/" + section : "/"}`
: `${section ? "/" + section : ""}/page/${pagination}`
}
passHref
aria-current="page"
className={`inline-flex h-[38px] w-[38px] items-center justify-center rounded-full px-4 py-1 font-secondary text-lg font-bold leading-none text-dark dark:text-darkmode-light`}
>
{pagination}
</Link>
)}
</React.Fragment>
))}
{/* next page */}
{hasNextPage ? (
<Link
href={`${section ? "/" + section : ""}/page/${currentPage + 1}`}
className="ml-4 flex items-center rounded-full px-2 py-1 text-3xl font-bold leading-none text-dark dark:text-darkmode-light"
>
<>
<span className="mr-3 text-lg">Next</span>
<BsArrowRightShort />
</>
</Link>
) : (
<span className="ml-4 flex items-center rounded-full px-2 py-1 text-3xl font-bold text-dark dark:text-darkmode-light">
<>
<span className="mr-3 text-lg">Next</span>
<BsArrowRightShort />
</>
</span>
)}
</nav>
)}
</>
);
};
export default Pagination;
================================================
FILE: layouts/components/Share.js
================================================
import config from "@config/config.json";
import {
IoLogoFacebook,
IoLogoLinkedin,
IoLogoPinterest,
IoLogoTwitter,
} from "react-icons/io5";
const Share = ({ title, description, slug, className }) => {
// destructuring items from config object
const { base_url } = config.site;
return (
<ul className={`${className}`}>
<li className="inline-block">
<a
aria-label="facebook share button"
href={`https://facebook.com/sharer/sharer.php?u=${base_url}/${slug}`}
target="_blank"
rel="noreferrer noopener"
button="true"
>
<IoLogoFacebook />
</a>
</li>
<li className="inline-block">
<a
aria-label="twitter share button"
href={`https://twitter.com/intent/tweet/?text=${title}&url=${base_url}/${slug}`}
target="_blank"
rel="noreferrer noopener"
button="true"
>
<IoLogoTwitter />
</a>
</li>
<li className="inline-block">
<a
aria-label="linkedin share button"
href={`https://www.linkedin.com/shareArticle?mini=true&url=${base_url}/${slug}&title=${title}&summary=${description}&source=${base_url}`}
target="_blank"
rel="noreferrer noopener"
>
<IoLogoLinkedin />
</a>
</li>
<li className="inline-block">
<a
aria-label="pinterest share button"
href={`https://pinterest.com/pin/create/button/?url=${base_url}/${slug}&media=&description=${description}`}
target="_blank"
rel="noreferrer noopener"
button="true"
>
<IoLogoPinterest />
</a>
</li>
</ul>
);
};
export default Share;
================================================
FILE: layouts/components/Social.js
================================================
import {
IoCall,
IoGlobeOutline,
IoLocation,
IoLogoBehance,
IoLogoBitbucket,
IoLogoCodepen,
IoLogoDiscord,
IoLogoDribbble,
IoLogoFacebook,
IoLogoFoursquare,
IoLogoGithub,
IoLogoGitlab,
IoLogoInstagram,
IoLogoLinkedin,
IoLogoMedium,
IoLogoPinterest,
IoLogoReddit,
IoLogoRss,
IoLogoSkype,
IoLogoSlack,
IoLogoSnapchat,
IoLogoSoundcloud,
IoLogoTiktok,
IoLogoTumblr,
IoLogoTwitter,
IoLogoVimeo,
IoLogoVk,
IoLogoWhatsapp,
IoLogoYoutube,
IoMail,
IoLogoStackoverflow,
} from "react-icons/io5";
const Social = ({ source, className }) => {
const {
facebook,
stackoverflow,
twitter,
instagram,
youtube,
linkedin,
github,
gitlab,
discord,
slack,
medium,
codepen,
bitbucket,
dribbble,
behance,
pinterest,
soundcloud,
tumblr,
reddit,
vk,
whatsapp,
snapchat,
vimeo,
tiktok,
foursquare,
rss,
email,
phone,
address,
skype,
website,
} = source;
return (
<ul className={className}>
{facebook && (
<li className="inline-block">
<a
aria-label="facebook"
href={facebook}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoFacebook />
</a>
</li>
)}
{stackoverflow && (
<li className="inline-block">
<a
aria-label="stackoverflow"
href={stackoverflow}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoStackoverflow />
</a>
</li>
)}
{twitter && (
<li className="inline-block">
<a
aria-label="twitter"
href={twitter}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTwitter />
</a>
</li>
)}
{instagram && (
<li className="inline-block">
<a
aria-label="instagram"
href={instagram}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoInstagram />
</a>
</li>
)}
{youtube && (
<li className="inline-block">
<a
aria-label="youtube"
href={youtube}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoYoutube />
</a>
</li>
)}
{linkedin && (
<li className="inline-block">
<a
aria-label="linkedin"
href={linkedin}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoLinkedin />
</a>
</li>
)}
{github && (
<li className="inline-block">
<a
aria-label="github"
href={github}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoGithub />
</a>
</li>
)}
{gitlab && (
<li className="inline-block">
<a
aria-label="gitlab"
href={gitlab}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoGitlab />
</a>
</li>
)}
{discord && (
<li className="inline-block">
<a
aria-label="discord"
href={discord}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoDiscord />
</a>
</li>
)}
{slack && (
<li className="inline-block">
<a
aria-label="slack"
href={slack}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSlack />
</a>
</li>
)}
{medium && (
<li className="inline-block">
<a
aria-label="medium"
href={medium}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoMedium />
</a>
</li>
)}
{codepen && (
<li className="inline-block">
<a
aria-label="codepen"
href={codepen}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoCodepen />
</a>
</li>
)}
{bitbucket && (
<li className="inline-block">
<a
aria-label="bitbucket"
href={bitbucket}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoBitbucket />
</a>
</li>
)}
{dribbble && (
<li className="inline-block">
<a
aria-label="dribbble"
href={dribbble}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoDribbble />
</a>
</li>
)}
{behance && (
<li className="inline-block">
<a
aria-label="behance"
href={behance}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoBehance />
</a>
</li>
)}
{pinterest && (
<li className="inline-block">
<a
aria-label="pinterest"
href={pinterest}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoPinterest />
</a>
</li>
)}
{soundcloud && (
<li className="inline-block">
<a
aria-label="soundcloud"
href={soundcloud}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSoundcloud />
</a>
</li>
)}
{tumblr && (
<li className="inline-block">
<a
aria-label="tumblr"
href={tumblr}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTumblr />
</a>
</li>
)}
{reddit && (
<li className="inline-block">
<a
aria-label="reddit"
href={reddit}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoReddit />
</a>
</li>
)}
{vk && (
<li className="inline-block">
<a
aria-label="vk"
href={vk}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoVk />
</a>
</li>
)}
{whatsapp && (
<li className="inline-block">
<a
aria-label="whatsapp"
href={whatsapp}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoWhatsapp />
</a>
</li>
)}
{snapchat && (
<li className="inline-block">
<a
aria-label="snapchat"
href={snapchat}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSnapchat />
</a>
</li>
)}
{vimeo && (
<li className="inline-block">
<a
aria-label="vimeo"
href={vimeo}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoVimeo />
</a>
</li>
)}
{tiktok && (
<li className="inline-block">
<a
aria-label="tiktok"
href={tiktok}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoTiktok />
</a>
</li>
)}
{foursquare && (
<li className="inline-block">
<a
aria-label="foursquare"
href={foursquare}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoFoursquare />
</a>
</li>
)}
{skype && (
<li className="inline-block">
<a
aria-label="skype"
href={skype}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoSkype />
</a>
</li>
)}
{website && (
<li className="inline-block">
<a
aria-label="website"
href={website}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoGlobeOutline />
</a>
</li>
)}
{rss && (
<li className="inline-block">
<a
aria-label="rss feed"
href={rss}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLogoRss />
</a>
</li>
)}
{email && (
<li className="inline-block">
<a aria-label="email" href={`mailto:${email}`}>
<IoMail />
</a>
</li>
)}
{phone && (
<li className="inline-block">
<a aria-label="telephone" href={`tel:${phone}`}>
<IoCall />
</a>
</li>
)}
{address && (
<li className="inline-block">
<a
aria-label="location"
href={address}
target="_blank"
rel="noopener noreferrer nofollow"
>
<IoLocation />
</a>
</li>
)}
</ul>
);
};
export default Social;
================================================
FILE: layouts/components/ThemeSwitcher.js
================================================
import config from "@config/config.json";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
const ThemeSwitcher = () => {
const { theme_switcher } = config.settings;
const [mounted, setMounted] = useState(false);
const { theme, setTheme, resolvedTheme } = useTheme();
useEffect(() => setMounted(true), []);
return (
<>
{theme_switcher && (
<button
aria-label="Toggle Theme"
type="button"
className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
onClick={() =>
setTheme(
theme === "dark" || resolvedTheme === "dark" ? "light" : "dark"
)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="text-gray-900 dark:text-gray-100"
>
{mounted && (theme === "dark" || resolvedTheme === "dark") ? (
<path
fillRule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clipRule="evenodd"
/>
) : (
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
)}
</svg>
</button>
)}
</>
);
};
export default ThemeSwitcher;
================================================
FILE: layouts/components/TwSizeIndicator.js
================================================
const TwSizeIndicator = () => {
if (process.env.NODE_ENV === "development") {
return (
<div className="fixed top-0 left-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
<span className="block sm:hidden">all</span>
<span className="hidden sm:block md:hidden">sm</span>
<span className="hidden md:block lg:hidden">md</span>
<span className="hidden lg:block xl:hidden">lg</span>
<span className="hidden xl:block 2xl:hidden">xl</span>
<span className="hidden 2xl:block">2xl</span>
</div>
);
} else {
return null;
}
};
export default TwSizeIndicator;
================================================
FILE: layouts/partials/Footer.js
================================================
import Social from "@components/Social";
import config from "@config/config.json";
import menu from "@config/menu.json";
import social from "@config/social.json";
import ImageFallback from "@layouts/components/ImageFallback";
import Logo from "@layouts/components/Logo";
import { markdownify } from "@lib/utils/textConverter";
import Link from "next/link";
const Footer = () => {
const { copyright, footer_content } = config.params;
return (
<footer className="section relative mt-12 pt-[70px] pb-[50px]">
<ImageFallback
className="-z-[1] object-cover object-left md:object-top"
src="/images/footer-bg-shape.svg"
alt="footer background"
fill={true}
/>
<div className="container text-center">
<div className="mb-6 inline-flex">
<Logo />
</div>
{markdownify(footer_content, "p", "max-w-[638px] mx-auto")}
{/* footer menu */}
<ul className="mb-12 mt-6 flex-wrap space-x-2 lg:space-x-4">
{menu.footer.map((menu) => (
<li className="inline-block" key={menu.name}>
<Link
href={menu.url}
className="p-2 font-bold text-dark hover:text-primary dark:text-darkmode-light lg:p-4"
>
{menu.name}
</Link>
</li>
))}
</ul>
{/* social icons */}
<div className="inline-flex">
<Social source={social} className="socials mb-12 justify-center" />
</div>
{/* copyright */}
{markdownify(copyright, "p")}
</div>
</footer>
);
};
export default Footer;
================================================
FILE: layouts/partials/Header.js
================================================
import Logo from "@components/Logo";
import menu from "@config/menu.json";
import socical from "@config/social.json";
import Social from "@layouts/components/Social";
import ThemeSwitcher from "@layouts/components/ThemeSwitcher";
import SearchModal from "@partials/SearchModal";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { IoSearch } from "react-icons/io5";
const Header = () => {
// distructuring the main menu from menu object
const { main } = menu;
// states declaration
const [searchModal, setSearchModal] = useState(false);
const [showMenu, setShowMenu] = useState(false);
// Router
const router = useRouter();
//stop scrolling when nav is open
useEffect(() => {
if (showMenu) {
document.body.classList.add("menu-open");
} else {
document.body.classList.remove("menu-open");
}
}, [showMenu]);
return (
<header className="header">
<nav className="navbar container px-1 sm:px-8">
<div className="order-0">
<Logo />
</div>
<div className="flex items-center space-x-4 xl:space-x-8">
<div
className={`collapse-menu ${
!showMenu && "translate-x-full"
} lg:flex lg:translate-x-0`}
>
<button
className="absolute right-6 top-11 lg:hidden"
onClick={() => setShowMenu(false)}
>
<svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
<title>Menu Close</title>
<polygon
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
transform="rotate(45 10 10)"
/>
</svg>
</button>
<ul
id="nav-menu"
className="navbar-nav w-full md:w-auto md:space-x-1 lg:flex xl:space-x-2"
>
{main.map((menu, i) => (
<React.Fragment key={`menu-${i}`}>
{menu.hasChildren ? (
<li className="nav-item nav-dropdown group relative">
<span
className={`nav-link ${
menu.children
.map((c) => c.url)
.includes(router.asPath) && "active"
} inline-flex items-center`}
>
{menu.name}
<svg
className="h-4 w-4 fill-current"
viewBox="0 0 20 20"
>
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</span>
<ul className="nav-dropdown-list hidden transition-all duration-300 group-hover:top-[46px] group-hover:block md:invisible md:absolute md:top-[60px] md:block md:opacity-0 md:group-hover:visible md:group-hover:opacity-100">
{menu.children.map((child, i) => (
<li
className="nav-dropdown-item"
key={`children-${i}`}
>
<Link
href={child.url}
className={`nav-dropdown-link block ${
router.asPath === child.url && "active"
}`}
>
{child.name}
</Link>
</li>
))}
</ul>
</li>
) : (
<li className="nav-item">
<Link
href={menu.url}
className={`nav-link block ${
router.asPath === menu.url && "active"
}`}
>
{menu.name}
</Link>
</li>
)}
</React.Fragment>
))}
</ul>
{/* header social */}
<Social source={socical} className="socials" />
</div>
<ThemeSwitcher />
{/* Header search */}
<div
className="search-icon"
onClick={() => {
setSearchModal(true);
}}
>
<IoSearch />
</div>
<button
onClick={() => setShowMenu(!showMenu)}
className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white lg:hidden"
>
{showMenu ? (
<svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
<title>Menu Close</title>
<polygon
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
transform="rotate(45 10 10)"
/>
</svg>
) : (
<svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
<title>Menu Open</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" />
</svg>
)}
</button>
</div>
<SearchModal
searchModal={searchModal}
setSearchModal={setSearchModal}
/>
</nav>
{showMenu && (
<div className="header-backdrop absolute top-0 left-0 h-[100vh] w-full bg-black/50 lg:hidden"></div>
)}
</header>
);
};
export default Header;
================================================
FILE: layouts/partials/Post.js
================================================
import config from "@config/config.json";
import ImageFallback from "@layouts/components/ImageFallback";
import dateFormat from "@lib/utils/dateFormat";
import Link from "next/link";
import { FaRegCalendar, FaUserAlt } from "react-icons/fa";
const Post = ({ post }) => {
const { summary_length, blog_folder } = config.settings;
const { meta_author } = config.metadata;
const author = post.frontmatter.author ? post.frontmatter.author : meta_author;
return (
<div className="post">
<div className="relative">
{post.frontmatter.image && (
<ImageFallback
className="rounded"
src={post.frontmatter.image}
alt={post.frontmatter.title}
width={405}
height={208}
/>
)}
<ul className="absolute top-3 left-2 flex flex-wrap items-center">
{post.frontmatter.categories.map((tag, index) => (
<li
className="mx-2 inline-flex h-7 rounded-[35px] bg-primary px-3 text-white"
key={"tag-" + index}
>
<Link
className="capitalize"
href={`/categories/${tag.replace(" ", "-")}`}
>
{tag}
</Link>
</li>
))}
</ul>
</div>
<h3 className="h5 mb-2 mt-4">
<Link
href={`/${blog_folder}/${post.slug}`}
className="block hover:text-primary"
>
{post.frontmatter.title}
</Link>
</h3>
<ul className="flex items-center space-x-4">
<li>
<Link
className="inline-flex items-center font-secondary text-xs leading-3"
href="/about"
>
<FaUserAlt className="mr-1.5" />
{author}
</Link>
</li>
<li className="inline-flex items-center font-secondary text-xs leading-3">
<FaRegCalendar className="mr-1.5" />
{dateFormat(post.frontmatter.date)}
</li>
</ul>
<p>{post.content.slice(0, Number(summary_length))}</p>
<Link
className="btn btn-outline-primary mt-4"
href={`/${blog_folder}/${post.slug}`}
>
Read More
</Link>
</div>
);
};
export default Post;
================================================
FILE: layouts/partials/SearchModal.js
================================================
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { IoCloseCircleOutline } from "react-icons/io5";
const SearchModal = ({ searchModal, setSearchModal }) => {
const router = useRouter();
const [input, setInput] = useState("");
useEffect(() => {
if (searchModal) {
document.getElementById("searchModal").focus();
document.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
router.push({ pathname: "/search", query: { key: input } });
setSearchModal(false);
}
if (e.key === "Escape") {
setSearchModal(false);
}
});
}
});
return (
<div className={`search-modal ${searchModal ? "open" : ""}`}>
<button onClick={() => setSearchModal(false)} className="search-close">
<IoCloseCircleOutline />
</button>
<input
type="text"
className="form-input bg-body placeholder:text-base dark:bg-darkmode-body"
id="searchModal"
placeholder="Type and hit enter..."
onChange={(e) => setInput(e.target.value)}
/>
</div>
);
};
export default SearchModal;
================================================
FILE: layouts/partials/Sidebar.js
================================================
import config from "@config/config.json";
import social from "@config/social.json";
import ImageFallback from "@layouts/components/ImageFallback";
import Logo from "@layouts/components/Logo";
import CustomForm from "@layouts/components/NewsLetterForm";
import Social from "@layouts/components/Social";
import dateFormat from "@lib/utils/dateFormat";
import { sortByDate } from "@lib/utils/sortFunctions";
import { markdownify } from "@lib/utils/textConverter";
import Link from "next/link";
import { useState } from "react";
import { FaRegCalendar } from "react-icons/fa";
import MailchimpSubscribe from "react-mailchimp-subscribe";
const { blog_folder } = config.settings;
const { about, featured_posts, newsletter } = config.widgets;
const Sidebar = ({ posts, categories, className }) => {
const sortPostByDate = sortByDate(posts);
const featuredPosts = sortPostByDate.filter(
(post) => post.frontmatter.featured
);
const [showRecent, setShowRecent] = useState(true);
return (
<aside className={`${className} px-0 lg:px-6 lg:col-4`}>
{about.enable && (
<div className="relative rounded border border-border p-6 text-center dark:border-darkmode-border">
<ImageFallback
className="-z-[1]"
src="/images/map.svg"
fill={true}
alt="bg-map"
/>
<Logo />
{markdownify(about.content, "p", "mt-8")}
<Social
className="socials sidebar-socials mt-6 justify-center"
source={social}
/>
</div>
)}
{/* categories widget */}
{categories.enable && (
<div className="mt-6 rounded border border-border p-6 dark:border-darkmode-border">
<h4 className="section-title mb-12 text-center">
{featured_posts.title}
</h4>
<ul>
{categories.map((category, i) => (
<li
className={`relative mb-2 flex items-center justify-between pl-6 text-[16px] font-bold capitalize text-dark dark:text-darkmode-light ${
i !== categories.length - 1 &&
"border-b border-border dark:border-darkmode-border"
}`}
key={i}
>
<svg
className="absolute left-0 top-2.5"
width="20px"
height="20px"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.7318 9.35984C12.0854 8.93556 12.7159 8.87824 13.1402 9.2318C13.5645 9.58537 13.6218 10.2159 13.2682 10.6402L8.26825 16.6402C7.91468 17.0645 7.28412 17.1218 6.85984 16.7682C6.43556 16.4147 6.37824 15.7841 6.7318 15.3598L11.7318 9.35984Z"
fill="#2ba283"
/>
<path
d="M6.7318 4.64021C6.37824 4.21593 6.43556 3.58537 6.85984 3.2318C7.28412 2.87824 7.91468 2.93556 8.26825 3.35984L13.2682 9.35984C13.6218 9.78412 13.5645 10.4147 13.1402 10.7682C12.7159 11.1218 12.0854 11.0645 11.7318 10.6402L6.7318 4.64021Z"
fill="#2ba283"
/>
</svg>
<Link className="py-2" href={`/categories/${category.name}`}>
{category.name.replace("-", " ")}
<span className="absolute top-1/2 right-0 -translate-y-1/2 text-[10px] text-gray-500">
{category.posts}
</span>
</Link>
</li>
))}
</ul>
</div>
)}
{/* featured widget */}
{featured_posts.enable && (
<div className="mt-6 rounded border border-border p-6 dark:border-darkmode-border">
<h4 className="section-title mb-12 text-center">Featured</h4>
<div className="mb-12 flex items-center justify-center">
<button
className={`btn px-5 py-2 ${
showRecent ? "btn-outline-primary" : "btn-primary"
}`}
onClick={() => setShowRecent(false)}
>
Featured
</button>
<button
className={`btn ml-3 px-5 py-2 ${
showRecent ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setShowRecent(true)}
>
Recent
</button>
</div>
{showRecent
? sortPostByDate
.slice(0, featured_posts.showPost)
.map((post, i, arr) => (
<div
className={`flex items-center ${
i !== arr.length - 1 &&
"mb-6 border-b border-border pb-6 dark:border-darkmode-border"
}`}
key={`key-${i}`}
>
{post.frontmatter.image && (
<ImageFallback
className="mr-3 h-[85px] w-[85px] rounded-full object-cover"
src={post.frontmatter.image}
alt={post.frontmatter.title}
width={105}
height={85}
/>
)}
<div>
<h3 className="h5 mb-2">
<Link
href={`/${blog_folder}/${post.slug}`}
className="block hover:text-primary"
>
{post.frontmatter.title}
</Link>
</h3>
<p className="inline-flex items-center font-secondary text-xs">
<FaRegCalendar className="mr-1.5" />
{dateFormat(post.frontmatter.date)}
</p>
</div>
</div>
))
: featuredPosts
.slice(0, featured_posts.showPost)
.map((post, i, arr) => (
<div
className={`flex items-center pb-6 ${
i !== arr.length - 1 &&
"mb-6 border-b dark:border-b-darkmode-border"
}`}
key={`key-${i}`}
>
{post.frontmatter.image && (
<ImageFallback
className="mr-3 h-[85px] w-[85px] rounded-full object-cover"
src={post.frontmatter.image}
alt={post.frontmatter.title}
width={105}
height={85}
/>
)}
<div>
<h3 className="h5 mb-2">
<Link
href={`/${blog_folder}/${post.slug}`}
className="block hover:text-primary"
>
{post.frontmatter.title}
</Link>
</h3>
<p className="inline-flex items-center font-secondary text-xs">
<FaRegCalendar className="mr-1.5" />
{dateFormat(post.frontmatter.date)}
</p>
</div>
</div>
))}
</div>
)}
{/* newsletter */}
{newsletter.enable && (
<div className="mt-6 rounded border border-border p-6 text-center dark:border-darkmode-border">
<h4 className="section-title">{newsletter.title}</h4>
<p className="mt-10 text-xs">{newsletter.content}</p>
<MailchimpSubscribe
url={newsletter.malichip_url}
render={({ subscribe, status, message }) => (
<CustomForm
onValidated={(formData) => subscribe(formData)}
status={status}
message={message}
/>
)}
/>
<p className="text-xs">
By Singing Up, You Agree To
<Link
href={newsletter.privacy_policy_page}
className="ml-1 text-primary"
>
Privacy Policy
</Link>
</p>
</div>
)}
</aside>
);
};
export default Sidebar;
================================================
FILE: layouts/shortcodes/Accordion.jsx
================================================
import { useState } from "react";
const Accordion = ({ title, children, className }) => {
const [show, setShow] = useState(false);
return (
<div
className={`rounded border border-border dark:border-darkmode-border ${className}`}
>
<button
className="relative block w-full bg-theme-light px-4 py-3 text-left text-dark dark:bg-darkmode-theme-dark dark:text-darkmode-light"
onClick={() => setShow(!show)}
>
{title}
<svg
className={`absolute right-4 top-1/2 m-0 h-4 w-4 -translate-y-1/2 ${
show && "rotate-180"
}`}
x="0px"
y="0px"
viewBox="0 0 512.011 512.011"
xmlSpace="preserve"
>
<path
fill="currentColor"
d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"
/>
</svg>
</button>
<div className={`px-4 py-3 ${!show && "hidden"}`}>{children}</div>
</div>
);
};
export default Accordion;
================================================
FILE: layouts/shortcodes/Button.jsx
================================================
import Link from "next/link";
const Button = ({ href, type, rel, children }) => {
return (
<Link
href={href}
target="_blank"
rel={`noopener noreferrer ${
rel ? (rel === "follow" ? "" : rel) : "nofollow"
}`}
className={`btn me-4 mb-4 ${
type === "outline" ? "btn-outline-primary" : "btn-primary"
} border-primary hover:text-white hover:no-underline`}
>
{children}
</Link>
);
};
export default Button;
================================================
FILE: layouts/shortcodes/Code.jsx
================================================
import SyntaxHighlighter from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
const HighlightedCode = ({ children, language }) => {
return (
<SyntaxHighlighter language={language} style={a11yDark}>
{children}
</SyntaxHighlighter>
);
};
export default HighlightedCode;
================================================
FILE: layouts/shortcodes/Notice.jsx
================================================
function Notice({ type, children }) {
return (
<div className={`notice ${type} relative mb-8`}>
<div className="notice-head absolute top-0 left-0 z-10 flex h-[30px] w-full items-center px-3">
<svg width="16px" height="16px" viewBox="0 0 512 512">
<path
fill="#fff"
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
/>
</svg>
<p className="my-0 ml-1.5 text-base capitalize text-white dark:text-white">
{type}
</p>
</div>
<div className="notice-body my-0 p-3 pt-[40px] dark:text-darkmode-light">
{children}
</div>
</div>
);
}
export default Notice;
================================================
FILE: layouts/shortcodes/Tab.jsx
================================================
function Tab({ children }) {
return <li className="tab-item my-0 hidden">{children}</li>;
}
export default Tab;
================================================
FILE: layouts/shortcodes/Tabs.jsx
================================================
import { useEffect, useRef } from "react";
function Tabs({ children }) {
//select tabItems
const tabItemsRef = useRef(null);
//change tab item on click
const handleChangTab = (event, index) => {
const tabLinks = [...event.currentTarget.parentElement.children];
const items = [...tabItemsRef.current.children];
const activeItem = items.find((item) => !item.classList.contains("hidden"));
const activeTabLink = tabLinks.find((item) =>
item.classList.contains("active-tab")
);
if (activeItem === items[index]) return;
activeTabLink.classList.remove("active-tab");
event.currentTarget.classList.add("active-tab");
activeItem.classList.add("hidden");
items[index].classList.remove("hidden");
};
//show first tab-item
useEffect(() => {
let allItems = [...tabItemsRef.current.children];
allItems[0].classList.remove("hidden");
}, []);
return (
<div className="relative">
<ul className="mb-0 flex list-none items-center space-x-4 pl-0">
{children.map((item, index) => (
<li
key={index}
className={` m-0 cursor-pointer rounded px-8 py-3 font-bold text-dark dark:text-darkmode-light ${
index === 0 && "active-tab"
}`}
onClick={(e) => handleChangTab(e, index)}
>
{item.props.name}
</li>
))}
</ul>
<ul
className="mt-1 mb-0 list-none rounded bg-theme-light p-6 dark:bg-darkmode-theme-dark"
ref={tabItemsRef}
>
{children}
</ul>
</div>
);
}
export default Tabs;
================================================
FILE: layouts/shortcodes/Video.jsx
================================================
function Video({ title, width = 500, height = "auto", src, ...rest }) {
return (
<video
className="overflow-hidden rounded"
width={width}
height={height}
controls
{...rest}
>
<source
src={src.match(/^http/) ? src : `/videos/${src}`}
type="video/mp4"
/>
{title}
</video>
);
}
export default Video;
================================================
FILE: layouts/shortcodes/Youtube.jsx
================================================
import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
const Youtube = ({ id, title, ...rest }) => {
return (
<div className="overflow-hidden rounded">
<LiteYouTubeEmbed id={id} title={title} {...rest} />
</div>
);
};
export default Youtube;
================================================
FILE: layouts/shortcodes/all.js
================================================
import Accordion from "./Accordion";
import Button from "./Button";
import Code from "./Code";
import Notice from "./Notice";
import Tab from "./Tab";
import Tabs from "./Tabs";
import Video from "./Video";
import Youtube from "./Youtube";
const shortcodes = {
Button,
Accordion,
Video,
Tab,
Tabs,
Notice,
Code,
Youtube
};
export default shortcodes;
================================================
FILE: lib/contentParser.js
================================================
import parseMDX from "@lib/utils/mdxParser";
import fs from "fs";
import matter from "gray-matter";
import path from "path";
// get list page data, ex: _index.md
export const getListPage = async (filePath) => {
const pageData = fs.readFileSync(filePath, "utf-8");
const pageDataParsed = matter(pageData);
const notFoundPage = fs.readFileSync("content/404.md", "utf-8");
const notFoundDataParsed = matter(notFoundPage);
let frontmatter, content;
if (pageDataParsed) {
content = pageDataParsed.content;
frontmatter = pageDataParsed.data;
} else {
content = notFoundDataParsed.content;
frontmatter = notFoundDataParsed.data;
}
const mdxContent = await parseMDX(content);
return {
frontmatter,
content,
mdxContent,
};
};
// get all single pages, ex: blog/post.md
export const getSinglePage = (folder) => {
const filesPath = fs.readdirSync(folder);
const sanitizeFiles = filesPath.filter((file) => file.endsWith(".md"));
const filterSingleFiles = sanitizeFiles.filter((file) =>
file.match(/^(?!_)/)
);
const singlePages = filterSingleFiles.map((filename) => {
const slug = filename.replace(".md", "");
const pageData = fs.readFileSync(path.join(folder, filename), "utf-8");
const pageDataParsed = matter(pageData);
const frontmatterString = JSON.stringify(pageDataParsed.data);
const frontmatter = JSON.parse(frontmatterString);
const content = pageDataParsed.content;
const url = frontmatter.url ? frontmatter.url.replace("/", "") : slug;
return { frontmatter: frontmatter, slug: url, content: content };
});
const publishedPages = singlePages.filter(
(page) =>
!page.frontmatter.draft && page.frontmatter.layout !== "404" && page
);
const filterByDate = publishedPages.filter(
(page) => new Date(page.frontmatter.date || new Date()) <= new Date()
);
return filterByDate;
};
// get a regular page data from many pages, ex: about.md
export const getRegularPage = async (slug) => {
const publishedPages = getSinglePage("content");
const pageData = publishedPages.filter((data) => data.slug === slug);
const notFoundPage = fs.readFileSync("content/404.md", "utf-8");
const notFoundDataParsed = matter(notFoundPage);
let frontmatter, content;
if (pageData[0]) {
content = pageData[0].content;
frontmatter = pageData[0].frontmatter;
} else {
content = notFoundDataParsed.content;
frontmatter = notFoundDataParsed.data;
}
const mdxContent = await parseMDX(content);
return {
frontmatter,
content,
mdxContent,
};
};
================================================
FILE: lib/jsonGenerator.js
================================================
const fs = require("fs");
const path = require("path");
const matter = require("gray-matter");
const config = require("../config/config.json");
const { blog_folder } = config.settings;
const jsonDir = "./.json";
// get post data
const getPosts = fs.readdirSync(path.join(`content/${blog_folder}`));
const filterPosts = getPosts.filter((post) => post.match(/^(?!_)/));
const posts = filterPosts.map((filename) => {
const slug = filename.replace(".md", "");
const postData = fs.readFileSync(
path.join(`content/${blog_folder}/`, filename),
"utf-8"
);
const { data } = matter(postData);
const content = matter(postData).content;
return {
frontmatter: data,
content: content,
slug: slug,
};
});
try {
if (!fs.existsSync(jsonDir)) {
fs.mkdirSync(jsonDir);
}
fs.writeFileSync(`${jsonDir}/posts.json`, JSON.stringify(posts));
} catch (err) {
console.error(err);
}
================================================
FILE: lib/taxonomyParser.js
================================================
import { getSinglePage } from "@lib/contentParser";
import { slugify } from "@lib/utils/textConverter";
// get all taxonomies from frontmatter
export const getTaxonomy = (folder, name) => {
const singlePages = getSinglePage(folder);
const taxonomyPages = singlePages.map((page) => page.frontmatter[name]);
let taxonomies = [];
for (let i = 0; i < taxonomyPages.length; i++) {
if (taxonomyPages[i] === undefined) {
continue;
}
const isArray = Array.isArray(taxonomyPages[i]);
const categoryArray = isArray ? taxonomyPages[i] : [ taxonomyPages[i] ];
for (let j = 0; j < categoryArray.length; j++) {
taxonomies.push(slugify(categoryArray[j]));
}
}
const taxonomy = [...new Set(taxonomies)];
return taxonomy;
};
================================================
FILE: lib/utils/dateFormat.js
================================================
import { formatInTimeZone } from "date-fns-tz";
const dateFormat = (date) => {
return formatInTimeZone(date, "America/New_York", "dd MMM yyyy");
};
export default dateFormat;
================================================
FILE: lib/utils/mdxParser.js
================================================
import { serialize } from "next-mdx-remote/serialize";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
// mdx content parser
const parseMDX = async (content) => {
const options = {
mdxOptions: {
rehypePlugins: [rehypeSlug],
remarkPlugins: [remarkGfm],
},
};
return await serialize(content, options);
};
export default parseMDX;
================================================
FILE: lib/utils/readingTime.js
================================================
// content reading
const readingTime = (content) => {
const WPS = 275 / 60;
let images = 0;
const regex = /\w/;
let words = content.split(" ").filter((word) => {
if (word.includes("<img")) {
images += 1;
}
return regex.test(word);
}).length;
let imageAdjust = images * 4;
let imageSecs = 0;
let imageFactor = 12;
while (images) {
imageSecs += imageFactor;
if (imageFactor > 3) {
imageFactor -= 1;
}
images -= 1;
}
const minutes = Math.ceil(((words - imageAdjust) / WPS + imageSecs) / 60);
if (minutes < 10) {
if (minutes < 2) {
return "0" + minutes + ` Min read`;
} else {
return "0" + minutes + ` Mins read`;
}
} else {
return minutes + ` Mins read`;
}
};
export default readingTime;
================================================
FILE: lib/utils/similarItems.js
================================================
// similer products
const similerItems = (currentItem, allItems, slug) => {
let categories = [];
let tags = [];
// set categories
if (currentItem[0].frontmatter.categories.length > 0) {
categories = currentItem[0].frontmatter.categories;
}
// set tags
if (currentItem[0].frontmatter.tags.length > 0) {
tags = currentItem[0].frontmatter.tags;
}
// filter by categories
const filterByCategories = allItems.filter((item) =>
categories.find((category) =>
item.frontmatter.categories.includes(category)
)
);
// filter by tags
const filterByTags = allItems.filter((item) =>
tags.find((tag) => item.frontmatter.tags.includes(tag))
);
// merged after filter
const mergedItems = [...new Set([...filterByCategories, ...filterByTags])];
// filter by slug
const filterBySlug = mergedItems.filter((product) => product.slug !== slug);
return filterBySlug;
};
export default similerItems;
================================================
FILE: lib/utils/sortFunctions.js
================================================
// sort by date
export const sortByDate = (array) => {
const sortedArray = array.sort(
(a, b) =>
new Date(b.frontmatter.date && b.frontmatter.date) -
new Date(a.frontmatter.date && a.frontmatter.date)
);
return sortedArray;
};
// sort product by weight
export const sortByWeight = (array) => {
const withWeight = array.filter((item) => item.frontmatter.weight);
const withoutWeight = array.filter((item) => !item.frontmatter.weight);
const sortedWeightedArray = withWeight.sort(
(a, b) => a.frontmatter.weight - b.frontmatter.weight
);
const sortedArray = [...new Set([...sortedWeightedArray, ...withoutWeight])];
return sortedArray;
};
================================================
FILE: lib/utils/textConverter.js
================================================
import { slug } from "github-slugger";
import { marked } from "marked";
// slugify
export const slugify = (content) => {
if (!content) return null;
return slug(content);
};
// markdownify
export const markdownify = (content, tag, className) => {
if (!content) return null;
const Tag = tag;
return tag ? (
<Tag
className={className}
dangerouslySetInnerHTML={{
__html:
tag === "div" ? marked.parse(content) : marked.parseInline(content),
}}
/>
) : (
<span
className={className}
dangerouslySetInnerHTML={{
__html: marked.parseInline(content),
}}
/>
);
};
// humanize
export const humanize = (content) => {
if (!content) return null;
return content
.replace(/^[\s_]+|[\s_]+$/g, "")
.replace(/[_\s]+/g, " ")
.replace(/^[a-z]/, function (m) {
return m.toUpperCase();
});
};
// plainify
export const plainify = (content) => {
if (!content) return null;
const mdParsed = marked.parseInline(String(content));
const filterBrackets = mdParsed.replace(/<\/?[^>]+(>|$)/gm, "");
const filterSpaces = filterBrackets.replace(/[\r\n]\s*[\r\n]/gm, "");
const stripHTML = htmlEntityDecoder(filterSpaces);
return stripHTML;
};
// strip entities for plainify
const htmlEntityDecoder = (htmlWithEntities) => {
let entityList = {
" ": " ",
"<": "<",
">": ">",
"&": "&",
""": '"',
"'": "'",
};
let htmlWithoutEntities = htmlWithEntities.replace(
/(&|<|>|"|')/g,
(entity) => {
return entityList[entity];
}
);
return htmlWithoutEntities;
};
================================================
FILE: netlify.toml
================================================
[functions]
included_files = ["content/**"]
================================================
FILE: next.config.js
================================================
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
reactStrictMode: true,
};
module.exports = nextConfig;
================================================
FILE: package.json
================================================
{
"name": "next-tailwind-boilerplate",
"description": "a nextjs and tailwindcss boilerplate by themefisher.com",
"version": "1.0.5",
"private": true,
"license": "UNLICENSED",
"scripts": {
"dev": "node lib/jsonGenerator.js && next dev",
"build": "node lib/jsonGenerator.js && next build",
"export": "npm run build && next export",
"lint": "next lint",
"start": "next start"
},
"dependencies": {
"disqus-react": "^1.1.5",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"marked": "^4.2.12",
"next": "13.1.5",
"next-mdx-remote": "^4.3.0",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-gtm-module": "^2.0.11",
"react-icons": "^4.7.1",
"react-lite-youtube-embed": "^2.3.52",
"react-mailchimp-subscribe": "^2.1.3",
"react-syntax-highlighter": "^15.5.0",
"rehype-slug": "^5.1.0",
"remark-gfm": "^3.0.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.13",
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.7",
"eslint": "8.32.0",
"eslint-config-next": "13.1.5",
"jshint": "^2.13.6",
"postcss": "^8.4.21",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.2",
"sass": "^1.57.1",
"sharp": "^0.31.3",
"tailwind-bootstrap-grid": "^5.0.1",
"tailwind-scrollbar": "^2.1.0",
"tailwindcss": "^3.2.4"
}
}
================================================
FILE: pages/404.js
================================================
import NotFound from "@layouts/404";
import Base from "@layouts/Baseof";
import { getRegularPage } from "@lib/contentParser";
const notFound = ({ data }) => {
return (
<Base>
<NotFound data={data} />
</Base>
);
};
// get 404 page data
export const getStaticProps = async () => {
const notFoundData = await getRegularPage("404");
return {
props: {
data: notFoundData,
},
};
};
export default notFound;
================================================
FILE: pages/[regular].js
================================================
import NotFound from "@layouts/404";
import About from "@layouts/About";
import Base from "@layouts/Baseof";
import Contact from "@layouts/Contact";
import Default from "@layouts/Default";
import { getRegularPage, getSinglePage } from "@lib/contentParser";
// for all regular pages
const RegularPages = ({ data }) => {
const { title, meta_title, description, image, noindex, canonical, layout } =
data.frontmatter;
const { content } = data;
return (
<Base
title={title}
description={description ? description : content.slice(0, 120)}
meta_title={meta_title}
image={image}
noindex={noindex}
canonical={canonical}
>
{layout === "404" ? (
<NotFound data={data} />
) : layout === "about" ? (
<About data={data} />
) : layout === "contact" ? (
<Contact data={data} />
) : (
<Default data={data} />
)}
</Base>
);
};
export default RegularPages;
// for regular page routes
export const getStaticPaths = async () => {
const slugs = getSinglePage("content");
const paths = slugs.map((item) => ({
params: {
regular: item.slug,
},
}));
return {
paths,
fallback: false,
};
};
// for regular page data
export const getStaticProps = async ({ params }) => {
const { regular } = params;
const allPages = await getRegularPage(regular);
return {
props: {
slug: regular,
data: allPages,
},
};
};
================================================
FILE: pages/_app.js
================================================
import config from "@config/config.json";
import theme from "@config/theme.json";
import { JsonContext } from "context/state";
import { ThemeProvider } from "next-themes";
import Head from "next/head";
import { useEffect, useState } from "react";
import TagManager from "react-gtm-module";
import "styles/style.scss";
const App = ({ Component, pageProps }) => {
// default theme setup
const { default_theme } = config.settings;
// import google font css
const pf = theme.fonts.font_family.primary;
const sf = theme.fonts.font_family.secondary;
const [fontcss, setFontcss] = useState();
useEffect(() => {
fetch(
`https://fonts.googleapis.com/css2?family=${pf}${
sf ? "&family=" + sf : ""
}&display=swap`
).then((res) => res.text().then((css) => setFontcss(css)));
}, [pf, sf]);
// google tag manager (gtm)
const tagManagerArgs = {
gtmId: config.params.tag_manager_id,
};
useEffect(() => {
setTimeout(() => {
process.env.NODE_ENV === "production" &&
config.params.tag_manager_id &&
TagManager.initialize(tagManagerArgs);
}, 5000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<JsonContext>
<Head>
{/* google font css */}
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<style
dangerouslySetInnerHTML={{
__html: `${fontcss}`,
}}
/>
{/* responsive meta */}
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=5"
/>
</Head>
<ThemeProvider attribute="class" defaultTheme={default_theme}>
<Component {...pageProps} />
</ThemeProvider>
</JsonContext>
);
};
export default App;
================================================
FILE: pages/_document.js
================================================
import TwSizeIndicator from "@components/TwSizeIndicator";
import config from "@config/config.json";
import { Head, Html, Main, NextScript } from "next/document";
const Document = () => {
// destructuring items from config object
const { favicon } = config.site;
return (
<Html lang="en">
<Head>
{/* favicon */}
<link rel="shortcut icon" href={favicon} />
{/* theme meta */}
<meta name="theme-name" content="geeky-nextjs" />
<meta name="msapplication-TileColor" content="#000000" />
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#fff"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#000"
/>
</Head>
<body>
<Main />
<TwSizeIndicator />
<NextScript />
</body>
</Html>
);
};
export default Document;
================================================
FILE: pages/categories/[category].js
================================================
import config from "@config/config.json";
import Base from "@layouts/Baseof";
import Sidebar from "@layouts/partials/Sidebar";
import { getSinglePage } from "@lib/contentParser";
import { getTaxonomy } from "@lib/taxonomyParser";
import { slugify } from "@lib/utils/textConverter";
import Post from "@partials/Post";
const { blog_folder } = config.settings;
// category page
const Category = ({ postsByCategories, category, posts, categories }) => {
return (
<Base title={category}>
<div className="section mt-16">
<div className="container">
<h1 className="h2 mb-12">
Showing posts from
<span className="section-title ml-1 inline-block capitalize">
{category.replace("-", " ")}
</span>
</h1>
<div className="row">
<div className="lg:col-8">
<div className="row rounded border border-border p-4 px-3 dark:border-darkmode-border lg:p-6">
{postsByCategories.map((post, i) => (
<div key={`key-${i}`} className="col-12 mb-8 sm:col-6">
<Post post={post} />
</div>
))}
</div>
</div>
<Sidebar posts={posts} categories={categories} />
</div>
</div>
</div>
</Base>
);
};
export default Category;
// category page routes
export const getStaticPaths = () => {
const allCategories = getTaxonomy(`content/${blog_folder}`, "categories");
const paths = allCategories.map((category) => ({
params: {
category: category,
},
}));
return { paths, fallback: false };
};
// category page data
export const getStaticProps = ({ params }) => {
const posts = getSinglePage(`content/${blog_folder}`);
const filterPosts = posts.filter((post) =>
post.frontmatter.categories.find((category) =>
slugify(category).includes(params.category)
)
);
const categories = getTaxonomy(`content/${blog_folder}`, "categories");
const categoriesWithPostsCount = categories.map((category) => {
const filteredPosts = posts.filter((post) =>
post.frontmatter.categories.map(e => slugify(e)).includes(category)
);
return {
name: category,
posts: filteredPosts.length,
};
});
return {
props: {
posts,
postsByCategories: filterPosts,
category: params.category,
categories: categoriesWithPostsCount,
},
};
};
================================================
FILE: pages/categories/index.js
================================================
import config from "@config/config.json";
import Base from "@layouts/Baseof";
import { getTaxonomy } from "@lib/taxonomyParser";
import { humanize, markdownify } from "@lib/utils/textConverter";
import Link from "next/link";
const { blog_folder } = config.settings;
import { getSinglePage } from "@lib/contentParser";
import { FaFolder } from "react-icons/fa";
import { slugify } from "@lib/utils/textConverter";
const Categories = ({ categories }) => {
return (
<Base title={"categories"}>
<section className="section pt-0">
{markdownify(
"Categories",
"h1",
"h2 mb-16 bg-theme-light dark:bg-darkmode-theme-dark py-12 text-center lg:text-[55px]"
)}
<div className="container pt-12 text-center">
<ul className="row">
{categories.map((category, i) => (
<li
key={`category-${i}`}
className="mt-4 block lg:col-4 xl:col-3"
>
<Link
href={`/categories/${category.name}`}
className="flex w-full items-center justify-center rounded-lg bg-theme-light px-4 py-4 font-bold text-dark transition hover:bg-primary hover:text-white dark:bg-darkmode-theme-dark dark:text-darkmode-light dark:hover:bg-primary dark:hover:text-white"
>
<FaFolder className="mr-1.5" />
{humanize(category.name)} ({category.posts})
</Link>
</li>
))}
</ul>
</div>
</section>
</Base>
);
};
export default Categories;
export const getStaticProps = () => {
const posts = getSinglePage(`content/${blog_folder}`);
const categories = getTaxonomy(`content/${blog_folder}`, "categories");
const categoriesWithPostsCount = categories.map((category) => {
const filteredPosts = posts.filter((post) =>
post.frontmatter.categories.map(e => slugify(e)).includes(category)
);
return {
name: category,
posts: filteredPosts.length,
};
});
return {
props: {
categories: categoriesWithPostsCount,
},
};
};
================================================
FILE: pages/index.js
================================================
import config from "@config/config.json";
import Base from "@layouts/Baseof";
import ImageFallback from "@layouts/components/ImageFallback";
import Pagination from "@layouts/components/Pagination";
import Post from "@layouts/partials/Post";
import Sidebar from "@layouts/partials/Sidebar";
import { getListPage, getSinglePage } from "@lib/contentParser";
import { getTaxonomy } from "@lib/taxonomyParser";
import dateFormat from "@lib/utils/dateFormat";
import { sortByDate } from "@lib/utils/sortFunctions";
import { markdownify } from "@lib/utils/textConverter";
import Link from "next/link";
import { FaRegCalendar } from "react-icons/fa";
const { blog_folder, pagination } = config.settings;
const Home = ({
banner,
posts,
featured_posts,
recent_posts,
categories,
promotion,
}) => {
// define state
const sortPostByDate = sortByDate(posts);
const featuredPosts = sortPostByDate.filter(
(post) => post.frontmatter.featured
);
const showPosts = pagination;
return (
<Base>
{/* Banner */}
<section className="section banner relative pb-0">
<ImageFallback
className="absolute bottom-0 left-0 z-[-1] w-full"
src={"/images/banner-bg-shape.svg"}
width={1905}
height={295}
alt="banner-shape"
priority
/>
<div className="container">
<div className="row flex-wrap-reverse items-center justify-center lg:flex-row">
<div className={banner.image_enable ? "mt-12 text-center lg:mt-0 lg:text-left lg:col-6" : "mt-12 text-center lg:mt-0 lg:text-left lg:col-12"}>
<div className="banner-title">
{markdownify(banner.title, "h1")}
{markdownify(banner.title_small, "span")}
</div>
{markdownify(banner.content, "p", "mt-4")}
{banner.button.enable && (
<Link
className="btn btn-primary mt-6"
href={banner.button.link}
rel={banner.button.rel}
>
{banner.button.label}
</Link>
)}
</div>
{banner.image_enable && (
<div className="col-9 lg:col-6">
<ImageFallback
className="mx-auto object-contain"
src={banner.image}
width={548}
height={443}
priority={true}
alt="Banner Image"
/>
</div>
)}
</div>
</div>
</section>
{/* Home main */}
<section className="section">
<div className="container">
<div className="row items-start">
<div className="mb-12 lg:mb-0 lg:col-8">
{/* Featured posts */}
{featured_posts.enable && (
<div className="section">
{markdownify(featured_posts.title, "h2", "section-title")}
<div className="rounded border border-border p-6 dark:border-darkmode-border">
<div className="row">
<div className="md:col-6">
<Post post={featuredPosts[0]} />
</div>
<div className="scrollbar-w-[10px] mt-8 max-h-[480px] scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-border dark:scrollbar-track-gray-800 dark:scrollbar-thumb-darkmode-theme-dark md:mt-0 md:col-6">
{featuredPosts
.slice(1, featuredPosts.length)
.map((post, i, arr) => (
<div
className={`mb-6 flex items-center pb-6 ${
i !== arr.length - 1 &&
"border-b border-border dark:border-darkmode-border"
}`}
key={`key-${i}`}
>
{post.frontmatter.image && (
<ImageFallback
className="mr-3 h-[85px] rounded object-cover"
src={post.frontmatter.image}
alt={post.frontmatter.title}
width={105}
height={85}
/>
)}
<div>
<h3 className="h5 mb-2">
<Link
href={`/${blog_folder}/${post.slug}`}
className="block hover:text-primary"
>
{post.frontmatter.title}
</Link>
</h3>
<p className="inline-flex items-center font-bold">
<FaRegCalendar className="mr-1.5" />
{dateFormat(post.frontmatter.date)}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
{/* Promotion */}
{promotion.enable && (
<Link href={promotion.link} className="section block pt-0">
<ImageFallback
className="h-full w-full"
height="115"
width="800"
src={promotion.image}
alt="promotion"
/>
</Link>
)}
{/* Recent Posts */}
{recent_posts.enable && (
<div className="section pt-0">
{markdownify(recent_posts.title, "h2", "section-title")}
<div className="rounded border border-border px-6 pt-6 dark:border-darkmode-border">
<div className="row">
{sortPostByDate.slice(0, showPosts).map((post) => (
<div className="mb-8 md:col-6" key={post.slug}>
<Post post={post} />
</div>
))}
</div>
</div>
</div>
)}
<Pagination
totalPages={Math.ceil(posts.length / showPosts)}
currentPage={1}
/>
</div>
{/* sidebar */}
<Sidebar
className={"lg:mt-[9.5rem]"}
posts={posts}
categories={categories}
/>
</div>
</div>
</section>
</Base>
);
};
export default Home;
// for homepage data
export const getStaticProps = async () => {
const homepage = await getListPage("content/_index.md");
const { frontmatter } = homepage;
const { banner, featured_posts, recent_posts, promotion } = frontmatter;
const posts = getSinglePage(`content/${blog_folder}`);
const categories = getTaxonomy(`content/${blog_folder}`, "categories");
const categoriesWithPostsCount = categories.map((category) => {
const filteredPosts = posts.filter((post) =>
post.frontmatter.categories.includes(category)
);
return {
name: category,
posts: filteredPosts.length,
};
});
return {
props: {
banner: banner,
posts: posts,
featured_posts,
recent_posts,
promotion,
categories: categoriesWithPostsCount,
},
};
};
================================================
FILE: pages/page/[slug].js
================================================
import config from "@config/config.json";
import Base from "@layouts/Baseof";
import Pagination from "@layouts/components/Pagination";
import { getListPage, getSinglePage } from "@lib/contentParser";
import { markdownify } from "@lib/utils/textConverter";
import { sortByDate } from "@lib/utils/sortFunctions";
import Post from "@partials/Post";
const { blog_folder, summary_length } = config.settings;
// blog pagination
const BlogPagination = ({ postIndex, posts, currentPage, pagination }) => {
const indexOfLastPost = currentPage * pagination;
const indexOfFirstPost = indexOfLastPost - pagination;
const orderedPosts = sortByDate(posts);
const currentPosts = orderedPosts.slice(indexOfFirstPost, indexOfLastPost);
const { frontmatter } = postIndex;
const { title } = frontmatter;
const totalPages = Math.ceil(posts.length / pagination);
return (
<Base title={title}>
<section className="section">
<div className="container">
{markdownify(title, "h1", "h2 mb-8 text-center")}
<div className="row mb-16">
{currentPosts.map((post, i) => (
<div className="mt-16 lg:col-6" key={post.slug}>
<Post post={post} />
</div>
))}
</div>
<Pagination totalPages={totalPages} currentPage={currentPage} />
</div>
</section>
</Base>
);
};
export default BlogPagination;
// get blog pagination slug
export const getStaticPaths = () => {
const getAllSlug = getSinglePage(`content/${blog_folder}`);
const allSlug = getAllSlug.map((item) => item.slug);
const { pagination } = config.settings;
const totalPages = Math.ceil(allSlug.length / pagination);
let paths = [];
for (let i = 1; i < totalPages; i++) {
paths.push({
params: {
slug: (i + 1).toString(),
},
});
}
return {
paths,
fallback: false,
};
};
// get blog pagination content
export const getStaticProps = async ({ params }) => {
const currentPage = parseInt((params && params.slug) || 1);
const { pagination } = config.settings;
const posts = getSinglePage(`content/${blog_folder}`);
const postIndex = await getListPage(`content/${blog_folder}/_index.md`);
return {
props: {
pagination: pagination,
posts: posts,
currentPage: currentPage,
postIndex: postIndex,
},
};
};
================================================
FILE: pages/posts/[single].js
================================================
import config from "@config/config.json";
import PostSingle from "@layouts/PostSingle";
import { getSinglePage } from "@lib/contentParser";
import { getTaxonomy } from "@lib/taxonomyParser";
import parseMDX from "@lib/utils/mdxParser";
const { blog_folder } = config.settings;
// post single layout
const Article = ({
post,
mdxContent,
slug,
allCategories,
relatedPosts,
posts,
}) => {
const { frontmatter, content } = post;
return (
<PostSingle
frontmatter={frontmatter}
content={content}
mdxContent={mdxContent}
slug={slug}
allCategories={allCategories}
relatedPosts={relatedPosts}
posts={posts}
/>
);
};
// get post single slug
export const getStaticPaths = () => {
const allSlug = getSinglePage(`content/${blog_folder}`);
const paths = allSlug.map((item) => ({
params: {
single: item.slug,
},
}));
return {
paths,
fallback: false,
};
};
// get post single content
export const getStaticProps = async ({ params }) => {
const { single } = params;
const posts = getSinglePage(`content/${blog_folder}`);
const post = posts.find((p) => p.slug == single);
const mdxContent = await parseMDX(post.content);
// related posts
const relatedPosts = posts.filter((p) =>
post.frontmatter.categories.some((cate) =>
p.frontmatter.categories.includes(cate)
)
);
//all categories
const categories = getTaxonomy(`content/${blog_folder}`, "categories");
const categoriesWithPostsCount = categories.map((category) => {
const filteredPosts = posts.filter((post) =>
post.frontmatter.categories.includes(category)
);
return {
name: category,
posts: filteredPosts.length,
};
});
return {
props: {
post: post,
mdxContent: mdxContent,
slug: single,
allCategories: categoriesWithPostsCount,
relatedPosts: relatedPosts,
posts: posts,
},
};
};
export default Article;
================================================
FILE: pages/posts/index.js
================================================
import BlogPagination, { getStaticProps } from "../page/[slug]";
export { getStaticProps };
export default BlogPagination;
================================================
FILE: pages/search.js
================================================
import Base from "@layouts/Baseof";
import { slugify } from "@lib/utils/textConverter";
import Post from "@partials/Post";
import { useSearchContext } from "context/state";
import { useRouter } from "next/router";
const SearchPage = () => {
const router = useRouter();
const { query } = router;
const keyword = slugify(query.key);
const { posts } = useSearchContext();
const searchResults = posts.filter((product) => {
if (product.frontmatter.draft) {
return !product.frontmatter.draft;
}
if (slugify(product.frontmatter.title).includes(keyword)) {
return product;
} else if (
product.frontmatter.categories.find((category) =>
slugify(category).includes(keyword)
)
) {
return product;
} else if (slugify(product.content).includes(keyword)) {
return product;
}
});
return (
<Base title={`Search results for ${query.key}`}>
<div className="section">
<div className="container">
<h1 className="h2 mb-8 text-center">
Search results for <span className="text-primary">{query.key}</span>
</h1>
{searchResults.length > 0 ? (
<div className="row">
{searchResults.map((post, i) => (
<div key={`key-${i}`} className="col-12 mb-8 sm:col-6">
<Post post={post} />
</div>
))}
</div>
) : (
<div className="py-24 text-center text-h3 shadow">
No Search Found
</div>
)}
</div>
</div>
</Base>
);
};
export default SearchPage;
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
================================================
FILE: public/.htaccess
================================================
##### Optimize default expiration time - BEGIN
<IfModule mod_expires.c>
## Enable expiration control
ExpiresActive On
## CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
## Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/webp "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
## Font files expiration: 1 month after request
ExpiresByType application/x-font-ttf "now plus 1 month"
ExpiresByType application/x-font-opentype "now plus 1 month"
ExpiresByType application/x-font-woff "now plus 1 month"
ExpiresByType font/woff2 "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
## Audio files expiration: 1 month after request
ExpiresByType audio/ogg "now plus 1 month"
ExpiresByType application/ogg "now plus 1 month"
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/mp3 "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"
## Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>
##### Optimize default expiration time - END
##### 1 Month for most static resources
<filesMatch ".(css|jpg|jpeg|png|webp|gif|js|ico|woff|woff2|eot|ttf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
##### Enable gzip compression for resources
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
##### Or, compress certain file types by extension:
<FilesMatch ".(html|css|jpg|jpeg|webp|png|gif|js|ico)">
SetOutputFilter DEFLATE
</FilesMatch>
##### Set Header Vary: Accept-Encoding
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
================================================
FILE: public/.well-known/sitepins.json
================================================
{
"cms": "Sitepins",
"generator": "Sitepins CMS",
"version": "1.0.0"
}
================================================
FILE: public/robots.txt
================================================
User-agent: *
Allow: /
Disallow: /api/*
================================================
FILE: public/sitepins-manifest.json
================================================
{
"name": "Sitepins CMS",
"description": "Git-based CMS detection file",
"cms": "Sitepins",
"generator": "nextjs",
"html": "<meta name=\"generator\" content=\"Sitepins",
"headers": {
"x-powered-by": "Sitepins"
}
}
================================================
FILE: styles/base.scss
================================================
html {
@apply text-base;
}
body {
@apply bg-body font-primary font-normal leading-relaxed text-text dark:bg-darkmode-body dark:text-darkmode-light;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-secondary font-bold leading-tight text-black dark:text-darkmode-light;
}
h1,
.h1 {
@apply text-h1-sm md:text-h1;
}
h2,
.h2 {
@apply text-h2-sm md:text-h2;
}
h3,
.h3 {
@apply text-h3-sm md:text-h3;
}
h4,
.h4 {
@apply text-h4;
}
h5,
.h5 {
@apply text-h5;
}
h6,
.h6 {
@apply text-h6;
}
================================================
FILE: styles/buttons.scss
================================================
.btn {
@apply font-secondary inline-block border px-5 py-2.5 font-bold transition;
}
.btn-primary {
@apply bg-primary text-white rounded-[50px] px-8 py-2.5 relative border-0 overflow-hidden h-12;
&::before {
@apply content-[''] absolute h-full right-0 bg-black/5 w-0 top-0 transition-all duration-500 rounded-[50px] ease-[cubic-bezier(.42,0,.58,1)];
}
&:hover {
&::before {
@apply w-full right-auto left-0;
}
}
}
.btn-outline-primary {
@apply border-primary bg-transparent hover:bg-primary hover:text-white rounded-[50px] text-primary font-bold relative transition-all ease-[cubic-bezier(.42,0,.58,1)] duration-75 overflow-hidden h-12;
&::before {
@apply content-[''] absolute h-full right-0 bg-black/5 w-0 top-0 transition-all duration-500 rounded-[50px];
}
&:hover {
&::before {
@apply w-full right-auto left-0;
}
}
}
================================================
FILE: styles/components.scss
================================================
// section style
.section {
@apply py-16;
}
// container
.container {
@apply mx-auto max-w-[1320px];
}
// form style
.form-inputs * {
@apply mb-5 leading-10;
}
// social icon style
.social-icons {
@apply space-x-4;
li {
@apply inline-block;
a {
@apply block h-9 w-9 rounded-full border bg-primary text-center text-white;
svg {
@apply m-auto h-9;
}
}
}
}
// form style
.form-input,
.form-textarea {
@apply border-0 border-b border-border bg-transparent px-0 placeholder:text-xs placeholder:text-light focus:border-primary focus:ring-transparent dark:border-darkmode-border dark:text-darkmode-light dark:placeholder:text-darkmode-light;
}
// content style
.content {
@apply prose max-w-none;
@apply prose-headings:mt-[.5em] prose-headings:mb-[.9em] prose-headings:font-bold prose-headings:text-dark prose-headings:dark:text-white;
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
@apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-light;
@apply prose-blockquote:mb-12 prose-blockquote:rounded prose-blockquote:border-0 prose-blockquote:bg-theme-light prose-blockquote:py-1 prose-blockquote:px-12 prose-blockquote:not-italic prose-blockquote:dark:bg-theme-dark prose-blockquote:lg:px-16;
@apply prose-code:px-1 prose-code:text-primary;
@apply prose-pre:rounded;
@apply prose-img:rounded;
@apply prose-table:rounded;
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-light;
@apply prose-a:text-primary prose-a:no-underline hover:prose-a:underline;
@apply prose-li:text-text prose-li:dark:text-darkmode-light;
@apply prose-table:overflow-hidden prose-table:border prose-table:border-border prose-table:dark:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light prose-th:py-4 prose-th:px-4 prose-th:text-dark prose-thead:dark:border-darkmode-border prose-thead:dark:bg-theme-dark prose-th:dark:text-darkmode-light;
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
@apply prose-td:px-3 prose-td:py-4 prose-td:dark:text-darkmode-light;
@apply prose-li:marker:dark:text-darkmode-light;
img + em {
@apply -mt-4 block text-center text-gray-500;
}
blockquote {
& > p {
@apply relative text-2xl text-black;
&::after,
&::before {
@apply absolute inline-block h-5 w-5 bg-[url('/images/quote.svg')] bg-[length:20px_20px] bg-no-repeat content-[''] lg:h-8 lg:w-8 lg:bg-[length:32px_32px];
}
&::before {
@apply -left-10 top-0 lg:-left-10;
}
&::after {
@apply bottom-0 right-0 rotate-180;
}
}
}
}
//banner
.banner {
&-title {
h1 {
@apply font-bold leading-[1] lg:text-[72px];
}
strong {
@apply text-primary;
}
span {
@apply font-normal font-bold text-dark dark:text-darkmode-light lg:text-[55px];
}
}
}
//section-title
.section-title {
@apply mb-12 underline decoration-primary decoration-wavy decoration-2 underline-offset-[.5em];
}
//socials
.socials {
@apply mx-3 flex items-center justify-center space-x-3 px-4 lg:justify-start lg:border-x 2xl:space-x-4;
li {
@apply inline-flex;
}
a {
@apply inline-block px-2 py-1 text-lg text-dark hover:text-primary dark:text-darkmode-light dark:hover:text-primary;
}
}
.newsletter-input:focus + svg {
opacity: 0;
}
.sidebar-socials,
footer .socials {
@apply border-primary;
}
//experience
.experience {
ul li {
@apply relative pl-7;
&::before {
@apply absolute left-1 top-2.5 h-[9px] w-[9px] rounded-full border-2 border-body bg-primary shadow-[0px_0px_0px_2px] shadow-primary content-[''] dark:border-darkmode-body;
}
}
}
// notice
.notice {
@apply rounded overflow-x-hidden;
.notice-body {
@apply text-[#666666] dark:text-darkmode-light;
p {
@apply my-0 text-[#666666] dark:text-darkmode-light;
}
}
&.note {
.notice-head {
@apply bg-[#6ab0de] dark:bg-[#97d6ffcc];
}
.notice-body {
@apply bg-[rgb(227,244,255)] dark:bg-[#97d6ff26];
}
}
&.tip {
.notice-head {
@apply bg-[#78c578] dark:bg-[#96ff96cc];
}
.notice-body {
@apply bg-[#e2ffe2] dark:bg-[#96ff9626];
}
}
&.info {
.notice-head {
@apply bg-[#f0b37e] dark:bg-[#ffc392cc];
}
.notice-body {
@apply bg-[#ffedde] dark:bg-[#ffc39226];
}
}
&.warning {
.notice-head {
@apply bg-[#e06f6c] dark:bg-[#ff918ccc];
}
.notice-body {
@apply bg-[#ffdad8] dark:bg-[#ff918c26];
}
}
}
.active-tab {
@apply bg-theme-light dark:bg-darkmode-theme-dark;
}
.post {
img {
width: 100%;
height: auto;
}
}
.single-blog {
blockquote {
@apply px-12 lg:px-[105px];
& > p {
@apply lg:text-[24px];
@apply relative text-2xl text-black;
&::after,
&::before {
@apply absolute inline-block h-8 w-8 bg-[url('/images/quote.svg')] bg-[length:32px_32px] bg-no-repeat content-[''];
}
&::before {
@apply left-0 top-0;
@apply -left-10 lg:-left-12;
}
&::after {
@apply bottom-0 right-0 rotate-180;
@apply -right-10 lg:-right-8;
}
}
}
}
.embed-refresh body {
background-color: black !important;
}
#disqus_thread {
color-scheme: none;
}
================================================
FILE: styles/navigation.scss
================================================
body.menu-open {
@apply overflow-hidden pr-0;
}
.header {
@apply top-0 z-50 border-b bg-body py-[33px] dark:border-darkmode-border dark:bg-darkmode-body;
}
// navbar items
.navbar {
@apply relative flex flex-wrap items-center justify-between;
}
.collapse-menu {
@apply fixed right-0 top-0 z-10 mx-0 h-[100vh] w-full max-w-[400px] items-center border-l border-l-dark bg-body p-6 transition-transform duration-300 ease-in-out dark:bg-darkmode-body lg:static lg:flex lg:h-auto lg:w-auto lg:max-w-full lg:space-x-4 lg:border-l-0 lg:bg-transparent lg:p-0 xl:space-x-8;
}
.navbar-brand {
@apply text-xl font-semibold text-dark;
image {
@apply max-h-full max-w-full;
}
}
.navbar-nav {
@apply mt-16 lg:mt-0;
}
.nav-item {
@apply mb-5 text-left lg:mb-0;
&.active {
@apply bg-primary text-white;
}
}
.nav-link {
@apply rounded-[30px] px-6 py-2.5 text-left font-secondary text-[13.5px] capitalize text-dark transition hover:bg-primary hover:text-white dark:text-darkmode-light md:px-3 md:py-3 lg:text-center xl:px-5;
&.active {
@apply bg-primary text-white;
}
}
.nav-dropdown {
@apply mr-0;
}
.nav-dropdown-list {
@apply z-10 rounded-lg border border-transparent bg-body p-4 shadow dark:border-darkmode-border dark:bg-black;
}
.nav-dropdown-item {
@apply mb-1.5;
}
.nav-dropdown-link {
@apply min-w-[150px] rounded py-2.5 px-3.5 text-base font-semibold text-dark transition hover:bg-primary/10 hover:text-primary dark:text-darkmode-light;
&.active {
@apply bg-primary/10 text-primary;
}
}
// search style
.search-icon {
@apply inline-block h-10 w-10 cursor-pointer rounded-full bg-primary p-2.5 text-xl text-white;
}
.search-modal {
@apply invisible absolute top-0 left-0 right-0 z-10 h-10 bg-body opacity-0 transition dark:bg-black md:h-full;
.form-input {
@apply h-full w-full border-0 px-4 text-lg;
}
.search-close {
@apply absolute top-1/2 right-2 -translate-y-1/2 p-3 text-h4;
}
&.open {
@apply visible opacity-100;
}
}
.light .menu-open {
.border-border,
&.border-border {
@apply border-darkmode-border;
}
}
================================================
FILE: styles/style.scss
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@import "base";
}
@layer components {
@import "components";
@import "navigation";
@import "buttons";
}
@layer utilities {
@import "utilities";
}
================================================
FILE: styles/utilities.scss
================================================
b,
strong {
@apply font-semibold;
}
================================================
FILE: tailwind.config.js
================================================
const theme = require("./config/theme.json");
let font_base = Number(theme.fonts.font_size.base.replace("px", ""));
let font_scale = Number(theme.fonts.font_size.scale);
let h6 = font_base / font_base;
let h5 = h6 * font_scale;
let h4 = h5 * font_scale;
let h3 = h4 * font_scale;
let h2 = h3 * font_scale;
let h1 = h2 * font_scale;
let fontPrimary, fontPrimaryType, fontSecondary, fontSecondaryType;
if (theme.fonts.font_family.primary) {
fontPrimary = theme.fonts.font_family.primary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
fontPrimaryType = theme.fonts.font_family.primary_type;
}
if (theme.fonts.font_family.secondary) {
fontSecondary = theme.fonts.font_family.secondary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
fontSecondaryType = theme.fonts.font_family.secondary_type;
}
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
"./content/**/*.{md,mdx}",
],
theme: {
screens: {
sm: "540px",
md: "768px",
lg: "992px",
xl: "1280px",
"2xl": "1536px",
},
container: {
center: true,
padding: "2rem",
},
extend: {
colors: {
text: theme.colors.default.text_color.default,
dark: theme.colors.default.text_color.dark,
primary: theme.colors.default.theme_color.primary,
body: theme.colors.default.theme_color.body,
border: theme.colors.default.theme_color.border,
light: theme.colors.default.text_color.light,
"theme-light": theme.colors.default.theme_color.theme_light,
"theme-dark": theme.colors.default.theme_color.theme_dark,
darkmode: {
text: theme.colors.darkmode.text_color.default,
light: theme.colors.darkmode.text_color.light,
dark: theme.colors.darkmode.text_color.dark,
primary: theme.colors.darkmode.theme_color.primary,
secondary: theme.colors.darkmode.theme_color.secondary,
body: theme.colors.darkmode.theme_color.body,
border: theme.colors.darkmode.theme_color.border,
"theme-light": theme.colors.darkmode.theme_color.theme_light,
"theme-dark": theme.colors.darkmode.theme_color.theme_dark,
},
},
fontSize: {
base: font_base + "px",
h1: h1 + "rem",
"h1-sm": h1 * 0.8 + "rem",
h2: h2 + "rem",
"h2-sm": h2 * 0.8 + "rem",
h3: h3 + "rem",
"h3-sm": h3 * 0.8 + "rem",
h4: h4 + "rem",
h5: h5 + "rem",
h6: h6 + "rem",
},
fontFamily: {
primary: [fontPrimary, fontPrimaryType],
secondary: [fontSecondary, fontSecondaryType],
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("tailwind-scrollbar"),
require("@tailwindcss/forms"),
require("tailwind-bootstrap-grid")({ generateContainer: false }),
],
};
gitextract_hmo74npt/ ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .sitepins/ │ ├── config.json │ └── schema/ │ └── posts.json ├── README.md ├── config/ │ ├── config.json │ ├── menu.json │ ├── social.json │ └── theme.json ├── content/ │ ├── 404.md │ ├── _index.md │ ├── about.md │ ├── contact.md │ ├── elements.md │ └── posts/ │ ├── _index.md │ ├── post-1.md │ ├── post-10.md │ ├── post-11.md │ ├── post-12.md │ ├── post-13.md │ ├── post-14.md │ ├── post-15.md │ ├── post-2.md │ ├── post-3.md │ ├── post-4.md │ ├── post-5.md │ ├── post-6.md │ ├── post-7.md │ ├── post-8.md │ └── post-9.md ├── context/ │ └── state.js ├── hooks/ │ ├── useLoadMore.js │ ├── useOs.js │ └── useWindow.js ├── jsconfig.json ├── layouts/ │ ├── 404.js │ ├── About.js │ ├── Baseof.js │ ├── Contact.js │ ├── Default.js │ ├── PostSingle.js │ ├── components/ │ │ ├── ImageFallback.js │ │ ├── InnerPagination.js │ │ ├── Logo.js │ │ ├── NewsLetterForm.js │ │ ├── Pagination.js │ │ ├── Share.js │ │ ├── Social.js │ │ ├── ThemeSwitcher.js │ │ └── TwSizeIndicator.js │ ├── partials/ │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Post.js │ │ ├── SearchModal.js │ │ └── Sidebar.js │ └── shortcodes/ │ ├── Accordion.jsx │ ├── Button.jsx │ ├── Code.jsx │ ├── Notice.jsx │ ├── Tab.jsx │ ├── Tabs.jsx │ ├── Video.jsx │ ├── Youtube.jsx │ └── all.js ├── lib/ │ ├── contentParser.js │ ├── jsonGenerator.js │ ├── taxonomyParser.js │ └── utils/ │ ├── dateFormat.js │ ├── mdxParser.js │ ├── readingTime.js │ ├── similarItems.js │ ├── sortFunctions.js │ └── textConverter.js ├── netlify.toml ├── next.config.js ├── package.json ├── pages/ │ ├── 404.js │ ├── [regular].js │ ├── _app.js │ ├── _document.js │ ├── categories/ │ │ ├── [category].js │ │ └── index.js │ ├── index.js │ ├── page/ │ │ └── [slug].js │ ├── posts/ │ │ ├── [single].js │ │ └── index.js │ └── search.js ├── postcss.config.js ├── public/ │ ├── .htaccess │ ├── .well-known/ │ │ └── sitepins.json │ ├── robots.txt │ └── sitepins-manifest.json ├── styles/ │ ├── base.scss │ ├── buttons.scss │ ├── components.scss │ ├── navigation.scss │ ├── style.scss │ └── utilities.scss └── tailwind.config.js
SYMBOL INDEX (6 symbols across 6 files)
FILE: hooks/useWindow.js
function viewport (line 11) | function viewport() {
FILE: layouts/components/NewsLetterForm.js
function CustomForm (line 4) | function CustomForm({ status, message, onValidated }) {
FILE: layouts/shortcodes/Notice.jsx
function Notice (line 1) | function Notice({ type, children }) {
FILE: layouts/shortcodes/Tab.jsx
function Tab (line 1) | function Tab({ children }) {
FILE: layouts/shortcodes/Tabs.jsx
function Tabs (line 3) | function Tabs({ children }) {
FILE: layouts/shortcodes/Video.jsx
function Video (line 1) | function Video({ title, width = 500, height = "auto", src, ...rest }) {
Condensed preview — 100 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (175K chars).
[
{
"path": ".editorconfig",
"chars": 215,
"preview": "; https://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ntrim_"
},
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".gitignore",
"chars": 471,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".sitepins/config.json",
"chars": 151,
"preview": "{\n \"media\": \"public/images\",\n \"content\": \"content\",\n \"code\": \"layouts\",\n \"arrangement\": [],\n \"public\": \"public\",\n "
},
{
"path": ".sitepins/schema/posts.json",
"chars": 1045,
"preview": "{\n \"file\": \"content/posts/post-1.md\",\n \"name\": \"posts\",\n \"fileType\": \"md\",\n \"fmType\": \"yaml\",\n \"template\": [\n {\n"
},
{
"path": "README.md",
"chars": 3980,
"preview": "<h1 align=center>Geeky Nextjs</h1>\n<p align=center>Geeky is a free NextJs personal blog template</p>\n<h2 align=\"center\">"
},
{
"path": "config/config.json",
"chars": 1668,
"preview": "{\n \"site\": {\n \"title\": \"Geeky Nextjs\",\n \"base_url\": \"/\",\n \"favicon\": \"/images/favicon.png\",\n \"logo\": \"/imag"
},
{
"path": "config/menu.json",
"chars": 698,
"preview": "{\n \"main\": [\n {\n \"name\": \"Home\",\n \"url\": \"/\"\n },\n {\n \"name\": \"About\",\n \"url\": \"/about\"\n "
},
{
"path": "config/social.json",
"chars": 657,
"preview": "{\n \"facebook\": \"https://facebook.com/\",\n \"stackoverflow\": \"https://stackoverflow.com/\",\n \"twitter\": \"https://twitter."
},
{
"path": "config/theme.json",
"chars": 922,
"preview": "{\n \"colors\": {\n \"default\": {\n \"theme_color\": {\n \"primary\": \"#2ba283\",\n \"body\": \"#fff\",\n \"b"
},
{
"path": "content/404.md",
"chars": 60,
"preview": "---\ntitle: \"Error 404\"\nlayout: \"404\"\n---\n\n## Page Not Found\n"
},
{
"path": "content/_index.md",
"chars": 515,
"preview": "---\nbanner:\n title: Welcome **!**\n title_small: \"to John Bravo's Blog\"\n content: Are Developer and recently started y"
},
{
"path": "content/about.md",
"chars": 2197,
"preview": "---\ntitle: About The Author\nimage: /images/author.png\ndescription: \"meta description\"\nlayout: about\neducation:\n title: "
},
{
"path": "content/contact.md",
"chars": 455,
"preview": "---\ntitle: \"Let’s, Talk </br> About You\"\ndescription: \"meta description\"\nphone: \"+211234565523\"\nmail: \"info@email.com\"\nl"
},
{
"path": "content/elements.md",
"chars": 6209,
"preview": "---\ntitle: \"Elements\"\ndraft: false\n---\n\n# Heading 1\n\n## Heading 2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n#####"
},
{
"path": "content/posts/_index.md",
"chars": 28,
"preview": "---\ntitle: \"Blog Posts\"\n---\n"
},
{
"path": "content/posts/post-1.md",
"chars": 1782,
"preview": "---\ntitle: \"How to make toys from old Olarpaper\"\ndate: 2022-04-04T01:00:00Z\nimage: /images/post/post-1.png\ncategories: ["
},
{
"path": "content/posts/post-10.md",
"chars": 1777,
"preview": "---\ntitle: \"My work from home workstation\"\ndate: 2022-04-04T10:00:00Z\nimage: /images/post/post-2.png\ncategories: [\"progr"
},
{
"path": "content/posts/post-11.md",
"chars": 1781,
"preview": "---\ntitle: \"Robotic world is growing very fast\"\ndate: 2022-04-04T11:00:00Z\nimage: /images/post/post-3.png\ncategories: [\""
},
{
"path": "content/posts/post-12.md",
"chars": 1769,
"preview": "---\ntitle: \"What is a Virtual Assistant\"\ndate: 2022-04-04T12:00:00Z\nimage: /images/post/post-4.png\ncategories: [\"github\""
},
{
"path": "content/posts/post-13.md",
"chars": 1796,
"preview": "---\ntitle: \"Why you need to learn PHP\"\ndate: 2022-04-04T13:00:00Z\nimage: /images/post/post-5.png\ncategories: [\"youtube\","
},
{
"path": "content/posts/post-14.md",
"chars": 1795,
"preview": "---\ntitle: \"What you need to know about Programming\"\ndate: 2022-04-04T14:00:00Z\nimage: /images/post/post-6.png\ncategorie"
},
{
"path": "content/posts/post-15.md",
"chars": 1794,
"preview": "---\ntitle: \"How to make toys from old Olarpaper\"\ndate: 2022-04-04T15:00:00Z\nimage: /images/post/post-7.png\ncategories: ["
},
{
"path": "content/posts/post-2.md",
"chars": 1768,
"preview": "---\ntitle: My work from home workstation\ndate: 2022-04-04T02:00:00Z\nimage: /images/post/post-2.png\ncategories: [\"drone\"]"
},
{
"path": "content/posts/post-3.md",
"chars": 1789,
"preview": "---\ntitle: What you need to know about Photography\ndate: 2022-04-02T03:00:00+00:00\nimage: /images/post/post-3.png\ncatego"
},
{
"path": "content/posts/post-4.md",
"chars": 1795,
"preview": "---\ntitle: \"How to make toys from old Olarpaper\"\ndate: 2022-04-04T04:00:00Z\nimage: /images/post/post-4.png\ncategories: ["
},
{
"path": "content/posts/post-5.md",
"chars": 1883,
"preview": "---\ntitle: \"How to make toys from old Olarpaper\"\ndate: 2022-04-04T05:00:00Z\nimage: /images/post/post-5.png\ncategories: ["
},
{
"path": "content/posts/post-6.md",
"chars": 1809,
"preview": "---\ntitle: \"How to make toys from old Olarpaper\"\ndate: 2022-04-04T06:00:00Z\nimage: /images/post/post-6.png\ncategories: ["
},
{
"path": "content/posts/post-7.md",
"chars": 1809,
"preview": "---\ntitle: \"Artificial Intelligence and Robotics In A Nutshell\"\ndate: 2022-04-04T07:00:00Z\nimage: /images/post/post-7.pn"
},
{
"path": "content/posts/post-8.md",
"chars": 1783,
"preview": "---\ntitle: \"Drone Software and Development\"\ndate: 2022-04-04T08:00:00Z\nimage: /images/post/post-8.png\ncategories: [\"dron"
},
{
"path": "content/posts/post-9.md",
"chars": 1785,
"preview": "---\ntitle: \"Github Repository Controls\"\ndate: 2022-04-04T09:00:00Z\nimage: /images/post/post-1.png\ncategories: [\"workstat"
},
{
"path": "context/state.js",
"chars": 391,
"preview": "import { createContext, useContext } from \"react\";\nimport posts from \"../.json/posts.json\";\n\nconst SearchContext = creat"
},
{
"path": "hooks/useLoadMore.js",
"chars": 974,
"preview": "import { useEffect, useState } from \"react\";\n\n// how to use\n// const { loadedItems, loadItemsHandler, loadItemsFinished "
},
{
"path": "hooks/useOs.js",
"chars": 302,
"preview": "import { useEffect, useState } from \"react\";\n\n// how to use\n// const macOS = useOs()\n// returns true/false\n\nconst useOs "
},
{
"path": "hooks/useWindow.js",
"chars": 542,
"preview": "import { useEffect, useState } from \"react\";\n\n// how to use\n// const mobile = useWindow(767) < 768\n// returns true/false"
},
{
"path": "jsconfig.json",
"chars": 369,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@layouts/*\": [\"layouts/*\"],\n \"@components/*\": [\""
},
{
"path": "layouts/404.js",
"chars": 524,
"preview": "import { markdownify } from \"@lib/utils/textConverter\";\n\nconst NotFound = ({ data }) => {\n const { frontmatter, content"
},
{
"path": "layouts/About.js",
"chars": 2336,
"preview": "import { markdownify } from \"@lib/utils/textConverter\";\nimport shortcodes from \"@shortcodes/all\";\nimport { MDXRemote } f"
},
{
"path": "layouts/Baseof.js",
"chars": 2569,
"preview": "import config from \"@config/config.json\";\nimport { plainify } from \"@lib/utils/textConverter\";\nimport Footer from \"@part"
},
{
"path": "layouts/Contact.js",
"chars": 5433,
"preview": "import { markdownify } from \"@lib/utils/textConverter\";\nimport Link from \"next/link\";\nimport { BsArrowRightShort } from "
},
{
"path": "layouts/Default.js",
"chars": 564,
"preview": "import { markdownify } from \"@lib/utils/textConverter\";\nimport shortcodes from \"@shortcodes/all\";\nimport { MDXRemote } f"
},
{
"path": "layouts/PostSingle.js",
"chars": 4723,
"preview": "import config from \"@config/config.json\";\nimport Base from \"@layouts/Baseof\";\nimport InnerPagination from \"@layouts/comp"
},
{
"path": "layouts/components/ImageFallback.js",
"chars": 460,
"preview": "/* eslint-disable jsx-a11y/alt-text */\nimport Image from \"next/image\";\nimport { useEffect, useState } from \"react\";\n\ncon"
},
{
"path": "layouts/components/InnerPagination.js",
"chars": 924,
"preview": "import { sortByDate } from \"@lib/utils/sortFunctions\";\nimport Link from \"next/link\";\n\nconst InnerPagination = ({ posts, "
},
{
"path": "layouts/components/Logo.js",
"chars": 1214,
"preview": "import ImageFallback from \"@components/ImageFallback\";\nimport config from \"@config/config.json\";\nimport { useTheme } fro"
},
{
"path": "layouts/components/NewsLetterForm.js",
"chars": 1513,
"preview": "import React, { useState } from \"react\";\nimport { FaEnvelope } from \"react-icons/fa\";\n\nfunction CustomForm({ status, mes"
},
{
"path": "layouts/components/Pagination.js",
"chars": 3482,
"preview": "import Link from \"next/link\";\nimport React from \"react\";\nimport { BsArrowRightShort, BsArrowLeftShort } from \"react-icon"
},
{
"path": "layouts/components/Share.js",
"chars": 1765,
"preview": "import config from \"@config/config.json\";\nimport {\n IoLogoFacebook,\n IoLogoLinkedin,\n IoLogoPinterest,\n IoLogoTwitte"
},
{
"path": "layouts/components/Social.js",
"chars": 9759,
"preview": "import {\n IoCall,\n IoGlobeOutline,\n IoLocation,\n IoLogoBehance,\n IoLogoBitbucket,\n IoLogoCodepen,\n IoLogoDiscord,"
},
{
"path": "layouts/components/ThemeSwitcher.js",
"chars": 1809,
"preview": "import config from \"@config/config.json\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"r"
},
{
"path": "layouts/components/TwSizeIndicator.js",
"chars": 760,
"preview": "const TwSizeIndicator = () => {\n if (process.env.NODE_ENV === \"development\") {\n return (\n <div className=\"fixed"
},
{
"path": "layouts/partials/Footer.js",
"chars": 1642,
"preview": "import Social from \"@components/Social\";\nimport config from \"@config/config.json\";\nimport menu from \"@config/menu.json\";"
},
{
"path": "layouts/partials/Header.js",
"chars": 5757,
"preview": "import Logo from \"@components/Logo\";\nimport menu from \"@config/menu.json\";\nimport socical from \"@config/social.json\";\nim"
},
{
"path": "layouts/partials/Post.js",
"chars": 2273,
"preview": "import config from \"@config/config.json\";\nimport ImageFallback from \"@layouts/components/ImageFallback\";\nimport dateForm"
},
{
"path": "layouts/partials/SearchModal.js",
"chars": 1167,
"preview": "import { useRouter } from \"next/router\";\nimport { useEffect, useState } from \"react\";\nimport { IoCloseCircleOutline } fr"
},
{
"path": "layouts/partials/Sidebar.js",
"chars": 8405,
"preview": "import config from \"@config/config.json\";\nimport social from \"@config/social.json\";\nimport ImageFallback from \"@layouts/"
},
{
"path": "layouts/shortcodes/Accordion.jsx",
"chars": 1243,
"preview": "import { useState } from \"react\";\n\nconst Accordion = ({ title, children, className }) => {\n const [show, setShow] = use"
},
{
"path": "layouts/shortcodes/Button.jsx",
"chars": 476,
"preview": "import Link from \"next/link\";\n\nconst Button = ({ href, type, rel, children }) => {\n return (\n <Link\n href={href"
},
{
"path": "layouts/shortcodes/Code.jsx",
"chars": 342,
"preview": "import SyntaxHighlighter from \"react-syntax-highlighter\";\nimport { a11yDark } from \"react-syntax-highlighter/dist/cjs/st"
},
{
"path": "layouts/shortcodes/Notice.jsx",
"chars": 1032,
"preview": "function Notice({ type, children }) {\n return (\n <div className={`notice ${type} relative mb-8`}>\n <div classNa"
},
{
"path": "layouts/shortcodes/Tab.jsx",
"chars": 115,
"preview": "function Tab({ children }) {\n return <li className=\"tab-item my-0 hidden\">{children}</li>;\n}\n\nexport default Tab;\n"
},
{
"path": "layouts/shortcodes/Tabs.jsx",
"chars": 1609,
"preview": "import { useEffect, useRef } from \"react\";\n\nfunction Tabs({ children }) {\n //select tabItems\n const tabItemsRef = useR"
},
{
"path": "layouts/shortcodes/Video.jsx",
"chars": 378,
"preview": "function Video({ title, width = 500, height = \"auto\", src, ...rest }) {\n return (\n <video\n className=\"overflow-"
},
{
"path": "layouts/shortcodes/Youtube.jsx",
"chars": 325,
"preview": "import LiteYouTubeEmbed from \"react-lite-youtube-embed\";\nimport \"react-lite-youtube-embed/dist/LiteYouTubeEmbed.css\";\n\nc"
},
{
"path": "layouts/shortcodes/all.js",
"chars": 368,
"preview": "import Accordion from \"./Accordion\";\nimport Button from \"./Button\";\nimport Code from \"./Code\";\nimport Notice from \"./Not"
},
{
"path": "lib/contentParser.js",
"chars": 2586,
"preview": "import parseMDX from \"@lib/utils/mdxParser\";\nimport fs from \"fs\";\nimport matter from \"gray-matter\";\nimport path from \"pa"
},
{
"path": "lib/jsonGenerator.js",
"chars": 906,
"preview": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst matter = require(\"gray-matter\");\nconst config = require(\"."
},
{
"path": "lib/taxonomyParser.js",
"chars": 761,
"preview": "import { getSinglePage } from \"@lib/contentParser\";\nimport { slugify } from \"@lib/utils/textConverter\";\n\n// get all taxo"
},
{
"path": "lib/utils/dateFormat.js",
"chars": 179,
"preview": "import { formatInTimeZone } from \"date-fns-tz\";\n\nconst dateFormat = (date) => {\n return formatInTimeZone(date, \"America"
},
{
"path": "lib/utils/mdxParser.js",
"chars": 382,
"preview": "import { serialize } from \"next-mdx-remote/serialize\";\nimport rehypeSlug from \"rehype-slug\";\nimport remarkGfm from \"rema"
},
{
"path": "lib/utils/readingTime.js",
"chars": 788,
"preview": "// content reading\nconst readingTime = (content) => {\n const WPS = 275 / 60;\n\n let images = 0;\n const regex = /\\w/;\n\n"
},
{
"path": "lib/utils/similarItems.js",
"chars": 946,
"preview": "// similer products\nconst similerItems = (currentItem, allItems, slug) => {\n let categories = [];\n let tags = [];\n\n /"
},
{
"path": "lib/utils/sortFunctions.js",
"chars": 676,
"preview": "// sort by date\nexport const sortByDate = (array) => {\n const sortedArray = array.sort(\n (a, b) =>\n new Date(b."
},
{
"path": "lib/utils/textConverter.js",
"chars": 1649,
"preview": "import { slug } from \"github-slugger\";\nimport { marked } from \"marked\";\n\n// slugify\nexport const slugify = (content) => "
},
{
"path": "netlify.toml",
"chars": 44,
"preview": "[functions]\nincluded_files = [\"content/**\"]\n"
},
{
"path": "next.config.js",
"chars": 125,
"preview": "/**\n * @type {import('next').NextConfig}\n */\n\nconst nextConfig = {\n reactStrictMode: true,\n};\n\nmodule.exports = nextCon"
},
{
"path": "package.json",
"chars": 1462,
"preview": "{\n \"name\": \"next-tailwind-boilerplate\",\n \"description\": \"a nextjs and tailwindcss boilerplate by themefisher.com\",\n \""
},
{
"path": "pages/404.js",
"chars": 442,
"preview": "import NotFound from \"@layouts/404\";\nimport Base from \"@layouts/Baseof\";\nimport { getRegularPage } from \"@lib/contentPar"
},
{
"path": "pages/[regular].js",
"chars": 1464,
"preview": "import NotFound from \"@layouts/404\";\nimport About from \"@layouts/About\";\nimport Base from \"@layouts/Baseof\";\nimport Cont"
},
{
"path": "pages/_app.js",
"chars": 1844,
"preview": "import config from \"@config/config.json\";\nimport theme from \"@config/theme.json\";\nimport { JsonContext } from \"context/s"
},
{
"path": "pages/_document.js",
"chars": 948,
"preview": "import TwSizeIndicator from \"@components/TwSizeIndicator\";\nimport config from \"@config/config.json\";\nimport { Head, Html"
},
{
"path": "pages/categories/[category].js",
"chars": 2465,
"preview": "import config from \"@config/config.json\";\nimport Base from \"@layouts/Baseof\";\nimport Sidebar from \"@layouts/partials/Sid"
},
{
"path": "pages/categories/index.js",
"chars": 2136,
"preview": "import config from \"@config/config.json\";\nimport Base from \"@layouts/Baseof\";\nimport { getTaxonomy } from \"@lib/taxonomy"
},
{
"path": "pages/index.js",
"chars": 7795,
"preview": "import config from \"@config/config.json\";\nimport Base from \"@layouts/Baseof\";\nimport ImageFallback from \"@layouts/compon"
},
{
"path": "pages/page/[slug].js",
"chars": 2381,
"preview": "import config from \"@config/config.json\";\nimport Base from \"@layouts/Baseof\";\nimport Pagination from \"@layouts/component"
},
{
"path": "pages/posts/[single].js",
"chars": 1967,
"preview": "import config from \"@config/config.json\";\nimport PostSingle from \"@layouts/PostSingle\";\nimport { getSinglePage } from \"@"
},
{
"path": "pages/posts/index.js",
"chars": 124,
"preview": "import BlogPagination, { getStaticProps } from \"../page/[slug]\";\n\nexport { getStaticProps };\nexport default BlogPaginati"
},
{
"path": "pages/search.js",
"chars": 1637,
"preview": "import Base from \"@layouts/Baseof\";\nimport { slugify } from \"@lib/utils/textConverter\";\nimport Post from \"@partials/Post"
},
{
"path": "postcss.config.js",
"chars": 83,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "public/.htaccess",
"chars": 3511,
"preview": "##### Optimize default expiration time - BEGIN\r\n<IfModule mod_expires.c>\r\n \r\n ## Enable expiration control\r\n ExpiresA"
},
{
"path": "public/.well-known/sitepins.json",
"chars": 76,
"preview": "{\n \"cms\": \"Sitepins\",\n \"generator\": \"Sitepins CMS\",\n \"version\": \"1.0.0\"\n}"
},
{
"path": "public/robots.txt",
"chars": 40,
"preview": "User-agent: *\nAllow: /\n\nDisallow: /api/*"
},
{
"path": "public/sitepins-manifest.json",
"chars": 231,
"preview": "{\n \"name\": \"Sitepins CMS\",\n \"description\": \"Git-based CMS detection file\",\n \"cms\": \"Sitepins\",\n \"generator\": \"nextjs"
},
{
"path": "styles/base.scss",
"chars": 496,
"preview": "html {\n @apply text-base;\n}\n\nbody {\n @apply bg-body font-primary font-normal leading-relaxed text-text dark:bg-darkmod"
},
{
"path": "styles/buttons.scss",
"chars": 892,
"preview": ".btn {\n @apply font-secondary inline-block border px-5 py-2.5 font-bold transition;\n}\n\n.btn-primary {\n @apply bg-prima"
},
{
"path": "styles/components.scss",
"chars": 5500,
"preview": "// section style\n.section {\n @apply py-16;\n}\n\n// container\n.container {\n @apply mx-auto max-w-[1320px];\n}\n\n// form sty"
},
{
"path": "styles/navigation.scss",
"chars": 2117,
"preview": "body.menu-open {\n @apply overflow-hidden pr-0;\n}\n\n.header {\n @apply top-0 z-50 border-b bg-body py-[33px] dark:border-"
},
{
"path": "styles/style.scss",
"chars": 231,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @import \"base\";\n}\n\n@layer components {\n @im"
},
{
"path": "styles/utilities.scss",
"chars": 38,
"preview": "b,\nstrong {\n @apply font-semibold;\n}\n"
},
{
"path": "tailwind.config.js",
"chars": 3023,
"preview": "const theme = require(\"./config/theme.json\");\n\nlet font_base = Number(theme.fonts.font_size.base.replace(\"px\", \"\"));\nlet"
}
]
About this extraction
This page contains the full source code of the statichunt/geeky-nextjs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 100 files (157.9 KB), approximately 41.9k tokens, and a symbol index with 6 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.