Skip to content

yasminzy/enlightenment-news

Repository files navigation

📰 Enlightenment News

Netlify Status

🙋‍♀️ Introduction

This is a Nuxt 3 news site demo.

Item Link
Animation AOS
API The Guardian
CSS UnoCSS, sanitize.css
Formatter Prettier
Framework Nuxt
Hosting Netlify
Icon Feather Icon
Lazy loading Vue Lazyload
Link catcher Nuxt 3 Interpolation
Linter ESLint
Loading indicator NProgress
Store Pinia
Utilities VueUse

👩‍💻 Get Started

  1. Clone this repo.

    git clone https://github.com/yasminzy/enlightenment-news.git
  2. Install the packages.

    pnpm i --shamefully-hoist
  3. Register for a developer key. Copy the API key.

  4. Create a .env file in the project root and paste the key there.

    GUARDIAN_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  5. Start the development or generate the pages for production.

    # Development
    pnpm dev
    
    # Production
    pnpm generate

📁 Page Explanation

The homepage is in index.vue. There are 2 sections: featured (components/HomeFeatured.vue) and top-rated (components/HomeTopRated.vue). Both use the store (stores/home.js).

The search page is in search/. The index.vue one only shows the search box (components/SearchBox.vue), which uses the store as well (stores/search.js). When performing a search, we will get to the [query].vue one.

The [id].vue is for the article. It is dynamic, like [section].vue and [tag].vue, but it is prioritized. It means that if it is not clear which one is the right place for the content, e.g. when refreshing the page, we will be pointed to [id].

In [id], we check if it is a section or tags page. We will go there if that is the case. And if the content is not accessible with our developer key, the page will be redirected to the original page on The Guardian website.

We catch the links to another The Guardian article and remove the original domain so we can show them on this website. However, we will get an error page with just this. So, we catch them with [...slug].vue and go to [id].vue again.