{"id":26882719,"url":"https://github.com/edgarlr/magazine","last_synced_at":"2025-08-02T06:09:08.729Z","repository":{"id":53006408,"uuid":"311777627","full_name":"edgarlr/magazine","owner":"edgarlr","description":"Next.js Digital Magazine Starter Kit","archived":false,"fork":false,"pushed_at":"2021-04-10T01:24:38.000Z","size":1750,"stargazers_count":68,"open_issues_count":0,"forks_count":19,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-14T09:45:33.121Z","etag":null,"topics":["google-analytics","magazine","nextjs","react","strapi","strapi-cms","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://magazine-starter.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edgarlr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-10T20:32:28.000Z","updated_at":"2025-07-01T12:07:30.000Z","dependencies_parsed_at":"2022-09-08T06:42:10.572Z","dependency_job_id":null,"html_url":"https://github.com/edgarlr/magazine","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/edgarlr/magazine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarlr%2Fmagazine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarlr%2Fmagazine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarlr%2Fmagazine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarlr%2Fmagazine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edgarlr","download_url":"https://codeload.github.com/edgarlr/magazine/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgarlr%2Fmagazine/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268340172,"owners_count":24234676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-analytics","magazine","nextjs","react","strapi","strapi-cms","tailwindcss","typescript"],"created_at":"2025-03-31T16:55:16.223Z","updated_at":"2025-08-02T06:09:08.697Z","avatar_url":"https://github.com/edgarlr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Digital Magazine Starter Kit\n\n#### Live demo: [https://magazine-starter.vercel.app](https://magazine-starter.vercel.app)\n\nThis starter allows you to clone and deploy a fully customizable Digital Magazine in just a few clicks.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://res.cloudinary.com/dliiwavlg/image/upload/v1615423117/magazine_he7vqh.png\" width=\"450px\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n- Great performance and Accessibility\n- SEO and Social Media friendly (Open Graph and JSON-LD)\n- Responsive\n- UI Components\n- Dark and light theme\n- Offline support\n- Save articles to read offline\n- PWA Optimized (installable)\n- Preview unpublished content.\n- Search module and hooks.\n- Static Site Generated with Next.js\n- Dynamically generated sitemap\n- Content creation and managment from Strapi CMS (No code necessary).\n- Google Analytics\n\n## Built with:\n\n- Framework: [Next.js](https://nextjs.org)\n  - [TypeScript](https://nextjs.org/docs/basic-features/typescript)\n  - [CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support)\n  - [Tailwind](https://tailwindcss.com/docs)\n- CMS: [Strapi](https://strapi.com)\n- Other features\n  - [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers) for offline support.\n  - [IndexedDB](https://developers.google.com/web/ilt/pwa/working-with-indexeddb) for save articles.\n\n## Integrations\n\nThis project integrates out-of-the-box with [Magazine Strapi CMS](https://github.com/edgarlr/magazine-api).\n\n## Getting started\n\nCreate your own copy of this project by clicking the [\"Use this template\"](https://github.com/edgarlr/magazine/generate) button and filling the form.\n\n### Running locally\n\nFirst, you'll need to have the [Magazine Strapi CMS](https://github.com/edgarlr/magazine-api) running at [http://localhost:1337](http://localhost:1337). You can follow the instructions on that repo to set it up and get it running.\n\nThen, create a folder and `git clone` from your copy of this repository.\n\nInstall the dependencies and start the dev server.\n\n```bash\n  yarn install\n  yarn dev\n```\n\nThe dev server will run on [http://localhost:3000](http://localhost:3000). If it doesn't work make shure that:\n\n- You've added sample data to Strapi (Contributors, categories and articles are necessary)\n- You've set the Roles \u0026 Permissions to `find`on Contributors, Categories, articles and pages. (More info on [Magazine Strapi CMS](https://github.com/edgarlr/magazine-api) running locally instructions.)\n- You've set the `status` of each article and page to be `published`\n\n### Preview mode\n\nTo try it, create another post but before you set the status to published:\n\n- Set each variable from the `.env.example` into a new file called `.env.local`:\n  - `PREVIEW_SECRET`: can be any string (avoiding spaces). You're are gonna use it later on your CMS too.\n  - `API_URL`: should be set as `http://localhost:1337`(no trailing slash).\n- On your Strapi admin panel go to \"Settings\" \u003e \"Preview Content\"\n- Fill the input with your info, the URL should look like this. `http://localhost:1337/api/:contentType-preview?secret=\u003cyour-secret\u003e\u0026id=:id`\n- Last, go to any article or page and click the \"Preview\" button\n\n### Google Analytics\n\nThe projects is pre-configured to track the page views with google analytics.\nRead more on [Page views | Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages)\n\nYou only need to set the `GA_MEASUREMENT_ID` env variable with your measurement ID.\n\n### Finding your Measurement ID\n\n1. Sing in to [your Analytics Account](https://analytics.google.com)\n2. Go to **Admin** and select the property you want to track from the property column.\n3. Under **Property** click on **Streams**\n4. Select or create a new stream\n5. Your measurement id will be displayed at the top of the page.\n\n### Removing Google Analytics\n\nIf you prefer not to use Google Analytics, you can easily remove it.\n\nThe tracker consist on two main sections, the initial loading of the scripts on `_document.tsx` and the onRouterChange handler on `\\_app.tsx.\n\n#### Removing the initial loader\n\nIn `_document.tsx`, remove the two scripts inside the `HEAD` component. Make sure not to remove the entire component. The code after removing them should look like this.\n\n```jsx\nclass MyDocument extends Document {\n  // ...\n  render() {\n    return (\n      \u003cHtml lang=\"en\"\u003e\n        \u003cHead /\u003e\n        \u003cbody\u003e\n          \u003cMain /\u003e\n          \u003cNextScript /\u003e\n        \u003c/body\u003e\n      \u003c/Html\u003e\n    )\n  }\n}\n```\n\n#### Removing the onRouterChange handler\n\nIn `_app.tsx` you can comment or remove all the code before the `return`. Remember to remove the `useEffect` and `useRouter` imports as well.\nThe component after removing it should look like this.\n\n```jsx\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cUIProvider\u003e\n      \u003cListProvider\u003e\n        \u003cHead /\u003e\n        \u003cComponent {...pageProps} /\u003e\n      \u003c/ListProvider\u003e\n    \u003c/UIProvider\u003e\n  )\n}\n```\n\n**NOTE**\nIf you're trying to deploy to vercel the `GA_MEASUREMENT_ID` variable will still be needed, but since you have removed all the code that will use it, you can simply fill the field with dummy text.\n\n## Deployment\n\nYou'll need to deploy your Strapi CMS first and have your api URL.\n\nClick this button below to clone and deploy this project on [vercel](https://vercel.com).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world\u0026env=API_URL,PREVIEW_SECRET,GA_MEASUREMENT_ID\u0026envDescription=API%20Keys%20needed%20for%20the%20application%2C%20preview%20mode%20and%20google%20analytics\u0026envLink=https%3A%2F%2Fgithub.com%2Fedgarlr%2Fmagazine%23preview-mode\u0026project-name=magazine\u0026repo-name=magazine\u0026demo-title=Digital%20Magazine\u0026demo-description=All-in-one%20digital%20magazine%20starter%20kit.\u0026demo-url=https%3A%2F%2Fmagazine-starter.vercel.app\u0026demo-image=https%3A%2F%2Fres.cloudinary.com%2Fdliiwavlg%2Fimage%2Fupload%2Fv1615997486%2FScreen_Shot_2021-03-17_at_10.10.22_jle2xq.png)\n\nOr you can take a look at the docs to [deploy Next.js](https://nextjs.org/docs/deployment).\n\nDon't forget to update your environment variables:\n\n- `PREVIEW_SECRET`: Can be any string (avoiding spaces). It must be same as on your CMS.\n- `API_URL`: URL of your strapi backend. (No trailing slash).\n\n## Customize\n\n### Constants and default SEO\n\n`lib/constants.ts` contains a list of variables you should customize\n\n### Icons and favicon\n\n`public/static/favicon` contains all the icons and favicons. I generated the icons on [https://realfavicongenerator.net](https://realfavicongenerator.net). Generate your own and replace the old ones.\n\nYou need to generate the dark mode icons too and name them as `dark-16x16.png` and `dark-32x32.png`\n\n### Sitemap\n\nThe sitemap will be generated dynamically using the `lib/constants` info but you need to also configure the site URL on `public/robots.txt`\n\n### Search caveats\n\nDue heroku sleep problem the search hook is really slow. If you're gonna deploy the strapi cms to any platform other than heroku you can uncomment the seach hook and it should work fine. Otherwise, to prevent a slow search, the page will be statically genarated with **ALL** the published articles and run a local search instead.\n\n## License\n\n[MIT License](https://github.com/edgarlr/magazine/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgarlr%2Fmagazine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedgarlr%2Fmagazine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgarlr%2Fmagazine/lists"}