Code Monkey home page Code Monkey logo

blog-tutorial-demo's Introduction

Astro "Build a Blog" Project - Completed

Open in StackBlitz

This is the project you'll build with the Astro Tutorial. Use this code to compare to your own, or explore to see how the basics of a blog are built in Astro!

This branch contains the state of the project after completing the final unit, Unit 6.

Checkpoints:

Extension: You can also see a guided walkthrough in Astro Docs to convert this project to use content collections.

blog-tutorial-demo's People

Contributors

delucis avatar eliancodes avatar jutanium avatar sarah11918 avatar theotterlord avatar yanthomasdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

blog-tutorial-demo's Issues

Audit the hamburger menu and mobile nav

We've received a few pieces of feedback that the hamburger menu should be a button, in place of a div, in favour of better accessibility.

Steps:

  1. Update the hamburger menu
  2. Update the tutorial to match the new code

License is missing

Hey! I'd actually love to use this as an basis for my blog. Unfortunately, if a license was never set, all rights are reserved to you and I am not allowed to use the code formally.

Would it be okay if you license it?

If you just want people to use it without being legally required to disclose this tutorial, CC0 or UNLICENSE would make sense.
Otherwise probably Apache2 oder MIT, GPL is most likely too restrictive for the community!

Tasks

Changing the theme from Dark Mode to Light Mode

I ran the end project on Stackblitz it is also giving those weird flashes in dark mode.
Stackblitz

I also ran this on my local machine in Chrome and Firefox also.

Preview:
Withastro_-Blog_Tutorial_Demo-_StackBlitz_Mozilla_Firefox_2023-04-30_19-21-13_online-video-cutter com

Possible Solution:
Adding the is:inline in the script tag of the ThemeIcon.astro

[after upgraded to v3] Try to add ViewTransitions!

We are not going to add view transitions to this project, nor the tutorial itself.

BUT, we would like to ensure that the project will work if someone who takes it then wants to add View Transitions themselves.

So, once the project has been upgraded to v3.x, and once we are happy with the theme toggle and hamburger menu (which are the things that might have trouble with view transitions?), try adding it and see whether it can be successfully done.

Please report any issues you had doing so, or changes you needed to make to get it to work. We could eventually turn this into an "Add View Transitions to the Build a Blog Tutorial!" the same way we have done for content collections.

Update broken asset links

This PR: withastro/docs#3016 in the docs repo updates all astro.build/assets links to new docs.astro.build/assets links. The links/assets in the PR are temporary until dedicated assets can be made. Once the dedicated assets have been created all branches in this repo will need updates to their asset links to reflect the changes in the docs repo.

H1 Style in about.astro should be removed in branches unit-5/start, unit-6/start, complete

Hi, I'm not sure if this is the correct place to raise the issue so please let me know if there's somewhere better.

I'm a new Astro developer following along with your tutorial when I got to section 4 and came across the "Try it yourself" language:

Delete anything from each page that that page is no longer responsible for rendering, because it is being handled by the layout, including:

HTML elements
Components and their imports
CSS rules in a <style> tag (e.g.

in your About page)

<script> tags

The <h1> CSS rule is still present in these branches, and has no effect on the CSS of the site. Therefore, I think it should be removed from branches unit-5/start, unit-6/start, and complete.

I have a branch with this change based off unit-5/start, but I'm not sure how to contribute.

Thanks in advance!

upgrade project to Astro v3

This codebase should be updated to v3.0, then the tutorial "taken" again to catch any errors or anything that might need changing, both to the code, and then to the instructions in the tutorial itself.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.