📰 Enlightenment News

🙋‍♀️ 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.