drehimself / gridsome-portfolio-starter

A simple portfolio theme for Gridsome powered by Tailwind CSS v1

Gridsome Portfolio Starter

Check out the Astro version here: https://github.com/drehimself/astro-portfolio-starter

A simple portfolio starter theme for Gridsome

Demo URL

https://gridsome-portfolio-starter.netlify.com

Features

• Clean and minimal design
• Tailwind CSS v1 (with PurgeCSS). Using this gridsome plugin.
• Scroll to sections using vue-scrollto
• Blog with markdown content for posts
• Documentation type that shows how to use Vue components in Markdown (click Docs)
• Theme Switcher with Dark Mode
• Search posts with Fuse.js and vue-fuse
• Tags for posts
• Basic pagination
• Syntax highlighting with Shiki (using this gridsome plugin)
• 404 Page
• RSS Feed
• Sitemap in XML

Installation

1. Install Gridsome CLI tool if you don't have it: npm install --global @gridsome/cli
2. Clone the repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install (This can be a long download because of Cypress. If you don't care about testing with Cypress, remove it from package.json)
5. gridsome develop to start a local dev server at http://localhost:8080

Testing

I have some basic end-to-end tests using Cypress. You can find them in /cypress/integration/tests.js.

To run tests, first make sure your dev server is running with gridsome develop. I'm assuming you're using the default port of 8080. If not, change the baseUrl key in the cypress.json file.

After your dev server is running, you can run npm run test or ./node_modules/.bin/cypress open to start Cypress. The Cypress electron app will run. Click the tests.js file and the tests will run in an automated browser.

Notes

• When Gridsome moves to Vue 3, I'll update this repo as well. I'll also update to Tailwind v2, along with other Tailwind v2 goodies like dark mode and the JIT.
• Based on my personal portfolio website. I wanted to create an open source version with more features.
• Check out a screencast I did where I go through the process of building my website.
• Illustrations from unDraw
• Search is based on Fuse.js and vue-fuse. It only searches the title and summary of posts for now. Some tweaking may be necessary to get it to search to your liking. Check out the fuse documentation for search settings. This PR added the ability to search both "Post" and "Documentation" types.
• Check out these other Gridsome Starters where I got some ideas from:
  • Gridsome Starter Blog
  • Gridsome Starter Bleda
  • Jigsaw Starter Blog - I got a lot of design inspiration from this starter theme.

Other versions

• Nuxt version: https://github.com/drehimself/nuxt-portfolio-starter
• Saber version: https://github.com/drehimself/saber-portfolio-starter

gridsome-portfolio-starter's Issues

Manipulating post URLs

Gatsby theme

Hey 👋

I want to ask for permission to turn this to a gatsby theme will full credits to you for the UI/design works

Search doesn't work if pathPrefix is used

The search wouldn't work if this website isn't served on the root of a domain (example: deployed to GitHub pages) as the axios request doesn't take pathPrefix into consideration.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

Hi, there, thanks so much for this starter. I'm getting a build error on the sitemap plugin and cannot pinpoint a fix. It will build successfully when I remove the plugin from my gridsome.config.js file, but when I add it back in, I get this error.

I haven't found a solution pertaining to Gridsome on this error. Just React.

Any suggestions on how to troubleshoot this would be greatly appreciated.

Thanks so much and thank you again for putting this together. It's been really great for me to learn. Thanks.

`Gridsome v0.6.9

Initializing plugins...
Initialize - 1.67s
Load sources - 0.14s
Create GraphQL schema - 0.36s
Create pages and templates - 0.16s
Generate code - 0.1s
Bootstrap finish - 2.44s
Execute GraphQL (5 queries) - 1.67s
Write page data (6 files) - 0.07s
Compile assets - 40.09s
Render HTML (13 files) - 0.79s
Process files (0 files) - 0s
Process images (18 images) - 2.77s
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.join (path.js:427:7)
at api.afterBuild (C:\Users\Admin\code\gridsome-portfolio-starter\node_modules@gridsome\plugin-sitemap\index.js:21:27)
at Events.dispatch (C:\Users\Admin\code\gridsome-portfolio-starter\node_modules\gridsome\lib\app\Events.js:24:17)`

Install Now to Netlify failing with 'page not found'

To my untrained mind, everything looks OK after Install Now (from https://gridsome.org/starters/gridsome-portfolio-starter).

Upon clicking the site link in Netlify I am seeing 'Page Not Found' rather than a site. (other installed Gridsome starter sites work ok).

npm audit : 35 vulnerabilities require manual review. See the full report for details.

First of all thanks to share your work which helps me to start with gridsome right now !
But what do you think about security issues ? Is it important or not ?

found 36 vulnerabilities (26 low, 1 moderate, 9 high) in 23573 scanned packages
  run `npm audit fix` to fix 1 of them.
  35 vulnerabilities require manual review. See the full report for details.

What do you think about that ?

Use markdown for all content

Currently, the index page has content embedded in index.vue file. Instead, just like blog content, separating content into a markdown will keep content and presentation separate.

This makes it easy for users using this starter easy to get started by only modifying the markdown files and CSS.

Error: Schema must contain uniquely named types but contains multiple types named "RemarkHeadingLevels"

node -v v12.13.0
npm -v 6.13.0
MacOS Catalina or Linux

Just simply runs:

npm install
yarn upgrade
npm build 

Initializing plugins...
Load sources - 0.19s
Error: Schema must contain uniquely named types but contains multiple types named "RemarkHeadingLevels".
at typeMapReducer (/gridsome-portfolio-starter/node_modules/graphql/type/schema.js:262:13)
at Array.reduce ()
at typeMapReducer (/gridsome-portfolio-starter/node_modules/graphql/type/schema.js:285:34)
at typeMapReducer (/gridsome-portfolio-starter/node_modules/graphql/type/schema.js:286:20)
at Array.reduce ()
at new GraphQLSchema (/gridsome-portfolio-starter/node_modules/graphql/type/schema.js:145:28)
at SchemaComposer.buildSchema (/gridsome-portfolio-starter/node_modules/graphql-compose/lib/SchemaComposer.js:131:12)
at Schema.buildSchema (/gridsome-portfolio-starter/node_modules/gridsome/lib/app/Schema.js:35:35)
at Plugins.createSchema (/gridsome-portfolio-starter/node_modules/gridsome/lib/app/Plugins.js:94:22)

Errors / Warning when building (found solution)

I got a lot of these when building:

(node:3018) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 38)

I solved it by adding a .catch() where the axios call is for the search here. I just console.log(error). Not sure if that is the best "solution".

The theme is still building so nothing is really "broken" here. Just wanted to let you know.

better slugs for tags

Hello,
Currently if we have a tag say hello world, in url it creates hello%20world, is it possible to get it something like hello-world ?

thanks.

using adsense?

Hello,
Currently i don't need it but i was wondering if using adsense code is possible inside this starter?

thanks.

are you planning to add any headless CMS?

Hello,
Are you planning to add any headless CMS like strapi / netlify-cms.

thanks.

---

i am so impressed with the concept of fast loading and static sites and netlify
so if a cms is available, i can use it in place of wordpress for client sites.

thanks.

how to change blog slug url

Hello,
Currently blog Post URL will be like site.com/prefix/:slug-title (prefix is optional)

but i want to have something like sites.com/:category/:slug-title and i will be adding one category for each post in frontmatter.

can you pls help.

thanks,

Trailing slash question (blog)

Great template! Thank you for your work on this Andre.

My question is: Google Page Speed Insights suggests "Avoid multiple page redirects
Potential savings of 780 ms" - Redirects introduce additional delays before the page can be loaded."

I'm not clear why GPI is "seeing" a redirect on each blog page. I noticed that blog pages load without the trailing slash in Chrome, but if you hit the refresh button, Chrome adds a trailing slash. (I haven't seen this behavior in Chrome on on other sites without trailing slashes, like:
https://daringfireball.net/projects/markdown/syntax )

Any input would be appreciated. Thanks!

Error: Failed to install dependency (Sharp)

Started having trouble with my version, started to start from scratch with gridsome create my-website https://github.com/drehimself/gridsome-portfolio-starter.git

Gridsome throws this error:

Error: Failed to install dependencies with yarn. Please enter g`ridsome-portfolio-starter2 directory and install dependencies with yarn or npm manually. Then run gridsome develop to start local development.

    Exit code 1
    at ChildProcess.<anonymous> (/Users/bronze/.config/yarn/global/node_modules/@gridsome/cli/lib/commands/create.js:103:17)
    at ChildProcess.emit (events.js:210:5)
    at maybeClose (internal/child_process.js:1028:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)

Then, doing a yarn install i get:

error /Users/bronze/Sites/gridsome-portfolio-starter2/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /Users/bronze/Sites/gridsome-portfolio-starter2/node_modules/sharp
Output:
info sharp Using cached /Users/bronze/.npm/_libvips/libvips-8.7.4-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=13.1.0 runtime=node arch=x64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp info find Python using Python version 2.7.16 found at "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/usr/local/Cellar/node/13.1.0/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/bronze/Sites/gridsome-portfolio-starter2/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/Cellar/node/13.1.0/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/bronze/Library/Caches/node-gyp/13.1.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/bronze/Library/Caches/node-gyp/13.1.0',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/Cellar/node/13.1.0/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/bronze/Library/Caches/node-gyp/13.1.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/bronze/Sites/gridsome-portfolio-starter2/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
        channels->Set(i, channelStat);
        ~~~~~~~~~~^~~
/Users/bronze/Library/Caches/node-gyp/13.1.0/include/node/v8.h:3424:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context,
                                    ^
/Users/bronze/Library/Caches/node-gyp/13.1.0/include/node/v8.h:3427:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,
                                    ^
1 error generated.
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/Cellar/node/13.1.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/usr/local/Cellar/node/13.1.0/bin/node" "/usr/local/Cellar/node/13.1.0/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/bronze/Sites/gridsome-portfolio-starter2/node_modules/sharp

Tried the simple gridsome create with no problems, and even another starter.
Tried removing dependencies from package.json and re-running yarn but that didn't do the trick. (Also, i am unsure if it would... the mechanics of package management are a bit fuzzy to me, honestly)

Anyone else have/had this occur before?

➜ gridsome --version
@gridsome/cli v0.3.1
gridsome v0.7.9

➜ yarn --version
1.19.1

➜ node --version
v13.1.0

Absolute URL for blog post path

I'm trying to use an absolute URL for the path in one of my blogs, but I get the following error

Error: child "path" fails because ["path" with value "https://medium.com" fails to match the leading slash pattern]

I figure there's some sort of data validation for the frontmatter path property but I don't know where to change that.

Move RSS & Search into gitignore

Shouldn't we put static/sitemap.xml and static/search.json into .gitignore cause both are generated? Can provide you with a PR if you want. But the change is really small.

how to have blog as main page?

Hello,
i want to use it as only blog site and i don't need an index page,
instead blog page will become index.

can you tell me how to do that?

thanks.

RSS and Sitemap broken

Using the latest master e63113b

On Mac OS Catalina, Node 12.19.

git clone https://github.com/drehimself/gridsome-portfolio-starter
cd gridsome-portfolio-starter
npm install
gridsome develop

Neither the rss.xml or the sitemap.xml get generated in the ./static

Syntax highlighting not working with Shiki

I don't know but my code syntax highlighting isn't working in my markdown files. When I inspected the element, I observed that the styles defined in markdown CSS is what gets applied. Please, how do I ensure that Shiki styles get applied for syntax highlighting?

Here is the link to my repo and the live link of a blog article with syntax highlighting. I'd appreciate any help

Thanks for the wonderful theme, saved me a lot of time :)

Syntax highlighting does not work in production

I'm trying to use this plugin for syntax highlighting.
While it works on development, it doesn't work when the site is live. I don't know if I'm doing something wrong as regards the theme or if the issue is from the plugin itself. Not sure which it is.

Here is my repo and here is a smaple live site blog article

Dark theme screen flickers when clicking through routes

Hello!

I've noticed an issue on the dark theme when clicking through different routes. During the page transition, the background flickers back to the light theme for a second - this gives off a pretty strange effect that's not present in the light theme.

I'm guessing the theme resets the theme when it loads a new page but not really sure yet.

Also, really awesome starter! I'm having a great time trying out Gridsome with it. Thanks!

Routing problem

Routing using the search bar is not working there seems to be a drag when navigating

Filtering blog list

So, I am trying to build a text input to filter the blog list. I tried writing a computed function but I keep getting errors. I was wondering if you could give me some insight?

Incorporate Docs in Fuse Search

Thanks for the starter, using it as an intro to gridsome and tailwind. Quick question, any suggestions on how to incorporate multiple content types into a single search? For example:

const { collection } = store.getContentType('Post', 'Documentation');

But then there would have to be I guess some more complex joining after that... it's all new to me so if there's an easy way to do this I'd love to see an example.

Thanks!