Skip to content

Commit

Permalink
Feat: new homepage (#41)
Browse files Browse the repository at this point in the history
- New hero style
- The features section is split into developers and editors sections
- Subpages for all features at /features/developer/ and /features/editor/. I am not happy with this, so I would like to update it soon
- New style for the pro help section
- Links to the blog and community pages at the bottom. I see room for improvement here also
- New footer
- Update CMS - remove old collections, update current
- new global fonts
- New global button style
- Add features template
- New menu style and GitHub button
- Replace `StaticQuery` with `useStaticQuery`
- Remove notifications
- Update Releases (but hide it because it's WIP)
- Add the 404 page
  • Loading branch information
martinjagodic authored Mar 21, 2024
1 parent dd3da09 commit b1df564
Show file tree
Hide file tree
Showing 63 changed files with 1,476 additions and 1,175 deletions.
51 changes: 51 additions & 0 deletions content/features/developer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
title: Developer features
description: If you're a developer looking for a new CMS, these are the features of Decap that could be interesting to you.
image: /img/og-image.png
features:
- title: Git Workflow
description: |-
Decap CMS is built with a Git-based workflow in mind. Decap is designed to be used with a Git-based workflow, allowing you to manage your content and code in a single repository.
- title: Open Source
description: |-
Decap CMS is open source and free to use. You can contribute to the project, report bugs, request features, and discuss ideas on GitHub.
- title: Part of the Jamstack
description: |-
Decap CMS is part of the Jamstack ecosystem. It is designed to work with static site generators and other Jamstack tools.
- title: Works with any static site generator
description: |-
You can use Decap CMS with any static site generator, such as Gatsby, Hugo, Jekyll, Next.js, and many more. If the SSG supports storing content in a Git repository, it will work with Decap CMS.
- title: Easy installation and configuration
description: |-
Decap CMS is easy to install and configure. You can install Decap CMS by adding two files to your source code. The configuration is done through a simple configuration file.
- title: Customizable
description: |-
Decap CMS is built with React and you can extend it as such. Write custom editor components, custom widgets, and custom previews to fit your needs.
- title: Backend and authentication
description: |-
Decap CMS supports authentication with GitHub, GitLab, and Bitbucket, but you can also use your own backend and authentication.
- title: Supports many file types
description: |-
Decap CMS supports many file types, such as Markdown, JSON, YAML, TOML, XML, and CSV.
- title: Open Authoring
description: |-
Decap CMS supports open authoring, allowing you to accept contributions from your community.
- title: Media Library
description: |-
Decap CMS has a media library, allowing you to manage images, videos, and other files. For more advanced use cases, Decap provides a plugin system to extend the media library. Cloudinary and Uploadcare plugins are already included.
- title: Localization
description: |-
Decap CMS supports localization, allowing you to manage content in multiple languages.
- title: Flexible content types
description: |-
Decap CMS allows you to define custom content types and fields, allowing you to model your content in a way that fits your needs.
- title: Powerful relation widgets
description: |-
Decap CMS has powerful relation widgets, allowing you to link content together. You can use relation widgets to create relationships between content types, such as linking blog posts to authors, or products to categories.
- title: Configurable Slugs
description: |-
Decap CMS allows you to configure slugs, allowing you to define how URLs are generated and files stored.
- title: Easy local development
description: |-
You can run Decap CMS locally to develop and test your content with `npx decap-server`.
---
27 changes: 27 additions & 0 deletions content/features/editor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: Editor features
description: All Decap CMS features for editors.
image: /img/og-image.png
features:
- title: Intuitive, fast UI
description: |-
Decap CMS has an intuitive, fast UI that allows you to create, edit, and manage content with ease. The editor is designed to be simple and easy to use, allowing you to focus on your content.
- title: Real-time preview
description: |-
Decap CMS enables developers to configure a real-time preview, allowing you to see how your content will look before publishing. The preview is updated as you type, allowing you to see your changes instantly.
- title: Editorial workflow
description: |-
Decap CMS has an editorial workflow, allowing you to set a status for each entry.
- title: Media library
description: |-
Decap CMS has a media library, allowing you to manage images, videos, and other files. For more advanced use cases, Decap provides a plugin system to extend the media library. Cloudinary and Uploadcare plugins are already included.
- title: I18n support
description: |-
Decap CMS supports localization, allowing you to manage content in multiple languages.
- title: Search
description: |-
Decap CMS has a powerful search feature, allowing you to find content quickly and easily.
- title: Nested collections
description: |-
Decap CMS allows you to create nested collections, allowing you define entries with same layouts in subfolders.
---
32 changes: 16 additions & 16 deletions content/pages/community.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,46 @@ sections:
channels:
- title: Contributor guide
description: Instructions for contributing to the project
cta:
link:
href: /docs/contributor-guide
label: Read the guide
text: Read the guide
- title: Open Collective
description: Financially support Decap CMS on Open Collective
cta:
link:
href: https://opencollective.com/decap
label: Support Us
text: Support Us
- title: GitHub Sponsors
description: Financially support Decap CMS via GitHub Sponsors
cta:
link:
href: https://github.com/sponsors/decaporg
label: Sponsor Us
text: Sponsor Us
- title: Communication
channels:
- title: Decap CMS Discord
description: Live community chat for all things Decap CMS.
cta:
link:
href: /chat
label: Join the chat
text: Join the chat
- title: GitHub Issues
description: Report bugs, request features, and comment on existing issues.
cta:
link:
href: https://github.com/decaporg/decap-cms/issues
label: View issues
text: View issues
- title: GitHub Discussions
description: Ask questions and discuss ideas.
cta:
link:
href: https://github.com/decaporg/decap-cms/discussions
label: View discussions
text: View discussions
- title: Help
channels:
- title: Professional help
description: The team of maintainers offers a range of professional services to help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
cta:
link:
href: /services
label: Find out more
text: Find out more
- title: Community help
description: Get help from the community on our Discord server's help channel.
cta:
link:
href: /chat
label: Join the chat
text: Join the chat
---
19 changes: 16 additions & 3 deletions data/global.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
footer:
buttons:
- name: "GitHub"
url: "https://github.com/decaporg/decap-cms"
logo: "/img/decap-logo-white.svg"
maintained: "Maintained with care by [PM TechHub](https://techhub.p-m.si/) and amazing contributors"
links:
- text: "Distributed under MIT License"
href: "https://github.com/decaporg/decap-cms/blob/master/LICENSE"
- text: "Contributing Guide"
href: "https://github.com/decaporg/decap-cms/blob/master/CONTRIBUTING.md"
- text: "Code of Conduct"
href: "https://github.com/decaporg/decap-cms/blob/master/CODE_OF_CONDUCT.md"
socials:
- text: "Join us on Discord"
href: "https://decapcms.org/chat"
- text: "Follow on X"
href: "https://twitter.com/Decap_CMS"
- text: "GitHub Repository"
href: "https://github.com/decaporg/decap-cms/"
146 changes: 90 additions & 56 deletions data/landing.yaml
Original file line number Diff line number Diff line change
@@ -1,72 +1,106 @@
hero:
headline: "Open source content management for your Git workflow"
subhead: "Use Decap CMS with any static site generator for a faster and more flexible web project"
devfeatures:
- feature: "Static + content management = ♥"
description: "Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content."
- feature: "An integrated part of your Git workflow"
description: "Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git."
- feature: "An extensible CMS built on React"
description: "Decap CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs."
headline: "Open source content management for your Git workflow"
subhead: "Use Decap CMS with any static site generator for a faster and more flexible web project"
buttons:
- text: "Get started in the docs"
href: "/docs"
- text: "Try the interactive demo"
href: "https://demo.decapcms.org"
class: "secondary"
developers:
title: "For Developers"
id: "developers"
link:
href: "#editors"
text: "For Editors"
button:
text: "All Developer Features"
href: "/features/developer/"
features:
- title: "Integral part of the Jamstack "
description: "Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the Jamstack on [jamstack.org](https://jamstack.org)."
image: "jamstack-scheme.png"
- title: "Works with most frontend tools"
description: "You can add Decap CMS to any static site generator, meta-framework, or other tool that stores content in Git. "
image: "frontend-tools.png"
- title: "Install, configure, and extend with ease"
description: "Install Decap by adding to files to your site, then configure everything in a YAML file. Extend with ease with React: create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs. See Add to your site to get started."
image: "configure.png"
templateBanner:
title: "Getting started is *simple and free.*"
hook: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click."
button:
text: "Start with a template"
href: "/docs/start-with-a-template/"
editors:
title: "For Editors"
id: "editors"
link:
href: "#developers"
text: "For Developers"
button:
text: "All Editor Features"
href: "/features/editor/"
features:
- title: "Editor-friendly user interface"
description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads."
image: "feature-editor.svg"
- title: "Intuitive workflow for content teams"
description: "Writers and editors can easily manage content from draft to review to publish across any number of custom content types."
image: "feature-workflow.svg"
- title: "Instant access without GitHub account"
description: "With [Git Gateway](/docs/git-gateway-backend/#git-gateway-with-netlify-identity), you can add CMS access for any team member — even if they don’t have a GitHub account. "
image: "feature-access.svg"
awards:
title: "Awards"
description: "Decap was recognized with these awards"
items:
- title: "Software Reviews Gold Medal 2023"
href: "https://www.softwarereviews.com/categories/content-marketing?entitlement=gold_medal_Decap_CMS_%28formerly_Netlify%29_data_quadrant_awards_2023_content_marketing&utm_medium=badge&utm_source=netlify"
image: "/img/sr-gold_medal-2023.png"
cta:
primaryhook: "Getting started is simple and free."
primary: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click."
button: "[Get started](/docs/start-with-a-template/)"

editors:
hook: "A CMS that developers and content editors can agree on"
intro: "You get to implement modern front end tools to deliver a faster, safer, and more scalable site. Editors get a friendly UI and intuitive workflow that meets their content management requirements."
features:
- feature: "Editor-friendly user interface"
description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads."
imgpath: "feature-editor.svg"
- feature: "Intuitive workflow for content teams"
description: "Writers and editors can easily manage content from draft to review to publish across any number of custom content types."
imgpath: "feature-workflow.svg"
- feature: "Instant access without GitHub account"
description: "With [Git Gateway](/docs/git-gateway-backend/#git-gateway-with-netlify-identity), you can add CMS access for any team member — even if they don’t have a GitHub account. "
imgpath: "feature-access.svg"

services:
hook: "Do you need professional help?"
intro: "The team of maintainers offers a range of professional services to help you get the most out of Decap CMS."
title: "Professional Help?"
description: "The team of maintainers offers a range of professional services to help you get the most out of Decap CMS."
features:
- feature: "Onboarding"
description: "Get up to speed quickly with a customized onboarding program tailored to your team and project."
cta:
href: "/services/"
label: "Find out more"
- feature: "Priority Support"
- title: "Priority Support"
className: "support"
image: "support.png"
description: "Benefit from a dedicated support line and priority ticket handling."
cta:
button:
href: "/services/"
label: "Find out more"
- feature: "Custom Features Development"
description: "Sponsor the development of custom features or integrations to meet your specific needs."
cta:
text: "Find out more"
- title: "Onboarding"
className: "onboarding"
image: "onboarding.png"
description: "Get up to speed quickly with a customized onboarding program tailored to your team and project."
button:
href: "/services/"
label: "Find out more"
- feature: "Building Websites with Decap CMS"
description: "See the list of trusted partners that build websites with Decap CMS."
cta:
text: "Find out more"
- title: "Custom Features Development"
className: "development"
image: "development.png"
description: "Sponsor the development of custom features or integrations to meet your specific needs."
button:
href: "/services/"
label: "Find out more"
text: "Find out more"
blog:
title: "From the Blog"
hook: "Why git-based CMS is the future of content management"
text: |-
* Utilize the power of Git versioning and history. No backup needed
community:
hook: "Supported by a growing community"
features:
- feature: "Built on the Jamstack"
description: "Decap CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to server-side CMS like WordPress, this means better performance, higher security, lower cost of scaling, and a better developer experience. You can learn more about the Jamstack on [jamstack.org](https://jamstack.org)."
- feature: "Support when you need it"
description: "Get up and running with comprehensive [documentation](/docs) and templates or work through difficult problems in our [community chat](https://decapcms.org/chat)."
- feature: "A community-driven project you can help evolve"
description: "Decap CMS is built by a community of more than 100 contributors — and you can help. Read the [contributing guide](/docs/contributor-guide) to join in."
contributors: "Made possible by awesome contributors"
* Work on the same branching and environments system as your code.
* No need for a database and server - get this from your existing Git provider.
image: "blog.png"
button:
text: "More on our blog"
href: "/blog/2023/11/git-based-cms-definition-features-best-practices/"
community:
title: "Community"
hook: "A community-driven project you can help evolve"
text: "Decap CMS is built by a community of more than 100 contributors — and you can help. Read the [contributing guide](/docs/contributor-guide) to join in."
image: "community.png"
button:
text: "About the community"
href: "/community/"
40 changes: 0 additions & 40 deletions data/notifications.yml

This file was deleted.

4 changes: 4 additions & 0 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ exports.createPages = async ({ graphql, actions }) => {

const docPage = path.resolve('./src/templates/doc-page.js');
const blogPost = path.resolve('./src/templates/blog-post.js');
const featurePage = path.resolve('./src/templates/feature-page.js');

// get all markdown with a frontmatter path field and title
const allMarkdown = await graphql(`
Expand Down Expand Up @@ -59,6 +60,9 @@ exports.createPages = async ({ graphql, actions }) => {
if (slug.includes('blog/')) {
template = blogPost;
}
if (slug.includes('features/')) {
template = featurePage;
}

createPage({
path: slug,
Expand Down
Loading

0 comments on commit b1df564

Please sign in to comment.