Launch Portals is a dynamic web application designed for developers, marketers, and project managers to showcase and monitor their digital projects. This tool not only provides quick links to projects, repositories, websites, apps, and social media pages but also crucially displays and verifies the metadata of each link for SEO optimization.
Users can easily ensure that their projects are presented correctly across platforms by checking Open Graph tags and other metadata in real-time. Whether you're launching a new app or managing an existing portfolio, Launch Portals helps you maintain control over how your projects appear to the world, enhancing visibility and consistency across the web.
Feel free to Fork this repo and make it your own. Add Portal cards with plaintext (and/or HTML), markdown, photos, files, or links to your work. Expand the columns how you see fit, vertically and horizontally. The sky is the limit with Launch Portals!
- Visit the application to see it in action here.
Fully customizable "Portals".
Error handling if content cannot be rendered.
- Features
- Background Story
- Getting Started
- Portals
- Closing
- What's Next?
- Project
- Contributing
- Resources
- License
- Credit
- Fully customizable
- Mobile friendly
- Easy navigation
- Quick to get up and running with your own variation
- Up arrow for easy page scrolling
- Free to host and deploy using Netlify and GitHub
I wanted to create a website that showcased my projects without adding my product designs to my repository. I decided to use an API to call and render my product images using the <meta> tags in the <head> tag of my websites. This way, I could verify I correctly set up each meta tag to ensure SEO optimization. I also wanted to add photos, files, social profiles, and other content to my website to make it more personal.
-
Install the Gatsby CLI
npm install -g gatsby-cli
-
Run the development server
gastby develop
-
View the website at
http://localhost:8000
-
Generate a full static production build
gatsby build
-
Preview the site as it will appear once deployed
gatsby serve
-
View the website at
http://localhost:9000 -
Commit to GitHub
-
Create a new site on Netlify
-
Connect your GitHub account
-
Select your repository
-
Click
Deploy Site -
View your website at
https://<your-site-name>.netlify.app -
Optionally, you can also setup a custom domain name for your website
-
If you plan on deploying to Netlify, you can optionally download Netlify CLI to run Netlify functions on your local to ensure proper integration come deployment time.
You can easily configure this website to your liking by following the steps below, changing it from a full website to a preview landing page for your product or app:
-
Open the
src/components/config.jsfile -
Update the
configobject with your information```js export const CONFIG = { localTesting: false, // Set to true to use Netlify's Server Caching showPortalIcons: true, // Set to true to show the Portal type icon in the upper left hand corner of the portal }; ```[!NOTE] I used Microlink API to pull the
metatags from my websites into structured data to be displayed in each Portal. Because the free tier is subject to a soft limit of 50 unauthenticated requests a day, I decided to use Netlify functions to cache the data server side. If you're testing on local, I cache it in the browser. So be sure to setlocalTestingtotrueif you're developing on your local, otherwise it should be set tofalsefor Netlify depoloyment.
Below is a list of the main files you can customize to your liking:
src/components/config.js- contains the site configuration (see above).src/components/custom- custom portal styles and code goes here.src/components/PortalGrid.js- the main driving logic of the website.src/components/layout.css- the mainCSSfile of the website.src/components/seo.js- contains the site SEO. You can easily customize the SEO by editing thesiteMetadatatree.src/images- directory contains theicon.pngused for the site favicon and other places a small icon is needed.src/pages/index.js- site index file.src/portals- place your portals here, eachmarkdownfile will be a card/block inside the overall grid.src/styles/global.css- globalCSSstyles, adjust the color and font in this file for overall customization to fit your needs.src/templates/portalTemplate.js- template file used withPortalGrid.js.static/files- place your files for your file portal types here.static/images- place your images for your photo portal types here.netlify/functions/fetchMetadata.js- server side function for requesting site metadata using Microlink API.netlify.toml- used to setup the Netlify directory above for the server side.- In the root directory, you can also edit the
gatsby-config.jsfile to change the site metadata, colors, titles, and other information.
A Portal is what I refer to as a dynamic card that goes inside the overall Launch Portals column/row based grid. There are a few different types of Portals you can utilize out of the box, more on that below.
Inside the src/portals directory, you can add markdown files with information about each of your portals.
- I like to name the file using the following naming convention:
A-B-C-D.md-A= Portal Order -B= Portal Type -C= Project Type -D= Project Name- Examples: -
1-Photo-Banner.md-9-Custom-Clock.md-10-File-Resume.md-11-Markdown-Example.md-32-Link-Social-GitHub.md
Tip
This naming convention is of course optional, the application does not care what the name of the files are, just that its a .md extension and that its properly formatted to pick up your Portal information (following Portal Config below).
Add as many Portals you like and the application will loop through this folder to display each one.
Utilize the following query parameters for GraphQL to render your Portal content.
type: String- see the breakdown of Portal Types below.order: Int- this is the order you want your Portals to appear in the overall Launch Portals grid.text: String- text used fortextPortal types, this also supportsHTMLformatting/tags.markdown: String- write markdown in this field for themarkdownPortal type.photo: String- put your url path (pointing towardsstatic/images) of your photo you'd like to use for aphotoPortal type.file: String- put your url path (pointing towardsstatic/files) of your file you'd like to use for afilePortal type.fileTitle : String- the title you would like to use to display yourfilePortal type.link: String- put your url path (external) to your website you would like to display using alinkPortal type.custom: String- use a keyword here to describe yourcustomPortal type. You will need to adjust the logic in thesrc/components/PortalGrid.jsfile to handle this.vportals: Int- adjust how many Portals your single Portal will expand vertically.hportals: Int- adjust how many Portals your single Portal will expand horizontally.
- Example: `
type: link order: 43 link: https://www.buymeacoffee.com/scottgriv
`
Important
Regarding vportals above, there is no limit on how many Portals your content can take up, but keep in mind, it may give off a strange appearance if you're crossing too many Portals at once so you may need to tinker around with it.
Regarding hportals above, the max is 3 across on Desktop, and 2 across on mobile.
Portals that expand 3 across will automatically be rendered to 2 on mobile, so please keep this in mind. It's important to check both Desktop and Mobile layouts to ensure you're satisfied with the layout.
Regarding #1 above, type, there are 6 different Portal types you can utilize.
- Place the type you want to use in
typequery parameter.
| Icon | Type | Usage |
|---|---|---|
  |
text | display text or HTML |
  |
markdown | display markdown |
  |
image | display an image |
  |
file | host a downloadable file |
  |
link | link to an external website or project |
  |
custom | use a keyword here to use inside the custom switch statement logic in the renderPortalContent function inside the src/components/PortalGrid.js file. |
  |
unknown | this is not an actual type, but a placeholder will be used if a valid type is not found above. |
Warning
Be sure to add the keyword you used inside of the custom tag above inside the switch statement.
Example:
{node.frontmatter.custom === "animation" ? (
<PortalAnimation />
) : node.frontmatter.custom === "clock" ? (
<ClockWidget />
)Note
Each Portal type has an icon indicator associated with it, located in the upper left hand corner of each Portal.
You can disable this indicator by setting showPortalIcons to false in the config.js file if you do not want to display it.
Thank you for taking the time to read through this document and I hope you find it useful! If you have any questions or suggestions, please feel free to reach out to me.
Please reference the SUPPORT file in this repository for more details
I'm looking forward to seeing how this project evolves over time and how it can help others with their GitHub Portfolio.
Please reference the CHANGELOG file in this repository for more details.
Please reference the GitHub Project tab inside this repository to get a good understanding of where I'm currently at with the overall project.
- Issues and Enhancements will also be tracked there as well.
Feel free to submit a pull request if you find any issues or have any suggestions on how to improve this project. You can also open an issue with the tag "bug" or "enhancement".
- How to contribute:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/Business-Website) - Commit your Changes (
git commit -m 'Add new feature') - Push to the Branch (
git push origin feature/Business-Website) - Open a Pull Request
Please reference the CONTRIBUTING file in this repository for more details.
- Gatsby - A framework for building static websites and web applications using React.
- Gatsby - SEO Component - A guide for adding SEO optimizations to Gatsby projects.
- Netlify - A platform for hosting static sites with automatic deployment from Git repositories.
- Netlify CLI - Netlify’s command line interface (CLI) lets you configure continuous deployment straight from the command line. You can use Netlify CLI to run a local development server that you can share with others, run a local build and plugins, and deploy your site.
- React - A JavaScript library for building dynamic user interfaces.
- Font Awesome - A toolkit for web icons and social logos, customizable via CSS.
- Meta Tags - A tool for previewing and generating meta tags for better SEO and social media sharing.
- Microlink API - An API for turning websites into structured data.
- Microlink API - Rate Limits - Documentation on the usage limits of the Microlink API.
- Meta Tags: What They Are & How to Use Them for SEO - Meta Tag for SEO Guide.
- SEO Basics: How to Do SEO for Beginners - Search Engine Optimization Guide.
- LogWork - Time and Clock Widgets - Free Time and Clock Widgets using LogWork (currently being used for a
customportal in the app demo). - LogWork - Free Tools - Free Widgets and Themes for Your Website or Blog using LogWork.
This project is released under the terms of the GNU General Public License, version 3 (GNU GPLv3), which ensures that derivatives of the software remain open source.
- The GNU GPLv3 is a "copyleft" license, ensuring that derivatives of the software remain open source and under the GPL.
- For more details and to understand all requirements and conditions, see the LICENSE file in this repository.
Author: Scott Grivner
Email: [email protected]
Website: scottgrivner.dev
Reference: Main Branch
