├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── create_cpp_story.yml │ ├── create_css_story.yml │ ├── create_golang_story.yml │ ├── create_java_story.yml │ ├── create_javascript_story.yml │ ├── create_linux_story.yml │ ├── create_maths_story.yml │ ├── create_php_story.yml │ ├── create_physics_story.yml │ ├── create_python_story.yml │ ├── create_ruby_story.yml │ ├── create_rust_story.yml │ ├── create_zig_story.yml │ ├── feature_request.yml │ ├── other.yml │ └── verification_request.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── create-story.yml │ ├── release.yml │ └── welcome.yml ├── .gitignore ├── .gitpod.yml ├── .npmrc ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── CONVENTIONAL_COMMIT.md ├── LICENSE ├── README.md ├── jsconfig.json ├── next-sitemap.config.js ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── collections │ ├── authors │ │ ├── .gitkeep │ │ ├── darkterminal.json │ │ └── mkubdev.json │ └── stories │ │ ├── cpp │ │ └── .gitkeep │ │ ├── css │ │ ├── .gitkeep │ │ ├── fixing-the-sticky-footer-issue-with-nextjs-and-tailwindcss.md │ │ └── how-to-fix-the-nextjs-tailwindcss-sticky-footer.md │ │ ├── golang │ │ └── .gitkeep │ │ ├── java │ │ └── .gitkeep │ │ ├── javascript │ │ ├── .gitkeep │ │ ├── a-central-sidebar-menu-configuration.md │ │ ├── a-dynamic-heroicons-component-for-nextjs.md │ │ ├── easy-fetching-on-nextjs.md │ │ ├── migrate-cra-to-vite-without-changing-any-old-files.md │ │ ├── react-table-sever-side-pagination-search-sortorder.md │ │ ├── react-table-trigger-changed-without-swr.md │ │ ├── redirect-to-mobile-pages-with-usedetectmobile-in-react.md │ │ ├── shadcn-ui-sidebar-navigation.md │ │ ├── spice-up-your-website-with-these-color-related-functions.md │ │ ├── transforming-coordinates-into-human-readable-addresses-with-usereversegeocoding.md │ │ ├── translate-requests-between-stores-with-different-selling-units.md │ │ ├── unleashing-the-power-of-google-maps-api-in-your-react-app.md │ │ └── useisomorphiclayouteffect-react-hook.md │ │ ├── linux │ │ ├── .gitkeep │ │ ├── after-triple-boot-3-os-options-not-showing-on-the-grub.md │ │ ├── e-package-________-has-no-installation-candidate-in-kali-linux.md │ │ └── the-internet-connection-problem-in-linux.md │ │ ├── maths │ │ └── .gitkeep │ │ ├── php │ │ ├── .gitkeep │ │ └── check-a-string-is-a-valid-date-or-datetime-format-in-php.md │ │ ├── physics │ │ └── .gitkeep │ │ ├── python │ │ ├── .gitkeep │ │ └── getting-started-with-tinyml-unlocking-the-potential-of-smart-embedded-devices.md │ │ ├── ruby │ │ └── .gitkeep │ │ ├── rust │ │ └── .gitkeep │ │ └── zig │ │ └── .gitkeep ├── favicon.ico ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-32x32.webp │ ├── favicon.ico │ └── site.webmanifest ├── images │ ├── banners │ │ └── .gitkeep │ ├── metaphor-square.png │ └── metaphor-square.webp ├── metaphor.png ├── metaphor.webp ├── next.svg ├── thirteen.svg └── vercel.svg ├── release.config.js ├── src ├── components │ ├── ActiveLink.js │ ├── Breadcrumb.js │ ├── Footer.js │ ├── Layout.js │ ├── Meta.js │ ├── Navbar.js │ ├── RandomQuotes.js │ ├── ScrollToTop.js │ ├── StoryIcon.js │ ├── ThemeSwicther.js │ ├── TimeAgo.js │ ├── effects │ │ └── GlitchTextOne.js │ ├── quotes │ │ ├── data.js │ │ └── quotePicker.js │ └── stories │ │ ├── StoryHeader.js │ │ ├── StoryLanguages.js │ │ └── StoryLists.js ├── constants │ ├── app-config.js │ ├── giscus-config.js │ ├── ogimage-rest-generator.js │ └── social-handler.js ├── hooks │ └── .gitkeep ├── pages │ ├── _app.js │ ├── _document.js │ ├── api │ │ └── hello.js │ ├── index.js │ ├── our-hustle-and-grind.js │ ├── paperdocs.js │ ├── stories │ │ ├── [language] │ │ │ ├── [slug].js │ │ │ └── index.js │ │ └── index.js │ └── the-culture-and-vibe.js ├── services │ └── markdownService.js └── styles │ ├── TheStory.module.css │ └── globals.css ├── tailwind.config.js └── tools └── image-converter.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next", "prettier"], 3 | "rules": { 4 | "react/no-unescaped-entities": "off", 5 | "react/no-children-prop": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Discord community 4 | url: https://discord.gg/9pzTHyeJ 5 | about: Have any questions or doubts? Join our Discord community! 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_cpp_story.yml: -------------------------------------------------------------------------------- 1 | name: Create C/C++ Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "cpp"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: cpp-title 12 | attributes: 13 | label: The Backstory about your C/C++ Metaphor 14 | placeholder: "hint: describe the backstory about your C/C++ metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: cpp-content 19 | attributes: 20 | label: The C/C++ Story! 21 | placeholder: "hint: This is about how I write my C/C++ story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: cpp-link 26 | attributes: 27 | label: A C/C++ demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: cpp-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (C/C++ Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_css_story.yml: -------------------------------------------------------------------------------- 1 | name: Create CSS Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "css"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: css-title 12 | attributes: 13 | label: The Backstory about your CSS Metaphor 14 | placeholder: "hint: describe the backstory about your CSS metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: css-content 19 | attributes: 20 | label: The CSS Story! 21 | placeholder: "hint: This is about how I write my CSS story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: css-link 26 | attributes: 27 | label: A CSS demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: css-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (CSS Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_golang_story.yml: -------------------------------------------------------------------------------- 1 | name: Create GoLang Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "golang"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: golang-title 12 | attributes: 13 | label: The Backstory about your GoLang Metaphor 14 | placeholder: "hint: describe the backstory about your golang metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: golang-content 19 | attributes: 20 | label: The GoLang Story! 21 | placeholder: "hint: This is about how I write my GoLang story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: golang-link 26 | attributes: 27 | label: A GoLang demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: golang-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (GoLang Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_java_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Java Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "java"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: java-title 12 | attributes: 13 | label: The Backstory about your Java Metaphor 14 | placeholder: "hint: describe the backstory about your Java metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: java-content 19 | attributes: 20 | label: The Java Story! 21 | placeholder: "hint: This is about how I write my Java story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: java-link 26 | attributes: 27 | label: A Java demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: java-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Java Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_javascript_story.yml: -------------------------------------------------------------------------------- 1 | name: Create JavaScript Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "javascript"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: javascript-title 12 | attributes: 13 | label: The Backstory about your JavaScript Metaphor 14 | placeholder: "hint: describe the backstory about your JavaScript metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: javascript-content 19 | attributes: 20 | label: The JavaScript Story! 21 | placeholder: "hint: This is about how I write my JavaScript story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: javascript-link 26 | attributes: 27 | label: A JavaScript demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: javascript-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (JavaScript Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_linux_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Linux Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "linux"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: linux-title 12 | attributes: 13 | label: The Backstory about your Linux Metaphor 14 | placeholder: "hint: describe the backstory about your linux metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: linux-content 19 | attributes: 20 | label: The Linux Story! 21 | placeholder: "hint: This is about how I write my Linux story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: linux-link 26 | attributes: 27 | label: A Linux demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: linux-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Linux Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_maths_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Maths Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "maths"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: maths-title 12 | attributes: 13 | label: The Backstory about your Maths Metaphor 14 | placeholder: "hint: describe the backstory about your Maths metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: maths-content 19 | attributes: 20 | label: The Maths Story! 21 | placeholder: "hint: This is about how I write my Maths story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: maths-link 26 | attributes: 27 | label: A Maths demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: maths-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Maths Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_php_story.yml: -------------------------------------------------------------------------------- 1 | name: Create PHP Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "php"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: php-title 12 | attributes: 13 | label: The Backstory about your PHP Metaphor 14 | placeholder: "hint: describe the backstory about your PHP metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: php-content 19 | attributes: 20 | label: The PHP Story! 21 | placeholder: "hint: This is about how I write my PHP story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: php-link 26 | attributes: 27 | label: A PHP demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: php-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (PHP Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_physics_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Physics Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "physics"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: physics-title 12 | attributes: 13 | label: The Backstory about your Physics Metaphor 14 | placeholder: "hint: describe the backstory about your Physics metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: physics-content 19 | attributes: 20 | label: The Physics Story! 21 | placeholder: "hint: This is about how I write my Physics story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: physics-link 26 | attributes: 27 | label: A Physics demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: physics-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Physics Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_python_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Python Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "python"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: python-title 12 | attributes: 13 | label: The Backstory about your Python Metaphor 14 | placeholder: "hint: describe the backstory about your Python metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: python-content 19 | attributes: 20 | label: The Python Story! 21 | placeholder: "hint: This is about how I write my Python story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: python-link 26 | attributes: 27 | label: A Python demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: python-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Python Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_ruby_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Ruby Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "ruby"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: ruby-title 12 | attributes: 13 | label: The Backstory about your Ruby Metaphor 14 | placeholder: "hint: describe the backstory about your Ruby metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: ruby-content 19 | attributes: 20 | label: The Ruby Story! 21 | placeholder: "hint: This is about how I write my Ruby story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: ruby-link 26 | attributes: 27 | label: A Ruby demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: ruby-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Ruby Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_rust_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Rust Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "rust"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: rust-title 12 | attributes: 13 | label: The Backstory about your Rust Metaphor 14 | placeholder: "hint: describe the backstory about your Rust metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: rust-content 19 | attributes: 20 | label: The Rust Story! 21 | placeholder: "hint: This is about how I write my Rust story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: rust-link 26 | attributes: 27 | label: A Rust demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: rust-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Rust Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/create_zig_story.yml: -------------------------------------------------------------------------------- 1 | name: Create Zig Story 2 | description: Add this story to the list 3 | title: "Your Story Title" 4 | labels: ["metaphore", "zig"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: "**Share the current and relevant details**" 10 | - type: textarea 11 | id: zig-title 12 | attributes: 13 | label: The Backstory about your Zig Metaphor 14 | placeholder: "hint: describe the backstory about your Zig metaphor" 15 | validations: 16 | required: true 17 | - type: textarea 18 | id: zig-content 19 | attributes: 20 | label: The Zig Story! 21 | placeholder: "hint: This is about how I write my Zig story" 22 | validations: 23 | required: true 24 | - type: input 25 | id: zig-link 26 | attributes: 27 | label: A Zig demo/repos link 28 | placeholder: "e.g.: https://github.com.com/username/my-repos" 29 | - type: input 30 | id: zig-donation-link 31 | attributes: 32 | label: PayPal Link for Donation (Zig Storyteller) 33 | placeholder: "e.g.: https://www.paypal.me/your-paypal-profile-username" 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Punk Request 2 | description: Add your feature suggestion 3 | title: 'Punk Idea: [YOUR MIND BLOWING IDEA]' 4 | labels: ["punk::idea"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: | 10 | Hello Punk! Thanks you before going submit new mind blowing punk idea 11 | - type: input 12 | id: contact 13 | attributes: 14 | label: Is your mind blowing punk idea is something that ~~wrong~~ different then other. 15 | description: How can we get in touch with you if we need more info? 16 | placeholder: ex. email@example.com, Discord username, anything else... 17 | validations: 18 | required: true 19 | - type: textarea 20 | id: what-is-this 21 | attributes: 22 | label: Tell me what you want to suggest 23 | description: "Don't be shy, your idea will blow up over the earth! Yo will be great freestyler!" 24 | placeholder: "Something awesome happen in my head and tell me this...." 25 | validations: 26 | required: true 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other.yml: -------------------------------------------------------------------------------- 1 | name: Other issue 2 | description: Use this for any other issues. Do NOT create blank issues 3 | title: "[OTHER]" 4 | labels: ["awaiting triage"] # Requires a new label to be created 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: What would you like to share? 10 | description: Provide a clear and concise explanation of your issue. 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: extrainfo 15 | attributes: 16 | label: Additional information 17 | description: Is there anything else we should know about this issue? 18 | validations: 19 | required: false 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/verification_request.yml: -------------------------------------------------------------------------------- 1 | name: Verification Request 2 | description: Open proposal to verifiy me as a Verified Storytellers 3 | title: 'Verification Request - YOUR-GITHUB-USERNAME' 4 | labels: ["verification-request"] 5 | assignees: ["darkterminal", "mkubdev"] 6 | body: 7 | - type: textarea 8 | attributes: 9 | label: Fill information about you 10 | description: Describe following format below and fill all required fields change value to empty in optional fields 11 | value: | 12 | {start userdata} 13 | { 14 | "github_username": "change-to-your-github-username-required", 15 | "public_email": "change-to-your-public-email-required", 16 | "donation_link": "change-to-your-donation-link-required", 17 | "social_media": { 18 | "devto": "change-to-your-devto-link-required", 19 | "twitter": "change-to-your-twitter-link-required", 20 | "reddit": "change-to-your-reddit-link-optional", 21 | "hashnode": "change-to-your-hashnode-link-optional", 22 | "mastodon": "change-to-your-mastodon-link-optional", 23 | "facebook": "change-to-your-facebook-link-optional", 24 | } 25 | } 26 | {end userdata} 27 | validations: 28 | required: true 29 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 📓 What Your Metaphor 4 | 5 | 6 | 7 | 8 | 9 | ## 👨‍💻 Suggest for Community (write if any) 10 | 11 | 12 | 13 | ## ✔️ Check List (Check all the applicable boxes) 14 | 15 | 16 | 20 | 21 | - [ ] My metaphor is not written before from anyone 22 | - [ ] My metaphor have follow writing rules of the community. 23 | - [ ] The title of my pull request is a short description of the requested merge. 24 | 25 | ## 📄 Note to reviewers (write if any) 26 | 27 | 28 | 29 | ## 📷 What Your Punk Signature? -------------------------------------------------------------------------------- /.github/workflows/create-story.yml: -------------------------------------------------------------------------------- 1 | on: 2 | issues: 3 | types: [closed] 4 | 5 | jobs: 6 | welcome: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v3 10 | - uses: StreetCommunityProgrammer/action-collections/metaphor-action@main 11 | with: 12 | github-token: ${{ secrets.GITHUB_TOKEN }} 13 | issue-message: "

Hello Punk! It's great having you contribute to this project

Welcome to the community :neckbeard:" 14 | pr-message: "

Hello Punk! It's great having you contribute to this project

Welcome to the community :neckbeard:" 15 | footer: 'If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our GitHub Organisation - we help and encourage each other to contribute to open source little and often :neckbeard:. Any questions let us know.' 16 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Semantic Release 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | release: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v3 11 | - name: Install Dependencies 12 | run: yarn install 13 | - name: Semantic Release 14 | env: 15 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 16 | run: npx semantic-release --preset conventional-changelog-conventionalcommits 17 | -------------------------------------------------------------------------------- /.github/workflows/welcome.yml: -------------------------------------------------------------------------------- 1 | on: 2 | fork: 3 | push: 4 | branches: [main] 5 | issues: 6 | types: [opened] 7 | issue_comment: 8 | types: [created] 9 | pull_request_target: 10 | types: [opened] 11 | pull_request_review_comment: 12 | types: [created] 13 | 14 | jobs: 15 | welcome: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v3 19 | - uses: StreetCommunityProgrammer/action-collections/metaphor-action@main 20 | with: 21 | github-token: ${{ secrets.GITHUB_TOKEN }} 22 | issue-message: "

Hello Punk! It's great having you contribute to this project

Welcome to the community :neckbeard:" 23 | pr-message: "

Hello Punk! It's great having you contribute to this project

Welcome to the community :neckbeard:" 24 | footer: 'If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our GitHub Organisation - we help and encourage each other to contribute to open source little and often :neckbeard:. Any questions let us know.' 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | public/robots.txt 34 | public/sitemap*.xml 35 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | # Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart 6 | 7 | tasks: 8 | - init: npm install 9 | command: npm run dev 10 | 11 | 12 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | hoist=true 2 | auto-install-peers=true 3 | enable-pre-post-scripts=true 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .vscode-test/ 2 | out/ 3 | dist/ 4 | test-fixtures/ 5 | node_modules/ 6 | .next/ 7 | .github/ 8 | package-lock.json 9 | public/collections/stories/ 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "tabWidth": 2, 4 | "semi": true, 5 | "useTabs": true 6 | } 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [1.2.0](https://github.com/StreetCommunityProgrammer/metaphore/compare/v1.1.0...v1.2.0) (2023-03-29) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * **footer:** changes to Layout.js and _document.js ([#43](https://github.com/StreetCommunityProgrammer/metaphore/issues/43)) ([9bf6e47](https://github.com/StreetCommunityProgrammer/metaphore/commit/9bf6e47c6df7014782b070475212107e97ea9747)) 7 | * navbar link for mobile now match desktop links ([3475205](https://github.com/StreetCommunityProgrammer/metaphore/commit/3475205dee99ba4d249f9e75ae49cdb1634acc29)) 8 | * remove class\ footer need to be refactored ([d94b718](https://github.com/StreetCommunityProgrammer/metaphore/commit/d94b718e017462bd9b543cd0fd72bcc98a7252a1)) 9 | 10 | 11 | ### Features 12 | 13 | * add [@darkterminal](https://github.com/darkterminal) suggestion ([cf9c2b5](https://github.com/StreetCommunityProgrammer/metaphore/commit/cf9c2b5b2ebf5ad8b73df32053885a10e8aaa9a3)) 14 | * Add Tailwind responsive utility class ([#37](https://github.com/StreetCommunityProgrammer/metaphore/issues/37)) ([0fa0a38](https://github.com/StreetCommunityProgrammer/metaphore/commit/0fa0a3821a6ee9b990a17ed4601d3d4794700de8)) 15 | * adding golang brand icon ([6f6a58a](https://github.com/StreetCommunityProgrammer/metaphore/commit/6f6a58a89f13cf4ce5822e9905a26f44ccdcf5a2)) 16 | * adding golang quotes ([dbf514b](https://github.com/StreetCommunityProgrammer/metaphore/commit/dbf514b502df7713fef9cdb2507dbcc8b4203e16)) 17 | * display no story page ([c35a029](https://github.com/StreetCommunityProgrammer/metaphore/commit/c35a02946425bab895e6f0dadc92aab4eb3d9af7)) 18 | * **footer:** add fixed position to the footer ([6267e3b](https://github.com/StreetCommunityProgrammer/metaphore/commit/6267e3b9483bc620921e0a9f24b37f9f65ca9d6b)) 19 | * **resp:** fix homepage responsivness ([00404bd](https://github.com/StreetCommunityProgrammer/metaphore/commit/00404bd9c339d497b3d9ddfd8a40ec0adbc42968)) 20 | * **responsive:** add responsivness to pages ([96c7e0a](https://github.com/StreetCommunityProgrammer/metaphore/commit/96c7e0a1e692f7ad77b64304e659275c3575efbb)) 21 | * update _document.js to add padding to body ([11195cc](https://github.com/StreetCommunityProgrammer/metaphore/commit/11195ccf2e78b8f2fe7e6a2c42c5953232f39817)) 22 | 23 | # [1.1.0](https://github.com/StreetCommunityProgrammer/metaphore/compare/v1.0.0...v1.1.0) (2023-03-14) 24 | 25 | 26 | ### Bug Fixes 27 | 28 | * **seo:** og-image structure ([a396ac1](https://github.com/StreetCommunityProgrammer/metaphore/commit/a396ac1c9dd0e4828598a7642378ca953a5c028b)) 29 | 30 | 31 | ### Features 32 | 33 | * **components:** adding scroll to top ([c0b42ca](https://github.com/StreetCommunityProgrammer/metaphore/commit/c0b42cad3d3494969a2124c772711722b69e222e)) 34 | * **seo:** adding seo support in each page ([5dc85aa](https://github.com/StreetCommunityProgrammer/metaphore/commit/5dc85aa8c7285ce3e204277bf1979c23d53c4e7b)) 35 | * **story:** adding scroll to top button ([c3a41f0](https://github.com/StreetCommunityProgrammer/metaphore/commit/c3a41f02ff66d5d66bdbd1a109d790f528a7e351)) 36 | 37 | # 1.0.0 (2023-03-13) 38 | 39 | 40 | ### Bug Fixes 41 | 42 | * conflict changes ([4b53dfc](https://github.com/StreetCommunityProgrammer/metaphore/commit/4b53dfceafa5e3a1bcecbce069408964ca098019)) 43 | * error dependency react-wrap-balancer on build ([aa85f84](https://github.com/StreetCommunityProgrammer/metaphore/commit/aa85f849739cb86750e5869433f41d6af549f7a1)) 44 | * **error:** issue template invalid key ([c81c93e](https://github.com/StreetCommunityProgrammer/metaphore/commit/c81c93ebe440ce9830d5d884e0842f9d16b639ce)) 45 | * **forget:** description keys ([e2211fb](https://github.com/StreetCommunityProgrammer/metaphore/commit/e2211fbca26bc89ef7512d84087a4f61ca31d08a)) 46 | * typos ([382bb5e](https://github.com/StreetCommunityProgrammer/metaphore/commit/382bb5ed828ee4209b8ceb373f71a07dffa016fb)) 47 | * typos ([b71f6d6](https://github.com/StreetCommunityProgrammer/metaphore/commit/b71f6d6d963a18862ca731ba555fb223b668a8c4)) 48 | 49 | 50 | ### Features 51 | 52 | * adding donation button ([58c0436](https://github.com/StreetCommunityProgrammer/metaphore/commit/58c0436a2d05f3a684a91e84cd5e9d4ddae4f8b5)) 53 | * adding new page culture ([fa5f807](https://github.com/StreetCommunityProgrammer/metaphore/commit/fa5f807c1be0a00d857a9cd61498729fe08738c3)) 54 | * adding share button ([#22](https://github.com/StreetCommunityProgrammer/metaphore/issues/22)) ([d9deecb](https://github.com/StreetCommunityProgrammer/metaphore/commit/d9deecb499911f1873b65727853f6d78b97f4932)) 55 | * adding share button (issue: [#21](https://github.com/StreetCommunityProgrammer/metaphore/issues/21)) ([396ca67](https://github.com/StreetCommunityProgrammer/metaphore/commit/396ca672cbd18be30fe4d50ce45e130a30f0963c)) 56 | * create page wall of punk storytellers ([#24](https://github.com/StreetCommunityProgrammer/metaphore/issues/24)) ([82046fe](https://github.com/StreetCommunityProgrammer/metaphore/commit/82046fe1e698f0841818e34ca6ac24f3d15b7149)), closes [#19](https://github.com/StreetCommunityProgrammer/metaphore/issues/19) 57 | * github action auto generate markdown file based accepted issue ([#7](https://github.com/StreetCommunityProgrammer/metaphore/issues/7)) ([f6bcc6e](https://github.com/StreetCommunityProgrammer/metaphore/commit/f6bcc6ea01e96db02dcc3ec01688b172986ef37d)) 58 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # OUR SOLID CODE OF CONDUCT 2 | 3 | Yo, welcome to the Street Community Programmer! We believe in creating an inclusive and respectful community where everyone feels comfortable and heard. To make sure we're all on the same page, we have a few guidelines we ask everyone to follow. Check it out: 4 | 5 | # The Code 6 | 1. Respect each other. 7 | 2. Keep it clean. 8 | 3. Be yourself. 9 | 4. Stay open-minded. 10 | 11 | ## The Consequences 12 | If you violate any of these guidelines, we may take action, including but not limited to: 13 | - Removing your contributions from the community 14 | - Blocking you from the community 15 | - Not inviting you to our next party (just kidding, we'll still invite you) 16 | 17 | ## The Callout 18 | If you witness someone violating the code of conduct, please let us know. You can reach out to any of our moderators or shoot us an email at [missing-email](meh). 19 | 20 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # THE CULTURE AND GUIDELINES 2 | 3 | Hey there, fellow Metaphor creators! We're stoked that you want to join our team of Punks, Freestylers, and Software Freestyle Engineers. Let's rock this joint with some awesome contributions! 4 | 5 | ## How to join the fun 6 | 1. First off, fork the repository to your own account, champ. 7 | 2. Clone that repo to your local machine like a boss. 8 | 3. Now create a new branch, name it something cool. 9 | 4. Start making those changes and commit them to your branch like a pro ([with this mantra](CONVENTIONAL_COMMIT.md)). 10 | 5. Push your branch to your forked repository and let the magic happen. 11 | 6. Create a pull request from your branch to the main repository. 12 | 7. Sit tight and wait for our team to give you the thumbs up or give you some sweet feedback. 13 | 8. Once you get the green light, your changes will be merged into the main repository. Congratulations, you're a Metaphor master now! 14 | 15 | ## How you can contribute 16 | 17 | Don't matter if you're an expert or just starting out, we welcome all kinds of contributions. Here are some ideas to get you started: 18 | 19 | - Create some fresh code snippets or metaphors that will blow our minds! 20 | - Jazz up existing code snippets or metaphors with your own unique flair. 21 | - Join our community forums and discussions, and get involved in the fun. 22 | - Help us make our documentation and resources even better. 23 | - Share your skills and expertise with our community and show us what you've got! 24 | 25 | ## Guidelines for contributions 26 | 27 | To keep our community cool and funky, please stick to these guidelines when you're making contributions: 28 | 29 | - Respect your fellow Metaphor creators and be kind to each other. 30 | - Follow our code of conduct at all times, we don't want no trouble here. 31 | - Only submit your original creations, don't steal other people's stuff. 32 | - Make sure your contributions fit in with our community values of creativity, diversity, and innovation. 33 | - Stay focused and relevant to our mission of using code to make the world a better place. 34 | 35 | Thanks for your interest in contributing to Metaphore (SCP)! We can't wait to see your sick skills and mind-blowing contributions. Let's do this! 36 | -------------------------------------------------------------------------------- /CONVENTIONAL_COMMIT.md: -------------------------------------------------------------------------------- 1 | # Conventional Commits 2 | 3 | Conventional Commits is a specification for adding human and machine-readable meaning to commit messages. It provides a consistent way to structure commit messages, making them more informative and easier to understand. By following the Conventional Commits specification, it becomes easier to automate changelog generation, versioning, and releases. 4 | 5 | ## Format 6 | 7 | A Conventional Commit message consists of a header, an optional body, and an optional footer. The header has a special format that includes a type, a scope, and a subject. The body provides additional information about the change, and the footer provides a place to add metadata about the commit, such as issue tracking numbers. 8 | 9 | The format of a header is as follows: 10 | 11 | ```bash 12 | [optional scope]: 13 | ``` 14 | 15 | ### Type 16 | 17 | The type field is required and describes the kind of change that the commit introduces. Examples of types include: 18 | 19 | - feat: a new feature 20 | - fix: a bug fix 21 | - docs: documentation changes 22 | - style: changes that do not affect the meaning of the code, such as formatting 23 | - refactor: code changes that neither fix a bug nor add a feature 24 | - test: adding missing tests or correcting existing tests 25 | - chore: changes to the build process or auxiliary tools 26 | 27 | ### Scope 28 | 29 | The scope field is optional and describes the part of the codebase that is affected by the change. 30 | 31 | ### Subject 32 | 33 | The subject field is required and provides a brief summary of the change. 34 | 35 | **Examples** 36 | 37 | Here are some examples of Conventional Commit messages: 38 | 39 | ```bash 40 | feat(users): add user registration endpoint 41 | ``` 42 | 43 | ```bash 44 | fix(authentication): handle invalid credentials error 45 | ``` 46 | 47 | ```bash 48 | docs(readme): add example usage 49 | ``` 50 | 51 | **Benefits** 52 | 53 | Using Conventional Commits provides a number of benefits: 54 | 55 | - Provides a consistent way to structure commit messages across a team or organization 56 | - Makes it easier to generate changelogs, versioning, and releases 57 | - Provides more information about changes, making it easier to understand the purpose of a commit 58 | - Makes it easier to automate processes such as generating release notes or updating documentation 59 | 60 | **Conclusion** 61 | 62 | By using Conventional Commits, you can make your commits more informative and easier to understand, helping your team and organization work more efficiently. 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 |

Metaphore

7 |

Public Collections of Metaphore our Freestylers accross the world. Gain knowledge with unusual perspective from our Punk members.

8 |

9 | Every Punk can make contributions to share their styles and unusual code snippet that are believed to be different from traditional theory or usual business, but they work! That's our Punk Freestyle Engineer. Welcome to the Street Community Programmer. 10 |

11 |

See it in action!

12 |

13 | 14 |
15 |

16 | ﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌ 17 |

18 |
19 | 20 |

21 |

How it's work?

22 |

⍿ We use GitHub issues templates to create a new metaphore.

23 |

⍿ Once the metaphore is accepted, we use GitHub Action to generate a markdown file that contains the metaphore.

24 |

⍿ The website vercel build is triggered and updated automatically.

25 |

⍿ Your metaphore is now live online!

26 |

[ I have a story to list ]

27 |

28 | 29 |
30 | 31 |

32 |

Metaphor Story - Structure

33 |

Our Metaphor Story has several components that aim to provide context and explanation for the submitted metaphor.

34 |

Story Title (Required)

35 |

The first component is the Story Title, which is a concise and descriptive title that summarizes the main idea or concept behind the metaphor. This component is required, as it helps readers quickly understand what the metaphor is about.

36 |

The Back Story about your Metaphor (Required)

37 |

The second component is the Back Story about your Metaphor, which is a brief explanation of the inspiration or motivation behind the metaphor. This component is also required, as it helps readers understand the context in which the metaphor was created and why it might be relevant or useful.

38 |

The Story (Required)

39 |

The third component is the Story itself, which is a detailed description of the metaphor and how it works. This component is also required and should be written in a clear and easy-to-understand manner, so that readers can follow along and potentially use the metaphor in their own projects.

40 |

Demo/Link (Optional but recommended)

41 |

The fourth component is the Demo/Link, which is an optional component that can be used to provide additional information or examples of the metaphor in action. This could be a link to a live demo, a GitHub repository, or any other relevant resource.

42 |

Donation Link (Optional)

43 |

The fifth component is the Donation Link, which is also optional and can be used to provide a way for readers to support the creator of the metaphor. This could be a link to a Patreon page, a PayPal account, or any other relevant donation platform.

44 |

Overall, the structure of Our Metaphor Story is designed to provide a comprehensive and easy-to-understand format for sharing unconventional coding solutions or freestyle metaphors that could be useful for other freestylers.

45 |

46 | 47 |
48 | 49 |

50 |

Create & Share Your Metaphor Story

51 |

Don't ask how to contribute, just share what you want to share!

52 |

[ Let Me In ]

53 |

54 | 55 | ## Notes 56 | 57 | _Every metaphor in this repository is public and everyone can used for free._ 58 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next-sitemap.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next-sitemap').IConfig} */ 2 | const config = { 3 | siteUrl: process.env.SITE_URL || 'https://metaphore.vercel.app', 4 | generateRobotsTxt: true, 5 | sitemapSize: 1000, 6 | changefreq: 'weekly' 7 | }; 8 | 9 | module.exports = config; 10 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | webpack: (config) => { 5 | config.resolve.fallback = { 6 | fs: false, 7 | net: false, 8 | dns: false, 9 | child_process: false, 10 | tls: false, 11 | }; 12 | 13 | return config; 14 | }, 15 | images: { 16 | remotePatterns: [ 17 | { 18 | protocol: 'https', 19 | hostname: 'github.com', 20 | }, 21 | { 22 | protocol: 'https', 23 | hostname: 'og-image-rest-generator.fly.dev' 24 | } 25 | ], 26 | }, 27 | }; 28 | 29 | module.exports = nextConfig; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "metaphore", 3 | "version": "1.0.0", 4 | "description": "Public Collections of Metaphor our Freestylers accross the world. Gain knowledge with unusual perspective from our Punk members.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/StreetCommunityProgrammer/metaphore.git" 9 | }, 10 | "keywords": [ 11 | "sharing", 12 | "blogging", 13 | "freestyle", 14 | "programming", 15 | "metaphor" 16 | ], 17 | "author": "Imam Ali Mustofa (https://bettadevindonesia.com)", 18 | "license": "GPL-3.0-only", 19 | "bugs": { 20 | "url": "https://github.com/StreetCommunityProgrammer/metaphore/issues" 21 | }, 22 | "homepage": "https://github.com/StreetCommunityProgrammer/metaphore#readme", 23 | "private": true, 24 | "scripts": { 25 | "dev": "next dev -p 2312", 26 | "build": "next build", 27 | "postbuild": "next-sitemap", 28 | "start": "next start", 29 | "lint": "next lint", 30 | "semantic-release": "semantic-release", 31 | "prettier": "prettier --write ." 32 | }, 33 | "engines": { 34 | "node": ">=16" 35 | }, 36 | "dependencies": { 37 | "@giscus/react": "^2.2.8", 38 | "daisyui": "^2.51.3", 39 | "date-fns": "^2.29.3", 40 | "eslint": "8.35.0", 41 | "eslint-config-next": "13.2.3", 42 | "glob": "^9.2.1", 43 | "gray-matter": "^4.0.3", 44 | "lodash": "^4.17.21", 45 | "next": "13.2.3", 46 | "next-seo": "^5.15.0", 47 | "next-share": "^0.19.0", 48 | "next-sitemap": "^4.0.5", 49 | "react": "^18.2.0", 50 | "react-dom": "^18.2.0", 51 | "react-icons": "^4.8.0", 52 | "react-markdown": "^8.0.5", 53 | "react-syntax-highlighter": "^15.5.0", 54 | "remark-gfm": "^3.0.1", 55 | "sharp": "^0.31.3", 56 | "theme-change": "^2.5.0" 57 | }, 58 | "devDependencies": { 59 | "@semantic-release/changelog": "^6.0.2", 60 | "@semantic-release/git": "^10.0.1", 61 | "@semantic-release/github": "^8.0.7", 62 | "autoprefixer": "^10.4.13", 63 | "eslint-config-prettier": "^8.7.0", 64 | "postcss": "^8.4.21", 65 | "prettier": "^2.8.4", 66 | "semantic-release": "^20.1.1", 67 | "tailwindcss": "^3.2.7" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/collections/authors/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StreetCommunityProgrammer/metaphore/b33bb2fbf223c452dfeceb510e09a19cd5bfdcb2/public/collections/authors/.gitkeep -------------------------------------------------------------------------------- /public/collections/authors/darkterminal.json: -------------------------------------------------------------------------------- 1 | { 2 | "github_username": "darkterminal", 3 | "public_email": "d.darkterminal@gmail.com", 4 | "donation_link": "https://www.paypal.me/lazarusalhambra", 5 | "social_media": { 6 | "devto": "https://dev.to/darkterminal", 7 | "twitter": "https://twitter.com/panggilmeiam", 8 | "reddit": null, 9 | "hashnode": null, 10 | "mastodon": null, 11 | "facebook": null 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/collections/authors/mkubdev.json: -------------------------------------------------------------------------------- 1 | { 2 | "github_username": "mkubdev", 3 | "public_email": "Mkubdev@gmail.com", 4 | "donation_link": "https://github.com/sponsors/mkubdev", 5 | "social_media": { 6 | "devto": "https://dev.to/mkubdev", 7 | "twitter": "https://twitter.com/mkubdev", 8 | "reddit": null, 9 | "hashnode": null, 10 | "mastodon": null, 11 | "facebook": null 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/collections/stories/cpp/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StreetCommunityProgrammer/metaphore/b33bb2fbf223c452dfeceb510e09a19cd5bfdcb2/public/collections/stories/cpp/.gitkeep -------------------------------------------------------------------------------- /public/collections/stories/css/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StreetCommunityProgrammer/metaphore/b33bb2fbf223c452dfeceb510e09a19cd5bfdcb2/public/collections/stories/css/.gitkeep -------------------------------------------------------------------------------- /public/collections/stories/css/fixing-the-sticky-footer-issue-with-nextjs-and-tailwindcss.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Fixing the Sticky Footer Issue with Next.js and TailwindCSS 4 | author: darkterminal 5 | created_at: 2023-03-30T12:27:10Z 6 | language: css 7 | --- 8 | 9 | ### The Back Story about your CSS Metaphor 10 | 11 | As a software freestyle engineer, I'm always on the lookout for new and innovative ways to solve web design issues. One issue that has been bothering me lately is the sticky footer problem when using Next.js with TailwindCSS. When a website has a sticky footer, it stays at the bottom of the page, even if the content on the page is shorter than the screen height. However, when using Next.js with TailwindCSS, the sticky footer doesn't work as expected. So, I set out to find a solution that would fix this issue and make the sticky footer work seamlessly with Next.js and TailwindCSS. 12 | 13 | ### The CSS Story! 14 | 15 | #### The Formula 16 | This formula live on [Metaphore Website](https://metaphore.vercel.app) and this is second formula form the begin experiment [How to Fix the Next.js TailwindCSS Sticky Footer](https://metaphore.vercel.app/stories/css/how-to-fix-the-nextjs-tailwindcss-sticky-footer) 17 | ```jsx 18 | {/* Main Element */} 19 |
20 | {/* Content here */} 21 |
22 |
23 | {/* Footer content here */} 24 |
25 |
26 |
27 | ``` 28 | 29 | The metaphor above is a JSX element that can be used to fix the sticky footer issue when using Next.js with TailwindCSS. Let's take a closer look at how it works. 30 | 31 | #### Place The First Stone 32 | Add this class name in `body` element that use as your whole app layout. 33 | ```css 34 | min-h-screen flex flex-col relative pb-20 35 | ``` 36 | ![image](https://user-images.githubusercontent.com/32319439/228829653-4d872778-9ae7-4458-812e-0ce29eced5cb.png) 37 | 38 | This sets the minimum height of **the element to the full screen height** (`min-h-screen`), and creates a `flex` container with flex direction set to column (`flex-col`) **so that the content inside is stacked vertically**. The `relative` position is used to allow the child elements to be positioned relative to this parent container. Finally, the `pb-20` class adds a padding bottom of 80 pixels to the container. 39 | 40 | #### The Solution 41 | ![image](https://user-images.githubusercontent.com/32319439/228831085-497bd43c-5942-4157-b54e-7301d058f8df.png) 42 | 43 | Next, we have the content of the page, which is contained within the div element with the className `mt-auto`. The `mt-auto` class is used to push the content to the top of the container, while leaving the remaining space at the bottom for the footer. 44 | 45 | Finally, we have the footer element, which is contained within the div element with the className `footer absolute bottom-0 w-full`. The `footer` class is used to apply any styles specific to the footer, such as font size, color, and background color. The `absolute` position is used to position the element at the bottom of its parent container, and the `bottom-0` class is used to ensure it is flush with the bottom of the container. The `w-full` class is used to ensure the element spans the full width of its parent container. 46 | 47 | By using these classes in the right combination, we can create a sticky footer that works seamlessly with [Next.js](https://nextjs.org) and [TailwindCSS](https://tailwindcss.com). This solution ensures that the footer stays at the bottom of the page, even if the content on the page is shorter than the screen height. 48 | 49 | In conclusion, the sticky footer issue can be a frustrating problem to deal with, but by using the right combination of classes in our JSX element, we can solve this problem and create a seamless user experience for our website visitors. 50 | 51 | 52 | ### A CSS demo/repos link 53 | 54 | https://metaphore.vercel.app/stories/css 55 | 56 | ### PayPal Link for Donation (CSS Storyteller) 57 | 58 | https://paypal.me/larazusalhambra -------------------------------------------------------------------------------- /public/collections/stories/css/how-to-fix-the-nextjs-tailwindcss-sticky-footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: How to Fix the Next.js TailwindCSS Sticky Footer 4 | author: darkterminal 5 | created_at: 2023-03-26T04:45:12Z 6 | language: css 7 | --- 8 | 9 | ### The Back Story about your CSS Metaphor 10 | 11 | The issue we are trying to solve is when using TailwindCSS with Next.js, the sticky footer doesn't work as expected. 12 | 13 | ### The CSS Story! 14 | 15 | **How to fix the Next.js TailwindCSS sticky footer that is not fixed?** A sticky footer is a web design feature where the footer stays at the bottom of the page, even if the content on the page is shorter than the screen height. The issue we are trying to solve is when using TailwindCSS with Next.js, the sticky footer doesn't work as expected. 16 | 17 | To solve this issue, we need to create a custom document in the `_document.js` file located in the `src/pages` folder. This file allows us to modify the default HTML document rendered by Next.js. 18 | 19 | ```javascript 20 | import { Html, Head, Main, NextScript } from 'next/document'; 21 | 22 | export default function Document() { 23 | return ( 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | ); 32 | } 33 | ``` 34 | 35 | Adding the `flex flex-col min-h-screen` classes. This will make the `body` element a flex container with a vertical layout and set its minimum height to the height of the viewport. This is necessary to make the sticky footer work properly. 36 | 37 | After creating the custom document, we need to create a `Layout` component inside the `src/components` folder. The `Layout` component will be responsible for rendering our app's main content, including the navbar, the main content section, and the footer. 38 | 39 | ```javascript 40 | export default function Layout({ children }) { 41 | return ( 42 | <> 43 | 44 |
{children}
45 |