|
1 | | -# Modern Developer Digital Garden Starter |
| 1 | +# My digital garden |
2 | 2 |
|
3 | | - |
4 | | -[More screenshots here](/screenshots/) |
| 3 | +Based on [https://github.com/thedevdavid/digital-garden](https://github.com/thedevdavid/digital-garden) |
5 | 4 |
|
6 | | -[](https://vercel.com/new/git/external?repository-url=https://github.com/thedevdavid/digital-garden) |
7 | | - |
8 | | -An open source digital gardening template for developers using [Next.js](https://nextjs.org/) app router, MDX, [Contentlayer](https://contentlayer.dev/), [Tailwind CSS](https://tailwindcss.com/), [@shadcn/ui](https://ui.shadcn.com/) , [Lucide Icons](https://lucide.dev/icons), and more. |
9 | | - |
10 | | -This project is from developers for developers. Please feel free to report a bug, discuss the current state, submit ideas for improvements, submit a fix, propose new features, or whatever you want. All contributions are welcome! Read more at the [contributing guidelines](./CONTRIBUTING.md). |
11 | | - |
12 | | -If you love this template and/or use it, please give it a star on GitHub. This will help more people discover it, thus help improving the template. |
13 | | - |
14 | | -[]( |
15 | | - |
16 | | -**Note: This project is always evolving and it's far from being perfect or even done.** I'm always open to suggestions and contributions. Feel free to open an issue or a PR if you have any ideas or suggestions. You can also see the [roadmap](#features--roadmap) for planned features if you want to contribute. |
17 | | - |
18 | | -## Table of Contents |
19 | | - |
20 | | -- [Motivation](#motivation) |
21 | | -- [Getting Started](#getting-started) |
22 | | - - [Writing content](#writing-content) |
23 | | - - [Deployment](#deployment) |
24 | | -- [Customization](#customization) |
25 | | - - [Fonts](#fonts) |
26 | | - - [Colors](#colors) |
27 | | - - [Metadata](#metadata) |
28 | | - - [Analytics](#analytics) |
29 | | - - [Newsletter subscription](#newsletter-subscription) |
30 | | - - [Hero section](#hero-section) |
31 | | - - [Other tips & tricks](#other-tips--tricks) |
32 | | - - [Image optimization](#image-optimization) |
33 | | -- [Examples](#examples) |
34 | | -- [Features & Roadmap](#features--roadmap) |
35 | | - |
36 | | -## Motivation |
37 | | - |
38 | | -As a developer who creates content, I want to have a digital garden where I can share my thoughts and ideas with the world. Now, there's not really a "perfect solution" for this currently. With included analytics, SEO, email subscribtions, modern tooling, simple design, etc. We either have to build one from scratch, use a design template and code the features, or use a CMS/no-code tool. |
39 | | - |
40 | | -So I decided to build a solution that I would use myself. This is the result. |
41 | | - |
42 | | -## Getting Started |
43 | | - |
44 | | -1. Use the repo as a template |
45 | | -2. Install dependencies with `pnpm install` |
46 | | -3. Edit `utils/metadata.ts` with your information |
47 | | -4. Edit `utils/usesData.ts` with your information |
48 | | -5. Edit `utils/projectsData.ts` with your information |
49 | | -6. Edit `content/pages/now` with your information |
50 | | -7. Edit `content/pages/about` with your information |
51 | | -8. Run the development server with `pnpm dev` |
52 | | - |
53 | | -Open [http://localhost:3000](http://localhost:3000) in your browser to see the result. |
54 | | - |
55 | | -### Writing content |
56 | | - |
57 | | -You can write content in Markdown or MDX. The content is located in `content/` and is organized in folders. The `pages` folder contains the pages. The `posts` folder contains the blogposts. The `projects` folder contains the projects. |
58 | | - |
59 | | -### Deployment |
60 | | - |
61 | | -You can deploy the project with [Vercel](https://vercel.com/) or any other hosting provider. If you want to use Vercel, you can use the button at the top of this README. |
62 | | - |
63 | | -1. Update `package.json` author information |
64 | | -2. Set up the `NEXT_PUBLIC_BASE_URL` environment variable on Vercel to point to your digital garden's root URL |
65 | | -3. Build and deploy |
66 | | - |
67 | | -## Customization |
68 | | - |
69 | | -### Fonts |
70 | | - |
71 | | -This project uses [Inter](https://rsms.me/inter/) as the default font. You can change it on `app/layout.tsx` using the `next/fonts` package. |
72 | | - |
73 | | -### Colors |
74 | | - |
75 | | -The project uses Tailwind colors and @shadcn/ui config. Customize the colors on `globals.css`. |
76 | | - |
77 | | -### Metadata |
78 | | - |
79 | | -You can change the metadata in `utils/metadata.ts`. This will be used around the site for social links, handles, SEO, and OG. |
80 | | - |
81 | | -### Analytics |
82 | | - |
83 | | -_WIP_ as I'm still deciding which analytics tools to support. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself. |
84 | | - |
85 | | -### Newsletter subscription |
86 | | - |
87 | | -_WIP_ as I'm still deciding which email tools to support. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself. |
88 | | - |
89 | | -### Hero section |
90 | | - |
91 | | -You can choose between 3 different hero variants to use in `app/(site)/layout.tsx`. |
92 | | - |
93 | | -1. `Simple` - A simple centered hero section with image, title, socials, and subtitle. |
94 | | -2. `Video` - 2 column hero section with Videoask embed on one side and title and subtitle on the other. |
95 | | -3. `Image` - 2 column hero section with image on one side and title, socials, and subtitle on the other. |
96 | | - |
97 | | -### Other tips & tricks |
98 | | - |
99 | | -#### Image optimization |
100 | | - |
101 | | -Optimize images in seconds for free with ImageOptim. Install on your Mac, then open the `public` folder in Finder. Select all images, right-click, and choose "Open with > ImageOptim". This will optimize all images in the folder. |
102 | | - |
103 | | -## Examples |
104 | | - |
105 | | -- [https://davidlevai.com/](https://davidlevai.com/) |
106 | | - |
107 | | -Create a PR and add your digital garden to this list if you're using the template! |
108 | | - |
109 | | -## Features & Roadmap |
110 | | - |
111 | | -- [x] Basic functionality of reading pages and posts |
112 | | -- [x] Basic design dark/light mode |
113 | | -- [x] MDX code highlighting |
114 | | -- [x] Readme.md |
115 | | -- [x] `robots.txt` & `sitemap.xml` |
116 | | -- [x] RSS Feed |
117 | | -- [x] Reading time estimate |
118 | | -- [x] LICENSE |
119 | | -- [x] contributing.md |
120 | | -- [x] MDX components (TOC & footnotes) |
121 | | -- [x] general config & metadata (author, URL, socials, etc.) |
122 | | -- [x] uses page |
123 | | -- [x] Link in bio page |
124 | | -- [x] OG image generation |
125 | | -- [x] projects page |
126 | | -- [x] about section on homepage |
127 | | -- [ ] Design improvements (whitespace, layout, etc.) |
128 | | -- [ ] `manifest.json` |
129 | | -- [ ] search & command bar |
130 | | -- [ ] newsletter integration |
131 | | -- [ ] Post series |
132 | | -- [ ] Hidden content (behind email subscription) |
133 | | -- [ ] 100 lighthouse score |
134 | | -- [ ] Command bar fuzzy search in content |
135 | | -- [ ] Pagination |
136 | | -- [ ] SEO improvements |
137 | | -- [ ] analytics (fathom, simplelytics, vercel) |
138 | | -- [ ] Accessibility audit |
139 | | -- [ ] TypeScript fixes |
140 | | -- [ ] Redesign uses page |
141 | | -- [ ] Redesign projects page |
142 | | -- [ ] general refactor |
143 | | -- [ ] general cleanup |
144 | | -- [ ] implement content security policies |
145 | | -- [ ] implement a videoask-like solution for the hero section |
146 | | -- [ ] Post like counter (?) |
147 | | -- [ ] Visitor counter (?) |
148 | | -- [ ] code playground instead of code highlighting (?) |
149 | | -- [ ] Categories and/or tags (?) |
150 | | -- [ ] Commenting system (?) |
151 | | -- [ ] Social sharing buttons (?) |
152 | | -- [ ] keyboard-based navigation with hotkeys (?) |
153 | | -- [ ] multiple layouts (sidebar, full-width, etc.) (?) |
154 | | -- [ ] multilang support (?) |
155 | | - |
156 | | -## Inspiration & Mentions |
157 | | - |
158 | | -- [Delba Oliveira Personal Blog](https://github.com/delbaoliveira/website) - Using and structuring table of contents with Contentlayer |
159 | | -- [timlrx/tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) - Idea |
160 | | - |
161 | | -## Support |
162 | | - |
163 | | -If you love this template and/or use it, please give it a star on GitHub. |
0 commit comments