19 |
20 | Log out - Singlelink
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
28 | export default Home
29 |
--------------------------------------------------------------------------------
/lib/graphql.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, concat, HttpLink, InMemoryCache } from '@apollo/client'
2 | import { setContext } from '@apollo/client/link/context'
3 | // @ts-ignore
4 |
5 | const authLink = setContext(async (_ : any, { headers } : { headers: any}) => {
6 | const jwt = await localStorage.getItem('jwt')
7 |
8 | const newContext: any = {
9 | headers: {
10 | ...headers,
11 | accept: 'application/json',
12 | },
13 | }
14 |
15 | if (jwt) {
16 | newContext['headers'].authorization = `Bearer ${jwt}`
17 | }
18 |
19 | return newContext
20 | })
21 |
22 | const httpLink = new HttpLink({
23 | credentials: 'include', // Additional fetch() options like `credentials` or `headers`
24 | uri: '/api/graphql',
25 | })
26 |
27 | export const client = new ApolloClient({
28 | cache: new InMemoryCache(),
29 | link: concat(authLink, httpLink),
30 | })
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import url('https://rsms.me/inter/inter.css');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | html,
8 | body {
9 | padding: 0;
10 | margin: 0;
11 | background-color: #F4F5F7;
12 | overflow-x: hidden;
13 | }
14 |
15 | a {
16 | color: inherit;
17 | text-decoration: none;
18 | }
19 |
20 | * {
21 | box-sizing: border-box;
22 | font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
23 | }
24 |
25 | .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
26 |
27 |
28 | .h1 {
29 | @apply text-3xl font-semibold mb-8;
30 | }
31 |
32 | .h1-row > .h1 {
33 | margin-bottom: 0 !important
34 | }
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # Use root/example as user/password credentials
2 | version: '3.1'
3 |
4 | services:
5 | singlelink:
6 | ports:
7 | - 3000:3000
8 | image: jimbisenius/singlelink
9 | depends_on:
10 | - mysql
11 | environment:
12 | DB_HOST: mysql
13 | DB_PORT: 3306
14 | DB_DATABASE: singlelink
15 | DB_USER: root
16 | DB_PASS: single-my-links
17 | META_TITLE: Singlelink
18 | META_DESC: My Singlelink Docker Instance.
19 | META_IMG:
20 | BRANDING: "true"
21 |
22 | SECRET: jwt_secret
23 | PASSWORD: password
24 |
25 | mysql:
26 | image: mysql
27 | # NOTE: use of "mysql_native_password" is not recommended: https://dev.mysql.com/doc/refman/8.0/en/upgrading-from-previous-series.html#upgrade-caching-sha2-password
28 | # (this is just an example, not intended to be a production configuration)
29 | command: --default-authentication-plugin=mysql_native_password
30 | restart: always
31 | environment:
32 | MYSQL_ROOT_PASSWORD: single-my-links
33 | MYSQL_DATABASE: singlelink
--------------------------------------------------------------------------------
/pages/api/graphql/queries/index.ts:
--------------------------------------------------------------------------------
1 | import Link from '../../../../lib/models/Link'
2 | import Event from '../../../../lib/models/Event'
3 |
4 | export const Query = {
5 | hello : async () => {
6 | console.log('hello')
7 | return 'hello'
8 | },
9 | listLinks: async (_: any, _params: any, context: { isAuthorized: boolean }) => {
10 | if(context.isAuthorized === false) throw Error('Must be authorized to use the Dashboard.')
11 | const links = await Link.list()
12 | return links
13 | },
14 | findLinkById: async (_ : any, { id }: { id: number }, context: { isAuthorized: boolean }) => {
15 | if(!context.isAuthorized) throw Error('Must be authorized to use the Dashboard.')
16 | const link = await Link.findById(id)
17 | return link
18 | },
19 | fetchOverview: async(_: any, _params: any, context: {isAuthorized: boolean}) => {
20 | if(!context.isAuthorized) throw Error('Must be authorized to use the Dashboard.')
21 | const overview = await Event.fetchOverview()
22 | return overview
23 | }
24 | }
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/models/Event.ts:
--------------------------------------------------------------------------------
1 | import client from '../connection'
2 |
3 | const Event = {
4 | create: async(type: 'click' | 'view', link_id?: string) => {
5 | const [insert] = !link_id ? await client.query(`insert into events (type) values(?)`, [type]) : await client.query(`insert into events (type, link_id) values(?, ?);`, ['click', link_id])
6 | console.log(insert)
7 | if(!insert || insert.affectedRows < 1) throw Error('Failed to create link')
8 | const event = await client.query(`select * from events where id=?`, [insert.insertId])
9 | return event[0]
10 | },
11 | fetchOverview: async() => {
12 | const [overview] = await client.query(`
13 | select
14 | count(case when type = 'view' then 1 else null end) as views,
15 | count(case when type = 'click' then 1 else null end) as clicks,
16 | DATE(created_at) as date
17 | from events
18 | where created_at >= SUBDATE(CURDATE(), 7)
19 | group by DATE(created_at);
20 | `)
21 | if(!overview) throw Error('Failed to fetch overview')
22 | return overview
23 | }
24 | }
25 |
26 | export default Event
--------------------------------------------------------------------------------
/.github/workflows/build-lint.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Build & lint
5 |
6 | on:
7 | push:
8 | branches:
9 | - master
10 | pull_request:
11 | types: ['opened', 'edited', 'reopened', 'synchronize']
12 | workflow_dispatch:
13 |
14 | jobs:
15 | build:
16 | runs-on: ubuntu-latest
17 |
18 | strategy:
19 | matrix:
20 | node-version: [16.x]
21 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
22 |
23 | steps:
24 | - uses: actions/checkout@v2
25 | - name: Use Node.js ${{ matrix.node-version }}
26 | uses: actions/setup-node@v2
27 | with:
28 | node-version: ${{ matrix.node-version }}
29 | cache: 'npm'
30 | - name: Installing dependencies
31 | run: npm i --ignore-scripts
32 | - name: Performing lint
33 | run: npm run lint
34 | - name: Generating build
35 | run: npm run build
36 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | env: {
5 | DB_USER: process.env.DB_USER,
6 | DB_HOST: process.env.DB_HOST,
7 | DB_DATABASE: process.env.DB_DATABASE,
8 | DB_PASSWORD: process.env.DB_PASSWORD,
9 | DB_PORT: process.env.DB_PORT,
10 | META_TITLE: (process.env.BRANDING !== 'false') ? (process.env.META_TITLE ?? 'Under construction') + ' - Singlelink' : (process.env.META_TITLE ?? 'Under construction'),
11 | META_DESC: (process.env.BRANDING !== 'false') ? (process.env.META_DESC ?? 'Another micro-site waiting to be built!') + ' Built with Singlelink.' : (process.env.META_DESC ?? 'Another micro-site waiting to be built!'),
12 | META_IMG: process.env.META_IMG ?? 'https://singlelink.co/og-image-updated.jDB_',
13 | BRANDING: (process. env.BRANDING !== 'false') ?? true,
14 | SECRET: process.env.SECRET,
15 | PASSWORD: process.env.PASSWORD
16 | },
17 | experimental: {
18 | outputStandalone: true
19 | },
20 | // TODO: TEMPORARY SOLUTION FOR COMPONENT _APP.TSX BUILD ERRORS REMOVE
21 | typescript: {
22 | ignoreBuildErrors: true
23 | }
24 | }
25 |
26 | module.exports = nextConfig
--------------------------------------------------------------------------------
/pages/api/graphql/index.ts:
--------------------------------------------------------------------------------
1 | // Import third-party dependencies
2 | import { ApolloServer, gql } from 'apollo-server-micro'
3 | import { MicroRequest } from 'apollo-server-micro/dist/types';
4 | import { ServerResponse } from 'http';
5 | const cors = require('micro-cors')(); // highlight-line
6 | const { send } = require('micro');
7 |
8 |
9 | // Import first-party dependencies
10 | import { Mutation } from './mutations'
11 | import { Query } from './queries'
12 | import { Resolvers } from './resolvers'
13 | import { typeDefs } from './type-defs'
14 | const jwt = require('jsonwebtoken')
15 |
16 | export const resolvers = {
17 | Mutation,
18 | Query,
19 | //...Resolvers
20 | }
21 |
22 | const server = new ApolloServer({
23 | typeDefs,
24 | resolvers,
25 | context: ({ req }) => {
26 | if(req.headers.authorization) {
27 | const token = req.headers.authorization.substr(7, req.headers.authorization.length-7) || ''
28 | try {
29 | const decoded = jwt.verify(token, process.env.SECRET)
30 | } catch {
31 | return { isAuthorized: false}
32 | }
33 | return { isAuthorized: true }
34 | } else return {}
35 | }
36 | })
37 |
38 | const startServer = server.start()
39 |
40 | export const config = {
41 | api: {
42 | bodyParser: false
43 | }
44 | }
45 |
46 | export default cors(async(req: MicroRequest, res: ServerResponse) => {
47 | if (req.method === "OPTIONS") {
48 | res.end();
49 | return false;
50 | }
51 |
52 | await startServer;
53 | await server.createHandler({ path: "/api/graphql" })(req, res);
54 | })
--------------------------------------------------------------------------------
/hooks/mutations.graphql:
--------------------------------------------------------------------------------
1 | mutation login(
2 | $password: String!
3 | ) {
4 | login(
5 | password: $password
6 | )
7 | }
8 |
9 | mutation verify(
10 | $jwt: String!
11 | ) {
12 | verify(
13 | jwt: $jwt
14 | )
15 | }
16 |
17 | mutation createLink(
18 | $label: String
19 | $content: String
20 | $type: String!
21 | ) {
22 | createLink(
23 | label: $label,
24 | content: $content,
25 | type: $type
26 | ) {
27 | id
28 | label
29 | content
30 | type
31 | position
32 | }
33 | }
34 |
35 | mutation updateLinkById(
36 | $label: String
37 | $content: String
38 | $id: Int!
39 | $position: Int!
40 | $type: String!
41 | ) {
42 | updateLinkById(
43 | label: $label,
44 | content: $content,
45 | id: $id,
46 | position: $position,
47 | type: $type
48 | ) {
49 | id
50 | label
51 | content
52 | type
53 | position
54 | }
55 | }
56 |
57 | mutation deleteLinkById($id: Int!) {
58 | deleteLinkById(id: $id) {
59 | id
60 | label
61 | content
62 | type
63 | position
64 | }
65 | }
66 |
67 | mutation reorderLink($id: Int!, $newIndex: Int!, $oldIndex: Int!) {
68 | reorderLink(id: $id, newIndex: $newIndex, oldIndex: $oldIndex) {
69 | label
70 | content
71 | id
72 | position
73 | type
74 | }
75 | }
76 |
77 | mutation createEvent($type: EVENT_TYPE) {
78 | createEvent(type: $type) {
79 | id
80 | type
81 | created_at
82 | }
83 | }
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "singlelink",
3 | "private": false,
4 | "version": "4.1.0",
5 | "homepage": "https://singlelink.co",
6 | "license": "GPL-3.0-or-later",
7 | "scripts": {
8 | "dev": "next dev",
9 | "build": "next build",
10 | "build:docker": "docker build -t jimbisenius/singlelink ./docker",
11 | "start": "next start",
12 | "lint": "next lint",
13 | "generate": "graphql-codegen --config codegen.yml --watch",
14 | "postinstall": "npx migrate-mysql",
15 | "db:migrate": "npx migrate-mysql",
16 | "boot:app": "docker pull singlelink | docker run --name singlelink-app -p 3000:3000 singlelink",
17 | "boot:db": "docker pull mysql | docker run --name singlelink-mysql -e MYSQL_DATABASE=singlelink -p 3306:3306 -e MYSQL_ROOT_PASSWORD=single-my-links -d mysql:latest"
18 | },
19 | "dependencies": {
20 | "@apollo/client": "^3.5.8",
21 | "apollo-server-micro": "^3.6.3",
22 | "dotenv-run-script": "^0.2.0",
23 | "graphql": "15.7.2",
24 | "html-react-parser": "^1.4.8",
25 | "jsonwebtoken": "^8.5.1",
26 | "micro": "^9.3.4",
27 | "micro-cors": "^0.1.1",
28 | "mysql-await": "^2.1.8",
29 | "mysql2": "^2.3.3",
30 | "next": "latest",
31 | "next-absolute-url": "^1.2.2",
32 | "react": "^17.0.2",
33 | "react-beautiful-dnd": "^13.1.0",
34 | "react-dom": "^17.0.2",
35 | "ts-node": "^10.5.0"
36 | },
37 | "devDependencies": {
38 | "@graphql-codegen/cli": "^2.6.2",
39 | "@graphql-codegen/typescript": "1.22.0",
40 | "@graphql-codegen/typescript-operations": "1.17.16",
41 | "@graphql-codegen/typescript-react-apollo": "^3.2.2",
42 | "@graphql-codegen/typescript-resolvers": "1.18.0",
43 | "@types/node": "^17.0.17",
44 | "@types/react": "17.0.39",
45 | "@types/react-beautiful-dnd": "^13.1.2",
46 | "autoprefixer": "^10.4.2",
47 | "camelize-ts": "^1.0.8",
48 | "eslint": "8.8.0",
49 | "eslint-config-next": "12.0.10",
50 | "graphql-codegen": "^0.4.0",
51 | "migrate-mysql": "^0.4.0",
52 | "postcss": "^8.4.6",
53 | "tailwindcss": "^3.0.21",
54 | "typescript": "4.5.5"
55 | },
56 | "bugs": {
57 | "url": "https://github.com/Neutron-Creative/Singlelink/issues",
58 | "email": "jim@neutroncreative.com"
59 | },
60 | "repository": {
61 | "type": "git",
62 | "url": "git+https://github.com/Neutron-Creative/Singlelink.git"
63 | },
64 | "author": {
65 | "name": "Jim Bisenius",
66 | "email": "jim@neutroncreative.com",
67 | "url": "https://twitter.com/jim_bisenius"
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/pages/api/graphql/mutations/index.ts:
--------------------------------------------------------------------------------
1 | import Link from "../../../../lib/models/Link";
2 | import Event from "../../../../lib/models/Event";
3 | import { MutationLoginArgs } from "../../src/generated-types";
4 |
5 | const jwt = require("jsonwebtoken");
6 |
7 | export const Mutation = {
8 | login: async(_: any,
9 | { password }: MutationLoginArgs,
10 | _context: any) => {
11 | if(password===process.env.PASSWORD) {
12 | const token = jwt.sign({}, process.env.SECRET,
13 | {
14 | expiresIn: '24h'
15 | })
16 | // Return jwt
17 | return token
18 | } else {
19 | throw Error(`Incorrect password provided, please try again.`)
20 | }
21 | },
22 | verify: async(_: any,
23 | params: { jwt: any; },
24 | _context: any) => {
25 | const decoded = jwt.verify(params.jwt, process.env.SECRET)
26 | return params.jwt
27 | },
28 | createLink: async(_: any,
29 | params: { label: string, content: string, type: string}, { isAuthorized }: { isAuthorized: boolean }) => {
30 | if(!isAuthorized) throw Error('Must be authorized to use the Dashboard.')
31 | const link = await Link.create(params)
32 | return link
33 | },
34 | updateLinkById: async(_: any,
35 | params: { label: string, content: string, id: number, position: number, type: string}, { isAuthorized }: { isAuthorized: boolean }) => {
36 | if(!isAuthorized) throw Error('Must be authorized to use the Dashboard.')
37 | const updatedLink = Link.updateById(params)
38 | return updatedLink
39 | },
40 | deleteLinkById: async(_: any,
41 | { id}: { id: number }, { isAuthorized }: { isAuthorized: boolean }) => {
42 | if(!isAuthorized) throw Error('Must be authorized to use the Dashboard.')
43 | const link = Link.deleteById(id)
44 | return link
45 | },
46 | reorderLink: async(_: any,
47 | { id, newIndex, oldIndex }: { id: number, newIndex: number, oldIndex: number },
48 | { isAuthorized }: {isAuthorized: boolean}) => {
49 | if(!isAuthorized) throw Error('Must be authorized to use the Dashboard.')
50 | const links = await Link.reorder(id, newIndex, oldIndex)
51 | return links
52 | },
53 | createEvent: async(_: any, { type } : { type: 'view' | 'click' }, context: {isAuthorized: boolean}) => {
54 | const event = await Event.create(type)
55 | return event
56 | }
57 | }
--------------------------------------------------------------------------------
/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from 'next'
2 | import Head from 'next/head'
3 | import { useRouter } from 'next/router'
4 | import { useEffect, useState } from 'react'
5 | import Logo from '../components/logo'
6 | import { useLoginMutation } from '../hooks-generated'
7 |
8 | const Home: NextPage = () => {
9 | const router = useRouter()
10 | const [password, setPassword] = useState
34 |
35 | Login - Singlelink
36 |
37 |
38 |
39 |
40 |
55 | )
56 | }
57 |
58 | export default Home
59 |
--------------------------------------------------------------------------------
/pages/api/src/generated-types.ts:
--------------------------------------------------------------------------------
1 | import { gql } from '@apollo/client';
2 | export type Maybe
41 |
51 | Login to your Singlelink
43 |Enter your credentials to access your account
44 | setPassword(e.target.value)} className='mb-4 px-5 py-3 rounded-lg border border-gray-200 w-full bg-white focus:ring-4 focus:ring-opacity-50 focus:ring-indigo-600 outline-0 ring-offset-2 focus:border-gray-1' type="password" placeholder="Password"/> 45 | 50 | {alert('To reset your password, change the environment variable for PASSWORD in your SSH or terminal and restart your application.')}} className='text-gray-600 mt-12'>Forgot your password?Reset password
52 | Copyright ©{new Date().getFullYear()} Neutron Creative Inc. All rights reserved.
53 |
54 | Create new link
37 | {!loading ? 38 | <>
39 |
40 | setLabel(e.target.value)} value={label ?? ''} className='px-5 py-3 rounded-lg border border-gray-200 w-full bg-white focus:ring-4 focus:ring-opacity-50 focus:ring-indigo-600 outline-0 ring-offset-2 focus:border-gray-1' type='text' placeholder='e.g. My Instagram profile' />
41 |
42 |
43 |
51 |
52 |
53 | setContent(e.target.value)} value={content ?? ''} className='px-5 py-3 rounded-lg border border-gray-200 w-full bg-white focus:ring-4 focus:ring-opacity-50 focus:ring-indigo-600 outline-0 ring-offset-2 focus:border-gray-1' type='text' placeholder='e.g. https://instagram.com/neutroncreative' />
54 |
55 |
56 | : Creating link, please wait...
57 | }
58 | Analytics
40 | {overview.data ? 41 | <> 42 |
43 |
46 | Click-through rate (CTR)
44 | {weeklyViews>1 ? `${((weeklyClicks/weeklyViews)*100).toFixed(2)} %` : '0%'}
45 |
47 |
56 |
48 |
51 | Today's views
49 | {(todayViews ?? 0).toLocaleString("en-US")}
50 |
52 |
55 | Today's clicks
53 | {(todayClicks ?? 0).toLocaleString("en-US")}
54 |
57 |
66 | :
58 |
61 | Weekly views
59 | {(weeklyViews ?? 0).toLocaleString("en-US")}
60 |
62 |
65 | Weekly clicks
63 | {(weeklyClicks ?? 0).toLocaleString("en-US")}
64 | Loading, please wait...
67 | }
68 | Edit link
75 | {!loading ? 76 | <>
77 |
78 | setLabel(e.target.value)} value={label ?? ''} className='px-5 py-3 rounded-lg border border-gray-200 w-full bg-white focus:ring-4 focus:ring-opacity-50 focus:ring-indigo-600 outline-0 ring-offset-2 focus:border-gray-1' type='text' placeholder='e.g. My Instagram profile' />
79 |
80 |
81 |
89 |
90 |
91 |
92 | setContent(e.target.value)} value={content ?? ''} className='px-5 py-3 rounded-lg border border-gray-200 w-full bg-white focus:ring-4 focus:ring-opacity-50 focus:ring-indigo-600 outline-0 ring-offset-2 focus:border-gray-1' type='text' placeholder='e.g. https://instagram.com/neutroncreative' />
93 |
94 |
95 |
96 | : Loading, please wait...
97 | }
98 |
81 |
89 | {!reorder[1].loading ?
90 | Links
82 | 83 | 87 | 88 |-
94 | {(links ?? []).map((link, i) => (
95 |
- router.push(`/dashboard/link/${link?.id}`)}>
98 | 99 | {link?.label &&106 |{link?.label}} 100 | 105 |
107 | )}
108 |
Loading links...
114 | } 115 |
15 |
16 | Singlelink under construction
17 |
18 |
19 |
20 |
21 |
32 | )
33 | return (
34 | <>
35 |
36 |
22 |
29 | Under construction
24 |This Singlelink page is currently under construction. Be sure to check back soon!
25 | 26 | 27 | 28 |Copyright ©{new Date().getFullYear()} Neutron Creative Inc. All rights reserved.
30 |
31 |
53 | {[...links].map(link => {
54 | if(link?.type === 'text')
55 | return (
)
71 | if(link?.type === 'html')
72 | return (
76 |
77 | )
78 | }
79 |
80 | export async function getServerSideProps({ req }: { req: any}) {
81 | const { origin } = absoluteUrl(req)
82 | const res = await fetch(`${origin}/api/graphql`, {
83 | "headers": {
84 | "accept": "application/json",
85 | "content-type": "application/json",
86 | },
87 | "body": "{\"operationName\":\"listLinks\",\"variables\":{},\"query\":\"query listLinks {\\n listLinks {\\n id\\n label\\n content\\n type\\n position\\n __typename\\n }\\n}\\n\"}",
88 | "method": "POST"
89 | })
90 | const data = await res.json()
91 | const links: LinkType[] = data.data.listLinks
92 | if(req.url.substr(req.url.length-9) != 'demo=true') {
93 | // Create view if viewed by guest
94 | await fetch(`${origin}/api/graphql`, {
95 | "headers": {
96 | "accept": "application/json",
97 | "accept-language": "en-US,en;q=0.9",
98 | "content-type": "application/json",
99 | "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"98\", \"Google Chrome\";v=\"98\"",
100 | "sec-ch-ua-mobile": "?0",
101 | "sec-ch-ua-platform": "\"Windows\"",
102 | "sec-fetch-dest": "empty",
103 | "sec-fetch-mode": "cors",
104 | "sec-fetch-site": "same-origin",
105 | "Referer": "http://localhost:3000/",
106 | "Referrer-Policy": "strict-origin-when-cross-origin"
107 | },
108 | "body": "{\"operationName\":\"createEvent\",\"variables\":{\"type\":\"view\"},\"query\":\"mutation createEvent($type: EVENT_TYPE) {\\n createEvent(type: $type) {\\n id\\n type\\n created_at\\n __typename\\n }\\n}\\n\"}",
109 | "method": "POST"
110 | });
111 | }
112 | return { props: { links } }
113 |
114 | }
115 |
116 | export default Home
117 |
--------------------------------------------------------------------------------
/components/logo.tsx:
--------------------------------------------------------------------------------
1 | const Logo = () => (
2 |
53 |
54 | )
55 |
56 | export default Logo
--------------------------------------------------------------------------------
/components/dashboard.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useEffect, useState } from "react";
3 | import LogoLong from "./logo-long";
4 |
5 | const Dashboard = ({ children }: { children: any}) => {
6 | const [domain, setDomain] = useState
56 |
)
59 | if(link?.type === 'vanilla')
60 | return ({link?.label})
61 | if(link?.type === 'avatar')
62 | return ({link?.label}
57 |{link?.content}
58 |
63 |
64 |
)
65 | if(link?.type === 'youtube')
66 | return (
67 |
68 |
)
69 | if(link?.type === 'image')
70 | return ({parse(link.content)}
)
73 | })}
74 | {process.env.BRANDING && Build your free micro-site in seconds with Singlelink
}
75 |
20 |
89 | )
90 | }
91 |
92 | export default Dashboard
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
21 |
64 |
22 |
55 | {/* TODO: Update link with Discount, and check if BRANDING is true before displaying */}
56 | {/*
57 |
58 |
59 | Sign up for Singlelink Cloud for only $5/mo!
60 |
61 |
62 | */}
63 |
23 |
26 | v4.1.0
25 | -
27 |
28 |
29 |
30 | Links
31 |
32 |
33 |
34 |
35 |
36 | Analytics
37 |
38 |
39 | {/*
40 |
41 |
42 | Settings
43 |
44 |
45 | */}
46 |
47 |
48 | Logout
49 |
50 |
51 |
52 |
65 | {children}
66 |
67 |
68 |
88 |
69 |
77 |
70 |
71 |
73 |
76 | Page preview:
72 |
78 |
82 |
79 | {domain && }
80 |
81 |
83 | Share your Singlelink:
84 | {domain}
85 |
86 |
87 |
2 |
3 | 
4 |
5 |
6 |
7 | 8 | Singlelink is the open-source Linktree alternative. 9 |
10 |
11 |
12 | 
13 |
14 |
15 | 
29 |
30 | 
38 | Getting started • 39 | Local development • 40 | Production deployment • 41 | Credits 42 |
43 | 44 |Getting started
45 | 46 | The easiest way to get started is to deploy your [Singlelink](https://singlelink.co) site with [Railway](https://railway.app). You can get started with one-click using the button below and build up to three Singlelink pages, each with custom domains, 100% free, thanks to their $5/mo credit system. 47 | 48 | [](https://railway.app/new/template/R7HMcu) 49 | 50 | We also recommend connecting [Vercel](https://vercel.com) and [Planetscale](https://planetscale.com) for a free self-hosted Singlelink environment. 51 | 52 |Local development
53 | 54 | Singlelink is a [NodeJS](#) project built on [Next.js](https://nodejs.org/en/), [GraphQL](https://graphql.org/) (served via [Apollo Server](https://www.apollographql.com/)), and [MySQL](https://www.MySQL.org/). 55 | 56 | If you haven't already, you'll need to install NodeJS and MySQL before being able to host or work on Singelink. 57 | - [NodeJS installation guide](https://nodejs.dev/learn/how-to-install-nodejs) 58 | - To install MySQL with Docker, run `npm run db:boot` from the project root. 59 | 60 | Once you've installed NodeJS & MySQL, you can download Singlelink locally with: 61 | ```bash 62 | git clone https://github.com/Neutron-Creative/Singlelink.git;cd Singlelink; 63 | ``` 64 | 65 | Before you start, you'll need to configure your environment by copying the .env template: 66 | ``` 67 | cp .env.template .env 68 | ``` 69 | 70 | Then, set the following **mandatory** environment variables to your preferences: 71 | - `DB_URL`: Optionally, override the remaining DB ENV variables with an all-in-one connection URL 72 | - `DB_DATABASE`: The name of the MySQL database you'll connect to (ex: railway) 73 | - `DB_PORT`: The port for the MySQL database you'll connect to (ex: 3306) 74 | - `DB_HOST`: The host url for your MySQL database (ex: containers-us-east-13.railway.app) 75 | - `DB_USER`: The username for your MySQL user (ex: root) 76 | - `DB_PASSWORD`: The password for your MySQL user 77 | - `SECRET`: The secret used to sign and validate JWTs during authentication 78 | - `PASSWORD`: The password you'll use to login and manage your Singlelink 79 | 80 | Optionally, set the following variables to customize your site: 81 | - `META_TITLE`: The title for your site, seen in Google Search results 82 | - `META_DESC`: The description for your site, seen in Google Search results 83 | - `META_IMG`: The OG image for your site, seen when sharing your site on social media. 84 | - `BRANDING`: A boolean that enables/disables Singlelink branding on your site & dashboard 85 | 86 | Next, install your NPM dependencies using `--ignore-scripts`: 87 | ```bash 88 | npm i --ignore-scripts 89 | ``` 90 | 91 | After, you can run the DB migration script to initialize your DB: 92 | ```bash 93 | npm run db:migrate 94 | ``` 95 | *You'll need to run `npm run db:migrate` again everytime you pull changes. It can't hurt to run a migration, but it can break things if you don't.*96 | 97 | Finally, you can start your development environment by running: 98 | ```bash 99 | npm run dev 100 | ``` 101 | 102 | Open [http://localhost:3000](http://localhost:3000) with your browser to view your new Singlelink, and [http://localhost:3000/login](http://localhost:3000/login) to login and add your first link. 103 | 104 |
Production deployment
105 | 106 | You can [deploy Singlelink in one-click here with Railway](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2FNeutron-Creative%2FSinglelink&plugins=MySQL&envs=SECRET%2CPASSWORD%2CMETA_TITLE%2CMETA_DESC%2CMETA_IMG&optionalEnvs=META_TITLE%2CMETA_DESC%2CMETA_IMG&SECRETDesc=The+secret+used+when+signing+JWTs.&PASSWORDDesc=The+password+you%27ll+use+to+login+to+your+Singlelink+dashboard.&META_TITLEDesc=Your+page+%26+meta+title%2C+seen+in+Google+search+results&META_DESCDesc=Your+page+description+seen+in+Google+Search+results.&META_IMGDesc=The+OG+image+thumbnail+shown+when+sharing+your+Singlelink+on+social+media.&referralCode=singlelink). At this time, they are the only provider we maintain & gurantee support for. 107 | 108 | ### Need to host elsewhere? 109 | #### Platform as a service hosts are recommended due to ease of installation (ex: Heroku, DigitalOcean App Platform , etc.) 110 | We don't offer official support yet, but you can host Singlelink with any VPS, provided you can install and run both Node.JS & MySQL. Singlelink will need one MySQL database, and one NodeJS instance capable of running Next.JS at run-time/SSR. 111 |112 |
113 | Looking for cloud hosting with premium support?
114 |
115 | Consider checking out Singlelink Cloud, with plans available soon starting at just $8/month.
116 |
Credits
119 | 120 | Singlelink was built by the following team full-time from August 2020-2021 our mission to to *open-source the world* at [Neutron Creative](https://neutroncreative.com). 121 |122 |
-
123 |
- Jim Bisenius (Co-founder & former CEO, @jim_bisenius) 124 |
- Navid Kabir (Co-founder & former CTO, @navidk0) 125 |
- Andrew Boyle (Co-founder & former CMO) 126 |
127 | 128 | Today, Singlelink is maintained soley by me, Jim Bisenius on nights & weekends. If you'd like to assist in my development efforts, I'd love your help. Please [join our Discord](https://discord.gg/DDGnXCcgsu) or [create a pull request](https://github.com/Neutron-Creative/Singlelink/pulls)! 129 | -------------------------------------------------------------------------------- /logo-long.svg: -------------------------------------------------------------------------------- 1 | 62 | -------------------------------------------------------------------------------- /components/logo-long.tsx: -------------------------------------------------------------------------------- 1 | const LogoLong = () => () 62 | 63 | export default LogoLong -------------------------------------------------------------------------------- /hooks-generated/index.ts: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client'; 2 | import * as Apollo from '@apollo/client'; 3 | export type Maybe