Added features to show VSCode extentions made by @bravo68web
This commit is contained in:
Jyotirmoy Bandyopadhayaya
Jyotirmoy Bandyopadhyaya [Bravo68]
parent
64db79aa80
commit
c162faeebf
|
|
@ -32,6 +32,7 @@ export const ExtraStyles = styled.div`
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
&:hover {
|
||||
filter: contrast(200%);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { ExtraStyles } from "./extras.style";
|
||||
|
||||
import {qb} from "config"
|
||||
function qbadges() {
|
||||
var qbData = Array.from(qb, ([title,earnDate,url,image]) => ({ title,earnDate,url,image }));
|
||||
console.log(qbData);
|
||||
return (
|
||||
<ExtraStyles>
|
||||
<div>
|
||||
|
|
@ -9,16 +11,16 @@ function qbadges() {
|
|||
{/* <div>
|
||||
<div className="content">
|
||||
<div className="content-description">
|
||||
<img src={mydbs[1].image} />
|
||||
<img src={qb[1].image} />
|
||||
</div>
|
||||
<div className="content-title">
|
||||
<h1>
|
||||
<a
|
||||
href={mydbs[1].url}
|
||||
href={qb[1].url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{mydbs[1].title}
|
||||
{qb[1].title}
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { ExtraStyles } from "./vsexts.style";
|
||||
import { vsExts } from "config";
|
||||
|
||||
function vsExtsShow() {
|
||||
return (
|
||||
<ExtraStyles>
|
||||
<div>
|
||||
<h1 className="title">VS Code Extensions</h1>
|
||||
<div className="default">
|
||||
{vsExts.map((content, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className="content">
|
||||
<div className="content-description">
|
||||
<a
|
||||
href={content.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img src={content.image} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="content-title">
|
||||
<h1>
|
||||
<a
|
||||
href={content.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{content.name}
|
||||
</a>
|
||||
</h1>
|
||||
<h2 className="tags">#{content.type}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</ExtraStyles>
|
||||
);
|
||||
}
|
||||
|
||||
export default vsExtsShow;
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
export const ExtraStyles = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 15vh;
|
||||
background-image: url("images/background3.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
overflow-y: scroll !important;
|
||||
height: 100vh;
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
background-color: var(--color4);
|
||||
color: var(--color3);
|
||||
}
|
||||
.default {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* height: 100vh; */
|
||||
padding-bottom: 3em;
|
||||
padding-top: 2em;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
&:hover {
|
||||
filter: contrast(200%);
|
||||
-webkit-transform: translateX(-5px) translateY(-5px);
|
||||
transform: translateX(-5px) translateY(-5px);
|
||||
transition: 1s ease;
|
||||
background-color: var(--color3);
|
||||
color: var(--color7);
|
||||
border-radius: 1em;
|
||||
}
|
||||
.content-description {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content-description img {
|
||||
width: 100px;
|
||||
}
|
||||
.content-title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: var(--color7);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
a {
|
||||
color: var(--color7);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: var(--color7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--color5);
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
32
config.js
32
config.js
|
|
@ -95,7 +95,7 @@ const myqbs = async () => {
|
|||
return map;
|
||||
}
|
||||
|
||||
export let qb = myqbs().then((qbd) => {
|
||||
export let qb = myqbs().then(async (qbd) => {
|
||||
return qbd;
|
||||
}).catch((err) => console.error(err));
|
||||
|
||||
|
|
@ -501,3 +501,33 @@ export const extraPages = [
|
|||
url: "/spl",
|
||||
},
|
||||
];
|
||||
|
||||
export const vsExts = [
|
||||
{
|
||||
name: "icyicons",
|
||||
description: "Crystalify all your VSCode Icons.",
|
||||
type: "icon-pack",
|
||||
url: "https://marketplace.visualstudio.com/items?itemName=Bravo68web.icyicons",
|
||||
image: "https://raw.githubusercontent.com/BRAVO68WEB/icyicons/master/icon.png",
|
||||
},
|
||||
{
|
||||
name: "propstar",
|
||||
description: "A multivariant VS-Code Theme build with ❤️. All theme designs and colour combinations are handpicked to suit every Programmers needs. Hope you love it.",
|
||||
type: "theme",
|
||||
url: "https://marketplace.visualstudio.com/items?itemName=Bravo68web.propstar",
|
||||
image: "https://raw.githubusercontent.com/BRAVO68WEB/propstar-theme/main/assets/icon.png",
|
||||
},
|
||||
{
|
||||
name: "vscode-uipack",
|
||||
description: "VSCode UI Pack created by Bravo68web",
|
||||
type: "extentionPack",
|
||||
url: "https://marketplace.visualstudio.com/items?itemName=Bravo68web.vscode-uipack",
|
||||
image: "https://raw.githubusercontent.com/BRAVO68WEB/vscode-uipack/master/icon.png",
|
||||
},{
|
||||
name: "vector-vscode-devpack",
|
||||
description: "Feature Rich VSCode Extension Pack created by Bravo68web",
|
||||
type: "extentionPack",
|
||||
url: "https://marketplace.visualstudio.com/items?itemName=Bravo68web.vector-vscode-devpack",
|
||||
image: "https://raw.githubusercontent.com/BRAVO68WEB/vector-vscode-devpack/master/icon.png",
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Head from "next/head";
|
||||
import Nav from "components/nav";
|
||||
import Extras from "components/extras";
|
||||
import VSExts from "components/vsexts";
|
||||
import Footer from "components/footer";
|
||||
|
||||
export default function Home() {
|
||||
|
|
@ -34,7 +34,7 @@ export default function Home() {
|
|||
/>
|
||||
</Head>
|
||||
<Nav />
|
||||
<Extras />
|
||||
<VSExts />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue