Repository: fayazara/zooper Branch: main Commit: 64b04ddc44ff Files: 96 Total size: 67.9 KB Directory structure: gitextract_pxr4h3_l/ ├── .gitignore ├── .npmrc ├── .prettierrc ├── .vscode/ │ └── settings.json ├── README.md ├── app.config.ts ├── app.vue ├── components/ │ ├── App/ │ │ ├── ArticleCard.vue │ │ ├── Footer.vue │ │ ├── Header.vue │ │ ├── Navbar.vue │ │ ├── ProjectCard.vue │ │ ├── ThemeToggle.vue │ │ ├── UsesHeader.vue │ │ └── UsesItem.vue │ ├── Home/ │ │ ├── Divider.vue │ │ ├── FeaturedArticles.vue │ │ ├── FeaturedProjects.vue │ │ ├── Intro.vue │ │ ├── Newsletter.vue │ │ └── SocialLinks.vue │ └── content/ │ ├── AnimatedCounter.vue │ ├── CodeView.vue │ ├── Credit.vue │ ├── Encryption.vue │ ├── HackerButton.vue │ ├── LabCard.vue │ ├── Rocket.vue │ ├── Shapes.vue │ └── TextRotator.vue ├── content/ │ ├── articles/ │ │ ├── building-your-first-api-with-expressjs-a-beginners-guide.md │ │ └── how-to-convert-a-svg-to-png-using-canvas.md │ ├── lab/ │ │ ├── 1.text-rotator.md │ │ ├── 2.hacker-button.md │ │ ├── 3.animated-number-counter.md │ │ ├── 4.shapes-with-tailwindcss.md │ │ ├── 5.rocket.md │ │ └── 6.encryption.md │ ├── projects/ │ │ ├── 1.feedbackjar.json │ │ ├── 10.fluenticons.json │ │ ├── 11.appydev.json │ │ ├── 12.gitstars.json │ │ ├── 13.tvflix.json │ │ ├── 2.feedful.json │ │ ├── 3.1.hawa.json │ │ ├── 3.123.sketch-to-ui.json │ │ ├── 3.2.pocketbase-nuxt.json │ │ ├── 3.formdata.json │ │ ├── 4.simpleonlinetools.json │ │ ├── 5.imbox.json │ │ ├── 6.bring-back-twitter.json │ │ ├── 6.onelink.json │ │ ├── 7.logspot.json │ │ ├── 8.iconbuddy.json │ │ └── 9.postperfect.json │ └── uses/ │ ├── Tableplus.json │ ├── apple-airpods-3.json │ ├── apple-iphone-12.json │ ├── apple-watch-series-7.json │ ├── bear.json │ ├── cleanshot.json │ ├── daily-objects-turf-desk-mat.json │ ├── dell-nero-dock.json │ ├── fake-plants.json │ ├── featherlite-helix-chair.json │ ├── gifski.json │ ├── httpie.json │ ├── ikea-headphone-stand.json │ ├── jbl-csum-microphone.json │ ├── keychron-k2.json │ ├── krisp.json │ ├── lenovo-monitor.json │ ├── logitech-mx-keys.json │ ├── logitech-mx-master-3s.json │ ├── macbook.json │ ├── miyoo-mini.json │ ├── monitorcontrol.json │ ├── purple-ark-sit-stand-desk.json │ ├── raycast.json │ ├── reminders-menubar.json │ ├── sony-playstation-4.json │ ├── sony-wh-1000xm4.json │ ├── texts.json │ ├── vscode.json │ └── zed.json ├── nuxt.config.ts ├── package.json ├── pages/ │ ├── articles/ │ │ ├── [slug].vue │ │ └── index.vue │ ├── bookmarks.vue │ ├── index.vue │ ├── lab.vue │ ├── projects.vue │ └── whats-in-my-bag.vue ├── tailwind.config.ts └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Nuxt dev/build outputs .output .data .nuxt .nitro .cache dist # Node dependencies node_modules # Logs logs *.log # Misc .DS_Store .fleet .idea # Local env files .env .env.* !.env.example ================================================ FILE: .npmrc ================================================ shamefully-hoist=true strict-peer-dependencies=false ================================================ FILE: .prettierrc ================================================ { "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": false, "printWidth": 80 } ================================================ FILE: .vscode/settings.json ================================================ { "files.associations": { "*.css": "tailwindcss" }, "editor.quickSuggestions": { "strings": true }, "tailwindCSS.experimental.configFile": "tailwind.config.ts", "tailwindCSS.experimental.classRegex": [ [ "ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]" ], [ "/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]" ] ], "tailwindCSS.classAttributes": [ "class", "className", "ngClass", "ui" ] } ================================================ FILE: README.md ================================================ [](http://supersaas.dev?ref=github) # Zooper Zooper is a beautiful personal portfolio template for developers, programmers, freelancers and designers. ![Zooper template home preview](https://zooper.pages.dev/preview.jpg) ## Features Full features blog 📝. CMS ready 🚀. Super fast ⚡. SEO friendly 📈. Fully responsive 📱. Dark mode 🌗. Syntax highlighting 🌈. Social media links 🔗. Code preview playground 🎮. Uses page 🧑‍💻 Bookmarks 📑. ## Roadmap Comments Tags Categories Pagination Sitemap RSS feeds Search Likes ## Tech Stack 1. Nuxt JS 2. Tailwind CSS 3. Vue 4. Nuxt Content Module 5. Shiki JS ES ## Installation 1. `git clone` this repo or click on `Use this template` button. 2. `cd` into the project directory. 3. Run `yarn install` to install the dependencies. 4. Run `yarn dev` to start the development server. ## Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. ================================================ FILE: app.config.ts ================================================ export default defineAppConfig({ ui: { primary: "teal", gray: "neutral", formGroup: { help: "text-xs mt-1 text-gray-500 dark:text-gray-400", error: "text-xs mt-1 text-red-500 dark:text-red-400", label: { base: "text-sm block font-medium text-gray-500 dark:text-gray-200", }, }, button: { rounded: "rounded-md transition-transform active:scale-x-[0.98] active:scale-y-[0.99]", }, modal: { overlay: { background: "bg-[rgba(0,8,47,.275)] saturate-50", }, padding: "p-0", rounded: "rounded-t-2xl sm:rounded-xl", transition: { enterFrom: "opacity-0 translate-y-full sm:translate-y-0 sm:scale-x-95", leaveFrom: "opacity-100 translate-y-0 sm:scale-x-100", }, }, container: { constrained: "max-w-2xl", }, }, }); ================================================ FILE: app.vue ================================================ ================================================ FILE: components/App/ArticleCard.vue ================================================ ================================================ FILE: components/App/Footer.vue ================================================ ================================================ FILE: components/App/Header.vue ================================================ ================================================ FILE: components/App/Navbar.vue ================================================ ================================================ FILE: components/App/ProjectCard.vue ================================================ ================================================ FILE: components/App/ThemeToggle.vue ================================================ ================================================ FILE: components/App/UsesHeader.vue ================================================ ================================================ FILE: components/App/UsesItem.vue ================================================ ================================================ FILE: components/Home/Divider.vue ================================================ ================================================ FILE: components/Home/FeaturedArticles.vue ================================================ ================================================ FILE: components/Home/FeaturedProjects.vue ================================================ ================================================ FILE: components/Home/Intro.vue ================================================ ================================================ FILE: components/Home/Newsletter.vue ================================================ ================================================ FILE: components/Home/SocialLinks.vue ================================================ ================================================ FILE: components/content/AnimatedCounter.vue ================================================ ================================================ FILE: components/content/CodeView.vue ================================================ ================================================ FILE: components/content/Credit.vue ================================================ ================================================ FILE: components/content/Encryption.vue ================================================ ================================================ FILE: components/content/HackerButton.vue ================================================ ================================================ FILE: components/content/LabCard.vue ================================================ ================================================ FILE: components/content/Rocket.vue ================================================ ================================================ FILE: components/content/Shapes.vue ================================================ ================================================ FILE: components/content/TextRotator.vue ================================================ ================================================ FILE: content/articles/building-your-first-api-with-expressjs-a-beginners-guide.md ================================================ --- title: "Building Your First API with Express.js: A Beginner's Guide" description: "A beginner-friendly guide to building your first API with Express.js" published: 2023/11/2 slug: "building-your-first-api-with-expressjs-a-beginners-guide" --- > This article was created using ChatGPT and meant as a placeholder ## What is Express.js? Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node-based web applications and is widely used to build APIs due to its simplicity and performance. ## Step 1: Setting Up Your Environment Before you start, ensure that you have Node.js installed on your system. You can download it from Node.js official website. Once Node.js is installed, you can initiate your project: ```bash mkdir my-express-api cd my-express-api npm init -y ``` This creates a new directory for your project and initializes a new Node.js project. ## Step 2: Installing Express.js Install Express.js using npm (Node Package Manager): ```bash Copy code npm install express --save This command installs Express.js and adds it to your project's dependencies. ``` ## Step 3: Creating Your First Express Server Create a file named app.js in your project directory. This file will be the entry point of your API. Add the following code to app.js: ```js Copy code const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); }); ``` This code creates a basic Express server that listens on port 3000 and responds with "Hello World!" to HTTP GET requests to the root URL (/). ## Step 4: Running Your Express Server Run your server using Node.js: ```bash Copy code node app.js Visit http://localhost:3000 in your browser. You should see the message "Hello World!". ``` ## Step 5: Building a Simple API Now, let's expand our server to act as a simple API. For example, let's create an endpoint that returns a list of users. Add the following code to your app.js: ```javascript Copy code let users = [{ name: "Alice" }, { name: "Bob" }]; app.get('/users', (req, res) => { res.json(users); }); ``` Now, if you visit http://localhost:3000/users, you will see the JSON representation of the users array. ## Step 6: Testing Your API It’s important to test your API. You can use tools like Postman or curl to test your endpoints. ## Step 7: Next Steps From here, you can start building more complex APIs. Consider the following: Implementing CRUD (Create, Read, Update, Delete) operations. Connecting your API to a database. Adding authentication and authorization. Organizing your code with routers and controllers. ## Conclusion Express.js simplifies the process of building APIs in Node.js. It's a great starting point for developers looking to delve into backend development. With its minimalist approach, you have the freedom to structure your applications as you see fit, making Express.js an invaluable tool in your development toolkit. ================================================ FILE: content/articles/how-to-convert-a-svg-to-png-using-canvas.md ================================================ --- title: "How to convert a SVG to PNG using Canvas" description: "A simple way to convert a SVG to PNG using Canvas" published: 2023/11/22 slug: "how-to-convert-a-svg-to-png-using-canvas" --- > This article was created using ChatGPT and meant as a placeholder Converting an SVG to a PNG in JavaScript using a canvas element is a handy technique for web developers who need to manipulate vector graphics for various applications. This process essentially involves rendering an SVG image onto a canvas and then converting the canvas to a PNG format. Here's a step-by-step guide on how to achieve this: 1. Prepare the SVG Ensure your SVG code is ready. You can use an SVG file or an SVG string embedded directly in your JavaScript code. If you're using an external SVG file, you'll need to load it into your application. 2. Create a Canvas Element You need a canvas element to draw your SVG onto. This can be an existing canvas in your HTML or one created dynamically using JavaScript: ```js let canvas = document.createElement("canvas"); canvas.width = 500; // Set the canvas width canvas.height = 500; // Set the canvas height ``` Set the width and height of the canvas to match the desired dimensions of your final PNG. 3. Draw the SVG onto the Canvas To draw the SVG onto the canvas, you need to convert the SVG into an image and then draw that image on the canvas. This can be done using the Image object in JavaScript: ```js let img = new Image(); img.onload = function () { let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); }; img.src = "data:image/svg+xml;base64," + btoa(svgString); ``` In this code, replace svgString with your SVG code. If you're using an external SVG file, ensure the file is read and converted into a base64 string. 4. Convert Canvas to PNG Once your SVG is rendered on the canvas, you can convert the canvas to a PNG image: ```js let pngUrl = canvas.toDataURL("image/png"); ``` This pngUrl is a base64 encoded string representing your PNG image. 5. Use or Save the PNG Image Now that you have your PNG in base64 format, you can use it as needed in your application. For example, you can display it in an element or download it: ```js let imgElement = document.createElement("img"); imgElement.src = pngUrl; document.body.appendChild(imgElement); // To download the image let downloadLink = document.createElement("a"); downloadLink.href = pngUrl; downloadLink.download = "image.png"; downloadLink.click(); ``` ### Additional Considerations Cross-Origin Issues: If you're loading an SVG from an external source, you may encounter cross-origin issues. Ensure CORS policies are configured correctly on the server hosting the SVG file. SVG Features: Some SVG features may not render correctly on canvas, so test your SVGs thoroughly. Performance: For large SVG files, consider the performance implications of this conversion process. ### Conclusion Converting SVG to PNG using JavaScript and canvas is a powerful technique that can be integrated into web applications for dynamic image manipulation. By following these steps, developers can effectively translate the versatility of SVGs into the wide compatibility of PNGs. ================================================ FILE: content/lab/1.text-rotator.md ================================================ ::LabCard{title="Text Rotator" description="Rotate text with tailwindcss." :showUsageTab=false} #preview ::TextRotator :: #codebase ::CodeView ```html ``` :: ================================================ FILE: content/lab/2.hacker-button.md ================================================ ::LabCard{title="Hacker button" description="Randomize text on click with vue"} #preview ::HackerButton{label="Submit Form"} :: #codebase ::CodeView ```vue ``` :: #usage ::CodeView ```vue
{{ targetNumber }}+
``` :: #usage ::CodeView ```vue ``` :: ================================================ FILE: content/lab/4.shapes-with-tailwindcss.md ================================================ ::LabCard{title="Shapes with Tailwindcss" description="Some random shapes made with tailwindcss" :showUsageTab=false} #preview ::Shapes :: #codebase ::CodeView ```html