Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 819403d7 authored by HGouttebroze's avatar HGouttebroze
Browse files

WIP: add social icones & stay to center froggit's logo

parent 5b4024a1
No related branches found
No related tags found
1 merge request!23Draft: Resolve "(footer) froggit icon and social icons"
Pipeline #2605 passed
Stage: test
This commit is part of merge request !23. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
docusaurus.config.js
+ 0
− 26
View file @ 819403d7
......@@ -36,32 +36,6 @@ module.exports = {
footer: {
style: "dark",
links: [
{
title: "Suivez-nous",
items: [
{
label: "Youtube",
href: "https://www.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/?sub_confirmation=1",
},
{
label: "Linkedin",
href: "https://www.linkedin.com/company/froggit",
},
{
label: "Froggit",
href: "https://lab.frogg.it/froggit",
},
{
label: "GitLab",
href: "https://gitlab.com/froggit",
},
{
label: "Twitter",
href: "https://twitter.com/art_devops",
},
],
},
{
title: "Pourquoi Froggit ?",
items: [
......
package-lock.json
+ 5
− 0
View file @ 819403d7
......@@ -10064,6 +10064,11 @@
"react-side-effect": "^2.1.0"
}
},
"react-icons": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
"integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......
package.json
+ 1
− 0
View file @ 819403d7
......@@ -25,6 +25,7 @@
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"url-loader": "^4.1.1"
},
"browserslist": {
......
src/css/custom.css
+ 92
− 0
View file @ 819403d7
......@@ -136,3 +136,95 @@ header {
font-family: var(--ifm-font-family);
font-weight: 600;
}
.footer-social-icons {
background-color: var(--ifm-color-tonic-one);
display: flex;
justify-content: center ;
align-content: center;
text-align: center;
min-height: 20vh;
align-items: center;
/*
text-align: center;
vertical-align: middle; */
}
/*
.social-icons {
align-items: center;
justify-content: center;
vertical-align: middle;
order: 5;
}*/
.footer-social-icons {
color: var(--ifm-color-dark-green);
}
.footer-social-icons:hover {
color: var(--ifm-color-light-green);
}
/* unvisited link */
.footer-social-icons a:link {
color: red;
padding: 12px 16px;
cursor: "pointer";
}
/* visited link */
.footer-social-icons a:visited {
color:var(--ifm-color-dark-green);
padding: "12px 16px";
cursor: "pointer";
}
/* mouse over link */
.footer-social-icons a:hover {
color: var(--ifm-color-light-green);
}
/* selected link */
.footer-social-icons a:active {
color: var(--ifm-color-dark-green);
}
.footer-logo {
/* position: absolute;
top: 36px;
left: 50%;
padding-top: 50px;*/
text-align: center;
top: 50px;
margin-top:200px;
z-index: 1;
height: 65px;
width: 65px;
}
/*
.icones a {
background-color: inherit;
}
{
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
*/
src/theme/Footer.js 0 → 100644
+ 87
− 0
View file @ 819403d7
// Remarque : l'importation à partir de "@theme/Footer" échouerait en raison de l'importation du fichier lui-même.
import OriginalFooter from "@theme-original/Footer";
import React from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Link from "@docusaurus/Link";
import { FaGitlab, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
import { IconContext } from "react-icons";
/* import { AiFillGitlab } from "react-icons/ai";
FaLinkedinIn, FaTwitterSquare, FaYoutubeSquare
*/
export default function Footer(props) {
// eslint-disable-next-line no-unused-vars
const { siteConfig } = useDocusaurusContext();
return (
<>
<div className="footer-logo">
<img
src={"/img/logo_froggit.svg"}
/* style={{ position: "absolute", left: "350px", top: "100px", height: "30px" }} */
/>
{/* Svg: require("../../static/img/read-smile.svg").default
<img src="img/read-smile.svg" />
<div className="footer__bottom text--center">
{logo && (logo.src || logo.srcDark) && (
<div className="margin-bottom--sm">
{logo.href ? (
<Link href={logo.href} className={styles.footerLogoLink}>
<FooterLogo alt={logo.alt} sources={sources} />
</Link>
) : (
<FooterLogo alt={logo.alt} sources={sources} />
)}
</div>
)}
.footerLogoLink {
opacity: 0.5;
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.footerLogoLink:hover {
opacity: 1;
}
*/}
</div>
<div className="footer-social-icons">
<IconContext.Provider value={{ className:"social-icons", size:"2em" }}>
<Link to="https://gitlab.com/froggit">
<FaGitlab />
</Link>
{/* <Link to="https://gitlab.com/froggit">
<AiFillGitlab />
</Link>
<Link to="https://gitlab.com/froggit">
<FaLinkedinIn />
</Link>
<Link to="https://www.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/?sub_confirmation=1">
<FaYoutubeSquare />
</Link>
<Link to="https://twitter.com/art_devops">
<FaTwitterSquare />
</Link>
*/}
<Link to="https://www.linkedin.com/company/froggit">
<FaLinkedin />
</Link>
<Link to="https://twitter.com/art_devops">
<FaTwitter />
</Link>
<Link to="https://www.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/?sub_confirmation=1">
<FaYoutube />
</Link>
</IconContext.Provider>
</div>
<OriginalFooter {...props}/>
<div>vfkn</div>
</>
);
}
src/theme/FooterBis/index.js 0 → 100644
+ 130
− 0
View file @ 819403d7
/* eslint-disable react/prop-types */
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import {useThemeConfig} from "@docusaurus/theme-common";
import useBaseUrl from "@docusaurus/useBaseUrl";
import isInternalUrl from "@docusaurus/isInternalUrl";
import styles from "./styles.module.css";
import ThemedImage from "@theme/ThemedImage";
import IconExternalLink from "@theme/IconExternalLink";
function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
const toUrl = useBaseUrl(to);
const normalizedHref = useBaseUrl(href, {
forcePrependBaseUrl: true,
});
return (
<Link
className="footer__link-item"
{...(href
? {
href: prependBaseUrlToHref ? normalizedHref : href,
}
: {
to: toUrl,
})}
{...props}>
{href && !isInternalUrl(href) ? (
<span>
{label}
<IconExternalLink />
</span>
) : (
label
)}
</Link>
);
}
const FooterLogo = ({sources, alt}) => (
<ThemedImage className="footer__logo" alt={alt} sources={sources} />
);
function Footer() {
const {footer} = useThemeConfig();
const {copyright, links = [], logo = {}} = footer || {};
const sources = {
light: useBaseUrl(logo.src),
dark: useBaseUrl(logo.srcDark || logo.src),
};
if (!footer) {
return null;
}
return (
<footer
className={clsx("footer", {
"footer--dark": footer.style === "dark",
})}>
<div className="container">
{links && links.length > 0 && (
<div className="row footer__links">
{links.map((linkItem, i) => (
<div key={i} className="col footer__col">
{linkItem.title != null ? (
<div className="footer__title">{linkItem.title}</div>
) : null}
{linkItem.items != null &&
Array.isArray(linkItem.items) &&
linkItem.items.length > 0 ? (
<ul className="footer__items">
{linkItem.items.map((item, key) =>
item.html ? (
<li
key={key}
className="footer__item" // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: item.html,
}}
/>
) : (
<li key={item.href || item.to} className="footer__item">
<FooterLink {...item} />
</li>
),
)}
</ul>
) : null}
</div>
))}
</div>
)}
{(logo || copyright) && (
<div className="footer__bottom text--center">
{logo && (logo.src || logo.srcDark) && (
<div className="margin-bottom--sm">
{logo.href ? (
<Link href={logo.href} className={styles.footerLogoLink}>
<FooterLogo alt={logo.alt} sources={sources} />
</Link>
) : (
<FooterLogo alt={logo.alt} sources={sources} />
)}
</div>
)}
{copyright ? (
<div
className="footer__copyright" // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: copyright,
}}
/>
) : null}
</div>
)}
</div>
</footer>
);
}
export default Footer;
src/theme/FooterBis/styles.module.css 0 → 100644
+ 15
− 0
View file @ 819403d7
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.footerLogoLink {
opacity: 0.5;
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.footerLogoLink:hover {
opacity: 1;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service