Skip to content

Setup Instructions

Jump to bottom
Linda Thompson edited this page Mar 31, 2023 · 1 revision

Prerequisites

CLI Method (Recommended)

Starter.dev has it's own CLI that you can use to create a project using one of our starter kits. The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.

The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.

npm create @this-dot/starter

We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.

# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind

Manual setup

| Note: The command below clones the entire repository, including all starter kits.

git clone https://github.com/thisdot/starter.dev.git

The kits are located within the starters folder. To pick the one you'd like to use and create your new project:

  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.

Initializing the project

Each kit's README will have the specific directions for that kit, but generally the process is:

  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Setup Instructions · thisdot/starter.dev Wiki · GitHub
Skip to content
Setup Instructions
Jump to bottom

Linda Thompson edited this page Mar 31, 2023
·
1 revision
Prerequisites
CLI Method (Recommended)
Starter.dev has it's own CLI that you can use to create a project using one of our starter kits.
The command should work with npm, yarn, or pnpm, so feel free to use whichever you'd prefer.
The CLI automatically runs in interactive mode, which will let you view the full list of available kits and prompt you to name your new project. This command works for both frontend and backend kits.
npm create @this-dot/starter
We also have two available flags, that will let you directly specify the kit you'd like to use and the project name you want.
# npm 6.x
npm create @this-dot/starter --name my-project --kit angular-apollo-tailwind
# npm 7+, extra double-dash is needed:
npm create @this-dot/starter -- --name my-project --kit next12-chakra-ui
# can also pass only one option:
npm create @this-dot/starter -- --kit serverless-framework-apollo-contentful
# yarn
yarn create @this-dot/starter --name my-project --kit qwik-graphql-tailwind
Manual setup
| Note: The command below clones the entire repository, including all starter kits.
git clone https://github.com/thisdot/starter.dev.git
The kits are located within the starters folder. To pick the one you'd like to use and create your new project:
  • Copy the starters/<kit-id-name> starter kit you want and paste it wherever you'd like your project to live.
  • Rename the project from <kit-id-name> to the name you want for your project.
Initializing the project
Each kit's README will have the specific directions for that kit, but generally the process is:
  • Change into your new project's root folder
  • Install the dependencies with npm install
  • Configure any variables that might need to be setup
  • Each kit will have a dev or start command you can run to get the project started locally
Clone this wiki locally