commit 9d47c1fafe3e16f6e856fc3ed6ca8f856bdd2e10 Author: wieerwill Date: Mon Jan 1 21:52:11 2024 +0100 init new fancy project for starting 2024 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..57f1622 --- /dev/null +++ b/.gitignore @@ -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.* diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8aa2645 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7b5cbee --- /dev/null +++ b/README.md @@ -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! 🚀 \ No newline at end of file diff --git a/build.js b/build.js new file mode 100644 index 0000000..b1d3aa7 --- /dev/null +++ b/build.js @@ -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('', ``); +} + +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('', 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(); diff --git a/package.json b/package.json new file mode 100644 index 0000000..4cfd494 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..5e867b2 --- /dev/null +++ b/pnpm-lock.yaml @@ -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 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..31fc585 --- /dev/null +++ b/public/index.html @@ -0,0 +1,20 @@ + + + + + + LinkMeUp + + + +
+

LinkMeUp

+
+
+ +
+ + + diff --git a/public/styles/main.css b/public/styles/main.css new file mode 100644 index 0000000..613f8d8 --- /dev/null +++ b/public/styles/main.css @@ -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); +} diff --git a/src/data.json b/src/data.json new file mode 100644 index 0000000..4be13d2 --- /dev/null +++ b/src/data.json @@ -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" + } + ] +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..a11bfd9 --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +import './templates/social-links.hbs'; +import '../public/styles/main.css'; +// Additional JavaScript code can be added here diff --git a/src/templates/social-links-template.hbs b/src/templates/social-links-template.hbs new file mode 100644 index 0000000..f51d1a3 --- /dev/null +++ b/src/templates/social-links-template.hbs @@ -0,0 +1,6 @@ +{{#each socialLinks}} +
+

{{name}}

+ Visit {{name}} +
+{{/each}} \ No newline at end of file