Skip to content
This repository has been archived by the owner on Apr 4, 2023. It is now read-only.

Commit

Permalink
Merge friend
Browse files Browse the repository at this point in the history
  • Loading branch information
@mustofa-id
mustofa-id committed Jul 9, 2019
2 parents c0ef5f9 + 683abf9 commit 52904a0
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 58 deletions.
96 changes: 60 additions & 36 deletions griddy-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,52 +39,76 @@ exports.siteMetadata = {
],
friends: [
{
name: 'Goku',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'http://media.japanpowered.com/images/goku.png',
backdrop: '',
description: 'Son Goku, born Kakarot, is a male Saiyan and the main protagonist of the Dragon Ball metaseries created by Akira Toriyama.',
siteEngine: 'Saiyan'
name: 'Mustofa',
siteUrl: 'https://mustofa.id',
screenshot: 'https://cdn.staticaly.com/screenshot/mustofa.id?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/mustofa.id/static/logo-d7ffd794e4a7a9f2c6e97e0510c45358.png',
description: 'I am Habib Mustofa, a Programmer from Indonesia. Typing Java and JavaScript code on Linux machine...',
siteEngine: 'Gatsbyjs'
},
{
name: 'Vegeta',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'https://media.comicbook.com/2018/03/vegeta3-1092181-1280x0.jpeg',
backdrop: '',
description: 'Vegeta is the prince of the fallen Saiyan race. He is the eldest son of King Vegeta, the older brother of Tarble, the husband of Bulma, the father of Trunks and Bulla, and the ancestor of Vegeta Jr.',
siteEngine: 'Saiyan'
name: 'Okitavera',
siteUrl: 'https://okitavera.me',
screenshot: 'https://cdn.staticaly.com/screenshot/okitavera.me?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/okitavera.me/assets/img/me.png',
description: 'I am an Android Developer who focus on application performance and user experience...',
siteEngine: '11ty'
},
{
name: 'Majin Buu',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/majin-buu-dragonball-z.jpg',
backdrop: '',
description: 'Majin Buu, generally spelled Majin Boo in subtitles of the Japanese anime, and rendered as Djinn-Boo in the Viz Media manga, is a fictional character and the final antagonist in the Dragon Ball manga series created by Akira Toriyama.',
siteEngine: 'Enemy'
name: 'Epsy RNS',
siteUrl: 'https://epsi-rns.gitlab.io',
screenshot: 'https://cdn.staticaly.com/screenshot/epsi-rns.gitlab.io?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/epsi-rns.gitlab.io/assets/site/images/epsi-bulat.png',
description: 'I am an open source enthusiast. This site is mainly discuss about web development, frontend, backend, and especially SSG (static site generator)',
siteEngine: 'Hugo'
},
{
name: 'Frieza',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'http://pre01.deviantart.net/4496/th/pre/f/2017/207/6/8/frieza_in_the_tournament_by_zika_arts-dbhtr6c.png',
backdrop: '',
description: 'Frieza was the emperor of the universe, who controlled his own imperial army and was feared for his ruthlessness and power, but was taken out of power when he was killed by Future Trunks & Goku.',
siteEngine: 'Enemy'
name: 'Rania Amina',
siteUrl: 'https://raniaamina.id',
screenshot: 'https://cdn.staticaly.com/screenshot/raniaamina.id?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/raniaamina.id/images/avatar.png',
description: 'RANIA AMINA jatuh cinta dengan dunia Free/Libre Open Source Software sejak masih duduk di bangku SMP dan sekarang mencoba untuk aktif berkontribusi di bidang FLOSS...',
siteEngine: 'Hexo'
},
{
name: 'Gohan',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'https://am21.akamaized.net/tms/cnt/uploads/2018/09/GohanSS2.jpg',
backdrop: '',
description: 'Gohan is the elder son of the series primary protagonist Goku and his wife Chi-Chi, the older brother of Goten, the husband of Videl and father to Pan. Gohan is the first hybrid (half-Earthling, half-Saiyan) to appear in the series. He is named after Goku\'s adoptive grandfather, Gohan.',
siteEngine: 'Saiyan'
name: 'BanditHijo',
siteUrl: 'https://bandithijo.com',
screenshot: 'https://cdn.staticaly.com/screenshot/bandithijo.com?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/d33wubrfki0l68.cloudfront.net/4cb146f6f279bfb3a7cabc463aa27b5817845380/73aa2/assets/img/logo/logo_author.png',
description: 'BanditHijo adalah nama pena dari Rizqi Nur Assyaufi; seorang blogger, vlogger, dan coder yang berasal dari kota Balikpapan...',
siteEngine: 'Jekyll'
},
{
name: 'Mr. Satan',
siteUrl: 'https://link.mustofa.id/fb',
avatar: 'https://i.ytimg.com/vi/YMEyz3-zSI0/maxresdefault.jpg',
backdrop: '',
description: 'Mr. Satan, also known as Hercule Satan in the Funimation dub, is the World Martial Arts Champion and the Earth\'s protector. His real name is Mark.',
siteEngine: 'Comedian'
name: 'Ypraw Blog',
siteUrl: 'https://ypraw.github.io',
screenshot: 'https://cdn.staticaly.com/screenshot/ypraw.github.io?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/d33wubrfki0l68.cloudfront.net/5b4e81bf1811f1b1f52b3e364269a0ef6b00e55b/01606/static/avatar-492ed88ed27cba96afe4309daf844026.jpg',
description: 'My name is Yunindyo Prabowo. Born in Jakarta 15th June 1995.',
siteEngine: 'Gatsbyjs'
},
{
name: 'Maidgirl21',
siteUrl: 'https://maidgirl21.github.io',
screenshot: 'https://cdn.staticaly.com/screenshot/maidgirl21.github.io?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/assets.gitlab-static.net/uploads/-/system/user/avatar/3800305/avatar.png',
description: 'Hello, I am Yoghaswara "Yodel" Hadi Nugroho a.c.e maidgirl21, I am a Rubyist, Unix-Like Enthusiats and Rails Backend Developer...',
siteEngine: ' '
},
{
name: 'Michael IMO',
siteUrl: 'https://www.digimoclub.com',
screenshot: 'https://cdn.staticaly.com/screenshot/www.digimoclub.com?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/www.digimoclub.com/medias/avatar.jpg',
description: 'Blog sederhana yang membahas tips, trick dan tutorial yang bermanfaat seputar dunia online',
siteEngine: 'Hexo'
},
{
name: "Addy's Blog",
siteUrl: 'https://addy-dclxvi.github.io/',
screenshot: 'https://cdn.staticaly.com/screenshot/addy-dclxvi.github.io?w=500&h=300',
profilepic: 'https://cdn.statically.io/img/addy-dclxvi.github.io/image/me.png',
description: 'Hi! I’m Addy! Just a student, a worker, and a Linux Enthusiast. I love metal, cat, linux, playing guitar, design, customizing desktop, more metal, reading, climbing mountain, fishing, watching movie, anime, and even more metal...',
siteEngine: 'Hugo'
}
]
}
62 changes: 40 additions & 22 deletions src/pages/friend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Category from '../components/widget/category'
import { queryAdjustment, eqic } from '../shared/util'

const masonryBreakpoint = {
default: 4,
default: 3,
1279: 3,
850: 2,
500: 1
Expand All @@ -30,7 +30,10 @@ const Friend = ({ data, location }) => {

return (
<>
<SEO title={title} />
<SEO
title={title}
description='Screenshot of SSG sample of my friends on the community'
/>
<header>
<Navbar title={title} subtitle={query && `@${query}`}>
<Category categories={engines} type='friend' />
Expand All @@ -47,8 +50,8 @@ const Friend = ({ data, location }) => {
name={p.name}
desc={p.description}
url={p.siteUrl}
avatar={p.avatar}
backdrop={p.backdrop}
screenshot={p.screenshot}
profilepic={p.profilepic}
engine={p.siteEngine}
/>
))}
Expand All @@ -62,24 +65,39 @@ const Friend = ({ data, location }) => {
)
}

const FriendItem = ({ name, desc, url, avatar, backdrop, engine }) => (
<a href={url} target='_blank' rel='noopener noreferrer'>
<div
className='box is-paddingless has-rounded-corner has-bg-shadow has-hover-effect'
style={{ marginBottom: '1rem' }}>
<img style={{ borderRadius: '10px 10px 0 0' }} src={avatar} alt={name} />
<div className='media-content' style={{ padding: '1rem' }}>
<div className='content'>
<p style={{ marginBottom: '0.5em' }}>
<strong>{name}</strong>
</p>
<p className='is-size-6' style={{ marginBottom: '0.5em' }}>
{desc}
</p>
</div>
const FriendItem = ({ name, desc, url, screenshot, profilepic, engine }) => (

<div className='box has-bg-shadow has-rounded-corner is-paddingless has-hover-effect'
style={{ marginBottom: '1rem' }}>
<figure className='image'>
<img className='coverpic' src={screenshot} alt={name} />
</figure>
<div className='media padding-bottom-0'>
<div className='media-left'>
<figure className='image is-48x48'>
<img style={{ borderRadius: '5px' }} src={profilepic} alt={name} />
</figure>
</div>
<div className='media-content'>
<p>
<strong>{name}</strong>
</p>
<p style={{ fontSize: '14px' }}>
<a href={url}>{url}</a>
</p>
</div>
</div>
<div className='media-content' style={{ padding: '1rem' }}>
<div className='content'>
<p>
{desc}
</p>
<p className='is-size-7'>
SSG: {engine}
</p>
</div>
</div>
</a>
</div>
)

export const query = graphql`
Expand All @@ -89,8 +107,8 @@ export const query = graphql`
friends {
name
siteUrl
avatar
backdrop
screenshot
profilepic
description
siteEngine
}
Expand Down
18 changes: 18 additions & 0 deletions src/styles/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,4 +310,22 @@ opacity: 1
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}

// comment box
.comments {
margin-top: 2.5rem;
}
@media screen and (max-width: 400px) {
.comments {
margin-top: 1.7rem;
}
}

// for box friends
.padding-bottom-0 {
padding-top: 1rem;
padding-right: 1rem;
padding-left: 1rem;
padding-bottom: 0;
}

0 comments on commit 52904a0

Please sign in to comment.