Repository: mddanishyusuf/dailyhack
Branch: master
Commit: 1442722d9a10
Files: 27
Total size: 74.3 KB
Directory structure:
gitextract_88miovyq/
├── .gitignore
├── .nowignore
├── README.md
├── components/
│ ├── AddButton.js
│ ├── CommentBox.js
│ ├── Footer.js
│ ├── HackCard.js
│ ├── Header.js
│ ├── Layout.js
│ ├── NotifyMeModal.js
│ ├── PaginationBox.js
│ ├── PostFilters.js
│ └── SearchInput.js
├── config/
│ └── global.js
├── now.json
├── package.json
├── pages/
│ ├── _app.js
│ ├── contributors.js
│ ├── index.js
│ ├── post.js
│ ├── search.js
│ ├── sitemap.js
│ └── tag.js
├── server.js
├── sitemap.js
└── static/
├── sitemap.xml
└── style.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
package-lock.json
.next/
================================================
FILE: .nowignore
================================================
.next
node_modules
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://dailyhack.xyz">
<img alt="DailyHack" src="https://github.com/mddanishyusuf/dailyhack/raw/master/static/images/daily-hack-logo.png" width="200" />
</a>
</p>
<h1 align="center">
DailyHack
</h1>
<h3 align="center">
💡 :rocket:
</h3>
<p align="center">
Website: <a href="https://dailyhack.now.sh/">https://dailyhack.now.sh/</a>
</p>
<p align="center">
It's a place where people share the daily hacks they use during development to make their life easy.<br/>So, Do you have any hack to submit?
</p>
<p align="center">
<a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank">
<img src="https://img.shields.io/github/issues/mddanishyusuf/dailyhack.svg?label=Add%20Tricks" alt="Follow @gatsbyjs" />
</a>
</p>
## What’s In This Document
- [About DailyHack](#-about-dailyhack)
- [How to Add tricks](#-how-to-add-tricks)
- [How to Contribute](#-how-to-contribute)
- [Thanks to Our Contributors](#-thanks-to-our-contributors)
- [License](#license)
<br/>
## 📖 About DailyHack
DailyHack is just an Idea about sharing the **hacks/tricks/shortcuts** we use in our daily life to develop and fix the things quick and smart way. It's a community of makers and geeks from around the world. Anyone can share their methods with other makers and developers.
<br/>
## ✍ How to add tricks
We are using the [GitHub Issue System](https://github.com/mddanishyusuf/dailyhack/issues) as a CMS. So, it's easy to add your tricks. Just create an issue and write your hack into an editor and submit. After you submit the author/editors will set the tags to your issues and it will show [on the website](https://dailyhack.xyz/).
<br/>
## 🤝 How to Contribute
Adding tricks is a big contribution to the open-source community. The website and the code in this repository is Open Source. So, you can make any improvements or changes you desire.
[List of Contributors](https://dailyhack.xyz/contributors)
<br/>
### Website Build With
- **Next.js**- For SSR, Front-end I use [Styled JSX](https://nextjs.org/blog/styling-next-with-styled-jsx).
- **GitHub Issues:** As a CMS for tricks
- **Glitch:** A layer on the GitHub API to secure access_token
- **Zeit:** To host the application
<br/>
## 💜 Thanks to Our Contributors
Thanks to our many contributors and friends who give their time to add tricks.
<br/>
## License
[](https://creativecommons.org/publicdomain/zero/1.0/)
================================================
FILE: components/AddButton.js
================================================
import Link from 'next/link';
import { PlusSquare } from 'react-feather';
const AddButton = () => (
<div style={{textAlign: 'center'}}>
<div className="right-navbar">
<ul>
<li><a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank"><PlusSquare color={'#4618B1'} size={18} /> <span>submit your hack</span></a></li>
</ul>
</div>
<style jsx>
{`
.right-navbar ul{
text-align: center;
display: inline-block;
padding: 0;
margin: 0 0 40px 0px;
border-radius: 4px;
color: #24292e;
}
.right-navbar ul li{
padding: 10px;
-moz-box-align: center;
align-items: center;
list-style: none;
}
.right-navbar ul li a{
display: flex;
text-decoration: none;
padding: 5px 15px;
border: 2px solid #707070;
text-decoration: none;
border-radius: 4px;
background-color: #C37501AD;
}
.right-navbar ul li span {
padding: 0px 5px;
}
`}
</style>
</div>
)
export default AddButton;
================================================
FILE: components/CommentBox.js
================================================
import React, {useEffect, useState} from 'react';
import axios from 'axios';
import moment from 'moment'
import Markdown from 'markdown-to-jsx';
import {GITHUB_ENDPOIINT_LOCAL} from '../config/global'
const HyperLink = ({ children, ...props }) => (
<a {...props} href={props.href} target="_blank">{children}</a>
);
const Comments = function(props){
const {comments} = props;
return (
<div className="comments-list">
<div className="no-comments">Do you have any comment on this tricks? then let the author know about that. <a href={comments[0].html_url} target="_blank">comment here</a></div>
{
comments.length > 0
?
<div className="list">
{comments.map((comment, key)=> {
return(
<div className="comment-body" key={key}>
<div className="comment-head">
<div className="commenter-pic">
<img src={comment.user.avatar_url} />
</div>
<div className="comment-meta">
<div className="commenter-name">{comment.user.login}</div>
<div className="comment-date">{moment(comment.created_at).fromNow()}</div>
</div>
</div>
<div className="comment-text">
<Markdown
className="post-body"
options={{
overrides: {
a: {
component: HyperLink
},
},
}}
>{comment.body}
</Markdown>
</div>
</div>
)
})}
</div>
: 'This post have comments'
}
<style jsx>
{`
.comment-body .comment-head .commenter-pic img{
width: 25px;
height: 25px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border: 3px solid #d8d8d8
}
.comment-body .comment-head {
display: grid;
grid-template-columns: 40px auto;
}
.comment-body .comment-head .comment-meta {
font-size: 13px;
}
.comment-text {
font-size: 14px;
line-height: 1.6;
margin-bottom: 40px;
border: 1px solid #d8d8d8;
border-radius: 4px;
padding: 6px 18px;
margin-top: 10px;
background-color: #f1f8ff;
border-bottom-color: #c0d3eb;
display: inline-block;
border-radius: 10% 10% 10% 10% / 14% 14% 12% 12%;
}
.no-comments {
font-size: 14px;
margin-bottom: 20px
}
`}
</style>
</div>
)
}
const CommentBox = function(props){
const [comments, setComments] = useState([])
useEffect(()=> {
axios.get(`${GITHUB_ENDPOIINT_LOCAL}/issues/${props.single_issue.number}/comments`).then(res=>{
setComments(res.data)
})
},[])
return (
<div className="comment-box">
<div/>
<div className="comments">
{
comments.length > 0
? <Comments comments={comments} />
: <div className="no-comments">Do you have any comment on this tricks? then let the author know about that. <a href={`https://github.com/mddanishyusuf/dailyhack/issues/${props.single_issue.number}`}>comment here</a></div>
}
</div>
<style jsx>
{`
.comment-box {
display: grid;
grid-template-columns: 150px auto;
}
.no-comments {
font-size: 14px;
margin-bottom: 20px
}
@media screen and (max-width: 700px){
.comment-box {
display: grid;
grid-template-columns: 0px auto;
padding: 20px;
}
}
`}
</style>
</div>
)
}
export default CommentBox;
================================================
FILE: components/Footer.js
================================================
import Link from 'next/link'
import { Twitter, GitHub, Users, Info, HelpCircle } from 'react-feather';
const Footer = function(props) {
return (
<footer>
<div className="footer">
<div className="footer-inner">
<p>A community build by <Link href="/contributors"><a>contributors</a></Link> for Makers & Geeks and website build by @mddanishyusuf</p>
<p>Website by <a href="https://twitter.com/mddanishyusuf" target="_blank">@mddanishyusuf</a> and <a href="https://twitter.com/fajarsiddiqFS" target="_blank">@fajarsiddiqFS</a></p>
<p>Build with <a href="https://nextjs.org/" target="_blank">Next.js</a> + <a href="https://developer.github.com/" target="_blank">GitHub APIs</a> + <a href="http://glitch.com/" target="_blank">Glitch</a> + <a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank">GitHub Issues CMS</a> + <a href="https://zeit.co" target="_blank">Zeit</a></p>
</div>
<div className="footer-nav right-navbar">
<ul>
<li><a href="https://github.com/mddanishyusuf/dailyhack#-how-to-add-tricks" target="_blank"><HelpCircle color={'#4618B1'} size={18}/> <span>How to contribute</span></a></li>
<li><a href="https://github.com/mddanishyusuf/dailyhack/blob/master/README.md" target="_blank"><Info color={'#4618B1'} size={18}/> <span>About Us</span></a></li>
<li><Link href="/contributors"><a><Users color={'#4618B1'} size={18}/> <span>Contributors</span></a></Link></li>
<li><a href="https://github.com/mddanishyusuf/dailyhack" target="_blank"><GitHub color={'#4618B1'} size={18}/> <span>GitHub</span></a></li>
<li><a href="https://twitter.com/dailyhacknotes" target="_blank"><Twitter color={'#4618B1'} size={18} /> <span>Twitter</span></a></li>
</ul>
</div>
</div>
<style jsx>
{`
.footer {
background-color: rgb(240, 237, 237);
margin-bottom: -15px;
}
@media screen and (min-width: 700px) {
.footer {
display: flex;
-moz-box-pack: justify;
justify-content: space-between;
}
.footer-nav ul{
float: right;
}
.footer-nav ul li{
padding: 10px;
-moz-box-align: center;
align-items: center;
float: left;
list-style: none;
}
.footer-nav {
padding: 40px;
}
}
.footer-inner {
padding: 40px;
}
.footer-inner p {
line-height: 1.2;
font-size: 0.9rem;
}
.footer-inner a{
color: #4618B1;
}
.footer-nav ul {
padding: 0;
}
.footer-nav ul li a{
display: flex;
text-decoration: none;
color: #707070;
font-size: 0.9rem;
}
.footer-nav {
padding: 40px;
}
.footer-nav ul li{
padding: 10px;
list-style: none;
display: inline-block;
}
.footer-nav ul li span {
padding: 0px 5px;
}
`}
</style>
</footer>
)
}
export default Footer;
================================================
FILE: components/HackCard.js
================================================
import Markdown from 'markdown-to-jsx';
import getSlug from 'speakingurl'
import Link from 'next/link';
import { Tag, Heart, MessageSquare, Twitter, Facebook } from 'react-feather';
import moment from 'moment'
const HyperLink = ({ children, ...props }) => (
<a {...props} href={props.href} target="_blank">{children}</a>
);
const HackCard = (props) => {
const issue = props.single_issue
return (
<div className="hack-card-container">
<div className="hack-card">
<div className="hack-card-meta">
<img src={issue.user.avatar_url} className="author-picture" />
<div className="post-details">
<div className="author-name">{issue.user.login}</div>
<div className="created-at">{moment(issue.created_at).fromNow()}</div>
</div>
</div>
<div className="hack-card-content">
<div className="main-content">
{props.router.asPath !== '/' ? <h2>{issue.title}</h2> : <Link as={`/post/${[getSlug(issue.title),issue.number].join('-')}`} href={`/post?number=${issue.number}&slug=${[getSlug(issue.title)]}`}><a><h2>{issue.title}</h2></a></Link>}
<Markdown
className="post-body"
options={{
overrides: {
a: {
component: HyperLink
},
},
}}
>{issue.body}</Markdown>
</div>
<div className="card-footer">
<div className="heart footer-meta">
<ul>
<Tag size={18} color={'#4618B1'}/><span>
{issue.labels !== undefined ? issue.labels.map(label => {
return(
<li key={label.id}><Link href={`/tag/${label.name}`}><a>#{label.name}</a></Link></li>
)
}): ''}
</span>
</ul>
</div>
<div className="any-comments footer-meta">
<Link as={`/post/${[getSlug(issue.title),issue.number].join('-')}`} href={`/post?number=${issue.number}&slug=${[getSlug(issue.title)]}`}><a><MessageSquare size={18} color={'#4618B1'}/><span>{issue.comments === 0 ? 'comment?' : issue.comments}</span></a></Link>
<span>Share:</span>
<a href={`https://twitter.com/intent/tweet/?text=${encodeURI(issue.title)}&url=https://dailyhack.xyz/post/${[getSlug(issue.title),issue.number].join('-')}`} target="_blank" rel="noopener noreferrer"><Twitter size={18} color={'#4618B1'}/></a>
<a href={`https://facebook.com/sharer/sharer.php?u=https://dailyhack.xyz/post/${[getSlug(issue.title),issue.number].join('-')}`} target="_blank" rel="noopener noreferrer"><Facebook size={18} color={'#4618B1'}/></a>
</div>
</div>
</div>
</div>
<style>
{`
.hack-card-meta {
line-height: 1.4;
font-size: 0.8rem;
}
@media screen and (min-width: 700px) {
.hack-card-meta img {
margin-bottom: 15px;
}
}
@media screen and (max-width: 700px) {
.hack-card-meta {
display: grid;
grid-template-columns: 60px auto;
margin-bottom: 10px;
}
}
.hack-card-meta img {
display: block;
width: 40px;
height: 40px;
background-color: red;
border-radius: 50% 50% 40% 40% / 60% 60% 20% 30%;
border: 3px solid #d8d8d8
}
.hack-card-meta .author-name {
color: #885DF1
}
.hack-card-content {
line-height: 1.6;
margin-bottom: 40px;
border: 1px solid #d8d8d8;
border-radius: 4px;
}
.main-content {
padding: 15px;
font-size: 0.95rem;
}
.post-body pre {
background-color: #f6f8fa;
border-radius: 3px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 16px;
}
.post-body img {
max-height: 250px;
}
.post-body p code, .post-body ol li code {
background-color: rgba(27,31,35,.05);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: .2em .4em;
}
.post-body a {
color: #4618B1 !important;
text-decoration: underline !important;
}
.hack-card-content h2 {
margin: 0;
}
.hack-card-content a {
font-weight: 500;
margin-top: 0;
line-height: 1.2;
color: #202124;
text-decoration: none;
cursor: pointer;
}
.hack-card-content h1 {
font-size: 13px;
margin: 0;
}
.hack-card-content img {
max-width: 100%;
}
.card-footer {
display: grid;
grid-template-columns: auto 180px;
font-size: 12px;
padding: 10px 15px;
background-color: #f6f8fa;
border-bottom: 1px solid #d1d5da;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #586069;
padding-left: 15px;
padding-right: 15px;
}
.footer-meta {
-moz-box-align: center;
align-items: center;
display: flex;
}
.footer-meta ul {
display: flex;
padding: 0;
margin: 0;
}
.footer-meta ul li {
display: inline-block;
padding: 0px 5px;
}
.any-comments a:first-child {
background: #e2e2e2;
padding: 5px;
border-radius: 5px;
margin-right: 5px;
}
.any-comments a span {
line-height: 18px;
vertical-align: middle;
padding-left: 5px;
padding-right: 0;
}
.any-comments a, .any-comments span{
line-height: 18px;
display: flex;
}
@media screen and (min-width: 700px){
.hack-card-container .hack-card {
display: grid;
grid-template-columns: 150px auto;
}
}
@media screen and (max-width: 700px) {
}
`}
</style>
</div>
)
}
export default HackCard
================================================
FILE: components/Header.js
================================================
import {Fragment} from 'react';
import Link from 'next/link'
import { withRouter } from 'next/router'
import { Twitter, GitHub, Users, Bell, Coffee, Rss } from 'react-feather';
import AddButton from './AddButton'
import NotifyMeModal from './NotifyMeModal';
import PostFilters from './PostFilters';
const Header = (props) => {
return(
<div>
{/* <div className="ph-banner"><a href="https://www.producthunt.com/posts/dailyhack-2" target="_blank" rel="noopener noreferrer">🔥 Hey, we are on ProductHunt Today. Support Us there. Thanks</a></div> */}
<div className="navbar">
<div className="website-logo">
<Link href="/"><a><img src='/static/images/daily-hack-logo.png'/></a></Link>
</div>
<div className="right-navbar">
<ul>
<li><Link href="/contributors"><a><Users color={'#4618B1'} size={18}/> <span>Contributors</span></a></Link></li>
<li><a className="btn" href="#open-modal"><Bell color={'#4618B1'} size={18}/> <span>Notify Me</span></a></li>
<li><a href="https://www.buymeacoffee.com/mddanishyusuf" target="_blank" rel="noopener noreferrer"><Coffee color={'#4618B1'} size={18}/> <span>BMC</span></a></li>
<li><a href="https://github.com/mddanishyusuf/dailyhack" target="_blank" rel="noopener noreferrer"><GitHub color={'#4618B1'} size={18}/> <span>GitHub</span></a></li>
<li><a href="https://twitter.com/dailyhacknotes" target="_blank" rel="noopener noreferrer"><Twitter color={'#4618B1'} size={18} /> <span>Twitter</span></a></li>
{/* <li><Link href="/sitemap"><a><Rss color={'#4618B1'} size={18} /> <span>Sitemap</span></a></Link></li> */}
</ul>
</div>
<NotifyMeModal/>
</div>
{props.router.asPath === "/" ?
<Fragment>
<div className="landing-heading">
<h2>A Community of Makers and Geeks</h2>
<p>It's a place where people share there daily hack they use in their developments. So, Do you have any hack?</p>
<AddButton/>
</div>
<PostFilters />
</Fragment>
: ""}
<style jsx>
{`
.ph-banner {
font-size: 0.9rem;
text-align: center;
background-color: #da552f;
color: #fff;
padding: 5px;
}
.ph-banner a {
color: #fff;
text-decoration: none;
}
.navbar {
display: grid;
grid-template-columns: 50% 50%;
padding: 0px 60px;
margin-bottom: 60px;
}
.website-logo img{
width: 250px;
}
.landing-heading {
text-align: center;
}
.landing-heading h2 {
margin: 0;
padding: 0px 40px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.40455;
color: #202124;
letter-spacing: -.5px;
}
.landing-heading p {
max-width: 570px;
display: inline-block;
}
.right-navbar ul{
float: right;
}
.right-navbar ul li{
padding: 10px;
-moz-box-align: center;
align-items: center;
float: left;
list-style: none;
cursor: pointer;
}
.right-navbar ul li a{
display: flex;
text-decoration: none;
color: #707070;
font-size: 0.9rem;
}
.right-navbar ul li span {
padding: 0px 5px;
}
@media screen and (max-width: 700px) {
.navbar {
padding: 0px 10px;
margin-bottom: 20px;
}
.website-logo img{
width: 150px;
}
.right-navbar ul li span {
display: none;
}
.landing-heading h2 {
margin: 0;
padding: 20px;
font-weight: 500;
font-size: 30px;
line-height: 1.40455;
color: #202124;
}
.landing-heading p {
margin: 0;
padding: 0px 20px;
}
}
`}
</style>
</div>
)}
export default withRouter(Header);
================================================
FILE: components/Layout.js
================================================
import {Fragment} from 'react';
import Head from 'next/head';
import Header from './Header';
import Footer from './Footer';
const Layout = props => {
return(
<div>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<title>{props.title}</title>
<link rel="icon" href="/static/images/daily-hack-favicon.png" type="image/gif" sizes="16x16"/>
<meta name="title" content={props.title} />
<meta name="description" content={props.description} />
<meta name="twitter:card" content={props.summary} />
<meta property="og:title" content={props.title} />
<meta property="og:type" content="website" />
<meta property="og:url" content={props.pageUrl} />
<meta property="og:image" content={props.image}/>
<meta property="og:description" content={props.description} />
<link href="https://fonts.googleapis.com/css?family=Questrial|Poppins:500" rel="stylesheet"/>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-86945790-5"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-86945790-5');
`
}}
/>
</Head>
<Header/>
<div className="main">{props.children}</div>
<Footer />
<style jsx global>
{`
body {
padding: 0 !important;
font-family: 'Questrial', sans-serif;
margin: 0;
}
.main {
min-height: 700px !important;
}
p {
line-height: 1.8
}
`}
</style>
</div>
)
}
export default Layout;
================================================
FILE: components/NotifyMeModal.js
================================================
import { Bell, XSquare } from 'react-feather';
function NotifyMeModal(){
return(
<div id="open-modal" className="modal-window">
<div>
<a href="#" title="Close" className="modal-close"><XSquare/><span>Close</span></a>
<h1>Voilà! Notify Me.</h1>
<div>Hey, You want to notify by GitHub whenever there is new tricks. Then it's Easy just go to this Project Repository and click on `Watch` + `Star`. That's it.</div>
<div className="repo-buttons">
<div>
<h3>To Subscibe</h3>
<iframe src="https://ghbtns.com/github-btn.html?user=mddanishyusuf&repo=dailyhack&type=watch&count=true&size=large&v=2" frameBorder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
<div>
<h3>To Appreciate</h3>
<iframe src="https://ghbtns.com/github-btn.html?user=mddanishyusuf&repo=dailyhack&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
</div>
</div>
<style jsx>
{`
.repo-buttons {
display: grid;
grid-template-columns: 50% 50%
}
.modal-window {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 2em;
background: #ffffff;
border-radius: 4px;
box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
.modal-close {
display: flex;
color: #aaa;
line-height: 20px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
margin-top: 20px;
}
.modal-close:hover {
color: black;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
small {
color: #aaa;
}
.btn {
background-color: #fff;
padding: 1em 1.5em;
border-radius: 3px;
text-decoration: none;
}
.btn i {
padding-right: 0.3em;
}
@media screen and (max-width: 700px){
.modal-window > div {
width: 90%;
}
}
`}
</style>
</div>
)
}
export default NotifyMeModal;
================================================
FILE: components/PaginationBox.js
================================================
import Link from 'next/link'
import {PER_PAGE} from '../config/global'
function PaginationBox(props){
const activePage = props.active_page
const numberOfPages = Math.ceil(props.total_issues / PER_PAGE)
const paginationArray = Array.from(Array(numberOfPages).keys())
return(
<div className="pagination">
<ul>
{paginationArray.map(number => {
return(
<li key={number}>
{number+1 === parseInt(activePage) ? <span>{number+1}</span> : <Link as={`/page/${number+1}`} href={`/page?page_number=${number+1}`}><a>{number+1}</a></Link>}
</li>
)
})}
</ul>
<style jsx>
{`
.pagination ul{
padding: 0;
margin: 20px 0px 100px 0px;
text-align: center;
list-style-type: none;
}
.pagination ul li {
display: inline-block;
}
.pagination ul li a, .pagination ul li span{
padding: 5px;
border: 1px solid #333;
border-radius: 50% 40% 45% 50% / 40% 50% 55% 40%;
padding: 5px 10px;
margin: 3px;
}
.pagination ul li span{
background-color: #4618B1;
color: #fff;
}
`}
</style>
</div>
)
}
export default PaginationBox;
================================================
FILE: components/PostFilters.js
================================================
import {useState, useEffect} from 'react';
import axios from 'axios';
import Link from 'next/link'
import {GLITCH_ENDPOINT} from '../config/global'
import SearchInput from './SearchInput'
function PostFilters(){
const [tags, setTags] = useState([])
useEffect(()=>{
axios.get(GLITCH_ENDPOINT + '/tags').then(res=>{
setTags(res.data)
})
},[])
return(
<div>
<ul className="post-filtters">
{tags.map((tag, key)=>{
if(tag.name !== 'dailyhack'){
return(
<li key={key}><Link href={`/tag/${tag.name}`}><a>#{tag.name}</a></Link></li>
)
}
})}
</ul>
<SearchInput query=""/>
<style jsx>
{`
.search-issues {
text-align: center;
}
.search-issues input {
padding: 5px 10px;
min-width: 200px;
}
.post-filtters {
text-align: center;
}
.post-filtters {
padding:0;
margin:0 auto;
list-style-type: none;
margin-bottom: 40px;
width: 60%;
}
.post-filtters li{
padding:0;
margin:0;
display: inline-block;
padding: 3px 10px;
color:#4618B1;
font-size: 0.9rem;
}
`}
</style>
</div>
)
}
export default PostFilters;
================================================
FILE: components/SearchInput.js
================================================
import {useState, useEffect} from 'react';
import axios from 'axios';
import Router from 'next/router'
import {GITHUB_SEARCH_ENDPOIINT, GLITCH_ENDPOINT} from '../config/global'
function SearchInput(props){
const [searchQuery, setSearchQuery] = useState(props.query)
const setQuery = (e) => {
setSearchQuery(e.target.value)
}
const searchIssues = (e) => {
e.preventDefault()
var q = searchQuery.trim().split(' ').join('+')
Router.push(`/search/${q}`)
}
return(
<div>
<div className="search-issues">
<form onSubmit={searchIssues.bind()}>
<input type="text" onChange={setQuery.bind()} value={searchQuery} placeholder="🔍 Let's find some tricks from past"/>
</form>
</div>
<style jsx>
{`
.search-issues {
text-align: center;
margin-bottom: 20px;
}
.search-issues input {
padding: 5px 10px;
min-width: 300px;
font-size: 1rem;
border: 2px solid #707070;
-webkit-text-decoration: none;
text-decoration: none;
border-radius: 4px;
font-family: 'Questrial', sans-serif;
}
`}
</style>
</div>
)
}
export default SearchInput;
================================================
FILE: config/global.js
================================================
export const GITHUB_ENDPOIINT_LOCAL = "https://api.github.com/repos/mddanishyusuf/dailyhack";
export const GITHUB_SEARCH_ENDPOIINT = "https://api.github.com/search/issues";
export const DAILYHACK_GITHUB_API = "https://api.github.com/"
export const GLITCH_ENDPOINT = "https://dailyhack.glitch.me"
export const PER_PAGE = 10
================================================
FILE: now.json
================================================
{
"version": 2,
"builds": [{ "src": "package.json", "use": "@now/next" }],
"routes": [
{ "src": "/post/(?<slug>[a-z0-9-_]+-)(?<number>[0-9]+)", "dest": "/post?number=$number&slug=$slug", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/page/(?<page_number>[0-9]+)", "dest": "/index?page_number=$page_number", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/", "dest": "/index", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/contributors", "dest": "/contributors", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/tag/(?<tag_name>[a-z]+)", "dest": "/tag?tag_name=$tag_name", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/search/(?<keywords>[a-z0-9+]+)", "dest": "/search?keywords=$keywords", "headers": {"cache-control": "max-age=1800"} },
{ "src": "/sitemap.xml", "dest": "/server.js"}
]
}
================================================
FILE: package.json
================================================
{
"name": "dailyhack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"now-build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"axios": "^0.18.0",
"cacheable-response": "^1.4.2",
"express": "^4.16.4",
"fs": "0.0.1-security",
"isomorphic-unfetch": "^3.0.0",
"markdown-to-jsx": "^6.9.3",
"moment": "^2.24.0",
"next": "^9.3.2",
"next-router-events": "^2.1.0",
"node-sass": "^4.11.0",
"now": "^14.2.3",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-feather": "^1.1.6",
"speakingurl": "^14.0.1",
"styled-jsx": "^3.2.1"
},
"devDependencies": {
"dotenv": "^7.0.0"
}
}
================================================
FILE: pages/_app.js
================================================
import React from 'react'
import App, {Container} from 'next/app'
import Link from 'next/link'
import Router from 'next/router'
import routerEvents from 'next-router-events'
export default class MyApp extends App {
constructor(props){
super(props)
this.state = {
progress: false,
isCancelled: false
}
routerEvents.on('routeChangeStart', (url) => {
!this.isCancelled && this.setState({progress: true})
})
routerEvents.on('routeChangeComplete', () => {
!this.isCancelled && this.setState({progress: false})
})
routerEvents.on('routeChangeError', () => {
console.log('error')
})
}
componentWillUnmount() {
this.isCancelled = true;
}
static async getInitialProps ({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return {pageProps}
}
render () {
const {Component, pageProps} = this.props
return (
<Container>
{this.state.progress ? <div id="progress" className="meter animate"><span></span></div> : ''}
<Component {...pageProps} />
<style jsx>
{`
.meter > span {
display: block;
height: 100%;
width: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #4618B1;
background-image: linear-gradient(
center bottom,
#4618B1 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.meter > span:after, .animate > span {
animation: move 2s linear infinite;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
#progress {
position: fixed;
z-index: 1;
top: 0;
left: -6px;
width: 101%;
height: 3px;
}
`}
</style>
</Container>
)
}
}
================================================
FILE: pages/contributors.js
================================================
import {Fragment} from 'react';
import Layout from '../components/Layout';
import fetch from 'isomorphic-unfetch';
import { GLITCH_ENDPOINT} from '../config/global'
function ContributorCard(props) {
return (
<div className="contributor-page">
<div className="conti-list">
<div className="heading">
<h1>Contributors.</h1>
<small>{props.contributors.length} Members</small>
<p>These are the makers, geeks, developers. If you have any hack then your welcome to the community.</p>
<a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank">Join Community</a>
</div>
{props.contributors.map(cont => (
<div className="user-card">
<div className="user-meta">
<div className="picture">
<img src={cont.user.avatar_url}/>
</div>
<div className="user-info">
<div className="name">{cont.user.login}</div>
<div className="tricks-count">{cont.issues.length} {cont.issues.length === 1 ? 'trick' : 'tricks'}</div>
<div className="profile-url"><a href={`https://github.com/${cont.user.login}`} target="_blank">{`https://github.com/${cont.user.login}`}</a></div>
</div>
</div>
</div>
))}
</div>
<style jsx>
{`
.contributor-page {
width: 80%;
margin: 0px auto;
}
.conti-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.heading {
padding-right: 24px;
margin-bottom: 60px;
}
.heading h1{
padding: 0;
margin: 0
}
.heading p{
width: 80%;
line-height: 1.4rem;
}
.heading a {
padding: 5px 10px;
border: 2px solid #707070;
text-decoration: none;
border-radius: 4px;
background-color: #C37501AD;
}
.tricks-count, .profile-url {
font-size: 13px;
}
.profile-url a {
color: #4618B1;
text-decoration: none;
}
.conti-list .user-card {
margin-bottom: 40px;
}
.user-meta {
display: flex;
vertical-align: middle;
align-items: center;
}
.user-meta .picture img {
width: 100px;
height: 100px;
border-radius: 52% 55% 77% 67% / 54% 84% 41% 72%;
border: 3px solid #4618B1
}
.user-info {
padding-left: 10px;
}
.user-info div {
padding: 3px 0;
}
.user-info .name {
font-weight: 600;
}
`}
</style>
</div>
)
}
function Contributors(props){
return(
<Fragment>
<Layout title="Contributors of Dailyhack and there Tricks" description="List of all the contributors with no of tricks they add with there GitHub Profile" image={`https://screenshot-v2.now.sh/dailyhack.xyz/contributors`} pageUrl="https://dailyhack.xyz/contributors" {...props}>
<ContributorCard {...props}/>
</Layout>
</Fragment>
)
}
Contributors.getInitialProps = async function(){
const url = GLITCH_ENDPOINT + '/contributors'
const result = await fetch(url)
const data = await result.json()
return {
contributors: data
}
}
export default Contributors;
================================================
FILE: pages/index.js
================================================
import React, {Fragment, useState, useEffect} from 'react';
import fetch from 'isomorphic-unfetch';
import {withRouter} from 'next/router';
import Layout from '../components/Layout';
import HackCard from '../components/HackCard';
import PaginationBox from '../components/PaginationBox';
import {PER_PAGE, GLITCH_ENDPOINT} from '../config/global'
const HackComponent = withRouter(props=>{
return (
<div className="main-container">
{props.dailyhacks.map(hack => (
<div key={hack.id}>
<HackCard single_issue={hack} {...props}/>
</div>
))}
<style jsx>{`
.main-container {
padding: 10px;
}
@media screen and (min-width: 700px) {
.main-container {
width: 80%;
margin: 0px auto;
}
}
`}</style>
</div>
)
})
function DailyHackHome(props){
return(
<Fragment>
<Layout title="Daily Hack: A community of Makers and Geeks" description="An community of makers, developers and geeks where they share there daily hack they use in their developments." image="/static/images/daily-hack-image.png" pageUrl="https://dailyhack.xyz" {...props}>
<HackComponent {...props}/>
<PaginationBox {...props}/>
</Layout>
</Fragment>
)
}
DailyHackHome.getInitialProps = async function(context){
var page_number;
if(context.query.page_number === undefined){
page_number = 1
}else{
page_number = context.query.page_number
}
const url = GLITCH_ENDPOINT + '/issues/' + page_number + '/' + PER_PAGE
const result = await fetch(url)
const data = await result.json()
return {
dailyhacks: data.issues,
page_number: context.query.page_number,
total_issues: data.total_issues,
active_page: page_number
}
}
export default DailyHackHome
================================================
FILE: pages/post.js
================================================
import {withRouter} from 'next/router';
import fetch from 'isomorphic-unfetch';
import Layout from '../components/Layout';
import HackCard from '../components/HackCard';
import CommentBox from '../components/CommentBox'
import {GLITCH_ENDPOINT} from '../config/global'
const SinglePost = withRouter(props => {
return(
<Layout title={props.single_issue.title} image={`https://screenshot-v2.now.sh/dailyhack.xyz/post/${props.slug}`} description={props.single_issue.body.trim().substr(0,154)} pageUrl={`https://dailyhack.xyz/post/${props.slug}`} {...props}>
<div className="single-post">
<HackCard {...props}/>
<CommentBox {...props}/>
</div>
<style>
{`
.single-post {
padding: 10px;
}
@media screen and (min-width: 700px) {
.single-post {
width: 80%;
margin: 0px auto;
}
}
`}
</style>
</Layout>
)
})
SinglePost.getInitialProps = async function(context){
const result = await fetch(`${GLITCH_ENDPOINT}/issues/${context.query.number}`)
const issue = await result.json()
return {
single_issue: issue,
slug: `${context.query.slug}-${context.query.number}`
}
}
export default SinglePost;
================================================
FILE: pages/search.js
================================================
import React, {Fragment, useState, useEffect} from 'react';
import fetch from 'isomorphic-unfetch';
import axios from 'axios';
import Layout from '../components/Layout';
import HackCard from '../components/HackCard';
import PaginationBox from '../components/PaginationBox';
import {withRouter} from 'next/router';
import SearchInput from '../components/SearchInput'
import {GITHUB_ENDPOIINT_LOCAL, PER_PAGE, GITHUB_SEARCH_ENDPOIINT} from '../config/global'
// function HackComponent(props){
// return (
// <div className="main-container">
// {props.issues.length > 0 ? props.issues.map(hack => (
// <div key={hack.id}>
// <HackCard single_issue={hack}/>
// </div>
// )): 'No Result Found.'}
// <style jsx>{`
// .main-container {
// padding: 10px;
// }
// @media screen and (min-width: 700px) {
// .main-container {
// width: 80%;
// margin: 0px auto;
// }
// }
// `}</style>
// </div>
// )
// }
const HackComponent = withRouter(props=>{
return (
<div className="main-container">
{props.issues.length > 0 ? props.issues.map(hack => (
<div key={hack.id}>
<HackCard single_issue={hack} {...props}/>
</div>
)): 'No Result Found.'}
<style jsx>{`
.main-container {
padding: 10px;
}
@media screen and (min-width: 700px) {
.main-container {
width: 80%;
margin: 0px auto;
}
}
`}</style>
</div>
)
})
function SearchPage(props){
const [issues, setIssues] = useState(props.dailyhacks)
const inputQ = props.keywords.split('+').join(' ')
return(
<Fragment>
<Layout title={`Search: ${props.keywords}`} description="An community of makers, developers and geeks where they share there daily hack they use in their developments." image="/static/images/daily-hack-image.png" pageUrl="https://dailyhack.xyz" {...props}>
<SearchInput query={inputQ}/>
<HackComponent issues={issues}/>
<style jsx>
{`
.load-more-issues{
text-align: center;
margin-bottom: 40px;
}
.load-more-issues span {
cursor: pointer;
padding: 5px 20px;
border: 1px solid #333;
border-radius: 30% 40% 25% 45% / 40% 45% 30% 40%;
}
`}
</style>
</Layout>
</Fragment>
)
}
SearchPage.getInitialProps = async function(context){
var keywords = context.query.keywords;
const url = `${GITHUB_SEARCH_ENDPOIINT}?q=${keywords}+repo:mddanishyusuf/dailyhack`
const result = await fetch(url)
const data = await result.json()
return {
dailyhacks: data.items,
keywords
}
}
export default SearchPage
================================================
FILE: pages/sitemap.js
================================================
import React, {Fragment, useState, useEffect} from 'react';
import fetch from 'isomorphic-unfetch';
import {withRouter} from 'next/router';
import getSlug from 'speakingurl'
import Link from 'next/link';
import {DAILYHACK_GITHUB_API} from '../config/global'
import Layout from '../components/Layout';
const SiteMapList = withRouter(props=>{
return (
<div className="main-container">
<h3>Sitemap</h3>
<ol>
{props.dailyhacks.map(hack => (
<li key={hack.id}><Link as={`/post/${[getSlug(hack.title),hack.number].join('-')}`} href={`/post?number=${hack.number}&slug=${[getSlug(hack.title)]}`}><a>{hack.title}</a></Link></li>
))}
</ol>
<style jsx>{`
.main-container {
padding: 10px;
}
@media screen and (min-width: 700px) {
.main-container {
width: 80%;
margin: 0px auto;
}
}
`}</style>
</div>
)
})
function DailyHackHome(props){
return(
<Fragment>
<Layout title="Daily Hack: Sitemap" description="An community of makers, developers and geeks where they share there daily hack they use in their developments." image="/static/images/daily-hack-image.png" pageUrl="https://dailyhack.xyz/sitemap" {...props}>
<SiteMapList {...props}/>
</Layout>
</Fragment>
)
}
DailyHackHome.getInitialProps = async function(context){
const url = DAILYHACK_GITHUB_API + '/issues/1/100'
const result = await fetch(url)
const data = await result.json()
return {
dailyhacks: data.issues
}
}
export default DailyHackHome
================================================
FILE: pages/tag.js
================================================
import React, {Fragment, useState, useEffect} from 'react';
import fetch from 'isomorphic-unfetch';
import axios from 'axios';
import {withRouter} from 'next/router';
import Layout from '../components/Layout';
import HackCard from '../components/HackCard';
import PaginationBox from '../components/PaginationBox';
import {GITHUB_ENDPOIINT_LOCAL, PER_PAGE} from '../config/global'
const HackComponent = withRouter(props=>{
return (
<div className="main-container">
{props.issues.map(hack => (
<div key={hack.id}>
<HackCard single_issue={hack} {...props}/>
</div>
))}
<style jsx>{`
.main-container {
padding: 10px;
}
@media screen and (min-width: 700px) {
.main-container {
width: 80%;
margin: 0px auto;
}
}
`}</style>
</div>
)
})
function DailyTagPage(props){
const [issues, setIssues] = useState(props.dailyhacks)
const [loadingCount, setLoadingCount] = useState(true)
const [page, setPage] = useState(2)
const loadMoreTagIssues = () => {
const url = `${GITHUB_ENDPOIINT_LOCAL}/issues?labels=${props.tag_name}&page=${page}&per_page=${PER_PAGE}`
axios.get(url).then((res)=>{
if(res.data.length > 0){
setIssues([...issues, ...res.data])
setPage(page+1)
}else{
setLoadingCount(false)
}
})
}
return(
<Fragment>
<Layout title={`DailyHack: ${props.tag_name} tricks`} description="An community of makers, developers and geeks where they share there daily hack they use in their developments." image="/static/images/daily-hack-image.png" pageUrl="https://dailyhack.xyz" {...props}>
<h1>Tag: ${props.tag_name} tricks</h1>
<HackComponent issues={issues} {...props}/>
<div className="load-more-issues">
{loadingCount
? <span onClick={loadMoreTagIssues}>Load More</span>
: <div>That's all. You have any hack then add <a href="https://github.com/mddanishyusuf/dailyhack/issues" target="_blank" rel="noopener noreferrer">here</a></div>
}
</div>
<style jsx>
{`
.load-more-issues{
text-align: center;
margin-bottom: 40px;
}
.load-more-issues span {
cursor: pointer;
padding: 5px 20px;
border: 1px solid #333;
border-radius: 30% 40% 25% 45% / 40% 45% 30% 40%;
}
`}
</style>
</Layout>
</Fragment>
)
}
DailyTagPage.getInitialProps = async function(context){
var tag_name = context.query.tag_name;
const url = GITHUB_ENDPOIINT_LOCAL + '/issues?labels='+tag_name+'&page=1&per_page=10'
const result = await fetch(url)
const data = await result.json()
return {
dailyhacks: data,
tag_name
}
}
export default DailyTagPage
================================================
FILE: server.js
================================================
const cacheableResponse = require('cacheable-response')
const express = require('express');
const next = require('next');
const axios = require('axios');
const fs = require("fs");
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();
const { DESTINATION, createSitemap } = require("./sitemap");
const ssrCache = cacheableResponse({
ttl: 1000 * 30 * 60, // 30min
get: async ({ req, res, pagePath, queryParams }) => ({
data: await app.renderToHTML(req, res, pagePath, queryParams)
}),
send: ({ data, res }) => res.send(data)
})
app
.prepare()
.then(() => {
const server = express();
// server.get("/sitemap.xml", function(req, res) {
// res.header("Content-Type", "application/xml");
// (async function sendXML() {
// let xmlFile = await createSitemap();
// res.send(xmlFile);
// // fs.writeFileSync(DESTINATION, xmlFile);
// })();
// });
server.get('/post/:slug', (req, res) => {
const pagePath = '/post'
var slugArray = req.params.slug.split('-')
const [number] = slugArray.slice(-1)
slugArray.splice(-1,1)
const slug = slugArray.join('-')
const queryParams = { number, slug }
// app.render(req, res, pagePath, queryParams)
return ssrCache({ req, res, pagePath, queryParams })
})
server.get('/page/:page_number', (req, res) => {
const pagePath = '/'
const page_number = req.params.page_number
const queryParams = { page_number }
return ssrCache({ req, res, pagePath, queryParams })
// app.render(req, res, pagePath, queryParams)
})
server.get('/tag/:tag_name', (req, res) => {
const pagePath = '/tag'
const tag_name = req.params.tag_name
const queryParams = { tag_name }
return ssrCache({ req, res, pagePath, queryParams })
// app.render(req, res, pagePath, queryParams)
})
server.get('/search/:keywords', (req, res) => {
const pagePath = '/search'
const keywords = req.params.keywords
const queryParams = { keywords }
return ssrCache({ req, res, pagePath, queryParams })
// app.render(req, res, pagePath, queryParams)
})
server.get('/', (req, res) => ssrCache({ req, res, pagePath: '/' }))
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err=> {
if(err) throw err;
console.log(`> Ready on http://localhost:${port}`)
})
})
.catch(ex => {
console.error(ex.stack);
process.exit(1)
})
================================================
FILE: sitemap.js
================================================
const path = require("path");
const glob = require("glob");
const fs = require("fs");
const axios = require("axios");
const getSlug = require('speakingurl')
// If you use Dotenv you can include your .env variables uncommenting the following line
// require("dotenv").config();
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const SITE_ROOT = "https://dailyhack.xyz"
// API_SOURCE is the endpoint of you api
// Update example.com/api with your endpoint or set the env variable
const API_SOURCE = "https://dailyhack.glitch.me/issues/1/100";
// DESTINATION is where the real file is exported
// By default is .next/static/sitemap.xml
const DESTINATION =
process.env.DESTINATION ||
path.join(resolveApp("./static"), "sitemap.xml");
const createSitemap = () => {
let xml = "";
xml += '<?xml version="1.0" encoding="UTF-8"?>';
xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
return axios
.get(API_SOURCE)
.then(resp => {
let { issues } = resp.data;
issues.forEach((issue, index) => {
xml += "<url><loc>";
xml += `${SITE_ROOT}/post/${[getSlug(issue.title),issue.number].join('-')}`;
xml +=
`</loc><lastmod>${issue.updated_at.split('T')[0]}</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url>`;
if (index === issues.length - 1) {
xml += "</urlset>";
}
});
return xml;
})
.catch(error => {
console.log(error.message, error.name);
});
};
module.exports = { DESTINATION, createSitemap };
================================================
FILE: static/sitemap.xml
================================================
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dailyhack.xyz/post/open-links-in-new-tab-safely-62</loc><lastmod>2019-04-15</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/tired-of-getting-your-email-spammed-61</loc><lastmod>2019-04-14</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/how-to-reload-a-page-using-javascript-60</loc><lastmod>2019-04-14</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/macos-toggle-on-character-viewer-to-insert-emoji-to-anywhere-58</loc><lastmod>2019-04-14</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/5-keyboard-shortcuts-to-navigate-your-code-faster-57</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/use-linux-on-chromeos-55</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/geturlparameters-in-javascript-54</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/use-the-same-email-to-make-differnt-acc-s-on-one-website-53</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/runcat-52</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/eject-water-from-your-phone-s-speakers-after-getting-it-wet-51</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/handy-macos-terminal-commands-50</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/vscode-switch-back-from-settings-ui-to-settings-json-or-vscode-pro-49</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/get-day-of-week-48</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/macos-mojave-how-to-take-a-screen-capture-47</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/finding-a-previous-ip-address-46</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/ignoring-a-previously-committed-file-quickly-45</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/keyboard-events-live-reference-44</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/automatically-update-your-website-footer-43</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/slug-text-function-42</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/javascript-calculate-age-from-date-small-function-41</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/simple-paypal-payment-form-40</loc><lastmod>2019-04-15</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/change-the-date-of-a-git-commit-39</loc><lastmod>2019-04-11</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/easy-to-remember-local-static-web-server-httpster-38</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/check-your-battery-status-and-date-in-your-mac-37</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/stores-a-string-to-a-variable-using-scanf-in-c-36</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/save-snippets-globally-to-access-in-any-editor-or-any-group-33</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/vscode-code-editor-32</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/dns-troubleshooting-31</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/how-do-display-errors-in-php-30</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/my-quick-hack-to-unsubscribe-from-spam-email-in-1-click-29</loc><lastmod>2019-04-14</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/a-command-to-give-your-terminal-windows-a-title-28</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/hide-desktop-items-on-mac-27</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/log-multiple-variables-to-the-js-console-with-their-names-26</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/git-push-dev-branch-merge-into-master-push-master-to-origin-go-back-to-dev-25</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/screenshot-tool-by-zeit-return-screenshoot-by-url-24</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/validate-your-side-project-before-beginning-development-23</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/quickly-create-images-for-social-media-and-seo-22</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/use-netlify-for-a-free-and-simple-url-shortener-21</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/watch-youtube-videos-when-i-do-code-20</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/copy-the-ssh-key-id_rsa-pub-directly-from-the-terminal-19</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/get-last-typed-command-on-terminal-18</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/search-previous-typed-command-on-terminal-17</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/vim-search-for-a-term-15</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/css-border-awesome-tricks-14</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/compress-image-compress-your-image-for-the-web-13</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/next-js-application-deploy-on-zeit-7</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/alfred-app-6</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/taskbook-track-all-my-todos-in-terminal-5</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/live-server-use-for-small-development-to-serve-app-in-browser-4</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/screen-mailer-record-upload-and-share-link-3</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/create-and-share-beautiful-images-of-your-source-code-2</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://dailyhack.xyz/post/delete-remote-and-local-branch-in-git-1</loc><lastmod>2019-04-13</lastmod><changefreq>daily</changefreq><priority>0.8</priority></url></urlset>
================================================
FILE: static/style.scss
================================================
body{
font-family: 'Quicksand', sans-serif;
}
gitextract_88miovyq/
├── .gitignore
├── .nowignore
├── README.md
├── components/
│ ├── AddButton.js
│ ├── CommentBox.js
│ ├── Footer.js
│ ├── HackCard.js
│ ├── Header.js
│ ├── Layout.js
│ ├── NotifyMeModal.js
│ ├── PaginationBox.js
│ ├── PostFilters.js
│ └── SearchInput.js
├── config/
│ └── global.js
├── now.json
├── package.json
├── pages/
│ ├── _app.js
│ ├── contributors.js
│ ├── index.js
│ ├── post.js
│ ├── search.js
│ ├── sitemap.js
│ └── tag.js
├── server.js
├── sitemap.js
└── static/
├── sitemap.xml
└── style.scss
Condensed preview — 27 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (80K chars).
[
{
"path": ".gitignore",
"chars": 38,
"preview": "node_modules/\npackage-lock.json\n.next/"
},
{
"path": ".nowignore",
"chars": 18,
"preview": ".next\nnode_modules"
},
{
"path": "README.md",
"chars": 2531,
"preview": "<p align=\"center\">\n <a href=\"https://dailyhack.xyz\">\n <img alt=\"DailyHack\" src=\"https://github.com/mddanishyusuf/dai..."
},
{
"path": "components/AddButton.js",
"chars": 1476,
"preview": "import Link from 'next/link';\nimport { PlusSquare } from 'react-feather';\n\nconst AddButton = () => (\n <div style={{te..."
},
{
"path": "components/CommentBox.js",
"chars": 5396,
"preview": "import React, {useEffect, useState} from 'react';\nimport axios from 'axios';\nimport moment from 'moment'\nimport Markdown..."
},
{
"path": "components/Footer.js",
"chars": 4296,
"preview": "import Link from 'next/link'\nimport { Twitter, GitHub, Users, Info, HelpCircle } from 'react-feather';\n\nconst Footer = f..."
},
{
"path": "components/HackCard.js",
"chars": 8763,
"preview": "import Markdown from 'markdown-to-jsx';\nimport getSlug from 'speakingurl'\nimport Link from 'next/link';\nimport { Tag, He..."
},
{
"path": "components/Header.js",
"chars": 5168,
"preview": "import {Fragment} from 'react';\nimport Link from 'next/link'\nimport { withRouter } from 'next/router'\nimport { Twitter,..."
},
{
"path": "components/Layout.js",
"chars": 2302,
"preview": "import {Fragment} from 'react';\nimport Head from 'next/head';\n\nimport Header from './Header';\nimport Footer from './Foot..."
},
{
"path": "components/NotifyMeModal.js",
"chars": 4518,
"preview": "import { Bell, XSquare } from 'react-feather';\n\nfunction NotifyMeModal(){\n return(\n <div id=\"open-modal\" classNa..."
},
{
"path": "components/PaginationBox.js",
"chars": 1733,
"preview": "import Link from 'next/link'\nimport {PER_PAGE} from '../config/global'\n\nfunction PaginationBox(props){\n const activeP..."
},
{
"path": "components/PostFilters.js",
"chars": 1832,
"preview": "import {useState, useEffect} from 'react';\nimport axios from 'axios';\nimport Link from 'next/link'\n\nimport {GLITCH_ENDPO..."
},
{
"path": "components/SearchInput.js",
"chars": 1547,
"preview": "import {useState, useEffect} from 'react';\nimport axios from 'axios';\nimport Router from 'next/router'\n\nimport {GITHUB_S..."
},
{
"path": "config/global.js",
"chars": 326,
"preview": "export const GITHUB_ENDPOIINT_LOCAL = \"https://api.github.com/repos/mddanishyusuf/dailyhack\";\n\nexport const GITHUB_SEARC..."
},
{
"path": "now.json",
"chars": 918,
"preview": "{\n \"version\": 2,\n \"builds\": [{ \"src\": \"package.json\", \"use\": \"@now/next\" }],\n \"routes\": [\n { \"src\": \"/po..."
},
{
"path": "package.json",
"chars": 867,
"preview": "{\n \"name\": \"dailyhack\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"nod..."
},
{
"path": "pages/_app.js",
"chars": 3804,
"preview": "import React from 'react'\nimport App, {Container} from 'next/app'\nimport Link from 'next/link'\nimport Router from 'next/..."
},
{
"path": "pages/contributors.js",
"chars": 4549,
"preview": "import {Fragment} from 'react';\nimport Layout from '../components/Layout';\nimport fetch from 'isomorphic-unfetch';\nimpor..."
},
{
"path": "pages/index.js",
"chars": 2062,
"preview": "import React, {Fragment, useState, useEffect} from 'react';\nimport fetch from 'isomorphic-unfetch';\nimport {withRouter}..."
},
{
"path": "pages/post.js",
"chars": 1471,
"preview": "import {withRouter} from 'next/router';\nimport fetch from 'isomorphic-unfetch';\n\nimport Layout from '../components/Layou..."
},
{
"path": "pages/search.js",
"chars": 3408,
"preview": "import React, {Fragment, useState, useEffect} from 'react';\nimport fetch from 'isomorphic-unfetch';\nimport axios from 'a..."
},
{
"path": "pages/sitemap.js",
"chars": 1799,
"preview": "import React, {Fragment, useState, useEffect} from 'react';\nimport fetch from 'isomorphic-unfetch';\nimport {withRouter}..."
},
{
"path": "pages/tag.js",
"chars": 3365,
"preview": "import React, {Fragment, useState, useEffect} from 'react';\nimport fetch from 'isomorphic-unfetch';\nimport axios from 'a..."
},
{
"path": "server.js",
"chars": 2929,
"preview": "const cacheableResponse = require('cacheable-response')\nconst express = require('express');\nconst next = require('next')..."
},
{
"path": "sitemap.js",
"chars": 1760,
"preview": "const path = require(\"path\");\nconst glob = require(\"glob\");\nconst fs = require(\"fs\");\nconst axios = require(\"axios\");\nco..."
},
{
"path": "static/sitemap.xml",
"chars": 9171,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"><url><loc>https://dail..."
},
{
"path": "static/style.scss",
"chars": 49,
"preview": "body{\n font-family: 'Quicksand', sans-serif;\n}"
}
]
About this extraction
This page contains the full source code of the mddanishyusuf/dailyhack GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 27 files (74.3 KB), approximately 17.5k tokens. 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.