init new fancy project for starting 2024
This commit is contained in:
commit
9d47c1fafe
132
.gitignore
vendored
Normal file
132
.gitignore
vendored
Normal file
@ -0,0 +1,132 @@
|
||||
/dist
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) [year] [fullname]
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
52
README.md
Normal file
52
README.md
Normal file
@ -0,0 +1,52 @@
|
||||
# LinkMeUp
|
||||
|
||||
Welcome to the LinkMeUp project! This is a sleek, lightweight single-page application designed to consolidate an individual's social media and internet presence into one central location. Built with simplicity and performance in mind, the project uses minimalistic yet powerful web technologies.
|
||||
|
||||
## Features
|
||||
|
||||
- **Lightweight Design**: Leveraging vanilla HTML and CSS for a fast and responsive user experience.
|
||||
- **Dynamic Content**: Easy-to-update JSON data file to manage social media links.
|
||||
- **Handlebars Templating**: Pre-compiled Handlebars templates for a JavaScript-free frontend.
|
||||
- **Optimized Performance**: Minimized CSS and HTML files, and optimized images for lightning-fast loading.
|
||||
- **Accessibility and SEO**: Adherence to web accessibility standards and SEO-friendly structure.
|
||||
|
||||
## Organizing the Files
|
||||
```
|
||||
LinkMeUp
|
||||
├── public/ # Directory for static files
|
||||
│ ├── images/ # Images and icons
|
||||
│ ├── styles/ # CSS files
|
||||
│ └── index.html # Main HTML file
|
||||
├── src/ # Source files
|
||||
│ ├── templates/ # Handlebars templates
|
||||
│ └── data.json # JSON file with social media links
|
||||
│ └── index.js # Linking all JS scripts together
|
||||
├── package.json # Project metadata and dependencies
|
||||
└── README.md # Project documentation
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
To get started with the project:
|
||||
|
||||
1. Clone the repository: `git clone [repository-url]`
|
||||
2. Navigate to the project directory: `cd LinkMeUp`
|
||||
3. Install dependencies (if any): `pnpm install`
|
||||
|
||||
## Building and Deployment
|
||||
Build the project using our script:
|
||||
```bash
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
Deploy the built files at `/dist` to your preferred static hosting service.
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions to improve the application are always welcome. Please feel free to fork the repository, make changes, and submit a pull request.
|
||||
|
||||
## License
|
||||
|
||||
This project is open-sourced under the [MIT License](LICENSE).
|
||||
|
||||
Happy Coding! 🚀
|
||||
107
build.js
Normal file
107
build.js
Normal file
@ -0,0 +1,107 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const handlebars = require('handlebars');
|
||||
const CleanCSS = require('clean-css');
|
||||
const HTMLMinifier = require('html-minifier').minify;
|
||||
|
||||
// Function to clean up the dist directory
|
||||
function cleanDistDir(distPath) {
|
||||
if (fs.existsSync(distPath)) {
|
||||
fs.readdirSync(distPath).forEach((file) => {
|
||||
const curPath = path.join(distPath, file);
|
||||
if (fs.lstatSync(curPath).isDirectory()) {
|
||||
cleanDistDir(curPath);
|
||||
} else {
|
||||
fs.unlinkSync(curPath);
|
||||
}
|
||||
});
|
||||
fs.rmdirSync(distPath);
|
||||
}
|
||||
}
|
||||
|
||||
function readFile(filePath) {
|
||||
return fs.readFileSync(filePath, 'utf8');
|
||||
}
|
||||
|
||||
function writeFile(filePath, content) {
|
||||
fs.writeFileSync(filePath, content);
|
||||
}
|
||||
|
||||
function minimizeCSS(css) {
|
||||
return new CleanCSS({}).minify(css).styles;
|
||||
}
|
||||
|
||||
function minimizeHTML(html) {
|
||||
return HTMLMinifier(html, {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true
|
||||
});
|
||||
}
|
||||
|
||||
// Function to inline CSS into HTML
|
||||
function inlineCSS(html, css) {
|
||||
return html.replace('</head>', `<style>${css}</style></head>`);
|
||||
}
|
||||
|
||||
function copyImages(srcDir, destDir) {
|
||||
if (!fs.existsSync(destDir)){
|
||||
fs.mkdirSync(destDir, { recursive: true });
|
||||
}
|
||||
|
||||
const files = fs.readdirSync(srcDir);
|
||||
|
||||
for (const file of files) {
|
||||
fs.copyFileSync(path.join(srcDir, file), path.join(destDir, file));
|
||||
}
|
||||
}
|
||||
|
||||
// Compile Handlebars Template
|
||||
function compileTemplate(templatePath, data) {
|
||||
const templateSource = readFile(templatePath);
|
||||
const template = handlebars.compile(templateSource);
|
||||
return template(data);
|
||||
}
|
||||
|
||||
// Main build function
|
||||
function build() {
|
||||
const baseHtmlPath = path.join(__dirname, 'public', 'index.html');
|
||||
const templatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs');
|
||||
const dataPath = path.join(__dirname, 'src', 'data.json');
|
||||
const cssPath = path.join(__dirname, 'public', 'styles', 'main.css');
|
||||
const imagesSrcPath = path.join(__dirname, 'public', 'images');
|
||||
const distPath = path.join(__dirname, 'dist');
|
||||
const imagesDestPath = path.join(distPath, 'images');
|
||||
|
||||
cleanDistDir(distPath);
|
||||
|
||||
// Load data, base HTML, and CSS
|
||||
const data = JSON.parse(readFile(dataPath));
|
||||
const baseHtml = readFile(baseHtmlPath);
|
||||
let css = readFile(cssPath);
|
||||
|
||||
// Output titles from data.json
|
||||
data.socialLinks.forEach(link => console.log(link.name));
|
||||
|
||||
// Minimize CSS
|
||||
css = minimizeCSS(css);
|
||||
|
||||
// Compile HTML with Handlebars
|
||||
const socialLinksHtml = compileTemplate(templatePath, data);
|
||||
|
||||
// Replace placeholder in base HTML with compiled HTML
|
||||
let finalHtml = baseHtml.replace('<!-- Handlebars template will populate this section -->', socialLinksHtml);
|
||||
|
||||
finalHtml = inlineCSS(finalHtml, css);
|
||||
finalHtml = minimizeHTML(finalHtml);
|
||||
|
||||
// Ensure dist directory exists
|
||||
if (!fs.existsSync(distPath)) {
|
||||
fs.mkdirSync(distPath);
|
||||
}
|
||||
|
||||
writeFile(path.join(distPath, 'index.html'), finalHtml);
|
||||
copyImages(imagesSrcPath, imagesDestPath);
|
||||
}
|
||||
|
||||
// Run the build process
|
||||
build();
|
||||
18
package.json
Normal file
18
package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "link_me_up",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"clean-css": "^5.3.3",
|
||||
"handlebars": "^4.7.8",
|
||||
"html-minifier": "^4.0.0"
|
||||
}
|
||||
}
|
||||
124
pnpm-lock.yaml
Normal file
124
pnpm-lock.yaml
Normal file
@ -0,0 +1,124 @@
|
||||
lockfileVersion: '6.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
devDependencies:
|
||||
clean-css:
|
||||
specifier: ^5.3.3
|
||||
version: 5.3.3
|
||||
handlebars:
|
||||
specifier: ^4.7.8
|
||||
version: 4.7.8
|
||||
html-minifier:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0
|
||||
|
||||
packages:
|
||||
|
||||
/camel-case@3.0.0:
|
||||
resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
|
||||
dependencies:
|
||||
no-case: 2.3.2
|
||||
upper-case: 1.1.3
|
||||
dev: true
|
||||
|
||||
/clean-css@4.2.4:
|
||||
resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
|
||||
engines: {node: '>= 4.0'}
|
||||
dependencies:
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
/clean-css@5.3.3:
|
||||
resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
|
||||
engines: {node: '>= 10.0'}
|
||||
dependencies:
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
/commander@2.20.3:
|
||||
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
|
||||
dev: true
|
||||
|
||||
/handlebars@4.7.8:
|
||||
resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
|
||||
engines: {node: '>=0.4.7'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
minimist: 1.2.8
|
||||
neo-async: 2.6.2
|
||||
source-map: 0.6.1
|
||||
wordwrap: 1.0.0
|
||||
optionalDependencies:
|
||||
uglify-js: 3.17.4
|
||||
dev: true
|
||||
|
||||
/he@1.2.0:
|
||||
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/html-minifier@4.0.0:
|
||||
resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
|
||||
engines: {node: '>=6'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
camel-case: 3.0.0
|
||||
clean-css: 4.2.4
|
||||
commander: 2.20.3
|
||||
he: 1.2.0
|
||||
param-case: 2.1.1
|
||||
relateurl: 0.2.7
|
||||
uglify-js: 3.17.4
|
||||
dev: true
|
||||
|
||||
/lower-case@1.1.4:
|
||||
resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
|
||||
dev: true
|
||||
|
||||
/minimist@1.2.8:
|
||||
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
|
||||
dev: true
|
||||
|
||||
/neo-async@2.6.2:
|
||||
resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
|
||||
dev: true
|
||||
|
||||
/no-case@2.3.2:
|
||||
resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
|
||||
dependencies:
|
||||
lower-case: 1.1.4
|
||||
dev: true
|
||||
|
||||
/param-case@2.1.1:
|
||||
resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
|
||||
dependencies:
|
||||
no-case: 2.3.2
|
||||
dev: true
|
||||
|
||||
/relateurl@0.2.7:
|
||||
resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
|
||||
engines: {node: '>= 0.10'}
|
||||
dev: true
|
||||
|
||||
/source-map@0.6.1:
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/uglify-js@3.17.4:
|
||||
resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
|
||||
engines: {node: '>=0.8.0'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
|
||||
/upper-case@1.1.3:
|
||||
resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
|
||||
dev: true
|
||||
|
||||
/wordwrap@1.0.0:
|
||||
resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
|
||||
dev: true
|
||||
20
public/index.html
Normal file
20
public/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LinkMeUp</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>LinkMeUp</h1>
|
||||
</header>
|
||||
<main id="social-links">
|
||||
<!-- Handlebars template will populate this section -->
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2024 <a href="https://wieerwill.de">WieErWill</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
32
public/styles/main.css
Normal file
32
public/styles/main.css
Normal file
@ -0,0 +1,32 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#social-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1em;
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
#social-links div {
|
||||
background: white;
|
||||
padding: 1em;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
24
src/data.json
Normal file
24
src/data.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"socialLinks": [
|
||||
{
|
||||
"name": "Twitter",
|
||||
"url": "https://twitter.com/username"
|
||||
},
|
||||
{
|
||||
"name": "Facebook",
|
||||
"url": "https://facebook.com/username"
|
||||
},
|
||||
{
|
||||
"name": "LinkedIn",
|
||||
"url": "https://linkedin.com/in/username"
|
||||
},
|
||||
{
|
||||
"name": "Instagram",
|
||||
"url": "https://instagram.com/username"
|
||||
},
|
||||
{
|
||||
"name": "YouTube",
|
||||
"url": "https://youtube.com/user/username"
|
||||
}
|
||||
]
|
||||
}
|
||||
3
src/index.js
Normal file
3
src/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import './templates/social-links.hbs';
|
||||
import '../public/styles/main.css';
|
||||
// Additional JavaScript code can be added here
|
||||
6
src/templates/social-links-template.hbs
Normal file
6
src/templates/social-links-template.hbs
Normal file
@ -0,0 +1,6 @@
|
||||
{{#each socialLinks}}
|
||||
<div class="social-link">
|
||||
<h2>{{name}}</h2>
|
||||
<a href="{{url}}" target="_blank">Visit {{name}}</a>
|
||||
</div>
|
||||
{{/each}}
|
||||
Loading…
Reference in New Issue
Block a user