Compare commits

...

74 Commits

Author SHA1 Message Date
mikwee 234f6bd2c7 Merge branch 'master' of https://gitdab.com/mikwee/linkroots 2021-11-23 14:49:41 +02:00
mikwee ac0be2a361 Added the link to the repo 2021-11-23 14:40:22 +02:00
mikwee 17f2024129 Wrote the rest of readme 2021-11-23 14:35:29 +02:00
mikwee 7916580d2a Added logo 2021-11-23 14:24:14 +02:00
mikwee 6f169acd0a Removed logo.svg 2021-11-23 14:23:45 +02:00
mikwee 62470dde02 Changed the links 2021-11-23 14:10:40 +02:00
mikwee e88288ed56 Changed roots.json, Started writing readme 2021-11-23 14:10:03 +02:00
mikwee 4c2de13114 Added an anchor 2021-11-23 13:47:26 +02:00
mikwee 4afa0591c3 Adding the footer 2021-11-23 13:46:15 +02:00
mikwee 0bd9b4ec2d Changed margin of text 2021-11-23 13:35:52 +02:00
mikwee 25c47899a9 Changed the size of the Tumblr icon 2021-11-23 13:35:22 +02:00
mikwee 1e47556e62 Brighter BG, removed the error 2021-11-23 13:33:58 +02:00
mikwee 2839cc08a0 Removed the ButtonGroup import 2021-11-23 13:19:29 +02:00
mikwee b51a31d811 Removed the Tumblr import 2021-11-23 13:19:09 +02:00
mikwee b1268279a3 Styled the Tumblr button 2021-11-23 13:18:48 +02:00
mikwee 26dc164ed8 Brighter BG, button width 2021-11-23 13:09:53 +02:00
mikwee 89456c8f16 Overhaul of roots.json 2021-11-22 22:03:26 +02:00
mikwee 6949054197 Layout of Tumblr icon, added Instagram in example 2021-11-22 21:26:52 +02:00
mikwee 45f5d7ba65 Added the Grommet Tumblr icon 2021-11-22 20:00:44 +02:00
mikwee 3dcfe5cda4 Changed title styling, switched to React Icons 2021-11-22 19:53:01 +02:00
mikwee e247f43864 Button layout 2021-11-20 20:52:37 +02:00
mikwee fc283bac04 Removed Button Group 2021-11-16 19:37:15 +02:00
mikwee 4c9665633c Removed classes 2021-11-16 19:36:07 +02:00
mikwee 58d76a7139 Removed "rootContents" styling 2021-11-16 19:31:14 +02:00
mikwee adbeaaa8da Added classes 2021-11-16 19:30:34 +02:00
mikwee 518af4bac8 Removing the 0 2021-11-16 18:00:43 +02:00
mikwee 17222b2473 Styling the Tumblr button 2021-11-16 18:00:13 +02:00
mikwee 39f6e984fc Adding a Tumblr root 2021-11-10 16:31:38 +02:00
mikwee 028d8c9c57 Adding the icon 2021-11-08 21:25:52 +02:00
mikwee 17b761ec89 Imported the Tumblr icon 2021-11-08 21:15:05 +02:00
mikwee 0a51ce7b29 Bringing the container back 2021-11-08 21:10:24 +02:00
mikwee fb95c93ba0 Getting rid of the container 2021-11-08 21:09:38 +02:00
mikwee 39f46548a5 Adding the links 2021-11-08 20:47:58 +02:00
mikwee 40c696bb4d Removing socialTypes 2021-11-08 20:46:41 +02:00
mikwee 7d0b17170c Creating the button generator, stylizing Reddit 2021-11-08 20:46:20 +02:00
mikwee 4d038df5c1 Styling the Tumblr button, bringing back the map 2021-11-08 17:02:39 +02:00
mikwee 103010679a Styling the YouTube, LinkedIn & Pinterest buttons 2021-11-08 17:00:03 +02:00
mikwee 06a1a44b31 Styling the Twitter & GitHub buttons 2021-11-08 16:56:33 +02:00
mikwee c3182489ba Styling the Facebook button 2021-11-08 16:42:07 +02:00
mikwee 88bbacaeb0 Getting rid of the size 2021-11-05 21:47:01 +02:00
mikwee 4a1bce6043 Removed the padding 2021-11-05 21:39:52 +02:00
mikwee fb142dad68 Removing the roots class 2021-11-05 21:39:06 +02:00
mikwee 1d35630043 Increasing the button's size 2021-11-05 21:38:37 +02:00
mikwee f0924ae409 Padding 2021-11-05 21:37:38 +02:00
mikwee 37faac24a2 Deleted facebook.scss 2021-11-05 21:35:07 +02:00
mikwee c8fa1fd0f7 Fixing the import 2021-11-05 17:32:56 +02:00
mikwee ce98e393bc Trying to fix the styling 2021-11-05 17:29:32 +02:00
mikwee 2171698901 Added styling to roos.scss 2021-11-05 17:25:13 +02:00
mikwee 84fb90b422 Removed roots from CSS file, added id to button 2021-11-05 17:23:02 +02:00
mikwee 2a904dff20 Making the button work 2021-11-05 17:19:19 +02:00
mikwee 8241e67f84 Fixing the import 2021-11-05 17:18:23 +02:00
mikwee 94ba4b8e40 Installed Bootstrap 2021-11-05 17:17:17 +02:00
mikwee 0defc5a625 Styling the button 2021-11-05 15:00:48 +02:00
mikwee f8f4cdf2a8 Added a button 2021-11-05 14:27:09 +02:00
mikwee 292aed3223 Importing Bootstrap button 2021-11-05 14:04:29 +02:00
mikwee df3c874ea4 Getting rid of Awesome Button 2021-11-05 13:53:40 +02:00
mikwee 5dded31a31 Changed SCSS to CSS 2021-11-05 13:43:24 +02:00
mikwee 6bc50393a8 Changed facebook.scss 2021-11-05 13:01:12 +02:00
mikwee 5deebbab2f Adding back styles.css 2021-11-05 12:53:00 +02:00
mikwee 8358992698 Removing the button 2021-11-05 12:51:13 +02:00
mikwee 1a516e3bf5 Adding a demo button 2021-11-05 12:50:01 +02:00
mikwee bfa21552be Starting a button component 2021-10-28 21:05:54 +03:00
mikwee 6847f6e742 Changes in buttons 2021-10-28 21:03:09 +03:00
mikwee a3f00581fb Testing AwesomeButton 2021-10-28 19:45:19 +03:00
mikwee c839ee41b1 Starting to make the buttons 2021-10-15 18:58:37 +03:00
mikwee 07d82da3b1 Background, title 2021-10-14 19:56:16 +03:00
mikwee f0e3057ecc Changing terminology in roots.json 2021-10-14 18:56:51 +03:00
mikwee 48030d8db5 Styled the title 2021-10-13 20:57:23 +03:00
mikwee bb3075c98c Added title 2021-10-13 19:28:31 +03:00
mikwee 6c3f7078f0 Changed links to roots 2021-10-13 18:03:25 +03:00
mikwee 1a5df99b75 Imports, inserting BG 2021-10-13 18:00:35 +03:00
mikwee 11a3d6ef23 Wrote an example page 2021-10-13 17:56:16 +03:00
mikwee a7d299d59f Project created, JSON imported 2021-10-09 17:52:42 +03:00
mikwee 8063b74bec Initialize project using Create React App 2021-10-09 15:58:33 +03:00
37 changed files with 159869 additions and 0 deletions

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

16
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,16 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "C:/Users/mikwee/AppData/Local/Chromium/Application/chrome.exe"
}
]
}

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"svg.preview.background": "black"
}

147522
.yarn/releases/yarn-1.22.15.cjs vendored Normal file

File diff suppressed because one or more lines are too long

5
.yarnrc Normal file
View File

@ -0,0 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
yarn-path ".yarn/releases/yarn-1.22.15.cjs"

29
README.md Normal file
View File

@ -0,0 +1,29 @@
# LinkRoots
<p align="center"><img src="src\logo.png"/></p>
LinkRoots is a libre, lightweight, self-hosted alternative to Linktree.
## How to use it
1. Clone the repository.
2. Replace `background.png` with any background image of your choice.
3. Edit `roots.json` to modify the page. The example should be enough to help you understand the format, but feel free to ask me questions if you still don't get it!
4. Host it!
## Button types
| Type | Description | Example |
| --- | --- | --- |
| `basic` | A basic button, not associated with any particular site. | ![Basic Button](buttonImages\basic.png) |
| `facebook` | A button for Facebook pages. | ![Facebook Button](buttonImages\facebook.png) |
| `instagram` | A button for Instagram pages. | ![Instagram Button](buttonImages\instagram.png) |
| `twitter` | A button for Twitter pages. | ![Twitter Button](buttonImages\twitter.png) |
| `github` | A button for GitHub pages. | ![GitHub Button](buttonImages\github.png) |
| `youtube` | A button for YouTube pages. | ![YouTube Button](buttonImages\youtube.png) |
| `linkedin` | A button for LinkedIn pages. | ![LinkedIn Button](buttonImages\linkedin.png) |
| `pinterest` | A button for Pinterest pages. | ![Pinterest Button](buttonImages\pinterest.png) |
| `tumblr` | A button for Tumblr pages. | ![Reddit Button](buttonImages\tumblr.png) |
| `reddit` | A button for Reddit pages. | ![Reddit Button](buttonImages\reddit.png) |

BIN
buttonImages/basic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
buttonImages/facebook.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
buttonImages/github.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
buttonImages/instagram.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
buttonImages/linkedin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
buttonImages/pinterest.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
buttonImages/reddit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
buttonImages/tumblr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
buttonImages/twitter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
buttonImages/youtube.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

47
package.json Normal file
View File

@ -0,0 +1,47 @@
{
"name": "linkroots",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fontsource/roboto": "^4.5.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "5.1.3",
"css-loader": "^6.5.0",
"file-loader": "^6.2.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-bootstrap-icons": "^1.5.0",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"sass": "^1.43.4",
"svg-jsx-loader": "^1.0.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

43
public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
public/logo192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

34
src/App.css Normal file
View File

@ -0,0 +1,34 @@
.App {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('background.png');
position: fixed;
min-width: 100%;
min-height: 100%;
background-size: cover;
background-position: center;
}
#title {
text-align: center;
margin-top: 3%;
font-family: "Roboto";
color: white;
}
#container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-top: 3%;
}
footer {
margin-top: 1rem;
padding: 1rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

56
src/App.js Normal file
View File

@ -0,0 +1,56 @@
import './App.css';
import {Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { IconContext } from 'react-icons/lib';
import { BsFacebook, BsInstagram, BsTwitter, BsGithub, BsYoutube, BsLinkedin, BsPinterest, BsReddit } from 'react-icons/bs';
import {GrTumblr} from 'react-icons/gr';
import './styles/roots.scss';
import data from './roots.json'
function App() {
var res;
return (
<div className="App">
<h1 id="title">{data.title}</h1>
<div id="container">
{data.links.map((rootDetail, index)=>{
if(rootDetail.type === "facebook") {
res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><BsFacebook/> {rootDetail.text}</Button>
}
else if(rootDetail.type === "instagram") {
res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><BsInstagram/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "twitter") {
res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><BsTwitter/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "github") {
res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><BsGithub/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "youtube") {
res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><BsYoutube/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "linkedin") {
res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><BsLinkedin/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "pinterest") {
res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><BsPinterest/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "tumblr") {
res = <Button className="roots" id="tumblr" variant="primary" href={rootDetail.url}><IconContext.Provider value={{size: "1em"}}><GrTumblr/></IconContext.Provider> <div className="text">{rootDetail.text}</div></Button>
}
else if (rootDetail.type === "reddit") {
res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><BsReddit/> {rootDetail.text}</Button>
}
else if (rootDetail.type === "basic") {
res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
}
return res;
})}
</div>
<footer style={{color: "white"}}>Made with <a href="https://gitdab.com/mikwee/linkroots">LinkRoots</a></footer>
</div>
);
}
export default App;

8
src/App.test.js Normal file
View File

@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

BIN
src/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

12
src/icons/Tumblr.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
const Tumblr = ({viewBox, width, height}) => {
return (
<svg id="svg835" version="1.1" viewBox={viewBox} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
<defs id="defs839"/>
<path id="path833" style={{"fill":"white"}} d="m 416.98373,160.24149 c -23.965,0 -41.823,-12.328 -41.823,-41.823 V 71.182489 h -21.777 v -25.581 c 23.964,-6.219 33.988,-26.841 35.142,-44.69999988 h 24.885 V 41.456489 h 29.032 v 29.726 h -29.032 v 41.130001 c 0,12.329 6.223,16.589 16.129,16.589 h 14.058 v 31.34 z"/>
</svg>
)
}
export default Tumblr;

13
src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

18
src/index.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "@fontsource/roboto/500.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

BIN
src/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

13
src/reportWebVitals.js Normal file
View File

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

55
src/roots.json Normal file
View File

@ -0,0 +1,55 @@
{
"title": "LinkRoots Example",
"links": [
{
"type": "basic",
"url": "https://example.com",
"text": "Basic"
},
{
"type": "facebook",
"url": "https://facebook.com",
"text": "Facebook"
},
{
"type": "instagram",
"url": "https://instagram.com",
"text": "Instagram"
},
{
"type": "twitter",
"url": "https://twitter.com",
"text": "Twitter"
},
{
"type": "github",
"url": "https://github.com",
"text": "GitHub"
},
{
"type": "youtube",
"url": "https://youtube.com",
"text": "YouTube"
},
{
"type": "linkedin",
"url": "https://instagram.com",
"text": "LinkedIn"
},
{
"type": "pinterest",
"url": "https://instagram.com",
"text": "Pinterest"
},
{
"type": "tumblr",
"url": "https://tumblr.com",
"text": "Tumblr"
},
{
"type": "reddit",
"url": "https://reddit.come",
"text": "Reddit"
}
]
}

5
src/setupTests.js Normal file
View File

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

45
src/styles/roots.scss Normal file
View File

@ -0,0 +1,45 @@
$btn-border-radius: 25px;
$btn-border-width: 0px;
.roots {
width: 15%;
margin: 0 auto;
margin-bottom: 1%;
}
#facebook {
background-color: #1877f2;
}
#instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
color: black;
}
#twitter {
background-color: #1da1f2;
}
#github {
background-color: #fafafa;
color: #333;
}
#youtube {
background-color: #ff0000;
}
#linkedin {
background-color: #0077b5;
}
#pinterest {
background-color: #e60023;
}
#tumblr {
background-color: #35465c;
display: flex;
align-items: center;
justify-content: center;
.text {
margin-left: 0.5mm;
}
}
#reddit {
background-color: #ff4500;
}
@import "./node_modules/bootstrap/scss/bootstrap.scss";

5
webpack.config.js Normal file
View File

@ -0,0 +1,5 @@
const webpack = require('webpack');
module.loaders: [
{ test: /\.svg$/, loaders: ['babel?presets[]=react', 'svg-jsx'] }
]

11889
yarn.lock Normal file

File diff suppressed because it is too large Load Diff