scottgallant.me

Smashing Magazine

This is the Smashing Magazine template, and this template has zero styling or media implementation.

Considerations

1. This template uses the client SDK for data-fetching, which is experimental and is subject to change in the future.
2. This application is written in Typescript.
3. Currently, this version doesn't support ISR.
4. We currently don't have pagination supported in this demo.

Local development

Install the project's dependencies:

yarn install

Run the project locally:

yarn dev

Local URLs

• http://localhost:3000 : browse the website
• http://localhost:3000/admin : Enter edit mode & use the CMS
• http://localhost:4001/altair/ : GraphQL playground to test queries and browse the API documentation

Code Layout

• .tina folder:
  1. __generated__ : This contains all the Tina generated types, queries, fragments and schema.
  2. components : This contains the TinaProvider.jsx and TinaDynamicProvider.jsx. The TinaDynamicProvider is used to wrap the whole _app.tsx with Tina but will only be used when in edit mode.
  3. models : This contains all of the collections for the Tina schema. If you change any of the content files, frontmatter names, update them here.
  4. queries : This file holds all the graphQL queries that retrieve article data, article data by category, or author.
  5. schema.ts : This file defines Tina's configuration and where you define the schema. The schema is made up of all the models in the models folder.
  6. utils.ts : This holds filenameToLabel function that turns the filename into a label for use in the Tina CMS UI.
• components folder:
  1. mdx-components: This contains all of the MDX components used for Smashing Magazine articles. For example CaptionedImage.
  2. layout: This is a basic layout file that Smashing Magazine can remove at any point, the Tina Team used it to create the navigation elements at the top of the page for the demo.
• pages folder:
  1. articles/: This contains an index.tsx and [slug].tsx.
     • The index.tsx will display all of the articles.
     • The [slug].tsx is a dynamic route that will show the article selected.
  2. authors/: This contains an index.tsx and [author].tsx.
     • The index.tsx displays all of the authors
     • The [author].tsx displays all articles written by the author selected.
  3. categories/: This contains an index.tsx and [category].tsx.
     • The index.tsx displays all of the categories
     • The [category].tsx displays all articles for the selected category.
  4. _app.tsx: This page is where Next.js handles pages for the application. This is also wrapped in <DynamicTina> which allows the editing experience.
  5. admin.tsx: This route allows a user to log in to Tina to create or edit content.
  6. index.tsx: The index page shows both featured articles and any other ones that aren't featured.

Content Layout

The content folder can be found at the root of the project and is based upon the original smashing magazine content folder:

1. The content folder has two sub folders content and data:

   • The content folder has the following sub folders:
     1. articles : Contains all the article MDX articles
     2. community-highlights: Currently empty
     3. guides: Currently empty
     4. the-smashing-newsletter: Currently empty
   • The data folder has the following sub folders:
     1. authors : Contains all the authors markdown files.
     2. categories: Contains all the categories markdown files

Creating MDX components

MDX components are the equivalent of Hugo shortcodes. 2 sample components have been created for demonstration: pullQuote & captionedImage

To add a new MDX component:

• Define a component in components/mdx-components
• Add the component (by name) to the list of templates for a given MDX field. (e.g: https://github.com/tinacms/smashing-mag-poc/blob/main/.tina/models/article.ts#L74)
• Register the MDX component on the frontend, within the TinaMarkdown plugin: https://github.com/tinacms/smashing-mag-poc/blob/main/pages/articles/%5Bslug%5D.tsx#L7

Useful Links

• Content Modeling
• Autogenerated GraphQL Client
• Contextual Editing
• Rich Text editing with MDX
• Extending Tina