https://github.com/danwahlin/featured-content

Application framework that can be used to feature and filter content.
https://github.com/danwahlin/featured-content

Last synced: 14 days ago
JSON representation

Application framework that can be used to feature and filter content.

• Host: GitHub
• URL: https://github.com/danwahlin/featured-content
• Owner: DanWahlin
• License: mit
• Created: 2022-08-22T05:16:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-18T23:54:51.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T10:41:31.195Z (5 months ago)
• Language: TypeScript
• Homepage: https://danwahlin.github.io/Featured-Content/
• Size: 4.43 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Featured Content App

The `Featured-Content` repo provides a framework that can be used to feature and filter curated content. Visit https://danwahlin.github.io/Featured-Content to see an example of it in action.

## Using the Featured Content Functionality in Your Own Site

1. Clone this repo:

    ```

    git clone https://github.com/DanWahlin/Featured-Content.git

    ```

1. Create a new folder for your project (outside of the `Featured-Content` cloned repo from the previous step).

1. Create a folder named `public` in your project.

1. Create an `index.html` file in the `public` folder.

1. Add the following content into `index.html`:

    ```

    

    

    

        

        

        

        

        

        Featured Content

    

    

        


    


    

    ```

1. Copy the `public/data` folder from the `Featured-Content` repo to your `public` folder.

1. Copy the `public/images` folder from the `Featured-Content` repo folder to your `public` folder.

1. Run `index.html` using a web server to try it out locally. If you're working with VS Code you can use the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension to do it. After installing it, right-click on `index.html` and select `Open with Live Server`.

1. Modify the `public/data/siteContent.json` file in your project so that your custom curated content shows instead of the included sample data.

1. Publish your content (see below).

## Deployment to GitHub Pages

1. Create a repo for your project in [GitHub](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github).

1. Run `npm install gh-pages` in the root of your project.

1. Add the following script into `package.json`:

    ```

    "scripts": {

        "deploy": "gh-pages -d public"

    }

    ```

1. Run `npm run deploy` to deploy your code to the `gh-pages` branch in your repository.

1. Visit your GitHub Pages site at https://[your-username].github.io/[your-repo-name].

## Updating and Deploying this Project

1. Update the package version in `package.json`.

1. Update the readme (where the scripts & styles are hosted) so it uses the latest package version.

1. Run `npm run build` to build the project if you want to ensure it looks good first.

1. Run `npm run deploy` to deploy the project to GitHub Pages (it will do a build as well).